1、什么是jQuery?
提到jquery就不能不提javascript（江湖简称js）。js是一种脚本语言，浏览器可以解析js。js通过操作DOM(文档对象模型Document Object Model，简称DOM)来处理文档。而jQuery是js库，就是一堆js函数的集合，jQuery本身就是纯js代码。,jquery就是要用更少的代码,漂亮的完成更多的功能。
1、js和jquery的一些差异
（1）定位元素
JS
document.getElementById("someId")；
document.getElementsByTagName("div");
jQuery
$("#abc") 通过id定位
$(".abc") 通过class定位
$("div") 通过标签定位
需要注意的是JS返回的结果是这个元素，jQuery返回的结果是一个JS的对象。以下例子中假设已经定位了元素abc。
(2) 改变元素的内容
JS
obj.innerHTML = "test";
jQuery
obj.html("test");
(3)显示隐藏元素
JS
obj.style.display = "none";
obj.style.display = "block";
jQuery
obj.hide();
obj.show();
obj.toggle();
当然还有其他的差异，这里不多数说了。结果就是js用着不太方便所以有了jquery！
这里可以看一个例子
3、jQuery的使用
如果要在文档中使用jquery，需要在文档中引用jQuery文件。
由于文档是从上到下解析的，如果在执行某个jQuery语句的是 ，dom没有被创建怎么办？
可以通过下面的办法解决。
（1） 将jQuery语句放到文档最后。保证执行的时候，文档已经被加载过。
（2）使用jQuery 事件 - ready() 方法
$(document).ready(function(){
//jquery 语句
});
或
$().ready(function(){
//jquery 语句
});
或
$(function(){
//jquery 语句
});
4、jQuery 选择器
在js中，我们使用
document.getElementById("someId")；
document.getElementsByTagName("div");
来获取dom对象。
在jQuery中获取对象的方法被简化。通过各种选择器来获取对象
（1）最常见的通过ID选择
$("#someId") 通过ID获取jQuery对象。
（2）jQuery 元素选择器
$("p") 选取元素。
$("p.intro") 选取所有 class="intro" 的元素。
$("p#demo") 选取所有 id="demo" 的元素。
（3）jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
这里说下js和jQuery对象的相互转化。
jQuery对象转成 DOM对象
如：var $jqueryObj=$("#someId"); //jQuery对象
var domObj=$jqueryObj.get(0); //DOM对象
var domObj=$jqueryObj[0]; //DOM对象
DOM对象转成jQuery对象
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)
如：var domObj=document.getElementById("someId"); //DOM对象
var $jqueryObj=$(domObj); //jQuery对象
转换后，就可以任意使用jQuery的方法了。
5、jQuery 事件
当我面活动jQuery对象后，就可以通过绑定事件来实现一些效果。
双击事件
$("button").dblclick(function(){
//jQuery代码
});
单击事件
$("button").click(function(){
//jQuery代码
});
6、jQuery 效果
jQuery可以实现一些简单的页面效果，不过更多时候的页面效果是使用jQuery+css来实现
hide() 隐藏 $(selector).hide(speed,callback);
show() 展示 $(selector).show(speed,callback);
hide()和show()的集合体 $(selector).toggle(speed,callback);
显示被隐藏的元素，并隐藏已显示的元素：
同理还有淡入淡出效果
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法：$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
滑动效果
slideDown()
slideUp()
slideToggle()
jQuery 效果 - 动画
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
以上这些效果类的内容，在平时的开发中并不是很常用。这些效果大多在切图的时候就已经完成了。我们使用jQuery更多的是进行数据获取、传递、赋值等。
7、jQuery 操作 HTM
jQuery 拥有可操作 HTML 元素和属性的强大方法！！
（1）获得内容 - text()、html() 、 val()以及 获取属性 attr()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
赋值也是这3个方法，把赋值内容放到括号里!!
(2) jQuery - 添加元素
append() - 在被选元素的结尾插入内容 。支持多个html元素
prepend() - 在被选元素的开头插入内容。支持多个html元素
after() - 在被选元素之后插入内容。支持多个html元素
before() - 在被选元素之前插入内容。支持多个html元素
(3)删除元素/内容
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
(4) jQuery - 获取并设置 CSS 类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
(5)jQuery 遍历
下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
向上遍历 DOM 树
parent()/parents()
jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回每个 元素的的直接父元素：
$("img").parent();//返回图片标签的父级
Query parents() 方法
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
$("b").parents();//返回标签的所有祖先元素
向下遍历 DOM 树
children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历 等他find("*")
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
jQuery 遍历 - 过滤
jQuery first() 方法
jQuery last() 方法
jQuery eq() 方法 返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1
直接看示例
网友评论