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 的元素
来源:oschina
链接:https://my.oschina.net/u/4396566/blog/4264483