彼方尚有荣光在|
收藏闪存小组博问

_xiaolin

园龄：2年9个月粉丝：3关注：5

jQuery

三、jQuery

1、jQuery介绍

什么是jQuery？**

jQuery，顾名思义，就是js和查询（Query），它就是辅助JavaScript开发的js类库。

jQuery核心思想！！！

它的核心思想是write less，do more（写得更少，做得更多），所以它实现了很多浏览器的兼容问题。

jQuery流行程度：

jQuery现在已经成为最流行的JavaScript类库，在世界前10000个访问最多的网站中，有超过百分之五十五在使用jQuery。

jQuery的好处！！！

jQuery是免费的、开源的，jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。

2、jQuery的初体验！！！

需求：使用jQuery给一个按钮绑定单击事件。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
   <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
   <script type="text/javascript">
      /*window.onload = function(){
         var btnObj=document.getElementById("btn");
         alert(btnObj);//dom对象
         btnObj.onclick=function(){
            alert("js原生的单击事件");
         }
      }*/
      $(function() { //表示当页面加载完成后执行，相当于window.onload=function(){}
         var $btnObj=$("#btnId");//表示通过id获取到的dom对象
         $btnObj.click(function(){
            alert("jQuery的单击事件");
         });
      });
   </script>
</head>
<body>
 
   <button id="btnId">SayHello</button>
 
</body>
</html>
常见问题
1.使用jQuery一定要引入jQuery库吗？	是的，必须
2.jQuery中的$到底是什么？	它是一个函数
3.怎么为按钮添加点击响应函数的？
①使用jQuery查询到标签对象
②使用标签对象.click(function(){});

3、jQuery核心函数

$是jQuery的核心函数，能完成jQuery的很多功能。 $()就是调用$这个函数

  1. 传入参数为[函数]时：在文档加载完成后执行这个函数,相当于window.onload=function(){}

  2. 传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象

  3. 传入参数为[选择器字符串]时：

    		$("#id属性值"); id选择器，根据id查询标签对象
    		$("标签名");   标签名选择器，根据指定的标签名查询标签对象
    		$(".class属性值"); 类型选择器，可以根据class属性查询标签对象

  4. 传入参数为 [DOM对象]时：会把这个DOM对象转换成jQuery对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
 
   //核心函数的4个作用
   //传入参数为[函数]时：在文档加载完成后执行这个函数
    $(function (){
        alert("文档加载完成之后自动执行");
 
        $("<div>" +
            "        <span>这是一个SPAN1</span>" +
            "        <span>这是一个SPAN2</span>" +
            "    </div>").appendTo("body");
        //alert($("button").length);
        var btnObj = document.getElementsByTagName("button");
        //alert(btnObj);
        alert($(btnObj));
    });
   //传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
 
   //传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
   //传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
 
</script>
</head>
<body>
    <!--<div>
        <span>这是一个SPAN1</span>
        <span>这是一个SPAN2</span>
    </div>-->
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
</body>
</html>

4、jQuery对象和dom对象区分

4.1、什么是jQuery对象，什么是dom对象

dom对象

  1. 通过getElementById查询出来的标签对象是dom对象
  2. 通过getElementsByName查询出来的标签对象是dom对象
  3. 通过getElementsByTagName查询出来的标签对象是dom对象
  4. 通过createElement()方法创建的对象，是dom对象

jQuery对象

  1. 通过jQuery提供的API创建的对象，是jQuery对象
  2. 提供jQuery包装的dom对象，也是jQuery对象
  3. 提供jQuery提供的API查询到的对象，也是jQuery对象

4.2、 JQuery对象的本质是什么？

JQuery对象是DOM对象的数组 + JQuery提供的一系列功能函数。

4.3、 JQuery对象和Dom对象使用的区别？

JQuery对象不能使用DOM对象的属性和方法

DOM对象也不能使用JQuery对象的属性和方法

4.4、DOM对象和JQuery对象互相转换

  1. DOM对象转化为JQuery对象（重点）

    • 先有DOM对象
    • $(DOM对象)就可以转换成为JQuery对象

  2. JQuery对象转化为DOM对象（重点）

    • 先有JQuery对象
    • JQuery对象[下标取出相应的DOM对象]

image-20220518104646012

5、JQuery选择器（重点）

5.1、基本选择器（重点）

image-20220518111235629

id id选择器：根据id查找标签对象

.class class选择器：根据class查找标签对象

element element选择器：根据标签名查找标签对象

*选择器：表示任意的，所有的元素

selector1，selector2 组合选择器：合并选择器 1，选择器2的结果并返回

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Untitled Document</title>
      <style type="text/css">
         div, span, p {
             width: 140px;
             height: 140px;
             margin: 5px;
             background: #aaa;
             border: #000 1px solid;
             float: left;
             font-size: 17px;
             font-family: Verdana;
         }
         
         div.mini {
             width: 55px;
             height: 55px;
             background-color: #aaa;
             font-size: 12px;
         }
         
         div.hide {
             display: none;
         }
      </style>
      <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
      <script type="text/javascript">
            $(function () {
               //1.选择 id 为 one 的元素 "background-color","#bbffaa"
               $("#btn1").click(function () {
                  //css()方法：可以设置和获取样式
                  $("#one").css("background-color", "#bbffaa");
               });
               //2.选择 class 为 mini 的所有元素
               $("#btn2").click(function () {
                  $(".mini").css("background-color", "#bbffaa");
               });
               //3.选择 元素名是 div 的所有元素
               $("#btn3").click(function () {
                  $("div").css("background-color", "#bbffaa");
               });
               //4.选择所有的元素
               $("#btn4").click(function () {
                  $("*").css("background-color", "#bbffaa");
               });
               //5.选择所有的 span 元素和id为two的元素
               $("#btn5").click(function () {
                  $("span,#two").css("background-color", "#bbffaa");
               });
            })
 
   
   
   
         
      </script>
   </head>
   <body>
<!--   <div>
      <h1>基本选择器</h1>
   </div>  -->   
      <input type="button" value="选择 id 为 one 的元素" id="btn1" />
      <input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
      <input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
      <input type="button" value="选择 所有的元素" id="btn4" />
      <input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
      
      <br>
      <div class="one" id="one">
         id 为 one,class 为 one 的div
         <div class="mini">class为mini</div>
      </div>
      <div class="one" id="two" title="test">
         id为two,class为one,title为test的div
         <div class="mini" title="other">class为mini,title为other</div>
         <div class="mini" title="test">class为mini,title为test</div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini"></div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini" title="tesst">class为mini,title为tesst</div>
      </div>
      <div style="display:none;" class="none">style的display为"none"的div</div>
      <div class="hide">class为"hide"的div</div>
      <div>
         包含input的type为"hidden"的div<input type="hidden" size="8">
      </div>
      <span class="one" id="span">^^span元素^^</span>
   </body>
</html>

5.2、层级选择器（重点）

image-20220518111604691

ancestor descendant 后代选择器：在给定的祖先元素下匹配所有的后代元素

parent > child 子元素选择器：在给定的父元素下匹配所有的子元素

prev + next 相邻元素选择器：匹配所有紧接在prev元素后的next元素

prev ~ siblings 之后的兄弟元素选择器：匹配prev元素之的所有siblings元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Untitled Document</title>
      <style type="text/css">
         div, span, p {
             width: 140px;
             height: 140px;
             margin: 5px;
             background: #aaa;
             border: #000 1px solid;
             float: left;
             font-size: 17px;
             font-family: Verdana;
         }
         
         div.mini {
             width: 55px;
             height: 55px;
             background-color: #aaa;
             font-size: 12px;
         }
         
         div.hide {
             display: none;
         }        
      </style>
      <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
      <script type="text/javascript">
         $(document).ready(function(){
 
            //1.选择 body 内的所有 div 元素 
            $("#btn1").click(function(){
               $("body div").css("background", "#bbffaa");
            });
 
            //2.在 body 内, 选择div子元素  
            $("#btn2").click(function(){
               $("body > div").css("background", "#bbffaa");
            });
 
            //3.选择 id 为 one 的下一个 div 元素 
            $("#btn3").click(function(){
               $("#one+div").css("background", "#bbffaa");
            });
 
            //4.选择 id 为 two 的元素后面的所有 div 兄弟元素
            $("#btn4").click(function(){
               $("#two~div").css("background", "#bbffaa");
            });
         });
      </script>
   </head>
   <body> 
   
<!--   <div>
      <h1>层级选择器:根据元素的层级关系选择元素</h1>
      ancestor descendant  ：
      parent > child           ：
      prev + next          ：
      prev ~ siblings       ：
   </div>  -->
      <input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
      <input type="button" value="在 body 内, 选择div子元素" id="btn2" />
      <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
      <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
      <br><br>
      <div class="one" id="one">
         id 为 one,class 为 one 的div
         <div class="mini">class为mini</div>
      </div>
      <div class="one" id="two" title="test">
         id为two,class为one,title为test的div
         <div class="mini" title="other">class为mini,title为other</div>
         <div class="mini" title="test">class为mini,title为test</div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini"></div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini" title="tesst">class为mini,title为tesst</div>
      </div>
      <div style="display:none;" class="none">style的display为"none"的div</div>
      <div class="hide">class为"hide"的div</div>
      <div>
         包含input的type为"hidden"的div<input type="hidden" size="8">
      </div>
      <span id="span">^^span元素^^</span>
   </body>
</html>

5.3、过滤选择器

基本过滤器：

image-20220518112921266

：first 获取第一个元素

：last 获取最后一个元素

：not(selector) 取出所有与给定选择器匹配的元素

：even 匹配所有索引值为偶数的元素，从0开始计数

：odd 匹配所有索引值为奇数的元素，从0开始计数

：eq(index) 匹配一个给定索引值的元素

：gt(index) 匹配所有大于给定索引值的元素
It(index) 匹配所有小于给定索引值的元素

：header 匹配如h1,h2,h3之类的标题元素

：animated 匹配所有正在执行动画效果的元素

：focus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Untitled Document</title>
      <style type="text/css">
         div, span, p {
             width: 140px;
             height: 140px;
             margin: 5px;
             background: #aaa;
             border: #000 1px solid;
             float: left;
             font-size: 17px;
             font-family: Verdana;
         }
         
         div.mini {
             width: 55px;
             height: 55px;
             background-color: #aaa;
             font-size: 12px;
         }
         
         div.hide {
             display: none;
         }        
      </style>
      <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
      <script type="text/javascript">
         $(document).ready(function(){
            function anmateIt(){
               $("#mover").slideToggle("slow", anmateIt);
            }
            anmateIt();
         });
         
         $(document).ready(function(){
            //1.选择第一个 div 元素  
            $("#btn1").click(function(){
               $("div:first").css("background", "#bbffaa");
            });
 
            //2.选择最后一个 div 元素
            $("#btn2").click(function(){
               $("div:last").css("background", "#bbffaa");
            });
 
            //3.选择class不为 one 的所有 div 元素
            $("#btn3").click(function(){
               $("div:not(.one)").css("background", "#bbffaa");
            });
 
            //4.选择索引值为偶数的 div 元素
            $("#btn4").click(function(){
               $("div:even").css("background", "#bbffaa");
            });
 
            //5.选择索引值为奇数的 div 元素
            $("#btn5").click(function(){
               $("div:odd").css("background", "#bbffaa");
            });
 
            //6.选择索引值为大于 3 的 div 元素
            $("#btn6").click(function(){
               $("div:gt(3)").css("background", "#bbffaa");
            });
 
            //7.选择索引值为等于 3 的 div 元素
            $("#btn7").click(function(){
               $("div:eq(3)").css("background", "#bbffaa");
            });
 
            //8.选择索引值为小于 3 的 div 元素
            $("#btn8").click(function(){
               $("div:lt(3)").css("background", "#bbffaa");
            });
 
            //9.选择所有的标题元素
            $("#btn9").click(function(){
               $("*:header").css("background", "#bbffaa");
            });
 
            //10.选择当前正在执行动画的所有元素
            $("#btn10").click(function(){
               $("div:animated").css("background", "#bbffaa");
            });
            //11.选择当前没有正在执行动画的元素的最后一个
            $("#btn11").click(function(){
               $("div:not(:animated):last").css("background", "#bbffaa");
            });
         });
      </script>
   </head>
   <body>    
<!--   <div>
   :first           
   :last        
   :not(selector)     
   :even        
   :odd         
   :eq(index)     
   :gt(index)        
   :lt(index)        
   :header       
   :animated     
   </div> -->
      <input type="button" value="选择第一个 div 元素" id="btn1" />
      <input type="button" value="选择最后一个 div 元素" id="btn2" />
      <input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
      <input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
      <input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
      <input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
      <input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
      <input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
      <input type="button" value="选择所有的标题元素" id="btn9" />
      <input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />    
      <input type="button" value="选择没有执行动画的最后一个div" id="btn11" />
      
      <h3>基本选择器.</h3>
      <br><br>
      <div class="one" id="one">
         id 为 one,class 为 one 的div
         <div class="mini">class为mini</div>
      </div>
      <div class="one" id="two" title="test">
         id为two,class为one,title为test的div
         <div class="mini" title="other">class为mini,title为other</div>
         <div class="mini" title="test">class为mini,title为test</div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini"></div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini" title="tesst">class为mini,title为tesst</div>
      </div>
      <div style="display:none;" class="none">style的display为"none"的div</div>
      <div class="hide">class为"hide"的div</div>
      <div>
         包含input的type为"hidden"的div<input type="hidden" size="8">
      </div>
      <div id="mover">正在执行动画的div元素.</div>
   </body>
</html>

内容过滤器：

image-20220518115915454

：contains(test) 匹配包含给定文本的元素

：empty 匹配所有不包含子元素或者文本的空元素

：parent 匹配含有子元素或者文本的元素

：has(selector) 匹配含有选择器所匹配的元素的元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Untitled Document</title>
      <style type="text/css">
         div, span, p {
             width: 140px;
             height: 140px;
             margin: 5px;
             background: #aaa;
             border: #000 1px solid;
             float: left;
             font-size: 17px;
             font-family: Verdana;
         }
         
         div.mini {
             width: 55px;
             height: 55px;
             background-color: #aaa;
             font-size: 12px;
         }
         
         div.hide {
             display: none;
         }        
      </style>
      <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
      <script type="text/javascript">
         $(document).ready(function(){
            function anmateIt(){
               $("#mover").slideToggle("slow", anmateIt);
            }
   
            anmateIt();             
         });
         
         /** 
         :contains(text)   
         :empty             
         :has(selector)     
         :parent          
         */
         $(document).ready(function(){
            //1.选择 含有文本 'di' 的 div 元素
            $("#btn1").click(function(){
               $("div:contains('di')").css("background", "#bbffaa");
            });
 
            //2.选择不包含子元素(或者文本元素) 的 div 空元素
            $("#btn2").click(function(){
               $("div:empty").css("background", "#bbffaa");
            });
 
            //3.选择含有 class 为 mini 元素的 div 元素
            $("#btn3").click(function(){
               $("div:has(.mini)").css("background", "#bbffaa");
            });
 
            //4.选择含有子元素(或者文本元素)的div元素
            $("#btn4").click(function(){
               $("div:parent").css("background", "#bbffaa");
            });
         });
      </script>
   </head>
   <body>    
      <input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" />
      <input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
      <input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" />
      <input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" />
      
      <br><br>
      <div class="one" id="one">
         id 为 one,class 为 one 的div
         <div class="mini">class为mini</div>
      </div>
      <div class="one" id="two" title="test">
         id为two,class为one,title为test的div
         <div class="mini" title="other">class为mini,title为other</div>
         <div class="mini" title="test">class为mini,title为test</div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini"></div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini" title="tesst">class为mini,title为tesst</div>
      </div>
      <div style="display:none;" class="none">style的display为"none"的div</div>
      <div class="hide">class为"hide"的div</div>
      <div>
         包含input的type为"hidden"的div<input type="hidden" size="8">
      </div>
      <div id="mover">正在执行动画的div元素.</div>
   </body>
</html>

5.4 可见性过滤器

image-20220518131305589

:hidden 匹配所有不可见元素，或者type为hidden的元素

:visible 匹配所有的可见元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Untitled Document</title>
      <style type="text/css">
         div, span, p {
             width: 140px;
             height: 140px;
             margin: 5px;
             background: #aaa;
             border: #000 1px solid;
             float: left;
             font-size: 17px;
             font-family: Verdana;
         }
         
         div.mini {
             width: 55px;
             height: 55px;
             background-color: #aaa;
             font-size: 12px;
         }
         
         div.hide {
             display: none;
         }        
      </style>
      <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
      <script type="text/javascript">
         $(document).ready(function(){
            function anmateIt(){
               $("#mover").slideToggle("slow", anmateIt);
            }
   
            anmateIt();    
         });
         /**
            :hidden   
            :visible  
         */
         $(document).ready(function(){
            //1.选取所有可见的  div 元素
            $("#btn1").click(function(){
               $("div:visible").css("background", "#bbffaa");
            });
 
            //2.选择所有不可见的 div 元素
            //不可见：display属性设置为none，或visible设置为hidden
            $("#btn2").click(function(){
               $("div:hidden").show("slow").css("background", "#bbffaa");
            });
 
            //3.选择所有不可见的 input 元素
            $("#btn3").click(function(){
               alert($("input:hidden").attr("value"));
            });    
         });
      </script>
   </head>
   <body>    
      <input type="button" value="选取所有可见的  div 元素" id="btn1">
      <input type="button" value="选择所有不可见的 div 元素" id="btn2" />
      <input type="button" value="选择所有不可见的 input 元素" id="btn3" />
      
      <br>
      <div class="one" id="one">
         id 为 one,class 为 one 的div
         <div class="mini">class为mini</div>
      </div>
      <div class="one" id="two" title="test">
         id为two,class为one,title为test的div
         <div class="mini" title="other">class为mini,title为other</div>
         <div class="mini" title="test">class为mini,title为test</div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini"></div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini" title="tesst">class为mini,title为tesst</div>
      </div>
      <div style="display:none;" class="none">style的display为"none"的div</div>
      <div class="hide">class为"hide"的div</div>
      <div>
         包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">
      </div>
      <div id="mover">正在执行动画的div元素.</div>
   </body>
</html>

5.5、属性过滤器

image-20220518145301541

[attribute] 匹配包含给定属性的元素

[attribute=value] 匹配给定的属性是某个特定值的元素

[attribute!=value] 匹配所有不包含指定的属性，或者属性不等于特定值的元素

[attribute^=value] 匹配给定的属性是以某些值开始的元素

[attribute$=value] 匹配给定的属性是以某些值结尾的元素

[attribute*=value] 匹配给定的属性是包含某些值的元素

[ attrSel1 ][ attrSel2 ][attrSelN] 复合属性选择器，需要同时满足多个条件时使用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div,span,p {
   width: 140px;
   height: 140px;
   margin: 5px;
   background: #aaa;
   border: #000 1px solid;
   float: left;
   font-size: 17px;
   font-family: Verdana;
}
 
div.mini {
   width: 55px;
   height: 55px;
   background-color: #aaa;
   font-size: 12px;
}
 
div.hide {
   display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
   /**
[attribute]          
[attribute=value]     
[attribute!=value]         
[attribute^=value]        
[attribute$=value]        
[attribute*=value]        
[attrSel1][attrSel2][attrSelN]  
   
   
   */
   $(function() {
      //1.选取含有 属性title 的div元素
      $("#btn1").click(function() {
         $("div[title]").css("background", "#bbffaa");
      });
      //2.选取 属性title值等于'test'的div元素
      $("#btn2").click(function() {
         $("div[title='test']").css("background", "#bbffaa");
      });
      //3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
      $("#btn3").click(function() {
         $("div[title!='test']").css("background", "#bbffaa");
      });
      //4.选取 属性title值 以'te'开始 的div元素
      $("#btn4").click(function() {
         $("div[title^='te']").css("background", "#bbffaa");
      });
      //5.选取 属性title值 以'est'结束 的div元素
      $("#btn5").click(function() {
         $("div[title$='est']").css("background", "#bbffaa");
      });
      //6.选取 属性title值 含有'es'的div元素
      $("#btn6").click(function() {
         $("div[title*='es']").css("background", "#bbffaa");
      });
      
      //7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
      $("#btn7").click(function() {
         $("div[id][title*='es']").css("background", "#bbffaa");
      });
      //8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
      $("#btn8").click(function() {
         $("div[title][title!='test']").css("background", "#bbffaa");
      });
   });
</script>
</head>
<body>
   <input type="button" value="选取含有 属性title 的div元素." id="btn1" />
   <input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" />
   <input type="button"
      value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" />
   <input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" />
   <input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" />
   <input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" />
   <input type="button"
      value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素."
      id="btn7" />
   <input type="button"
      value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" />
 
   <br>
   <br>
   <div class="one" id="one">
      id 为 one,class 为 one 的div
      <div class="mini">class为mini</div>
   </div>
   <div class="one" id="two" title="test">
      id为two,class为one,title为test的div
      <div class="mini" title="other">class为mini,title为other</div>
      <div class="mini" title="test">class为mini,title为test</div>
   </div>
   <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
   </div>
   <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini" title="tesst">class为mini,title为tesst</div>
   </div>
   <div style="display: none;" class="none">style的display为"none"的div</div>
   <div class="hide">class为"hide"的div</div>
   <div>
      包含input的type为"hidden"的div<input type="hidden" value="123456789"
         size="8">
   </div>
   <div id="mover">正在执行动画的div元素.</div>
</body>
</html>

5.6、子元素过滤器

image-20220518151826658

：nth-child

匹配其父元素下的第N个子或奇偶元素
 
':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)
：first-child 匹配第一个子元素 ':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

last-child 匹配最后一个子元素 ':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配

如果父元素中含有其他元素，那将不会被匹配。

5.7、表单过滤器：

image-20220518152258789

image-20220518191346328

：input 匹配所有 input, textarea, select 和 button 元素

：text 匹配所有的单行文本框

：password 匹配所有的密码框

：radio 匹配所有单选按钮

：checkbox 匹配所有复选框

：submit 匹配所有提交按钮

：image 匹配所有图像域

：reset 匹配所有重置按钮

：button 匹配所有按钮

：file 匹配所有文件域

：hidden 匹配所有不可见元素，或者type为hidden的元素

：enabled 匹配所有可用元素

：disabled 匹配所有不可用元素

：checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

：selected 匹配所有选中的option元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function() {
 
 
				/**
				 :input
				 :text
				 :password
				 :radio
				 :checkbox
				 :submit
				 :image
				 :reset
				 :button
				 :file
				 :hidden
 
				 表单对象的属性
				 :enabled
				 :disabled
				 :checked
				 :selected
				 */
 
 
				//1.对表单内 可用input 赋值操作
				$("#btn1").click(function () {
					//val()可以操作表单项的value属性值
					$(":input:enabled").val("我是万能的程序员");
				});
				//2.对表单内 不可用input 赋值操作
				$("#btn2").click(function () {
					$(":input:disabled").val("管你可不可用，我是万能程序员");
				});
				//3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
				$("#btn3").click(function () {
					alert($(":checkbox:checked").size())
				});
				//4.获取多选框，每个选中的value值
				$("#btn4").click(function () {
					//获取全部选中的复选框标签对象
					var $checkboxs = $(":checkbox:checked");
					//遍历获取每个选中的value值
					/*for(var i=0;i<$checkboxs.size();i++){
						alert($checkboxs[i].value);
					}*/
					//使用JQuery提供的each()方法遍历获取每个选中的value值
					//在遍历的函数中，this指向当前遍历的元素
					$checkboxs.each(function () {
						//alert($(this).val());
						alert(this.value);
					});
				});
				//5.获取下拉框选中的内容  
				$("#btn5").click(function () {
					//获取选中的option标签对象
					var $options = $("select option:selected");
					//遍历获取选中的option标签对象的value值
					$options.each(function () {
						alert(this.innerHTML);
					});
				});
			});
		</script>
	</head>
	<body>
		<h3>表单对象属性过滤选择器</h3>
		 <button id="btn1">对表单内 可用input 赋值操作.</button>
  		 <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
		 <button id="btn3">获取多选框选中的个数.</button>
		 <button id="btn4">获取多选框选中的内容.</button><br /><br />
         <button id="btn5">获取下拉框选中的内容.</button><br /><br />
		 
		<form id="form1" action="#">			
			可用元素: <input name="add" value="可用文本框1"/><br>
			不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
			可用元素: <input name="che" value="可用文本框2"/><br>
			不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
			<br>
			
			多选框: <br>
			<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
			<input type="checkbox" name="newsletter" value="test2" />test2
			<input type="checkbox" name="newsletter" value="test3" />test3
			<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
			<input type="checkbox" name="newsletter" value="test5" />test5
			
			<br><br>
			下拉列表1: <br>
			<select name="test" multiple="multiple" style="height: 100px" id="sele1">
				<option>浙江</option>
				<option selected="selected">辽宁</option>
				<option>北京</option>
				<option selected="selected">天津</option>
				<option>广州</option>
				<option>湖北</option>
			</select>
			
			<br><br>
			下拉列表2: <br>
			<select name="test2">
				<option>浙江</option>
				<option>辽宁</option>
				<option selected="selected">北京</option>
				<option>天津</option>
				<option>广州</option>
				<option>湖北</option>
			</select>
		</form>		
	</body>
</html>

6、JQuery元素筛选

image-20220519090510350

eq()获取给定索引的元素，功能和:eq()一样

first()获取第一个元素，功能和:first一样

last()获取最后一个元素，功能和:last一样

filter(exp)留下匹配的元素

is()判断是否匹配给定的选择器，只要有一个匹配就返回true

has(exp)返回包含有匹配选择器的元素的元素，功能跟:has一样

not(exp)删除匹配选择器的元素，功能与:not()一样

children(exp) 返回匹配给定选择器的子元素，功能和parent>child一样

find(exp)返回匹配给定选择器的后代元素，功能跟ancestor descendant一样

next()返回当前元素的下一个兄弟元素，功能跟prev+next一样

nextAll()返回当前元素后面所有的兄弟元素，功能跟prev~sibling一样

nextUntil()返回当前元素到指定匹配的元素为止的后面元素，往后数的区间

parent() 返回父元素

prev(exp)返回当前元素的上一个兄弟元素

prevall()返回当前元素前面所有的兄弟元素

prevUntil(exp)返回当前元素到指定匹配的元素为止的前面元素，往前数的区间

sibling(exp)返回所有兄弟元素，无论前后

add()把add匹配的选择器的元素添加到当前JQuery对象中

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>DOM查询</title>
      <style type="text/css">
         div, span, p {
             width: 140px;
             height: 140px;
             margin: 5px;
             background: #aaa;
             border: #000 1px solid;
             float: left;
             font-size: 17px;
             font-family: Verdana;
         }
         
         div.mini {
             width: 55px;
             height: 55px;
             background-color: #aaa;
             font-size: 12px;
         }
         
         div.hide {
             display: none;
         }        
      </style>
      <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
      <script type="text/javascript">
         $(document).ready(function(){
            function anmateIt(){
               $("#mover").slideToggle("slow", anmateIt);
            }
            anmateIt();
            
   /**
               
   过滤
   eq(index|-index)         
   first()                
   last()                    
   hasClass(class)          
   filter(expr|obj|ele|fn)    
   is(expr|obj|ele|fn)1.6*    
   has(expr|ele)           
   not(expr|ele|fn)         
   slice(start,[end])           
   
   查找
   children([expr])         
   closest(expr,[con]|obj|ele)1.6*   
   find(expr|obj|ele)              
   next([expr])               
   nextall([expr])             
   nextUntil([exp|ele][,fil])1.6*     
   parent([expr])                 
   parents([expr])             
   parentsUntil([exp|ele][,fil])1.6*  
   prev([expr])               
   prevall([expr])             
   prevUntil([exp|ele][,fil])1.6*     
   siblings([expr])            
   
   串联
   add(expr|ele|html|obj[,con])   
                     
   
   */
            
            //(1)eq()  选择索引值为等于 3 的 div 元素
            $("#btn1").click(function(){
               $("div").eq(3).css("background-color","#bfa");
            });
            //(2)first()选择第一个 div 元素
             $("#btn2").click(function(){
                //first()   选取第一个元素
               $("div").first().css("background-color","#bfa");
            });
            //(3)last()选择最后一个 div 元素
            $("#btn3").click(function(){
               //last()  选取最后一个元素
               $("div").last().css("background-color","#bfa");
            });
            //(4)filter()在div中选择索引为偶数的
            $("#btn4").click(function(){
               //filter()  过滤   传入的是选择器字符串
               $("div").filter(":even").css("background-color","#bfa");
            });
             //(5)is()判断#one是否为:empty或:parent
            //is用来检测jq对象是否符合指定的选择器
            $("#btn5").click(function(){
               alert($("#one").is(":empty"));
            });
            
            //(6)has()选择div中包含.mini的
            $("#btn6").click(function(){
               //has(selector)  选择器字符串    是否包含selector
               $("div").has(".mini").css("background-color","#bfa");
            });
            //(7)not()选择div中class不为one的
            $("#btn7").click(function(){
               //not(selector)  选择不是selector的元素
               $("div").not(".one").css("background-color","#bfa");
            });
            //(8)children()在body中选择所有class为one的div子元素
            $("#btn8").click(function(){
               //children()  选出所有的子元素
               $("body").children("div.one").css("background-color","#bfa");
            });
            
            
            //(9)find()在body中选择所有class为mini的div元素
            $("#btn9").click(function(){
               //find()  选出所有的后代元素
               $("body").find("div.mini").css("background-color","#bfa");
            });
            //(10)next() #one的下一个div
            $("#btn10").click(function(){
               //next()  选择下一个兄弟元素
               $("#one").next("div").css("background-color","#bfa");
            });
            //(11)nextAll() #one后面所有的span元素
            $("#btn11").click(function(){
               //nextAll()   选出后面所有的元素
               $("#one").nextAll("span").css("background-color","#bfa");
            });
            //(12)nextUntil() #one和span之间的元素
            $("#btn12").click(function(){
               //
               $("#one").nextUntil("span").css("background-color","#bfa")
            });
            //(13)parent() .mini的父元素
            $("#btn13").click(function(){
               $(".mini").parent().css("background-color","#bfa");
            });
            //(14)prev() #two的上一个div
            $("#btn14").click(function(){
               //prev()  
               $("#two").prev().css("background-color","#bfa")
            });
            //(15)prevAll() span前面所有的div
            $("#btn15").click(function(){
               //prevAll()   选出前面所有的元素
               $("span").prevAll("div").css("background-color","#bfa")
            });
            //(16)prevUntil() span向前直到#one的元素
            $("#btn16").click(function(){
               //prevUntil(exp)   找到之前所有的兄弟元素直到找到exp停止
               $("span").prevUntil("#one").css("background-color","#bfa")
            });
            //(17)siblings() #two的所有兄弟元素
            $("#btn17").click(function(){
               //siblings()    找到所有的兄弟元素，包括前面的和后面的
               $("#two").siblings().css("background-color","#bfa")
            });
            
            
            //(18)add()选择所有的 span 元素和id为two的元素
            $("#btn18").click(function(){
   
               //   $("span,#two,.mini,#one")
               $("span").add("#two").css("background-color","#bfa");
               
            });
            
 
 
         });
         
         
      </script>
   </head>
   <body>    
      <input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" />
      <input type="button" value="first()选择第一个 div 元素" id="btn2" />
      <input type="button" value="last()选择最后一个 div 元素" id="btn3" />
      <input type="button" value="filter()在div中选择索引为偶数的" id="btn4" />
      <input type="button" value="is()判断#one是否为:empty或:parent" id="btn5" />
      <input type="button" value="has()选择div中包含.mini的" id="btn6" />
      <input type="button" value="not()选择div中class不为one的" id="btn7" />
      <input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" />
      <input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" />
      <input type="button" value="next()#one的下一个div" id="btn10" />
      <input type="button" value="nextAll()#one后面所有的span元素" id="btn11" />
      <input type="button" value="nextUntil()#one和span之间的元素" id="btn12" />
      <input type="button" value="parent().mini的父元素" id="btn13" />
      <input type="button" value="prev()#two的上一个div" id="btn14" />
      <input type="button" value="prevAll()span前面所有的div" id="btn15" />
      <input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" />
      <input type="button" value="siblings()#two的所有兄弟元素" id="btn17" />
      <input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18" />
 
      
      <h3>基本选择器.</h3>
      <br /><br />
      文本框<input type="text" name="account" disabled="disabled" />
      <br><br>
      <div class="one" id="one">
         id 为 one,class 为 one 的div
         <div class="mini">class为mini</div>
      </div>
      <div class="one" id="two" title="test">
         id为two,class为one,title为test的div
         <div class="mini" title="other"><b>class为mini,title为other</b></div>
         <div class="mini" title="test">class为mini,title为test</div>
      </div>
      
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini"></div>
      </div>
      <div class="one">
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini">class为mini</div>
         <div class="mini" title="tesst">class为mini,title为tesst</div>
      </div>
      <div style="display:none;" class="none">style的display为"none"的div</div>
      <div class="hide">class为"hide"的div</div>
      <span id="span1">^^span元素 111^^</span>
      <div>
         包含input的type为"hidden"的div<input type="hidden" size="8">
      </div>
      <span id="span2">^^span元素 222^^</span>
      <div id="mover">正在执行动画的div元素.</div>
   </body>
</html>

7、JQuery的属性操作

image-20220519101346436

html()：它可以设置和获取起始标签和结束标签中的内容，跟dom属性innerHTML一样
text()：它可以设置和获取起始标签和结束标签中的文本，跟dom属性innerText一样
val()：它可以设置和获取表单项的value属性值，跟dom属性value一样
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript"src="script/jquery-1.7.2.js"></script>
    <script type = "text/javascript">
        $(function () {
            //不传参数是获取，传参数是设置
            //alert($("div").html());
           // $("div").html("<h1>Hello World</h1>");
            //不传参数是获取，传参数是设置
           // alert($("div").text());
            //$("div").text("<h1>Hello World</h1>");
             //不传参数是获取，传参数是设置
            $("button").click(function () {
               alert($("#username").val());
               $("#username").val("我是程序员");
            });
        })
    </script>
</head>
<body>
    <div>我是div标签<span>我是div中的span标签</span></div>
    <input type="text" name="username" id="username"/>
    <button>操作输入框</button>
</body>
</html>

注意：

val方法可以同时设置多个表单项的选中状态

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
 
        $(function () {
/*
            // 批量操作单选
            $(":radio").val(["radio2"]);
            // 批量操作筛选框的选中状态
            $(":checkbox").val(["checkbox3","checkbox2"]);
            // 批量操作多选的下拉框选中状态
            $("#multiple").val(["mul2","mul3","mul4"]);
            // 操作单选的下拉框选中状态
            $("#single").val(["sin2"]);
*/
            //一次性操作
            $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]);
        });
 
    </script>
</head>
<body>
<body>
    单选：
    <input name="radio" type="radio" value="radio1" />radio1
    <input name="radio" type="radio" value="radio2" />radio2
    <br/>
    多选：
    <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
    <br/>
 
    下拉多选 ：
    <select id="multiple" multiple="multiple" size="4">
        <option value="mul1">mul1</option>
        <option value="mul2">mul2</option>
        <option value="mul3">mul3</option>
        <option value="mul4">mul4</option>
    </select>
    <br/>
 
    下拉单选 ：
    <select id="single">
        <option value="sin1">sin1</option>
        <option value="sin2">sin2</option>
        <option value="sin3">sin3</option>
    </select>
</body>
</body>
</html>

attr() 可以设置和获取属性值，不推荐操作checked、readonly、selected、disabled等等。

attr方法设置和获取自定义的属性值。

prop() 可以设置和获取属性的值，只推荐操作checked、readonly、selected、disabled等等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript"src="script/jquery-1.7.2.js"></script>
    <script type = "text/javascript">
        $(function () {
            //attr
            // alert($(":checkbox:first").attr("name"));
            // $(":checkbox:first").attr("name","abc");
            //alert($(":checkbox:first").attr("checked"));//官方觉得返回undefined是个错误
            //alert($(":checkbox:first").prop("checked"));
            $(":checkbox:first").prop("checked",true);
        });
    </script>
</head>
<body>
    <br/>
    多选:
    <input type="checkbox" name="checkbox" value="1" />checkbox1
    <input type="checkbox" name="checkbox" value="2" />checkbox2
</body>
</html>

8、JQuery练习一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选
        function checkAll(){
            //让所有复选框都选中
            //document.getElementsByName();是根据指定的name属性值查询返回多个标签对象集合
            //这个集合的操作跟数组一样
            //集合中每一个元素都是dom对象
            var hobbies = document.getElementsByName("hobby");
            //alert(habbies[2].value);
            //checked表示是否选中，如果选中，则为true，否则为false
            //这个属性是读，可写的
            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked = true;
            }
        }
        //全不选
        function checkNo(){
            var hobbies = document.getElementsByName("hobby");
            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked = false;
            }
        }
        //反选
        function checkReverse(){
            var hobbies = document.getElementsByName("hobby");
            for(var i=0;i<hobbies.length;i++){
                hobbies[i].checked = !hobbies[i].checked;
            }
        }
    </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="cpp">C++
    <input type="checkbox" name="hobby" value="java">Java
    <input type="checkbox" name="hobby" value="js">JavaScript
    <br/>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>
</body>
</html>

9、DOM的增删改

image-20220519120102474

9.1、内部插入

appendTo()：a.appendTo(b)把a插入到b资源末尾，成为最后一个子元素

prependTo()：a.appendTo(b)把a插入到b资源末尾，成为第一个子元素

9.2、外部插入

insertAfter()：a.insertAfter(b),得到ba，两者是平级

insertBefore()：a.insertAfter(b),得到ab，两者是平级

9.3、替换

replaceWith()：a.replaceWith(b)用b替换掉a

replaceAll()：a.replaceAll(b)用a替换掉所有的b

9.4、删除

remove()：a.remove()删除a标签

empty()：a.empty()清空a标签里的内容

10、JQuery练习二

1、从左到右练习

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
   <style type="text/css">
      select {
         width: 100px;
         height: 140px;
      }
      
      div {
         width: 130px;
         float: left;
         text-align: center;
      }
   </style>
   <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
   <script type="text/javascript">
      //页面加载完成
      $(function(){
         //第一个按钮，选中添加到右边
         $("button:eq(0)").click(function () {
            $("select:eq(0) option:selected").appendTo("select:eq(1)");
         });
         //第二个按钮，全部添加到左边
         $("button:eq(1)").click(function () {
            $("select:eq(0) option").appendTo("select:eq(1)");
         });
         //第三个按钮，选中删除到左边
         $("button:eq(2)").click(function () {
            $("select:eq(1) option:selected").appendTo("select:eq(0)");
         });
         //第四个按钮，全部删除到左边
         $("button:eq(3)").click(function () {
            $("select:eq(1) option").appendTo("select:eq(0)");
         });
      })
      
   
   </script>
</head>
<body>
 
   <div id="left">
      <select multiple="multiple" name="sel01">
         <option value="opt01">选项1</option>
         <option value="opt02">选项2</option>
         <option value="opt03">选项3</option>
         <option value="opt04">选项4</option>
         <option value="opt05">选项5</option>
         <option value="opt06">选项6</option>
         <option value="opt07">选项7</option>
         <option value="opt08">选项8</option>
      </select>
      
      <button>选中添加到右边</button>
      <button>全部添加到右边</button>
   </div>
   <div id="rigth">
      <select multiple="multiple" name="sel02">
      </select>
      <button>选中删除到左边</button>
      <button>全部删除到左边</button>
   </div>
 
</body>
</html>

2、动态添加、删除表格记录

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function () {
		//创建一个用于复用的删除的Function函数
		var deleteFun = function () {
			//alert("删除操作函数的"+this);
			//在事件响应函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象
			var $trobj=  $(this).parent().parent();
			var name = $trobj.find("td:first").text();
 
			/*
			 *confirm("")是Js语言提供的一个却提示框函数，你给它传什么，它就提示什么
			 * 如果你点击了确定，返回true，如果你点击了取消，返回false
			 */
			if(confirm("确定删除["+ name +"]吗？")){
				//行对象.remove()
				$trobj.remove();
			}
			//return可以阻止元素的默认行为
			return false;
		};
		// 添加记录
		$("#addEmpButton").click(function(){
			//获取输入框，姓名，邮箱，工资的内容
			var name = $("#empName").val();
			var email = $("#email").val();
			var salary = $("#salary").val();
			//创建一个新的tr
			var $trobj= $("<tr>" +
					"<td>"+name+"</td>" +
					"<td>"+email+"</td>" +
					"<td>"+salary+"</td>" +
					"<td><a href=\"deleteEmp?id=001\">Delete</a></td>" +
					"</tr>");
			//将新的tr添加到显示数据的表格中
			$trobj.appendTo($("#employeeTable"));
			//给添加的行的a标签绑定删除事件
			$trobj.find("a").click(deleteFun);
		});
 
		//alert($("a").length);
		//删除记录
		//给a标签绑定事件
		$("a").click(deleteFun);
 
	});
	
	
</script>
</head>
<body>
 
	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="deleteEmp?id=001">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">Delete</a></td>
		</tr>
	</table>
 
	<div id="formDiv">
	
		<h4>添加新员工</h4>
 
		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>
 
	</div>
 
</body>
</html>

11、CSS样式操作

addClass()添加样式
removeClass()删除样式
toggleClass()有就删除，没有就添加样式。
offset()获取和设置元素的坐标。
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	
	div{
		width:100px;
		height:260px;
	}
	
	div.whiteborder{
		border: 2px white solid;
	}
	
	div.redDiv{
		background-color: red;
	}
	
	div.blueBorder{
		border: 5px blue solid;
	}
	
</style>
 
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	
 
	$(function(){
		
		var $divEle = $('div:first');
		
		$('#btn01').click(function(){
			//addClass() - 向被选元素添加一个或多个类
			$divEle.addClass('redDiv blueBorder');
		});
		
		$('#btn02').click(function(){
			//removeClass() - 从被选元素删除一个或多个类 
			$divEle.removeClass('redDiv');
		});
	
		
		$('#btn03').click(function(){
			//toggleClass() - 对被选元素进行添加/删除类的切换操作 
			$divEle.toggleClass('redDiv');
		});
		
		
		$('#btn04').click(function(){
			//offset() - 返回第一个匹配元素相对于文档的位置。
            var offset = $divEle.offset();
            //alert(offset.left);
            console.log(offset);
			$divEle.offset({
				top:100,
				left:20
			});
		});
		
	
		
	})
</script>
</head>
<body>
 
	<table align="center">
		<tr>
			<td>
				<div class="border">
				</div>
			</td>
			
			<td>
				<div class="btn">
					<input type="button" value="addClass()" id="btn01"/>
					<input type="button" value="removeClass()" id="btn02"/>
					<input type="button" value="toggleClass()" id="btn03"/>
					<input type="button" value="offset()" id="btn04"/>
				</div>
			</td>
		</tr>
	</table>
	
	
	
	<br /> <br />
	
	
	<br /> <br />
	
	
	
</body>
</html>

本文作者：_xiaolin

本文链接：https://www.cnblogs.com/SilverStar/p/17415182.html

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   _xiaolin  阅读(14)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
AI IDE Trae
评论
收藏
关注
推荐
深色
回顶
收起