jQuery就业课系列之.jQueryDOM

Mike

概念：DOM 文档对象模型（必考），jQuery Dom应该是之前的DOM加了个jQuery的封装。

分类：DOM操作分为三类： DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()，js。 HTML-DOM：用于处理HTML文档，如document.forms CSS-DOM：用于操作CSS，如element.style.color="green"
jQuery对JavaScript中的DOM操作进行了封装。
jQuery中的DOM操作

4.1 样式操作
之前的样式设置：选择器对象.css('属性','值') 比如：
$("p").css("color",'red')
增加样式：
$("p").addClass('bgStyle')
toggle:模拟连续点击;
toggleClass:如果存在就删除一个类,如果不存在，则添加这个样式。

4.2 追加节点
语法功能append(content)$(A).append(B)表示将子元素B追加到A中prepend(content)$(A). prepend (B)表示将子元素B前置插入到A中before(content)$(A). before (B)表示将B插入至A之前after(content)$(A).after (B)表示将B插入到A之后

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>追加节点</title>
     <style>
       @import url("css/games.css")
     </style>
     <script src="js/jquery-1.12.4.min.js"></script>
     <script>
       $(function(){
         //在按钮上单击的时候，进行操作;
         $("#app").click(function(){
           //操作的选择器对象是ul无序列表;
           //后置：$(".gameList").append("<li>王者范.</li>")
           //加到了ul的子元素li列表的后面；
           //$(".gameList").prepend("<li>雨鑫战神</li>")
           //before after
           //before:在当前节点之前，增加一个元素，不属于当前节点。
           //$(".gameList").before("<ul><li>海文泽拉斯</li></ul>")
           $(".gameList").after("<ul><li>海文泽拉斯</li></ul>")
         })
         
       })
     </script>
   </head>
   <body>
     <div class="cont">
       <ul class="gameList">
         <li>三星老船长</li>
         <li>艾泽拉斯</li>
         <li>起拉希姆</li>
       </ul>
     </div>
     <button id="app">追加</button><!--用一个按钮来做测试，更简单-->    
   </body>
 </html>

4.3 节点操作函数
选取的是比较重要的节点操作函数。
语法功能remove()删除节点empty()清空节点内容replaceWith()替换节点clone()复制节点

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>操作节点</title>
     <style>
       @import url("css/games.css")
     </style>
     <script src="js/jquery-1.12.4.min.js"></script>
     <script>
       $(function(){
         //在按钮上单击的时候，进行操作;
         $("#app").click(function(){
           //1.删除节点的操作;删除某个节点：现在要删除艾泽拉斯;
           //$(".gameList li:eq(1)").remove();
           //2.清空节点内容：是删除吗？？？相当于设置了html('')
           // $(".gameList li:eq(1)").empty();
           //3.replaceWith：需要注意一下;如果不成可以加$("<li>四星小船长</li>")
           // $(".gameList li:eq(1)").replaceWith("<li>四星小船长</li>")
           //4.克隆：clone(),我们使用的时候就不加参数了.
           //首先$(".gameList li:eq(1)").clone()：克隆;
           //第二步：追加到$(".gameList")最后；
           $(".gameList").prepend($(".gameList li:eq(1)").clone());          
         })        
       })
     </script>
   </head>
   <body>
     <div class="cont">
       <ul class="gameList">
         <li>三星老船长</li><!--li序号:0-->
         <li><a href='#'>艾泽拉斯</a></li><!--li序号:1-->
         <li>起拉希姆</li><!--li序号:2-->
       </ul>
     </div>
     <button id="app">克隆</button><!--用一个按钮来做测试，更简单-->    
   </body>
 </html>

4.4属性节点
首先要了解什么是属性节点。
<img src='图片路径' title='超级炫图片'/
src，title就是img的属性，在DOM里面就是属性节点。
语法功能attr()获取属性节点attr({name1:value1，..n,nameN:valueN})设置属性节点的多个属性的值removeAttr(属性名)删除指定的属性节点

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>操作节点</title>
     <style>
       @import url("css/games.css")
     </style>
     <script src="js/jquery-1.12.4.min.js"></script>
     <script>
       $(function(){
         //在按钮上单击的时候，进行操作;
         $("#app").click(function(){
           //来获取一下src,这个图片的路径信息;好处：可以得到路径信息，
           //将来可以修改.
           alert($("img").attr('src'));
           //设置图片的路径信息;attr('属性','值')
           //$("img").attr('src','img/2aa.jpg');
           
           //升级：男变女了，加样式:
           $("img").attr('src','img/2aa.jpg').addClass('mm');
           //删除样式：这个需要在查看器来看一下。
           $("img").removeAttr('title');
         })        
       })
     </script>
   </head>
   <body>
     <div class="cont">
       <img src="img/men.jpg" title="纯爷们"/>
       <ul class="gameList">
         <li>三星老船长</li><!--li序号:0-->
         <li><a href='#'>艾泽拉斯</a></li><!--li序号:1-->
         <li>起拉希姆</li><!--li序号:2-->
       </ul>
     </div>
     <button id="app">属性节点的操作</button><!--用一个按钮来做测试，更简单-->     
   </body>
 </html>

4.5 遍历函数
实际它属性节点的查找：
复习：first() last() sibings()都是查找；
语法功能each()遍历节点

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>追加节点</title>
     <style>
       @import url("css/games.css")
     </style>
     <script src="js/jquery-1.12.4.min.js"></script>
     <script>
       $(function(){
         //在按钮上单击的时候，进行操作;
         /* $("#app").click(function(){
           //当我们在这个按钮上进行单击的时候，逐个获取li的信息内容
           //然后打印输出;
           //each的前面是需要逐个遍历的选择器对象；当前是li,所以：$("li")
           $("li").each(function(){
             let str=$(this).text();//text（）注意;
             //alert(str);
             //变了：追加到span
             $("span").append(str);
           })
         }) */
         //each前面的选择器一定是有好几个的元素对象； 
         $("#app").click(function(){
           //下面要遍历+-* /四个按钮，得到其内容;
           $(".calc").each(function(){
             alert($(this).text());//就可以根据得到+-*/来完善之前的计算器了;
             // let op=$(this).text();
             // switch(op){
             //  case '+':加操作;break;
             }
           })
         })
         
       })
     </script>
   </head>
   <body>
     <div class="cont">
       <ul class="gameList">
         <li>三星老船长</li>
         <li>艾泽拉斯</li>
         <li>起拉希姆</li>
       </ul>
     </div>
     <span></span>
     <button id="app">遍历按钮</button><!--用一个按钮来做测试，更简单-->  
     <button class="calc">+</button class="calc"><button>-</button>
     <button class="calc">*</button><button class="calc">/</button>
   </body>
 </html>

总结：
1.toggleClass():有样式，则删除，没有则增加样式；
2.追加节点有4个，2个子元素街边；2个兄弟元素级别；
3.节点操作就是删除、清空、复制、替换（删改）
4.属性节点：attr() attr('name','name)
5.节点的遍历，注意使用：$("选择器").each()

[jQuery] jQuery就业课系列之.jQueryDOM

相关帖子

为什么说 Gradle 是 Android 进阶绕不去的坎 —— Gradle 系列(1)

001 Android开发初体验

DOM在Ahooks中的处理过程

C语言中的文件是什么？

C++继承和派生简明教程

从 WebAssembly 角度改进 WASI-NN | WASI-NN 系列文章2

企业实践｜基于软件研运一体化DevOps平台的应用解析

了解下Foundation 按钮组

使用HTML/CSS/JS做一个恋爱计时小挂件

常用jquery右健禁止命令

Mike LV4