jquery选择器

我们两清 提交于 2020-05-04 21:30:11

jQuery:对象是一个列表,可以包含很多的元素,也可以包含一个元素,所有的DOM方法,jQuery都不能使用。

DOm:对象是一个对象,并且他只能是一个对象,所有的jQuery方法,DOM都不能使用。

jQuery的功能:

1、事件处理更加方便;

2、简化代码;

3、各种的动画效果使用方便

4、使页面更加美观

5、自行扩展功能插件

 

简单选择器:语法:

1、$("div).html(") :添加HTML

2、$("div").text("") :添加文本

3、$("div").width(""): 设置div的行内样式的宽度

4、$("div).height(""):设置div的行内样式的高度

5、$("div")..css("color","red"):设置div的行内样式

6、$("div").on("click",clickHandler}):给所有的div添加点击事件侦听

7、$("div").off("click",clickHandler):给所有的div添加删除事件侦听

 

进阶选择器

1、* 通配符选择器

2、div,span 群组选择器

3、 div span  后代选择器

4、div>span  子代选择器

5、div+span  紧邻的下一个兄弟选择器

6、div~span  div下的所有的兄弟选择器

 

属性选择器:

1、$("[type]")  选择有type属性的元素

2、$("[type][name]") 选择有type和name属性的元素

3、$("[abc=3]")   选择某个属性是某个值的元素

4、$("[hobby^=a]") 选择属性是hobby并且值是以a字母开头的元素

5、$("[hobby$=a]") 选择属性是hobby并且值是以a字母结束的元素

6、$("[div[ hobby!=abc]]") 选择属性是hobby但值不等于abc的所有元素

7、$("[hobby|=abc]") 选择属性是hobby,并且这个属性值以abc为头后面的紧跟着-的值

8、$("[class~=div3]")   获取具有class属性且属性值是以空格分割的列表的元素

9、$("[class*=div3]")  获取属性是class且属性值是div的字符串的元素

 

过滤器 :基于选择器的基础上,进行精细的过滤

1、$("li:first") 查找或选取li的第一个元素

2、$("li:last") 获取li的最后一个元素

3、$("li:not(.red)") 选择不是red的元素

4、$(“li:even”) 获取索引值是偶数的所有元素,并且从0开始

5、$(“li:odd”) 获取索引值是奇数的所有元素,并且从0开始

6、$(“li:eq(2)”)  获取索引值是等于2的inde的元素,从0开始

7、$("li:gt(2)")  获取索引值大于2 的index 的元素   从0开始

8、$("li:lt(2)")  获取索引值小于2 的index 的元素   从0开始

9、$("li:header")  获取标题元素:h1-h6

10、$(":animated') 选择正在的执行的动画元素

11、$(":foucs") 选择当前被焦点的元素

内容过滤器

1、$("div:contains(3)") 查找div下的所有的文本内容元素

2、$("'div:empty") 选择没有子元素或着字节点的div元素

3、$("ul:has(.red)') 选择子元素含有class是red的元素

4、$(":parent") 选择非空元素

5、$(":has(divs)") 查找包含了选择器元素的容器

6、$(".divs").parent()  查找当前divs元素的父容器

7、$(".divs).parentsUntill(“html()”)  查找当前的divs元素的父元素

8、$(":hidden" ) 隐藏的 所有不可见的元素怒,包扣display:none, 如visibility:hidden和height:0都不属于隐藏的元素

9、$(":visible')  所有可显示的元素

10、$("$li0').oprev("li")  获取li的l0的上一=一个元素

11、$('#li0").prevAll("li")  获取li 的li0的上一个所有的兄弟元素

12、$("#li0").prevUntills("span") 从id是li0的元素开始向上选择兄弟元素到span 元素为止

13、$("#li0").siblings("span") 根据id 是li0的元素所有的上下的兄弟元素中是spand 的元素

 

 

 

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!