JQuery选择器&过滤器
JQuery对象:
- JQuery对象的本质上是DOM数组,它对DOM元素进行了封装
- JQuery对象和JavaScript对象可以互转(\$()/$obj()[i]),但是JQuery对象和Javascript对象只能调用各自本身的方法,不能相互调用对方的方法
Jquery选择器:
- elem[prop]:选择有prop属性的elem元素
- elem[prop=divx]:选择prop属性值为divx的elem元素
- elem[prop^=a]:起始。选择prop属性值以a起始的elem元素
- elem[prop$=a]:结束。选择prop属性值以c结束的elem元素
- elem[prop|=a]:或者。选择prop属性值是a或者a接-的elem元素
- elem[class~=value]:附带。选择prop属性值附带a的elem元素,如class~="div2",则class为"div2 div3"会被选择
- elem[prop*="c"]:存在。选择prop属性值里面存在c字符的elem元素
- elem[prop*="c"][class~=div2]:选择prop属性值存在c字符且class有一个是div2的elem元素
- elem:not([prop=a]):否定。选择prop属性值不是a的elem元素
JQuery过滤器
- $("li:first"):选择所有li元素里面的第一个li
- $("li:first-child"):选择所有是第一个子元素的li元素
- $("li:first-of-type"):当前li是不是父容器当中li类型中的第一个
- $("li:last"):选择所有li元素里面的第一个li
- $("li:last-child"):选择所有是第一个子元素的li元素
- $("li:last-of-type"):当前li是不是父容器当中li类型中的第一个
------------------------------------------------------------------------------------------------------------------
- $("li:nth-child(2)"):当前li是不是父容器的第二个子元素(从1开始算,2不是索引)
- $("li:nth-of-type(2)"):寻找当前父元素中li元素中的第二个(从1开始)
- $(li:nth-child(2n)):偶数。当前li是不是父元素的第偶数个子元素
- $(li:nth-child(even)):偶数。当前li是不是父元素的第偶数个子元素
- $(li:nth-child(2n-1)):奇数。当前li是不是父元素的第奇数个子元素
- $(li:nth-type(odd)):奇数。当前li是不是父元素的第奇数个子元素
- $(elem:eq(n)):索引等于。文档中都所有该类元素索引等于n的元素
- $(elem:gt(n)):索引大于。文档中都所有该类元素索引大于n的元素
- $(elem:lt(n)):索引小于。文档中都所有该类元素索引小于n的元素
- $(elem.empty):elem元素是否没有子元素或者是没有内容的空元素
- $(elem.has(.ab)):判断elem元素是否后代元素中有class为ab的元素
- $(elem:parent):elem有子元素或者有内容被选中
- $(elem:contains(1)):elem的后代中包含文本1
- $(elem:parent()):选择父容器
- $(elem:parent()):选择所有的父容器
- $(elem:parentUntil("html")):选择所有父容器,截止到html之前的
- $(".hidden"):隐藏。只有display:none算,visibility:hidden不算
- $(":visible"):显示的内容
- $(div).is(selector):判断div中有没有selector的元素为ab的子元素,返回的是布尔值
- $(div).hasClass(".ab"):判断div中有没有class是ab的元素,返回布尔值
- $(div).slice(2,5):获取页面所有div,按索引截取[2,4),不包括4
elem:nth-of-type(num)和elem:nth-child(num)的异同:
- nth-of-type:父元素里同类元素的第几个,不同类型的不算入顺序,从1开始算
- nth-child:父元素里子元素的第几个,不同类型的算入顺序,从1开始算