jQuery

初识jQuery

jQuery特点

1、轻量级，jQuery包，体积小
2、强大的选择器
3、出色的DOM封装，dom操作更简单
4、可靠的事件处理机制
5、完善的ajax
6、出色的浏览器兼容性

jQuery版本

2.x版本不支持ie678，除非不考虑ie浏览器，否则建议使用1.x版本
完整无压缩版本只在开发测色阶段使用
压缩版本在上线的产品中使用
一般在head标签在引用jQuery

第一个jquery

jQuery("#id")等价于$("#id")，需要注意的是各种插件混用时，可能会造成$()方法的冲突，所以建议使用前者获取dom

jQuery对象和DOM对象

jQuery对象是通过jQuery包装dom对象后产生的对象。jQuery对象是独立的，它只能方法它独有的方法，不能使用dom对象中任何方法。即两者各自的方法互不通用

jQuery对象转DOM对象

$(""#id)[0]或$(""#id).get(0)

DOM对象转jQuery对象

$(dom对象)

jQuery选择器

基本选择器

$("div")
$("#id")
$(".class")
$("*")
$("p,span")//就是群组选择器

层次选择器

$("div p")//选取div包着的所有p标签
$("div>p")//选取div下直接子元素p标签
$("p+span")//选取紧挨p标签后的span标签
$("p~span")//选取p标签之后的所有span标签

内容选择器

$("input").val()//获取表单value值
$("div").html()//获取元素内的内容，包括标签
$("div").text()//获取元素内的纯文本内容
$("a").length//获取元素数量

过滤选择器

:first
:last
:not()
$("ul>li:not(:last)")//选取除了最后一个的所有li标签

:odd//选中奇数行。索引从0开始，且0是偶数
:even//选中偶数行。索引从0开始，且0是偶数
:eq(index)//选择指定索引的元素
:gt(index)//选择大于指定索引的所有元素
:lt(index)//选择小于指定索引的所有元素

:header//选中h1~h6标签
:animated//匹配正执行动画效果的元素

内容过滤选择器

:contains(text)//匹配包含给定文本的元素
:empty//匹配所有不包含子元素或者文本的空元素
:has(selector)//匹配含有选择器所匹配元素的元素
:parent//选取含有子元素或者文本的元素

可见性过滤选择器

:hidden//选取所有不可见的元素
:visible//选取所有可见的元素

属性选择器

[attribute]:选取拥有此属性的元素
[attribute=value]选取属性值等于value的元素
[attribute!=value]:选取属性值不等于value的元素
[attributd^=value]:选取属性值以value开始的元素
[attribute$value]:选取属性值以value结束的元素
[attribute*=yalue]:选取属性值包含value的元素
[attribute~=value]:选取属性值包含value且以空格隔开的元素
[attribute1][attribute2]...:多个属性选择器合并成一个复合属性选择器

子元素过滤选择器

:first-child//选取每个父元素下的第一个子元素
:first-of-type//选取同名兄妹节点的第一个子元素的所有元素
:last-child//选取每个父元素下的最后一个子元素
:last-of-type//选取同名兄妹节点的最后一个子元素的所有元素
:only-child//选取父元素中具有唯一的子元素的所有元素
:only-of-type//选取前后没有同名兄妹节点的子元素的所有元素
:nth-child(gndex/even/odd)//选取每个父元素下的第index个子元素或奇偶元素(index从1开始算起)
:nth-last-child(index/even/odd)//取每个父元素下的第index个子元素,从最后一个往第一个数（index从1开始算起)