您的位置:首页 > Web前端 > JQuery

jQuery高级编程(4)选择和操作DOM元素

2017-11-09 12:51 176 查看
1、让选择器来完成一切2、jQuery中的选择器语法结合了css1-3和XPath3、jQuery选择器的功能(1)选择器(2)链式调用(3)工具方法$("tr.highlighted").removeClass("highlighted").addClass("normal");4、选择元素jQuery提供了大量方法用于选择DOM元素:可以通过:(1)元素的属性$("[attributeName=''string2match]")还可以采用正则表达式匹配属性开头:$("[attributeName^=''value]")匹配属性结尾:$("[attributeName$=''value]")匹配任意位置:$("[attributeName*=''value]")匹配包含一个特定值:$("[attributeName~=''value]")  选择具有attr属性且属性以val开头或者属性值等于val的元素:elem[attr|=val]以上两个的差别??选择具有attr属性的元素elem[attr]选择不是attr属性的元素elem[attr!=val](2)元素的类型(3)元素的位置
$("li:even")集合中的偶数成员
odd奇数成员
first第一个元素
last最后一个元素
eq(3)匹配集合中第四个元素
gt(2)匹配集合大于2的元素
lt(3)匹配索引小于3的元素
(4)CSS类A、ID属性$("div#id");B、class属性$(".myClass")(5)以上方式组合通配符选择器:$("*")搜索整个DOM树$("a","js_links#div")只想搜索一个DOM的子树$("#\\$specialId")原来id是$specialled,特殊字符用反斜杠进行转义后代选择器:$("form input")复式选择器:$("div#gallery,div#username")过滤选择器:
:animated在执行动画的所有元素
:eq()索引等于指定值
:even偶数所有元素
:first第一个元素
:gt()索引大于指定值
:ha72ceader选择所有标题元素h1h2
:last最后一个元素
:lt()索引小于指定值元素
:not()不匹配所有元素
:odd奇数所有元素
过滤表单元素:
:button 
:checkbox 
:checked 
:disaabled 
:enabled 
:file 
:image 
:inputinput textarea selectbutton元素
:password 
:radio 
:reset 
:selected 
:submit 
:text 
可见性过滤
:hidden 
:visible 
内容过滤器
:contains()包含特定内容的元素
:empty不包含子元素或空元素
:has()至少含一个元素与指定选择器相匹配的元素
:parent所有含有子元素或文本节点的元素
根据位置选择器
:first-child每个父元素第一个元素
:last-child每个父元素最后一元素
:nth-child()父元素的第*个元素
:only-child具有唯一子元素的元素
用户自动以选择器<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="jquery-1.10.2.min.js"></script><script>$(function(){//通过扩展$.expr[":"]实现自定义选择器$.expr[":"].greenbg=function(element){return $(element).css("background-color")==="green";};var n=$(":greenbg").length;console.log("there are"+n+"green divs");});</script></head><body><div style="width:10;height: 10;background-color:green;"></div><div style="width:10;height: 10;background-color: green;"></div><div style="width:10;height: 10;background-color: green;"></div><div style="width:10;height: 10;background-color: black;"></div></body></html>
输出是0不理解??
遍历DOM
1、$("ul").find("#teachBooks")可以从一个元素包装集中查找与指定选择器匹配的后代元素--搜索所有的后代元素
2、.children()只在第一层后代元素中搜索
3、.get()接受一个索引值作为参数,并返回一个DOM节点
4、.index()和get相反,接受一个DOM元素作为参数,返回匹配集中的索引值
操作并修改
1、.text()
2、.html()
操作属性
1、.attr()
2、.removeAttr("class")

                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: