Java學習-18 簡潔高效的jQuery

deemo_hui發表於2020-11-29

JavajQuery

Java學習-18 簡潔高效的jQuery

1、jQuery是什麼？

簡單地說就是：

jQuery 是一個 JavaScript 庫。
jQuery 極大地簡化了 JavaScript 程式設計。
jQuery 很容易學習。

就像java有很多自帶的庫一樣，jQuery幫助我們簡化了程式設計，讓我們的注意力集中在怎麼使用上，而不用關心內部具體的實現。

2、怎麼使用jQuery？

首先到官網上下載需要的版本，然後在HTML中匯入即可使用。
匯入方式樣例：

<script src="./jquery-3.5.0.min.js"></script>

需要注意的是最好在一開始就匯入，然後如果在body上邊寫js，那麼和原生js一樣，需要等待頁面載入完畢，我們可以使用原生js的window.onload，也可以使用js的頁面載入方式：

<script>
    //jQuery的簡潔入口
    $(function(){
        $("h1").css("color","green");
        //獲取id屬性值為bid的按鈕並繫結點選事件。
        $("#bid").click(function(){
            alert("ok");
        });
    });
    /*
    //jQuery的標準入口
    $(document).ready(function(){
        //獲取h1標籤，並設定css樣式
        $("h1").css("color","blue");
    });
    /*
    //當前頁面載入完成後執行
    window.onload = function(){
        //使用jquery編寫js程式
        //獲取h1標籤，並設定css樣式
        $("h1").css("color","red");
        //獲取id屬性值為bid的按鈕並繫結點選事件。
        $("#bid").click(function(){
            alert("ok");
        });
    }
    */
</script>

3、jQuery選擇器

以下很多概念內容來自jQuery中文文件。

3.1、基本選擇器

#id
element
.class
*
selector1,selector2,selectorN

可以看到，基本上是和css的一樣，所以這就是它的便捷之處了，最後一個是多選的意思，中間用“，”分割。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
</head>
<body>
    <h1 id="hid">jQuery例項--基本選擇器</h1>
    <ul>
        <li>aaa</li>
        <li class="cc">bbb</li>
        <li>ccc</li>
    </ul>
    <h2>aaaaaaaaaa</h2>
    <ol>
        <li class="cc">dddd</li>
        <li>eeee</li>
    </ol>
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            // document.getElementById("hid"); //獲取id值為hid元素節點
            //等價於上面語句,獲取id值為hid元素節點，並設定css樣式
            $("#hid").css("color","blue");

            //document.getElementsByTagName("li"); //獲取網頁中所有li元素節點
            //獲取網頁中所有li元素節點，並設定css樣式
            //$("li").css("color","red");
            
            //獲取class屬性值為cc所有元素節點，並設定css樣式
            $(".cc").css("color","red");

            //選擇器組，統一設定指定css樣式
            $("h1,h2,h3,h4,h5,h6").css("background-color","#ddd");
        });
       
    </script>
</body>
</html>

3.2、層級選擇器

需要注意的是：
空格隔開的形式是包含內部的所有，即不僅僅是子節點，子節點的子節點也算

隔開的形式是直接子節點，即只包含兒子，不包含兒子的兒子之類的。
+：後邊同級的第一個節點
~：後邊的所有兄弟節點

程式碼測試：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
</head>
<body>
    <h1 id="hid">jQuery例項--層級選擇器</h1>
    <ul>
        <li>aaaaaa</li>
        <li>bbbbbb</li>
        <li>cccccc</li>
        <ol>
            <li>ddddd</li>
            <li>ddddd</li>
            <li>ddddd</li>
        </ol>
    </ul>
    <li>ccccc</li>
    <li>ddddd</li>
    <li>eeeee</li>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //獲取ul中所有子元素節點li（包括後代節點），並設定樣式
            // $("ul li").css("color","red"); 
            
            //獲取ul中所有直接子元素節點li（包括後代節點），並設定樣式
            // $("ul>li").css("color","red");

            //獲取ul同級緊鄰後面的第一個兄弟節點li，並設定樣式
            // $("ul+li").css("color","red");

            //獲取ul後面所有同級兄弟li元素節點，並設定樣式
            $("ul~li").css("color","red");
        });
       
    </script>
</body>
</html>

3.3、基本篩選器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
</head>
<body>
    <h1 id="hid">jQuery例項--基本篩選器</h1>
    <ul>
        <li>aaaaaa</li>
        <li class="cc">bbbbbb</li>
        <li>cccccc</li>
        <li class="cc">ddddd</li>
        <li>eeeee</li>
        <li>ffffff</li>
    </ul>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //獲取所有li節點並設定樣式
            //$("li").css("color","red");

            //獲取第一個li節點並設定樣式
            //$("li:first").css("color","red");

            //獲取最後一個li節點並設定樣式
            //$("li:last").css("color","red");

            //獲取偶數索引號對應的所有li節點並設定樣式
            //$("li:even").css("color","red");

            //獲取奇數索引號對應的所有li節點並設定樣式
            //$("li:odd").css("color","red");

            //獲取class屬性值為cc的所有li節點並設定樣式
            //$("li.cc").css("color","red");

            //獲取class屬性值不為cc的所有li節點並設定樣式
            //$("li:not(.cc)").css("color","red");

            //獲取索引位置為2的li節點並設定樣式
            //$("li:eq(2)").css("color","red");

            //獲取前2個li節點並設定樣式
            //$("li:lt(2)").css("color","red");

            //獲取所有li節點並新增滑鼠移入和移出事件
            $("li").mouseover(function(){
                $(this).animate({paddingLeft:"+=20"},800);
            }).mouseout(function(){
                $(this).animate({paddingLeft:"-=20"},500);
            });
        });
       
    </script>
</body>
</html>

3.4、內容選擇器

其中contains和has用的比較多。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
</head>
<body>
    <h1 id="hid">jQuery例項--內容選擇器</h1>
    <div>John Resig</div>
    <div>George Martin</div>
    <div>Malcom John Sinclair</div>
    <div>J. Ohn</div>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            $("div:contains('John')").css("color","red");
        });
       
    </script>
</body>
</html>

3.5、屬性選擇器

^表示以什麼開頭，$表示以什麼結尾，*表示包含該值，和正規表示式一樣的。
屬性就是標籤中的那些東西。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
</head>
<body>
    <h1 id="hid">jQuery例項--屬性選擇器</h1>
    <form>
        姓名：<input type="text" name="uname" value="zhangsan"/><br/><br/>
        年齡：<input type="text" name="age"/><br/><br/>
        郵箱：<input type="text" name="email"/><br/><br/>
        電話：<input type="text" name="phone"/><br/><br/>
        地址：<input type="text" name="address"/><br/><br/>
    </form>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //獲取所有含有value屬性的input元素標籤，並設定樣式
            //$("input[value]").css("border","1px solid red");

            //獲取name屬性值為phone的input元素標籤，並設定樣式
            //$("input[name='phone']").css("border","1px solid red");

            //獲取name屬性值不為phone的input元素標籤，並設定樣式
            //$("input[name!='phone']").css("border","1px solid red");

            //獲取name屬性值是以a字元開頭的所有input元素標籤，並設定樣式
            //$("input[name^='a']").css("border","1px solid red");

            //獲取name屬性值是以e字元結尾的所有input元素標籤，並設定樣式
            //$("input[name$='e']").css("border","1px solid red");

            //獲取name屬性值中含有m字元的所有input元素標籤，並設定樣式
            $("input[name*='m']").css("border","1px solid red");
        });
       
    </script>
</body>
</html>

3.6、子元素選擇器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
</head>
<body>
    <h1 id="hid">jQuery例項--子元素選擇器</h1>
    <ul>
        <li>aaaaaaa</li>
        <li>bbbbbbb</li>
        <li>ccccccc</li>
        <li>ddddddd</li>
        <li>eeeeeee</li>
    </ul>
    <ul>
        <li>1111111</li>
        <li>2222222</li>
        <li>3333333</li>
        <li>4444444</li>
        <li>5555555</li>
    </ul>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //獲取每組ul中的第一個li節點並新增樣式
            //$("ul li:first-child").css("color","red");

            //獲取每組ul中的最後一個li節點並新增樣式
            //$("ul li:last-child").css("color","red");

            //獲取每組ul中的第三個li節點並新增樣式
            $("ul li:nth-child(3)").css("color","red");
        });
       
    </script>
</body>
</html>

3.7、表單選擇器

表單物件屬性選擇器：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
</head>
<body>
    <h1 id="hid">jQuery例項--表單中選擇器</h1>
    <ul>
        <li><input type="checkbox" name="likes[]" value="1"/> aaaaaaa</li>
        <li><input type="checkbox" name="likes[]" value="2"/> bbbbbbb</li>
        <li><input type="checkbox" name="likes[]" value="3"/> ccccccc</li>
        <li><input type="checkbox" name="likes[]" value="4"/> ddddddd</li>
        <li><input type="checkbox" name="likes[]" value="5"/> eeeeeee</li>
    </ul>
   <button onclick="doFun()">獲取</button>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        function doFun(){
            //獲取所有多選框中選擇中的元素節點
            //var list = $("input[type='checkbox']:checked");
            var list = $(":checkbox:checked");
            alert(list.length);
            
            //獲取li元素節點（條件是裡面的多選框必須選中），並設定樣式
            $("li:has(input:checked)").css("color","red");
        }
       
    </script>
</body>
</html>

4、jQuery屬性

4.1、屬性操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
</head>
<body>
    <h1 id="hid">jQuery例項--jQuery屬性操作</h1>
    
    <a id="aid" href="http://www.baidu.com" title="百度連結">百度</a><br/><br/>

    <button onclick="dofun()">更改連結屬性</button>
    
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        function dofun(){
            var a = $("#aid");
            console.log(a.attr("href")); //獲取
            console.log(a.prop("href")); //獲取
            console.log(a.attr("title"));
            console.log(a.prop("title"));
            a.attr("href","http://news.baidu.com"); //新增或更改
            a.removeAttr("title"); //刪除屬性
            //a.attr("aa","bb"); //新增屬性
            // a.prop("aa","bb"); //新增屬性 prop方法不可以新增不能存在的屬性
            a.prop("title","百度新聞"); //只支援HTML DOM的屬性操作
           
        }
       
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
</head>
<body>
    <h1 id="hid">jQuery例項--jQuery屬性操作--全選/全不選</h1>
    <ul class="uu">
        <li><input type="checkbox" name="likes[]" value="1"/> 蘋果</li>
        <li><input type="checkbox" name="likes[]" value="2"/> 橘子</li>
        <li><input type="checkbox" name="likes[]" value="3"/> 哈密瓜</li>
        <li><input type="checkbox" name="likes[]" value="4"/> 菠蘿</li>
        <li><input type="checkbox" name="likes[]" value="5"/> 芒果</li>
    </ul>
    <button>全選</button>
    <button>全不選</button>
    <button>反選</button>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //獲取按鈕並繫結點選事件
            $("button").click(function(){
                //判斷按鈕上的文字，指定對應的操作
                switch($(this).html()){
                    case "全選":
                        //獲取所有多選框並設定選中
                        $("ul.uu input:checkbox").prop("checked",true);
                        break;
                    case "全不選":
                        $("ul.uu input:checkbox").prop("checked",false);
                        break;
                    case "反選":
                        $("ul.uu input:checkbox").each(function(){
                            $(this).prop("checked",!$(this).prop("checked"));
                        });
                        break;
                }
            });
        });
       
    </script>
</body>
</html>

4.2、CSS類操作

toggleClass就是包括了自帶判斷的新增和刪除，即有就刪除，沒有就新增，稱為切換。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
    <style>
        ul,li{padding:0px;margin:0px;}
        ul.uu{list-style:none;}
        ul.uu li{line-height:40px;padding-left:20px;margin:5px;background-color:#ddd;}
        ul.uu li:hover{background-color:#fc0;}
        ul.uu li.active{background-color: #f0c;}
    </style>
</head>
<body>
    <h1 id="hid">jQuery例項--jQuery屬性--class類操作</h1>
    <ul class="uu">
        <li>蘋果</li>
        <li>橘子</li>
        <li>哈密瓜</li>
        <li>菠蘿</li>
        <li>芒果</li>
    </ul>
    
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //獲取上面所有的li節點並新增點選事件
            $("ul.uu li").click(function(){
                //切換class類屬性
                $(this).toggleClass("active");
                /*
                //判斷當前節點li是否含有active class屬性
                if($(this).hasClass('active')){
                    //刪除class類屬性
                    $(this).removeClass("active");
                }else{
                    //新增class類屬性
                    $(this).addClass("active");
                }
                */
            });
        });
       
    </script>
</body>
</html>

4.3、HTML文字與值操作

需要注意的是html和text 的區別，它們都能獲取一個標籤中的文字，但是不同的是，當標籤巢狀時，html取的是巢狀的標籤，而text取的是文字，也就是說，text必然取的是文字，也就是瀏覽器上可見的那些值。
html類似於InnerHTML。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
</head>
<body>
    <h1 id="hid">jQuery例項--jQuery屬性--HTML程式碼/文字/值的操作</h1>
    <ul>
        <li class="c1"><a href="http://www.baidu.com">百度</a></li>
        <li class="c2"><a href="http://www.163.com">網易</a></li>
        <li class="c3"><a href="http://www.qq.com">騰訊</a></li>
        <li class="c4"><a href="http://www.sina.com">新浪</a></li>
    </ul>
    搜尋：<input type="text" name="kw" value="html"/> <button>搜尋</button>
    <br/><br/>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            console.log($("li.c1").html()); //類似於js中的innerHTML
            console.log($("li.c2").text());
            $("li.c3").html('<a href="http://www.qq.com">騰訊2</a>');
            $("li.c4").text('<a>新浪2</a>');

            console.log($("input[name='kw']").val());
            $("input[name='kw']").val('CSS樣式');

        });
       
    </script>
</body>
</html>

5、CSS樣式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
    <style>
        *{padding:0px;margin:0px;}
        #outer{background-color:#ddd;width:400px;height:400px;margin:50px;padding:20px;position:relative;}
        #inner{background-color:#fc0;width:200px;height:200px;position:absolute;}
    </style>
</head>
<body>
    <h1 id="hid">jQuery例項--jQuery中的CSS樣式操作</h1>
    <div id="outer">
        <div id="inner"></div>
    </div>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //獲取標題並設定css樣式
            //$("#hid").css("color","red"); //單個屬性設定
            $("#hid").css({"color":"green","background-color":"#ddd"});
            console.log($("#hid").css("color")); //獲取css屬性

            //獲取div層的位置
            var offset = $("#inner").offset();
            console.log(offset.left,offset.top);

            //獲取偏移位置
            var position = $("#inner").position();
            console.log(position.left,position.top);

            //獲取尺寸
            console.log($("#inner").width(),$("#inner").height());
            $("#inner").width(300)
        });
       
    </script>
</body>
</html>

6、jQuery 物件訪問

主要是each遍歷和index獲取第幾個元素。
each遍歷案例程式碼演示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
</head>
<body>
    <h1 id="hid">jQuery例項--節點遍歷操作</h1>
    <ul>
        <li>2</li>
        <li>1</li>
        <li>10</li>
        <li>18</li>
        <li>8</li>
    </ul>
    <button>乘以2</button>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
           $("button").click(function(){
               //$("li").css("color","red");
               //獲取li節點並遍歷執行操作
               $("li").each(function(i){
                    //alert(i); //索引位置
                    $(this).html($(this).html()*2);
               });
           });

           /*
           //統一繫結點選事件
           $("li").click(function(){
               alert($(this).html());
           });
           */
        });
    </script>
</body>
</html>

7、文件處理

內部插入
外部插入
包裹
替換
- replaceWith(content|fn)
- replaceAll(selector)
刪除
複製
- clone([Even[,deepEven]])

需要注意的是那些帶to和不帶to 的，它們的主要區別在於，帶to的可以在後邊跟著為這個節點新增新操作。

內部插入案例演示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
</head>
<body>
    <h1 id="hid">jQuery例項--文件處理--內部插入</h1>
    <ul class="uu">
        <li>蘋果</li>
        <li>橘子</li>
        <li>哈密瓜</li>
    </ul>
    名稱：<input type="text" name="tname"/>
    <button>前新增</button>
    <button>後追加</button>
    
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //獲取按鈕並繫結點選事件
            $("button").click(function(){
                //獲取輸入框中的內容
                var tname = $("input[name='tname']").val();
                //獲取上的內容判斷執行對應的操作
                switch($(this).html()){
                    case "前新增":
                        //$("ul.uu").prepend("<li>"+tname+"</li>");
                        $("<li>"+tname+"</li>").prependTo("ul.uu");
                        break;
                    case "後追加":
                        //$("ul.uu").append("<li>"+tname+"</li>");
                        $("<li>"+tname+"</li>").appendTo("ul.uu");
                        break;
                }
            });
        });
    </script>
</body>
</html>

外部插入演示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
    <style>
        ul,li{padding:0px;margin:0px;}
        ul.uu{list-style:none;}
        ul.uu li{line-height:40px;padding-left:20px;margin:5px;background-color:#ddd;}
        ul.uu li:hover{background-color:#fc0;}
        ul.uu li.active{background-color: #f0c;}
    </style>
</head>
<body>
    <h1 id="hid">jQuery例項--文件處理--外部插入</h1>
    <ul class="uu">
        <li class="active">蘋果</li>
        <li>橘子</li>
        <li>哈密瓜</li>
        <li>菠蘿</li>
        <li>芒果</li>
    </ul>
    名稱：<input type="text" name="tname"/>
    <button>前新增</button>
    <button>後追加</button>
    
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //獲取所有的li節點並繫結點選事件
            $("ul.uu li").click(function(){
                $("ul.uu li").removeClass("active");
                $(this).addClass("active");
            });
            //獲取所有按鈕並繫結點選事件
            $("button").click(function(){
                //獲取輸入框中的內容
                var tname = $("input[name='tname']").val();
                //獲取按鈕上的文字並判斷執行對應操作
                switch($(this).html()){
                    case "前新增":
                        //$("li.active").before("<li>"+tname+"</li>");
                        $("<li>"+tname+"</li>").insertBefore("li.active");
                        break;
                    case "後追加":
                        //$("li.active").after("<li>"+tname+"</li>");
                        $("<li>"+tname+"</li>")
                            .insertAfter("li.active")
                            .click(function(){
                                $("ul.uu li").removeClass("active");
                                $(this).addClass("active");
                            });
                        break;
                }
            });
        });
       
    </script>
</body>
</html>

外部插入和刪除：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
</head>
<body>
    <h1 id="hid">jQuery例項--文件處理--外部插入和刪除</h1>
    <form>
        姓名：<input type="text" title="姓名" name="uname"/><br/><br/>
        年齡：<input type="text" title="年齡" name="age"/><br/><br/>
        郵箱：<input type="text" title="郵箱" name="email"/><br/><br/>
        電話：<input type="text" title="電話" name="phone"/><br/><br/>
        地址：<input type="text" title="地址" name="address"/><br/><br/>
    </form>
    <br/><br/>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //獲取所有的輸入框並繫結獲得和失去焦點事件
            $("input:text").focus(function(){
                //獲得焦點事件處理
                var title = $(this).attr("title");
                $("<span> 請輸入正確的"+title+"資訊</span>").insertAfter(this).css("color","#ddd");
            }).blur(function(){
                //失去焦點事件處理
                $(this).next("span").remove();
            });

        });
       
    </script>
</body>
</html>

刪除和清空：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
    <style>
        ul,li{padding:0px;margin:0px;}
        ul.uu{list-style:none;}
        ul.uu li{line-height:40px;padding-left:20px;margin:5px;background-color:#ddd;}
        ul.uu li:hover{background-color:#fc0;}
        ul.uu li.active{background-color: #f0c;}
    </style>
</head>
<body>
    <h1 id="hid">jQuery例項--文件處理--刪除操作</h1>
    <ul class="uu">
        <li>蘋果</li>
        <li>橘子</li>
        <li>哈密瓜</li>
        <li>菠蘿</li>
        <li>芒果</li>
    </ul>
    <button>刪除</button>
    <button>清空</button>
    
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //獲取li節點並新增選中效果
            $("ul.uu li").click(function(){
                $(this).toggleClass("active");
            });
            //獲取按鈕並繫結點選事件
            $("button").click(function(){
                //根據按鈕上的文字執行物件操作
                switch($(this).html()){
                    case "刪除":
                        $("li.active").remove();
                        break;
                    case "清空":
                        $("ul.uu").empty();
                        break;
                }
            });
        });
       
    </script>
</body>
</html>

8、特效

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
</head>
<body>
    <h1 id="hid">jQuery例項--jQuery特效展示</h1>
    <button>顯示</button>
    <button>隱藏</button>
    <button>切換</button><br/><br/>
    <img src="./images/33.jpg" width="300"/>
    
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
           //獲取按鈕並繫結點選事件
           $("button").click(function(){
               //判斷按鈕上的文字並執行對應的操作
               switch($(this).html()){
                    case "顯示":
                        //$("img").show("slow");
                        //$("img").slideDown("slow");
                        $("img").fadeIn("slow");
                        break;
                    case "隱藏":
                        //$("img").hide("slow");
                        //$("img").slideUp("slow");
                        $("img").fadeOut("slow");
                        break;
                    case "切換":
                        //$("img").toggle("slow");
                        //$("img").slideToggle("slow");
                        //$("img").fadeToggle("slow");
                        $("img").stop().toggle("slow");
                        break;

               }
           });
        });
    </script>
</body>
</html>

1、簡訊牆效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
    <style>
        ul,li{margin:0px;padding:0px;}
        ul{width:400px;list-style:none;}
        ul li{line-height:80px;margin-bottom:2px;background-color:#ddd;}
        #did{width:400px;height:326px;border:1px solid #fc0;overflow:hidden;}
    </style>
</head>
<body>
    <h1 id="hid">jQuery例項--jQuery效果展示--簡訊牆特效</h1>
    <div id="did">
        <ul class="uu">
            <li>蘋果</li>
            <li>橘子</li>
            <li>哈密瓜</li>
            <li>香蕉</li>
            <li>荔枝</li>
            <li>芒果</li>
        </ul>
    </div>
    
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //定時每隔3秒後執行一次
            setInterval(function(){
                //獲取ul中的最後一個li節點設定隱藏後新增到ul裡面的最前面，並設定滑動顯示
                //$("ul.uu li:last").hide().prependTo("ul.uu").slideDown("slow");

                //向上滾動展示
                $("ul.uu li:first").slideUp("slow",function(){
                    $(this).appendTo("ul.uu").show();
                });
                
            },3000);
        });
    </script>
</body>
</html>

2、樹形選單：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
    <style>
        ul.uu{display:none;}
        h4{line-height:40px;}
        h4:hover{background-color:#ddd;}
    </style>
</head>
<body>
    <h1 id="hid">jQuery例項--jQuery效果展示--樹形選單</h1>
    <h4>水果系列</h4>
    <ul class="uu">
        <li>蘋果</li>
        <li>橘子</li>
        <li>哈密瓜</li>
    </ul>
    <h4>水果系列</h4>
    <ul class="uu">
        <li>蘋果</li>
        <li>橘子</li>
        <li>哈密瓜</li>
    </ul>
    <h4>水果系列</h4>
    <ul class="uu">
        <li>蘋果</li>
        <li>橘子</li>
        <li>哈密瓜</li>
    </ul>
    <br/><br/>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //獲取上面所有的h4標題並繫結點選事件
            $("h4").click(function(){
                //獲取當前h4緊鄰的兄弟ul節點，並滑動展開顯示
                $(this).next("ul.uu").slideToggle("slow")
            });
        });
       
    </script>
</body>
</html>

3、滑動選項卡：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
    <style>
        ul,li,div{margin:0px;padding:0px;}
        #did .header ul{list-style:none;}
        #did .header ul li{line-height:50px;width:120px;float:left;margin-right:4px;background-color:#ddd;}
        #did .header ul li:hover{background-color:#fc0;}
        #did .body{clear:both;width:500px;height:400px;border:1px solid #ddd;}
        #did .body .cc{display:none;height:400px;}
        #did .header ul li.b1,#did .body div.d1{background-color:red;}
        #did .header ul li.b2,#did .body div.d2{background-color:green;}
        #did .header ul li.b3,#did .body div.d3{background-color:blue;}
    </style>
</head>
<body>
    <h1 id="hid">jQuery例項--jQuery效果展示--選項卡</h1>
    <div id="did">
        <div class="header">
            <ul>
                <li class="b1">aaa</li>
                <li class="b2">bbb</li>
                <li class="b3">ccc</li>
                <li>ddddd</li>
            </ul>
        </div>
        <div class="body">
            <div class="cc d1">AAA</div>
            <div class="cc d2">BBB</div>
            <div class="cc d3">CCC</div>
            <div class="cc">DDDD</div>
        </div>
    </div>
    
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
           //獲取上面header頭中ul裡面的所有li節點，並繫結滑鼠移入事件
           $("#did .header ul li").mouseover(function(){
               //獲取事件源物件li的索引位置
               var m = $(this).index();
               //隱藏所有body層
               $("#did .body div").hide();
               //顯示索引位置m對應的div層
               $("#did .body div").eq(m).fadeIn("slow");

           });
        });
       
    </script>
</body>
</html>

4、導航欄效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
    <style>
        div,ul,li,a{margin:0px;padding:0px;}
        ul{list-style:none; position:absolute;}
        a{text-decoration:none;display:block;width:100px;line-height:40px;}
        a:hover{background-color:#fc0;}
        #menu{width:100%;height:40px;line-height:40px;}
        #menu ul li{width:100px;float:left;
                    line-height:40px;
                    background-color:#ddd;
                    text-align:center;
                    border-right:2px solid #fff;}
        #menu ul li ul.item li{border-top:2px solid #fff;}
        #menu ul li ul.item{display:none;position:relative;}
    </style>
</head>
<body>
    <h1 id="hid">jQuery例項--jQuery效果展示--導航欄效果</h1>
    <div id="menu">
        <ul>
            <li><a href="#">商品展示</a>
                <ul class="item">
                    <li><a href="#">熱賣商品</a></li>
                    <li><a href="#">最新商品</a></li>
                    <li><a href="#">特價商品</a></li>
                    <li><a href="#">推薦商品</a></li>
                </ul>
            </li>
            <li><a href="#">站內新聞</a>
                <ul class="item">
                    <li><a href="#">國內新聞</a></li>
                    <li><a href="#">體育資訊</a></li>
                    <li><a href="#">熱點新聞</a></li>
                </ul>
            </li>
            <li><a href="#">網站公告</a>
                <ul class="item">
                    <li><a href="#">國內新聞</a></li>
                    <li><a href="#">體育資訊</a></li>
                    <li><a href="#">熱點新聞</a></li>
                    <li><a href="#">體育資訊</a></li>
                    <li><a href="#">熱點新聞</a></li>
                </ul>
            </li>
            <li><a href="#">關於我們</a>
                <ul class="item">
                    <li><a href="#">國內新聞</a></li>
                    <li><a href="#">體育資訊</a></li>
                    <li><a href="#">熱點新聞</a></li>
                </ul>
            </li>
            <li><a href="#">線上幫助</a></li>
        </ul>
    </div>
    
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //獲取所有選單中li選項，並繫結滑鼠移入和移出事件
            $("#menu ul li").mouseover(function(){
                //移入事件處理
                //$(this).find("ul.item").show();
                $("ul.item:animated").stop().hide();
                $(this).find("ul.item").slideDown("slow");
            }).mouseout(function(){
                //移出事件處理
                $(this).find("ul.item").hide();
            });
        });
       
    </script>
</body>
</html>

9、事件處理

和原生js的基本一樣，不過大多數都不要on了，比如click，mouseover等
然後是 one可以繫結一個一次性事件，trigger可以激發一個事件。

1、one和trigger

基本演示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
</head>
<body>
    <h1 id="hid">jQuery例項--事件處理</h1>
    <button onclick="dofun()">點選我</button>
    <button id="bid">投票</button>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
           //獲取投票按鈕並繫結一次性點選事件
           $("#bid").one("click",function(){
               alert("投票成功！");
               $(this).html("已投票");
           });
        });

        function dofun(){
            console.log("事件被點選！");
            $("#hid").css("color","red");
            //使用jquery程式激發一個事件
            $("#bid").trigger("click");
        }
    </script>
</body>
</html>

2、滑鼠事件

滑鼠移入移出事件現在可以在一個hover裡搞定，第一個函式是移入的操作，第二個是移出的操作。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
    <style>
        div,img,ul,li{margin:0px;padding:0px;}
        #did{width:384px;height:240px;}
        #list img{width:85px;border:2px solid #fff;margin-right:2px;}
        #list img:hover{border:2px solid red;}
    </style>
</head>
<body>
    <h1 id="hid">jQuery例項--滑鼠移入事件處理</h1>
    <div id="did">
        <img id="mid" src="./images/11.jpg" width="384"/>
    </div>
    <div id="list">
        <img src="./images/11.jpg"/>
        <img src="./images/22.jpg"/>
        <img src="./images/33.jpg"/>
        <img src="./images/44.jpg"/>
    </div>
    
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //獲取did層並繫結滑鼠的移入和移出事件
            /*
            $("#did").mouseover(function(){
                console.log("滑鼠移入。。。。");
            }).mouseout(function(){
                console.log("滑鼠移出。。。。");
            });
            */
            //效果同上的程式碼
            /*
            $("#did").hover(function(){
                //滑鼠移入事件處理
                console.log("滑鼠移入111。。。。");
            },function(){
                //滑鼠移出事件處理
                console.log("滑鼠移出11。。。。");
            });
            */

            //獲取圖片列表並繫結滑鼠移入事件
            $("#list img").mouseover(function(){
                $("#mid").attr("src",$(this).attr("src"));
            });
        });
    </script>
</body>
</html>

3、重寫放大鏡效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
    <style>
        div,img,ul,li{margin:0px;padding:0px;}
        #did{width:300px;height:300px;overflow:hidden;display:none;position:absolute;}    
    </style>
</head>
<body>
    <h1 id="hid">jQuery例項--圖片的放大鏡效果</h1>
    <br/><br/>
    <img id="mid" src="./images/33.jpg" width="384" height="240"/>
    <div id="did">
        <img src="./images/33.jpg"/>
    </div>
    <br/><br/>

    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //獲取mid圖片節點並繫結滑鼠移入、移出和移動事件
            $("#mid").mouseover(function(){
                //獲取被放大圖片（事件源物件）的位置
                var offset = $(this).offset();
                //計算放大圖層位置
                var y = offset.top;
                var x = offset.left+$(this).width()+5;
                //通過css對放大圖層定位，並設定可見
                $("#did").css({top:y+"px",left:x+"px"}).show();
            }).mouseout(function(){
                //隱藏放大圖層
                $("#did").hide(); 
            }).mousemove(function(e){
                //輸出事件位置
                //console.log(e.pageX,e.pageY);
                //獲取當前被放大圖層位置
                var offset = $(this).offset();
                //計算滑鼠在被放大圖層上的位置
                var x = e.pageX - offset.left;
                var y = e.pageY - offset.top;
                //設定放大鏡圖層的滾動位置
                $("#did").scrollLeft(x*5-150).scrollTop(y*5-150);
            });
        });
       
    </script>
</body>
</html>

4、重寫拖動效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
    <style>
        div{margin:0px;padding:0px;}
        #did{width:200px;height:200px;background-color:#ddd;cursor:move;position:absolute;}
    </style>
</head>
<body>
    <h1 id="hid">jQuery例項--拖動效果</h1>
    <div id="did"></div>
    
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //獲取拖動div層並繫結滑鼠按下和抬起事件
            $("#did").mousedown(function(e){
                //設定背景顏色
                $(this).css("background-color","blue");
                //獲取當前div層位置
                var offset = $(this).offset();
                //計算滑鼠按在div層上的位置
                var x = e.pageX - offset.left;
                var y = e.pageY - offset.top;
                //繫結滑鼠移動事件
                $(document).on("mousemove",function(en){
                    //定位div圖層位置
                    $("#did").css({top:en.pageY-y+"px",left:en.pageX-x+"px"});
                });

            }).mouseup(function(){  
                $(this).css("background-color","#ddd");
                //取消滑鼠移動事件
                $(document).off("mousemove");
            });
        }); 
    </script>
</body>
</html>

5、阻止事件冒泡

使用stopPropagation阻止事件冒泡，事件冒泡就是子元素的事件會觸發父元素的事件，有時候這種會帶來很大的問題，這樣的bug也比較難以排查。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery例項</title>
    <style>
        #outer{width:400px;height:400px;background-color: #ddd;margin:50px;padding:20px;}
        #inner{width:200px;height:200px;background-color:#fc0;}
    </style>
</head>
<body>
    <h1 id="hid">jQuery例項--阻止事件冒泡</h1>
    <div id="outer">
       <div id="inner"></div>
    </div>
    
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //獲取div層並繫結點選事件
            $("#outer").click(function(){
                console.log("outer.....");
            });
            $("#inner").click(function(e){
                console.log("inner.....");
                //阻止事件冒泡（傳播）
                e.stopPropagation();
            });
        });
       
    </script>
</body>
</html>

10、一些小問題的總結

1、防止動畫鬼畜

有時候當我們過快的移動滑鼠或者點選滑鼠的時候，會導致動畫一直播放，不能滿足我們預期的效果。此時可以使用stop來停止動畫，防止鬼畜。

2、px不要忘

在寫css或者通過js拼接樣式的時候，千萬要記住符號不要忘，比如px。

3、offset和pageX，pageY

offset是這個元素視窗相對於瀏覽器視窗的偏移量，並且offset永遠是相對於瀏覽器視窗，不論是相對定位還是絕對定位，（position是相對於父視窗，預設都是相對於瀏覽器視窗，新增定位之後就相對於定位的父視窗）而pageX和pageY更多的是用於滑鼠的相對於瀏覽器視窗的位置，這兩者的距離不一樣，如圖：
在這裡插入圖片描述

4、內部插入，外部插入

內部插入是插入的子節點，而外部插入插入的是兄弟節點。

5、index和eq

index可以查詢需要的第i個子元素，而eq可以幫助尋找另一個對應的index的子元素。詳見選項卡案例。

11、牛刀小試

之前做的那個輪播圖，用的是原生js，選擇元素和繫結方法什麼的比較麻煩，而且在HTML中寫了很多事件，這次學習完成jQuery，怎麼的也得鳥槍換炮，重寫一波，順便捋一捋常用的操作，記錄一下初學者的問題。

1、程式碼

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/rotation.css"/>
    <script src="./js/jquery-3.5.0.min.js"></script>
</head>
<body>
    <div id = "background">
        <div id="images">
            <img src="./images/1.jpg" alt="商品圖片">
            <img src="./images/2.jpg" alt="商品圖片">
            <img src="./images/3.jpg" alt="商品圖片">
            <img src="./images/4.jpg" alt="商品圖片">
            <img src="./images/5.jpg" alt="商品圖片">
        </div>
        <a class="swiper-button-prev" ></a>
        <a class="swiper-button-next" ></a>
        <div class="swiper-pagination-bullet">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="./js/rotation.js"></script>
</html>

JS:

var number = 1;
var mytime = null;
// 獲取img列表 和 li 列表
var mlist = $("#images img");
var blist = $(".swiper-pagination-bullet:first li");
// 初始第一張圖片的圓點導航變化
$(blist[0]).css({"background-color":"hsla(0,0%,100%,.4)","border":"2px solid #fff(0,0%,100%,.4)"});
//定義函式展示對應的圖片
// 還可以把當前block的關上，然後開啟number的顯示，不需要遍歷。
function show(number){
    for(var i=0; i<mlist.length; i++){
        if(number == i+1){
            // 顯示對應圖片 和 更改小圓點樣式
            $(mlist[i]).css("display","block");
            $(blist[i]).css({"background-color":"hsla(0,0%,100%,.4)","border":"2px solid #fff(0,0%,100%,.4)"})
        }else{
            // 隱藏對應圖片 和 更改小圓點樣式
            $(mlist[i]).css("display","none");
            $(blist[i]).css({"background-color":"rgba(0,0,0,.4)","border":"2px solid slategray"})
        }
    }
    // $(mlist[number]).show(800,function(){
    //     $(blist[number]).css({"backgroundColor":"hsla(0,0%,100%,.4)","border":"2px solid #fff(0,0%,100%,.4)"})
    // });
    // $("#images img:not(:eq(" + number+ "))").hide();
    // $(".swiper-pagination-bullet:first li:not(:eq(" + number+ "))").css({"backgroundColor":"rgba(0,0,0,.4)","border":"2px solid slategray"});
}

// 繫結滑鼠移入移出事件
$("#images").hover(function(){
    // over stop
    if(mytime != null){
        clearInterval(mytime);
        mytime = null;
    }
},function(){
    // out start
    if(mytime == null){
        mytime = setInterval(function(){
            number++;
            if (number > 5){number = 1}; // 這一句是因為不改的話number會在進行自動播放時變成6，因此特殊處理
            show(number);
            if(number>=5){
                number = 0;
            }
        }, 3000); 
    }
})
// 使用trigger激發mouseout事件
$("#images").trigger("mouseout");
// 左右箭頭更換圖片
// 左箭頭
$(".swiper-button-prev:first").click(function(){
    number = number - 1;
    if (number < 1){
        number = 5;
    }
    show(number);
})
// 右箭頭
$(".swiper-button-next:first").click(function(){
    number = number + 1;
    if (number > 1){
        number = 1;
    }
    show(number);
})
// 給小圓點新增click事件
$(".swiper-pagination-bullet li").click(function(){
    // 用index獲取是第幾個點選了，加1是因為預設從 0 開始
    number = $(this).index() + 1;
    show(number);
})

CSS:沒有變化

/* 清除預設格式 */
div,img,li{margin:0px;padding:0px;}
li{list-style: none;}

/* 背景設定，第一張圖片展示，其他隱藏，左右居中 */
#background{width:1226px;height:460px;position: relative;top:100px;left:50%;margin-left: -613px;}
#background #images img{display:none;}
#background #images img:first-child{display:block;width:1226px;height: 460px;}

/* 左右箭頭設定 */
.swiper-button-prev, .swiper-button-next{
    position: absolute;
    width: 41px;
    height: 69px;
    overflow: hidden;
}

/* 左箭頭設定 */
.swiper-button-prev{
    background-image: url("../images/icon-slides.png");
    background-position:-83px;
    top: 195.5px;
    left: 0px;
}
/* 右箭頭設定 */
.swiper-button-next{
    background-image: url("../images/icon-slides.png");
    background-position:-123px;
    top: 195.5px;
    right: 0px;
}
/*  箭頭的滑鼠懸浮效果 */
.swiper-button-prev:hover{
    background-position:0px;
}
.swiper-button-next:hover{
    background-position:-41px;
}

/* 右下角圓點設定 */
.swiper-pagination-bullet{
    position: absolute;
    overflow: hidden;
    left:85%;
    top:85%;
}

/* 圓點原始形狀 */
.swiper-pagination-bullet li{
    float: left;
    width: 6px;
    height: 6px;
    background-color:rgba(0,0,0,.4);
    border:2px solid slategray;
    border-radius: 50%;
    margin:4px;
}
/* 圓點滑鼠懸浮時的形狀 */
.swiper-pagination-bullet li:hover{
    cursor: pointer;
    background-color:hsla(0,0%,100%,.4);
    border:2px solid #fff(0,0%,100%,.4);
}

2、總結

1、$

$不要忘，任何的只要是元素(標籤)，想要在後邊進行其他操作，都要用$ 把它包裹起來。比如：

var mlist = $("#images img");
$(blist[0]).css({"background-color":"hsla(0,0%,100%,.4)","border":"2px solid #fff(0,0%,100%,.4)"});

我讀取了一組img標籤，放到了，這個mlist中，然後通過索引取值，這裡也需要用$符。
而且一個重點：mlist不是Array，不是！

2、$中的選擇器字串也可以用+拼接

$(".swiper-pagination-bullet:first li:not(:eq(" + number + "))").css({"backgroundColor":"rgba(0,0,0,.4)","border":"2px solid slategray"});

這樣是可以的！因為想從外面傳參，不然的話直接eq（數字）就行。

簡潔Java之道
2021-09-09
Java
簡明高效的 Java 併發程式設計學習指南
2019-03-01
Java程式設計
RxAndroid使用初探；簡潔、優雅、高效
2019-01-16
Android
iA Writer for Mac：簡潔高效的MarkDown寫作利器
2023-12-11
Mac
Keka Mac：高效簡潔的壓縮解壓工具
2023-11-22
Mac
如何高效學習java課程
2021-05-26
Java
PHP + MySQL 學習筆記（七）--- jQuery 及 jQuery Mobile 簡介 + 兩個練習
2021-01-01
PHPMySql筆記jQuery
Sketch mac：以簡潔高效的方式，繪製精彩向量世界
2023-11-27
Mac
如何簡潔高效的搭建一個SpringCloud2023的maven工程
2024-03-06
SpringGCCloudMaven
使用Java 18的Vector API提高效能 - martin
2022-03-29
JavaAPI
Java學習：JDBC簡介
2019-08-22
JavaJDBC
簡潔/易用/靈活/高效->RecyclerView介面卡封裝
2018-11-16
View封裝
Jquery學習1
2024-03-10
jQuery
JQuery學習系列
2021-09-09
jQuery
高效理解排序之——選擇排序-含JAVA程式碼（簡潔明瞭，非無腦COPY）
2020-12-01
排序Java
與眾不同的快速開發平臺 —— 簡潔高效的wueasy軟體
2019-01-19
JAVA基礎之程式碼簡潔之道
2019-01-02
Java
9個JavaScript小技巧：寫出更簡潔，高效程式碼
2019-03-29
JavaScript
【譯】Vue 的小奇技（第十一篇）：高效簡潔的函式式元件
2019-03-25
Vue函式元件
[譯] 利用 Immutability（不可變性）編寫更為簡潔高效的程式碼
2019-01-19
前端學習（四）--jQuery
2018-11-29
前端jQuery
jQuery學習筆記
2018-05-11
jQuery筆記
jQuery 學習筆記
2019-08-06
jQuery筆記
jQuery基礎學習
2020-09-29
jQuery
JQuery學習記錄
2022-11-23
jQuery
傳智黑馬java基礎學習——day18
2019-01-23
Java
如何高效的學習python？python學習技巧
2020-08-10
Python
學習 Java 語言，你必須知道的 Java 簡史
2021-03-27
Java
R資料分析：如何簡潔高效地展示統計結果
2022-06-04
完全開源可商用！一個簡潔、高效、安全的快速開發平臺！
2024-05-13
一款簡潔高效的輸入、截圖、劃詞翻譯軟體
2024-02-05
技術債！怎樣簡潔高效的實現多個 Enum 自由轉換
2020-10-21
如何高效學習
2018-05-22
jQuery 學習筆記：jQuery 程式碼結構
2018-05-07
jQuery筆記
初步學習jQuery之事件
2019-02-16
jQuery事件
Jquery學習筆記（一）
2018-08-18
jQuery筆記
jQuery原始碼學習之$()
2018-07-21
jQuery原始碼
jQuery學習筆記03
2020-09-27
jQuery筆記

Java學習-18 簡潔高效的jQuery

Java學習-18 簡潔高效的jQuery

1、jQuery是什麼？

2、怎麼使用jQuery？

3、jQuery選擇器

3.1、基本選擇器

3.2、層級選擇器

3.3、基本篩選器

3.4、內容選擇器

3.5、屬性選擇器

3.6、子元素選擇器

3.7、表單選擇器

4、jQuery屬性

4.1、屬性操作

4.2、CSS類操作

4.3、HTML文字與值操作

5、CSS樣式

6、jQuery 物件訪問

7、文件處理

8、特效

1、簡訊牆效果：

2、樹形選單：

3、滑動選項卡：

4、導航欄效果：

9、事件處理

1、one和trigger

2、滑鼠事件

3、重寫放大鏡效果

4、重寫拖動效果

5、阻止事件冒泡

10、一些小問題的總結

1、防止動畫鬼畜

2、px不要忘

3、offset和pageX，pageY

4、內部插入，外部插入

5、index和eq

11、牛刀小試

1、程式碼

2、總結

1、$

2、$中的選擇器字串也可以用+拼接

相關文章