天天看點
傳回

04-前端技術_簡潔高效的jQuery

目錄

​​一，jQuery介紹與基本使用​​

​​1，下載下傳​​

​​2，使用​​

​​二，jQuery選擇器​​

​​1，基本選擇器​​

​​2，層級選擇器​​

​​3，基本篩選器​​

​​4，内容選擇器​​

​​5，屬性選擇器​​

​​6，子元素選擇器​​

​​7，表單選擇器​​

​​三，jQuery屬性​​

​​1，屬性操作​​

​​2，CSS類操作​​

​​3，HTML文本與值操作​​

​​四，jQuery中的CSS樣式操作​​

​​1，CSS​​

​​2，位置​​

​​3，尺寸​​

​​五，jQuery節點周遊​​

​​六，jQuery文檔處理​​

​​1，内部插入（針對子節點）​​

​​2，外部插入（針對同級節點）​​

​​3，節點删除​​

​​七，jQuery效果展示​​

​​1，顯示與隐藏​​

​​1.1 基本​​

​​1.2 滑動​​

​​1.3 淡入淡出​​

​​1.4 自定義​​

​​2，短信牆​​

​​3，樹形菜單​​

​​4，頁籤​​

​​5，導航欄​​

​​八，jQuery事件處理​​

​​1，事件處理​​

​​2，滑鼠移入與移出事件​​

​​2，圖檔放大鏡​​

​​3，拖動效果​​

​​4，阻止事件冒泡​​

一，jQuery介紹與基本使用

參考手冊​​jQuery API中文手冊​​

jQuery是一個JavaScript庫，極大的簡化了JavaScript的程式設計。

jQuery主要用于PC端程式設計，雖然移動端程式設計正十分流行，但PC端仍閱聽人廣泛。

1，下載下傳

jQuery官網​​https://jquery.com/​​

點選下載下傳，有兩種選擇，壓縮版和未壓縮版。

04-前端技術_簡潔高效的jQuery

将其放在代碼所在目錄中就可以了：（min是壓縮後的，也就是删除空白和注釋。一般使用min，因為一般是加載到用戶端運作，是以越小速度越快）

04-前端技術_簡潔高效的jQuery

2，使用

1）先将檔案放在HTML檔案所在目錄；

2）在HTML文檔頭部添加引用：

04-前端技術_簡潔高效的jQuery

3）如果将JavaScript代碼寫在前面，有三種方式：

方式一：使用window的onload

04-前端技術_簡潔高效的jQuery

方式二：标準入口

04-前端技術_簡潔高效的jQuery

方式三：簡潔入口

04-前端技術_簡潔高效的jQuery

二，jQuery選擇器

1，基本選擇器

  • ​​#id​​（id選擇器）
  • ​​element​​（标簽選擇器）
  • ​​.class​​（類選擇器）
  • ​​*​​（全選）
  • ​​selector1,selector2,selectorN​​（選擇器組）

舉例：列舉幾種基本選擇器的使用方法。

<!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入口（雖然js語句在下面 但是習慣性的加上入口函數）
        $(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>

2，層級選擇器

  • ​​ancestor descendant​​（所有子元素節點）
  • ​​parent > child​​（所有直接子元素節點）
  • ​​prev + next​​（同級緊鄰後的第一個節點）
  • ​​prev ~ siblings​​（後面所有同級兄弟節點）

舉例：列舉層級選擇器的使用

<!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，基本篩選器

  • ​​:first​​（第一個）
  • ​​:not(selector)​​
  • ​​:even​​（偶數）
  • ​​:odd​​（奇數）
  • ​​:eq(index)​​（索引位置）
  • ​​:gt(index)​​（大于給定索引值元素）
  • ​​:lang​​1.9+
  • ​​:last​​
  • ​​:lt(index)​​（小于給定索引值元素）
  • ​​:header​​
  • ​​:animated​​（正在執行動畫效果的元素）
  • ​​:focus​​
  • ​​:root​​1.9+
  • ​​:target​​1.9+

舉例：列舉基本篩選器的用法

<!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>

4，内容選擇器

  • ​​:contains(text)​​（效率不高）
  • ​​:empty​​
  • ​​:has(selector)​​
  • ​​:parent​​
  • ​​:hidden​​
  • ​​:visible​​

舉例：列舉常用内容選擇器用法

<!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>

5，屬性選擇器

  • ​​[attribute]​​（含有特定屬性值的）
  • ​​[attribute=value]​​（屬性值為特定值）
  • ​​[attribute!=value]​​
  • ​​[attribute^=value]​​（以value開頭）
  • ​​[attribute$=value]​​（以value結尾）
  • ​​[attribute*=value]​​（屬性值中含有value）
  • ​​[attrSel1][attrSel2][attrSelN]​​（複合選擇器）

舉例： 列舉屬性選擇器用法

<!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>

6，子元素選擇器

  • ​​:first-child​​（第一個）
  • ​​:first-of-type​​1.9+
  • ​​:last-child​​（最後一個）
  • ​​:last-of-type​​1.9+
  • ​​:nth-child​​（第n個）
  • ​​:nth-last-child()​​1.9+
  • ​​:nth-last-of-type()​​1.9+
  • ​​:nth-of-type()​​1.9+
  • ​​:only-child​​
  • ​​:only-of-type​​1.9+

舉例：常用子元素選擇器使用

<!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>

7，表單選擇器

  • ​​:input​​
  • ​​:text​​
  • ​​:password​​
  • ​​:radio​​
  • ​​:checkbox​​
  • ​​:submit​​
  • ​​:image​​
  • ​​:reset​​
  • ​​:button​​
  • ​​:file​​

舉例：表單選擇器的使用

<!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>

三，jQuery屬性

1，屬性操作

  • ​​attr(name|pro|key,val|fn)​​
  • ​​removeAttr(name)​​
  • ​​prop(n|p|k,v|f)​​
  • ​​removeProp(name)​​

舉例：簡單用例實作

<!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")); //擷取（類似于XML）
            console.log(a.prop("href")); //擷取（類似于HTML）
            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>

2，CSS類操作

  • ​​addClass(class|fn)​​（添加屬性）
  • ​​removeClass([class|fn])​​（删除屬性）
  • ​​toggleClass(class|fn[,sw])​​（有則删除，無則添加）

舉例：通過CSS類操作，實作點選添加屬性，再次點選取消屬性的效果。

<!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>

3，HTML文本與值操作

不帶參數是擷取，帶參是更新值。

  • ​​html([val|fn])​​
  • ​​text([val|fn])​​
  • ​​val([val|fn|arr])​​

舉例：簡單展示這些屬性的使用方法。

<!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>

舉例：綜合實作多選框的全選/全不選/反選

<!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 "全選":
                        //擷取所有多選框并設定選中（prop不會出現浏覽器不相容問題）
                        $("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>

四，jQuery中的CSS樣式操作

1，CSS

  • ​​css(name|pro|[,val|fn])​​1.9*
  • ​​jQuery.cssHooks​​

2，位置

  • ​​offset([coordinates])​​
  • ​​position()​​
  • ​​scrollTop([val])​​
  • ​​scrollLeft([val])​​

3，尺寸

  • ​​height([val|fn])​​
  • ​​width([val|fn])​​
  • ​​innerHeight()​​
  • ​​innerWidth()​​
  • ​​outerHeight([options])​​
  • ​​outerWidth([options])​​

舉例：通過jQuery實作對頁面元素相關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>

五，jQuery節點周遊

舉例：通過each方法實作節點周遊，使每個li元素的值乘以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>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>

六，jQuery文檔處理

1，内部插入（針對子節點）

  • ​​append(content|fn)​​
  • ​​appendTo(content)​​
  • ​​prepend(content|fn)​​
  • ​​prependTo(content)​​

舉例：實作文檔内容的前添加（prepend，prependto）/後追加（append，appendto）

04-前端技術_簡潔高效的jQuery
<!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>

2，外部插入（針對同級節點）

  • ​​after(content|fn)​​
  • ​​before(content|fn)​​
  • ​​insertAfter(content)​​
  • ​​insertBefore(content)​​

舉例：實作同級節點的前添加和後添加

04-前端技術_簡潔高效的jQuery
<!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>

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{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>

七，jQuery效果展示

1，顯示與隐藏

1.1 基本

  • ​​show([s,[e],[fn]])​​
  • ​​hide([s,[e],[fn]])​​
  • ​​toggle([s],[e],[fn])​​

1.2 滑動

  • ​​slideDown([s],[e],[fn])​​
  • ​​slideUp([s,[e],[fn]])​​
  • ​​slideToggle([s],[e],[fn])​​

1.3 淡入淡出

  • ​​fadeIn([s],[e],[fn])​​
  • ​​fadeOut([s],[e],[fn])​​
  • ​​fadeTo([[s],o,[e],[fn]])​​
  • ​​fadeToggle([s,[e],[fn]])​​

1.4 自定義

  • ​​animate(p,[s],[e],[fn])​​1.8*
  • ​​stop([c],[j])​​1.7*（先清除之前的動畫效果，再添加新的動畫）
  • ​​delay(d,[q])​​
  • ​​finish([queue])​​1.9+

舉例：通過按鈕實作圖檔的顯示與隐藏效果

04-前端技術_簡潔高效的jQuery
<!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/03.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>

2，短信牆

舉例：簡單實作新消息出現時向上/向下滾動舊消息的特效

04-前端技術_簡潔高效的jQuery
<!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>

3，樹形菜單

舉例：實作簡單的樹形菜單，點選顯示，再次點選隐藏

04-前端技術_簡潔高效的jQuery
<!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>

4，頁籤

舉例：滑鼠移動到不同頁籤展示不同的頁面

04-前端技術_簡潔高效的jQuery
<!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>

5，導航欄

舉例：滑鼠移到相應标簽時，動畫展示對應菜單

04-前端技術_簡潔高效的jQuery
<!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>

八，jQuery事件處理

1，事件處理

  • ​​on(eve,[sel],[data],fn)​​1.7+
  • ​​off(eve,[sel],[fn])​​1.7+
  • ​​bind(type,[data],fn)​​3.0-
  • ​​one(type,[data],fn)​​（一次性事件）
  • ​​trigger(type,[data])​​（激發事件）
  • ​​triggerHandler(type, [data])​​
  • ​​unbind(t,[d|f])​​3.0-

舉例：通過點選按鈕實作一次性事件、事件激發功能。

04-前端技術_簡潔高效的jQuery
<!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，滑鼠移入與移出事件

舉例：滑鼠放在不同的小圖示上，可以将對應的大圖示展示出來。（滑鼠移入移出兩種方法：mouseover/mouseout，hover）

04-前端技術_簡潔高效的jQuery
<!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>

2，圖檔放大鏡

舉例：實作圖檔放大鏡效果。

  • 準備一張大圖和縮小版的尺寸，當滑鼠在縮略圖上移動時，顯示大圖對應的位置；
  • 滑鼠移入時，确定放大顯示區域的位置；
  • 滑鼠移出時，放大區域隐藏；
  • 滑鼠移動時，根據放大倍數和圖檔尺寸調整放大區域的顯示；
04-前端技術_簡潔高效的jQuery
04-前端技術_簡潔高效的jQuery
<!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/44.jpg" width="384" height="240"/>
    <div id="did">
        <img src="./images/44.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;
                //設定放大鏡圖層的滾動位置（*5是因為原圖為放大5倍的效果，-150是為了居中）
                $("#did").scrollLeft(x*5-150).scrollTop(y*5-150);
            });
        });
       
    </script>
</body>
</html>

3，拖動效果

舉例：通過定位滑鼠在圖檔上的位置，使得移動過程中始終保持一緻。

04-前端技術_簡潔高效的jQuery
04-前端技術_簡潔高效的jQuery
<!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>

4，阻止事件冒泡

有時在一個div塊上疊加了多個按鈕，當按下其中一個時，其後的按鈕也被觸發了，可以通過stopPropagation阻止事件冒泡；

04-前端技術_簡潔高效的jQuery
04-前端技術_簡潔高效的jQuery
<!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>
前端技術 簡潔高效的jQuery Java開發工程師 jquery css
上一篇: 微信小程式中自定義導航和地圖定位
下一篇: Spring Boot Mysql 資料庫操作

繼續閱讀