jquery入门必备的基本认识及实例(整理)


Posted in Javascript onJune 24, 2013

1.Juqery是javascript的优秀框架。它是轻量级的js库,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

当用jQuery2.0的框架,通过上面这段话我想说的是如果有些代码在eclipse运行不出来,说明里面浏览器内核太低,只要在高版本的浏览器下面就能显示效果。

2.jQuery 库包含以下特性:
· HTML 元素选取
· HTML 元素操作
· CSS 操作
· HTML 事件函数
· JavaScript 特效和动画
· HTML DOM 遍历和修改
· AJAX
· Utilities
3.Google 和 Microsoft 对 jQuery 的支持都很好。
如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
使用 Google 的 CDN

<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs 
/jquery/1.4.0/jquery.min.js"></script> 
</head>

使用 Microsoft 的 CDN
<head> 
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery 
/jquery-1.4.min.js"></script> 
</head>

基本语法:
jQuery 语法实例
$(this).hide()
演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
$("#test").hide() / /读取id
演示 jQuery hide() 函数,隐藏 id="test" 的元素。
$("p").hide()
演示 jQuery hide() 函数,隐藏所有 <p> 元素。 //这样可以直接读取标签
$(".test").hide()
演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。 //读取class的元素节点

Jquery的选择器有很多种:jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色:
实例

$("p").css("background-color","red");

jQuery 事件
下面是 jQuery 中事件方法的一些例子:

Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
Javascript 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 #Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 #Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 #Javascript
JS localStorage实现本地缓存的方法
Jun 22 #Javascript
js获取某月的最后一天日期的简单实例
Jun 22 #Javascript
js遍历、动态的添加数据的小例子
Jun 22 #Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 #Javascript
You might like
example1.php
2006/10/09 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
php和nginx交互实例讲解
2019/09/24 PHP
JavaScript中的style.display属性操作
2013/03/27 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
Vue.js实现数据响应的方法
2018/08/13 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
Python按钮的响应事件详解
2019/03/04 Python
python的pstuil模块使用方法总结
2019/07/26 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
骆驼官方商城:CAMEL
2016/11/22 全球购物
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
如何利用find命令查找文件
2016/11/18 面试题
中专生毕业自我鉴定
2013/11/01 职场文书
幼儿教师思想汇报
2014/01/10 职场文书
民族团结先进个人材料
2014/02/05 职场文书
单位工作证明书格式
2014/10/04 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
营业员岗位职责范本
2015/04/14 职场文书