jQuery高级编程（4）选择和操作DOM元素

来源：互联网发布：老婆漂亮知乎编辑：程序博客网时间：2024/05/18 03:19

1、让选择器来完成一切

2、jQuery中的选择器语法结合了css1-3和XPath

3、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（）索引大于指定值：header选择所有标题元素h1h2：last最后一个元素：lt（）索引小于指定值元素：not（）不匹配所有元素：odd奇数所有元素过滤表单元素：

：button ：checkbox ：checked ：disaabled ：enabled ：file ：image ：inputinput textarea select
button元素：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")

阅读全文

0 0