jQuery操作DOM-part4

最新推荐文章于 2021-12-03 09:40:24 发布

Ward_Tian

最新推荐文章于 2021-12-03 09:40:24 发布

阅读量120

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/Ward_Tian/article/details/83281247

版权

JS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery操作DOM</title>
<style>
   .big{
   font-size:30px;
   }
   .important{
   color:red;
   }
</style>
<script src="../js/jquery-3.3.1.js"></script>
<script >
   $(function(){
       //1.读写DOM
       //1.1html方法，==innerHTML。
       console.log($("p:eq(0)").html());
       //1.2写
       $("p:eq(0)").html("<u>读写</u>节点");
       //1.3 val()==value
       //先读p下的input属性然后把aaa改成bbb
       console.log($("p:eq(1) input").val("bbb"));
       //1.4读属性attr()==getAttribute()/setAttribute()
       console.log($("img").attr("src"));//使用元素选择器选img的属性

       //改属性
       $("img").attr("src","../images/2.jpg");

       //2.增删节点
       //2.1创建节点,增加节点
       var $li1=$("<li>杭州</li>");
       var $li2=$("<li>苏州</li>");
       console.log($li1);
       $("ul").prepend($li1);//加在最前面
       //取上海，在其后面加$li2
       $("li:contains('上海')").after($li2);

       //2.2删除节点
       $("li:contains('天津')").remove();//删除天津

       //3，根据层次查询节点
       //先获取某节点并进行处理
       //然后再获取该节点的亲戚进一步处理
       console.log($("ul").children());
       console.log($("#gz").prev());//取上一个节点，next()取下一个
       console.log($("#gz").siblings());//取所有兄弟
       //find 查找有"上"字的节点
       console.log($("ul").find("li:contains('上')"));

       //4 样式操作
       //4.1 css()用来访问style属性，但是尽量不用内联样式
       //4.2 ***Class()用来访问class属性
       $("#p1").addClass("big").addClass("important");
       $("#p1").removeClass("big");//移除变大的样式
       //判断时候有***样式，返回布尔值
       console.log($("#p1").hasClass("big"));
   });
   function chg(){
       $("#p1").toggleClass("big");//对p1进行切换样式
   }
</script>
</head>
<body>
   <p><b>读写</b>DOM节点</p>
   <p>
   <input type="button" value="aaa"/>
   </p>
   <p>
   <img src="../images/1.jpg"/>
   </p>

   <ul>
       <li >北京</li>
       <li>上海</li>
       <li id="gz">广州</li>
       <li>深圳</li>
       <li>天津</li>
   </ul>
   <p id="p1">什么鬼魅传说，什么鬼魅魍魉</p>
   <p>
       <input type="button" value="切换"
       οnclick="chg();"/>
   </p>
</body>
</html>