簡述

本文主要介紹jquery的重要語法功能，如選擇器，dom操作，事件等處理操作

什麼jquery？

jquery由美国人John Resig（约翰·莱西格）于2006年创建 ,是目前最流行的JavaScript程序库。以輕量，代碼簡潔，兼容性好（即使對萬惡之源的IE也能很好的兼容）而著稱。

jquery的優勢

引入簡單，輕量化，壓縮版僅有100kb

出色的Dom封裝能力

瀏覽器兼容性好

選擇器功能器強大

jquery語法介紹

基本的語法結構

//此處引入jquery
<script src="js/jquery-3.4.1.min.js"></script>
<script>
// $ 代表了jquery 
     $(selector).action();
</script>

js對象和jquery對象的互相轉換

jquery的對象和方法與JavaScript對象是不同的，不能混用，但允許互相轉換，轉換語法如下

var jsDom = document.getElementById("myid")
var jqDom = $("p")
//js對象轉化為jquery對象
jqDom = $(jsDom)
alert(jqDom.html())
//jquery對象轉化為js對象
jsDom = jqDom.get(0)

jquery選擇器

jquery強大在於其強大的選擇器功能，藉助jquery的選擇器，可以非常方便地實現dom 的操作和事件相應。jquery的選擇器按照使用功能分為三類：基本選擇器，層次選擇器，屬性選擇器。

基本選擇器

基本選擇器包括標簽選擇器、類選擇器、ID選擇器、並集選擇器、交集選擇器和全局選擇器。

<body>
    <p >小秋</p>
    <p class="jy">小月</p>
    <p  id="wan">小夜</p>
    <h3 class="jy">小米</h3>
    <script src="jquery.js"></script>
    <script>
     $("p").css("color","red") //標籤選擇器
     $(".jy").css("color","blue") //類選擇器
     $("#wan").css("color","black") //id選擇器
     $("#wan,.jy").css("color","yellow") //幷集選擇器
     $("h3.jy").css("color","Orange") //交集選擇器
    </script>
    
</body>

層次選擇器

使用層次可以通過父子層級，來操作dom

<body>
    <div id="x">
        <p>p1</p>
        <div>
            <p>p2</p>
        </div>
    </div>
    <h3>222</h3>
    <h3>333</h3>
    <script src="jquery.js"></script>
    <script>
       $("#x p").css("color","red") //忽略層級
       $("#x>p").css("color","yellow")//子級
       $("#x~h3").css("color","gray")//同輩元素選擇器
       $("#x+h3").css("color","blue")//相鄰元素選擇器
    </script>
</body>

屬性選擇器

<style>
div{
width: 100px;
height: 100px;
background-color: #000;
}
.a{
background: palevioletred;
border-radius: 50%;
}
.b{
border:5px dashed darkcyan;
opacity: 0.6;
}
.cn{
background: #000;
color:#FFF;
font-family: 字魂49号-逍遥行书;
}
</style>
<body>
<button id="btn1">试试</button>
<button id="btn2">取消透明度</button>
<button id="btn3">样式切换</button>
<hr>
<div></div>
<h1>中华人民共和国，万岁！</h1>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("#btn1").click(function(){
// $("div").addClass("a");
$("div").addClass("a b");
});
$("#btn2").click(function(){
$("div").removeClass("b");
});
$("#btn3").click(function(){
$("h1").toggleClass("cn");
});
</script>
</body>

事件

事件處理也是jquery的強項，下面介紹jquery常用的事件

鼠標事件

jquery的鼠標事件分為三類點擊，觸摸，離開三類事件

    <body>
        <img src="../img/a1.png" width="300">
        <img src="../img/a1.png" width="300">
        <img src="../img/a1.png" width="300">
       
        <script>
        $("img").click( function(){
        //点击一下，换照片
        $(this).attr( "src","../img/a2.png" ); //this就是事件触发的源头
        } );
        $("img").mouseover( function(){ //移动到元素上
        $(this).css( "border","2px solid red" );
        } );
        $("img").mouseout( function(){ //离开元素
        $(this).css( "border","2px solid white" );
        } );
        </script>
    </body>

鍵盤事件

 <form action="">
          <p>帐号: <input id="a" value="请输入帐号..."> </p>
          <p>电话: <input id="b"> </p>
</form>
 <script>
            //获得焦点（激活/点击一下）
            $("#a").focus(function(){
            $(this).val("");
            });
            //失去焦点（未激活/未点击）
            $("#a").blur(function(){
            $(this).val("请输入帐号...");
            });
   </script>

Dom的操作

操作節點

<body>
    <input id="input1"  placeholder="輸入">
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    <button id="test1">添加</button>
    <button id="addBefore">加入第一行</button>
    <button id="addAfter">加入最後一行</button>
    <button id="replace">替換內容</button>
    <button id="clone">複製添加</button>
    <button id="remove">移除最後的節點</button>
    <button id="removeAll">清空節點內容</button>
    <script>
      //前兩種函數是操作父子的節點
      $("#test1").click(function(){
           var value = $("#input1").val()
           var newli = $("<li>"+value+"</li>")
           //兩種方法皆可以
          // $("ul").append(newli)
           newli.appendTo("ul")
      })
      $("#addBefore").click(function(){
           var value = $("#input1").val()
           var newli = $("<li>"+value+"</li>")
           //兩種方法皆可以
           $("ul").prepend(newli)
           //兩種方法皆可以
           newli.prependTo("ul")
      })
      //修改同輩節點
      $("#addAfter").click(function(){
           var value = $("#input1").val()
           var newli = $("<li>"+value+"</li>")
           //兩種方法皆可以
          // $("li:last").after(newli)
           newli.insertAfter("li:last")
           
      })
      //替換同輩節點
      $("#replace").click(function(){
           var value = $("#input1").val()
           var newli = $("<li>"+value+"</li>")
         
           //newli.replaceAll("li:eq(1)")

           $("li:eq(1)").replaceWith(newli)
           
      })
      //複製節點
    $("#clone").click(function(){

    $("li:eq(1)").clone().insertAfter("li:last")

    })
    //移除節點
    $("#remove").click(function(){

        $("li:eq(1)").remove()

    })
    //移除節點
    $("#removeAll").click(function(){

        $("li:eq(1)").empty()

    })

      
           
    </script>
    
</body>

節點的遍歷

尋找祖先節點

用于向上遍历 DOM 树的方法 parent() 返回被选元素的直接父元素，仅仅是上一级（找爸爸） parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分

   $("#test").click(function(){
            var x = $("b").parent().html();
            alert(x)
            var y = $("b").parents("ul").html();
            alert(y)
            
        })

尋找同輩元素

next() 获取紧邻匹配元素之后的元素 prev() 获取紧邻匹配元素之前的元素 siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素

<script>
  $("#bor").click(function(){
            //下一個
            var x = $("ul").next().text()
            alert(x)
            //上一個
            var y = $("b").prev().text()
            alert(y)
            //id為p1，缺省指的是全部相鄰節點
            var z = $("b").siblings("#p1").text()
            alert(z)
            
        })
</script>

後代元素的遍歷

children( [selector] ) 方法返回被选元素的所有直接子元素

find( 选择器 ) 方法返回被选元素的后代元素，一路向下直到最后一个后代。

<script>
 $("#child").click(function(){
            
            var x = $("ul").children().text();
            alert(x)
            var y = $("ul").children("li:first").text();
            alert(y)
            var z = $("ul").find("b").text();
            alert(z)

        })
</script>

元素的過濾

first()：过滤第一个元素 last()：过滤最后一个元素 eq(index)：过滤到下标为index的元素 not()：除了什么之外的元素 is()：返回布尔，判断是不是这种元素

<script>
   //過濾
        $("#grep").click(function(){
            //第一個
            var x = $("li").first().text()
            alert(x)
            //最後一個
            var y = $("li").last().text()
            alert(y)
            //序號為1
            var o = $("li").eq(1).text()
            alert(o)
            //除了序號為1的
            var p = $("li").noeq(1).text()
            alert(p)
            //判斷父節點是否為li
            var q = $("b").parent().is("li")
            alert(q)



        })
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.js"></script>
</head>
<body>
    <div>
        <ul>
            <li>1</li>
            <li>
                
                <p id="p1">23</p>
                
                <b>b</b>
            </li>
            <li>2</li>
        </ul>
        <p>數據</p>
            

            
            
    </div>
    <button id="test">獲取父節點數據</button>
    <button id="bor">獲取相鄰節點元素</button>
    <button id="child">獲取子節點元素</button>
    <button id="grep">過濾</button>
         
    <script>
        $("#test").click(function(){
            var x = $("b").parent().html();
            alert(x)
            var y = $("b").parents("ul").html();
            alert(y)
            
        })
        $("#bor").click(function(){
            //下一個
            var x = $("ul").next().text()
            alert(x)
            //上一個
            var y = $("b").prev().text()
            alert(y)
            //id為p1，缺省指的是全部相鄰節點
            var z = $("b").siblings("#p1").text()
            alert(z)
            
        })
        //獲取子節點
        $("#child").click(function(){
            
            var x = $("ul").children().text();
            alert(x)
            var y = $("ul").children("li:first").text();
            alert(y)
            var z = $("ul").find("b").text();
            alert(z)

        })
        //過濾
        $("#grep").click(function(){
            //第一個
            var x = $("li").first().text()
            alert(x)
            //最後一個
            var y = $("li").last().text()
            alert(y)
            //序號為1
            var o = $("li").eq(1).text()
            alert(o)
            //除了序號為1的
            var p = $("li").noeq(1).text()
            alert(p)
            //判斷父節點是否為li
            var q = $("b").parent().is("li")
            alert(q)



        })

      
    </script>
    
</body>
</html>