jQuery选择器和对DOM的操作

最新推荐文章于 2021-12-09 17:25:11 发布

lairikeqi

最新推荐文章于 2021-12-09 17:25:11 发布

阅读量383

点赞数 1

分类专栏： Web前端文章标签： jQuery选择器操作DOM

本文链接：https://blog.csdn.net/lairikeqi/article/details/90727512

版权

Web前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一、jQuery选择器

1.基本选择器

元素选择器，语法$("html标签名")，例：查找所有div下span元素的个数 $("div,span").size();
id选择器，语法 $("#id的属性值")，例：查找Id为"div1"的元素个数 $("#div1").size();
类选择器，语法 $(".class的属性值")，例：查找所有样式是"class1"的元素的个数 $(".class1").size();

2.层次选择器

选择器名称	语法	解释
后代选择器	`$("A B")`	选择A元素内部的所有B元素
子选择器	`$("A > B")`	选择A元素内部的所有子B元素

改变<body>内所有<div>的背景色为红色：$("body div").css("background-color","red");
改变<body>内子<div>的背景色为红色：$("body > div").css("background-color","red");
改变id为one的下一个<div>的背景色为红色：$("#one + div").css("background-color","red");

3. 属性选择器

选择器名称	语法	解释
属性选择器	`$("A[属性名]")`	包含指定属性的选择器
属性选择器	`$("A[属性名=值]")`	包含指定属性等于指定值的选择器
复合属性选择器	`$("A[属性名=值] [属性名=值]...")`	包含多个属性条件的选择器

查找所有含有id属性的div元素个数：$("div[id]").size();
查找所有name属性是newsletter的input元素，并将其选中：$("input[name='newsletter']").attr("checked","checked");
查找所有含有属性id且属性title值包含"es"的div元素，并将背景色改为红色：$("div[id][title*='es']").css("background-color","red");

4. 基本过滤选择器

选择器名称	语法	解释
首元素选择器	`:first`	获得选择的元素中的第一个元素
尾元素选择器	`:last`	获得选择的元素中的最后一个元素
非元素选择器	`:not(selecter)`	不包括指定内容的元素
等于索引选择器	`:eq(index)`	指定索引元素
偶数选择器	`:even`	偶数，从0开始计数
奇数素选择器	`:odd`	奇数，从1开始计数

1)查找UL中第一个元素li和最后一个元素li的内容  
	$("ul li:first").text(); 
	$("ul li:last").text();     

2)查找所有选中未选中的input元素个数  
	$(":checkbox:not(:checked)").size();  //未选中  
     
3)查找表格中第二行的内容，从索引号0开始  
    $("table tr:eq(1)").text();  
    //html()强调的是标签中的内容，如果标签中有子标签，则会显示出来，而text()强调的是标签
    //中的文本内容，不会显示子标签

4)点击表格第二列
	$("#table1 td:eq(1)").click();  

5)改变索引值为偶数的 div 元素的背景色为红色
    $("div:even").css("background-color","red");

6)改变索引值为奇数的 div 元素的背景色为 红色
    $("div:odd").css("background-color","red");

5. 表单属性过滤选择器

选择器名称	语法	解释
可用元素选择器	`:enabled`	获得可用元素
不可用元素选择器	`:disabled`	获得不可用元素
选中选择器	`:checked`	获得单选/复选框选中的元素
选中索引选择器	`:selected`	获得下拉框选中的元素

<script type="text/javascript">
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  
$("#b1").click(function () {   
  
   //表单元素有2个不可编辑的属性
   //disabled,不可用，不可编辑并且背景色为灰色，这个表单元素不提交给服务器
   //readyonly,只读,不可编辑并且背景色为白色，会提交数据给到服务器。

   //获取文本框的选择器有2两种：
   //第一种：$("input[type='text']")
   //第二种：$(":text")
    $(":text:enabled").val("设置input标签的value值");
});

// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
$("#b2").click(function () {
    $(":text:disabled").val("设置input标签的value值");

});

// <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
$("#b3").click(function () {
    //jq对象.length属性，获取符合的标签元素的个数，jq对象本质就是js对象数组
    //alert($("input[type='checkbox']:checked").length);
    alert($(":checkbox:checked").length);
});

// <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
$("#b4").click(function () {
    //jq对象.text([value]);//获取或设置标签体文本内容，text()相当于js对象的innerText
    alert($("select > option:selected").text());
});
</script>

二、jQuery的DOM操作

1. jQuery对DOM树中的文本和值进行操作

API方法	解释
`text([value])`	获得/设置元素的文本内容
`html([value])`	获得/设置元素的标签体的所有内容
`val([value])`	获得/设置表单元素value属性相应的值

2. jQuery对DOM树中的属性进行操作

API方法	解释
`attr(name[,value])`	获得/设置属性的值
`prop(name[,value])`	获得/设置属性的值(checked，selected)
`removeAttr(name)`	删除指定的属性

<ul>
   <li id="bj" name="beijing" xxx="yyy">北京</li>
   <li id="tj" name="tianjin">天津</li>
</ul>
<input type="checkbox" id="hobby"/>

//获取北京节点的name属性值
alert($("#bj").attr("name"));

//设置北京节点的name属性的值为dabeijing
$("#bj").attr("name","dabeijing");

//新增北京节点的description属性 属性值是didu
$("#bj").attr("description","didu");

//删除北京节点的name属性并检验name属性是否存在
$("#bj").removeAttr("name");

//获得hobby的的选中状态
//alert($("#hobby").attr("checked"));//不行
alert($("#hobby").prop("checked"));//false，代表没有选中

//attr适合操作一般大多数属性，prop适合获取操作属性值为boolean的属性
//设置复选框选中
$("#hobby").prop("checked",true);
$("#hobby").attr("checked",true);

3. jQuery对class进行操作

API方法	解释
`css("样式名","样式值"])`	获取/设置指定的CSS样式
`addClass(类样式名)`	给指定的对象添加新的类样式，指定类样式名字即可
`removeClass(类样式名)`	删除指定的类样式
`toggleClass(类样式名)`	切换样式，如果没有类样式，则添加，如果有类样式，则删除
`hasClass (类样式名)`	判断是否有类样式名

// <input type="button" value="给id为one设置属性class的值为second"  id="button1"/>
$("#button1").click(function () {
    //设置样式
    $("#one").attr("class","second");
    $("#one").addClass("second");
    //移除样式
    $("#one").removeClass("second");
    //切换样式
    $("#one").toggleClass("second");
});

//  <input type="button" value=" 通过css()获得id为one背景颜色" id="button2"/>
$("#button2").click(function () {
   alert($("#one").css("background-color"));
});
//  <input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="button3"/>
$("#button3").click(function () {
   $("#one").css("background-color","green");
});

4. jQuery创建插入对象

API方法	解释
`$("<A></A>")`	创建A元素对象
`append(element)`	父标签.append(最后一个子标签)，添加成最后一个子元素，两者之间是父子关系
`prepend(element)`	父标签.prepend(第一个子标签)，添加成第一个子元素，两者之间是父子关系
`before(element)`	当前标签.before(兄弟标签)，添加到当前元素的前面，两者之间是兄弟关系
`after(element)`	当前标签.after(兄弟标签)，添加到当前元素的后面，两者之间是兄弟关系

5. jQuery删除对象

API方法	解释
`remove()`	删除指定元素
`empty()`	清空指定元素的所有子元素

/*删除标签2种方式
*   jq对象.remove()  自杀，将自己干掉删除
*   jq对象.empty()   清空子元素
* */

//删除<li id="bj" name="beijing">北京</li>
$("#bj").remove();
//删除所有的子节点   清空元素中的所有后代节点(不包含属性节点)
$("#city").empty();

6. jQuery效果

1.隐藏显示HTML元素
	$("p").hide()
	$("p").show()    style="display:none;"
			display:block是将对象块状化;display:none是不显示

  切换隐藏显示
	$("p").toggle()

2.淡入淡出HTML元素
淡入:
	$("#div1").fadeIn();
    $("#div1").fadeIn("slow");
    $("#div1").fadeIn(3000);

淡出:
    $("#div1").fadeOut();
    $("#div1").fadeOut("slow");
    $("#div1").fadeOut(3000);

三、jQuery遍历函数

1. jQuery祖先

parent()：返回被选元素的直接父元素
parents()：返回被选元素的所有祖先元素，一路向上直到文档的根元素 (<html>)
parentsUntil()：返回介于两个给定元素之间的所有祖先元素

$("span").parent();  //返回每个 <span> 元素的的直接父元素
$("span").parents("ul");   //返回所有 <span> 元素的所有祖先<ul>元素
$("span").parentsUntil("div"); //返回介于<span>与<div>元素之间的所有祖先元素

2. jQuery后代

children()：返回被选元素的所有直接子元素
find()：返回被选元素的后代元素，一路向下直到最后一个后代

$("div").children();    //返回每个 <div> 元素的所有直接子元素
$("div").find("span");  //返回属于 <div> 后代的所有 <span> 元素

3. jQuery同胞

siblings()：返回被选元素的所有同胞元素
next()：获得匹配元素集合中每个元素紧邻的同辈元素
nextAll()：获得匹配元素集合中每个元素之后的所有同辈元素
prev()：获得匹配元素集合中每个元素紧邻的前一个同辈元素
prevAll()：获得匹配元素集合中每个元素之前的所有同辈元素

$("h2").siblings();  //返回 <h2> 的所有同胞元素

$("#div1").next();  //返回 <div> 的下一个同胞元素(只返回一个元素)
$("div2").nextAll();  //返回 <div> 的所有跟随的同胞元素
$("h1").nextUntil("h3");  //返回介于 <h1> 与 <h3> 元素之间的所有同胞元素

prev(),prevAll()以及prevUntil()方法的工作方式与next()方法类似,只不过方向相反而已,它们返回的是前面的同胞元素

4. jQuery遍历(过滤)

first()：返回被选元素集合的第一个元素
last()：返回被选元素集合的最后一个元素
eq()：返回被选元素中带有指定索引号的元素(索引号从0开始)

$("div p").first();  //获得 <div> 元素内部的第一个 <p> 元素
$("div p").last();   //选择 <div> 元素中的最后一个 <p> 元素
$("p").eq(1);        //选取第二个 <p> 元素

参考：jQuery遍历函数参考手册

lairikeqi

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器和对DOM的操作

一、jQuery选择器1.基本选择器元素选择器，语法$("html标签名")，例：查找所有div下span元素的个数 $("div,span").size();id选择器，语法 $("#id的属性值")，例：查找Id为"div1"的元素个数 $("#div1").size();类选择器，语法 $(".class的属性值")，例：查找所有样式是"class1"的元素的个数 $("...
复制链接

扫一扫