從0到1~jQuery入門基礎(t286-t305)

2021-02-19 碼農新勢力 
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        p{            margin: 6px 0;        }</style>    <script src="../js/jquery-3.5.1.js"></script>    <script>                        $(function () {            $("#wrapper").hover(function () {                $(this).find(".select").css("color","blue");            },function () {                $(this).find(".select").css("color","black");            });        });
        
</script></head><body><div id="wrapper">    <p>子元素</p>    <p class="select">子元素</p>    <div>        <p>孫元素</p>        <p class="select">孫元素</p>    </div>    <p>子元素</p>    <p class="select">子元素</p></div></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css"></style>    <script src="../js/jquery-3.5.1.js"></script>    <script>                        $(function () {           $("#sel").prev().css("color","blue");        });
        

</script></head><body>    <ul>        <li>紅：red</li>        <li>橙：orange</li>        <li>黃：yellow</li>        <li id="sel">綠：green</li>        <li>青：cyan</li>        <li>藍：blue</li>        <li>紫：purple</li>    </ul></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css"></style>    <script src="../js/jquery-3.5.1.js"></script>    <script>                        $(function () {            $("#sel").prevUntil("#end").css("color","blue");        });
        


</script></head><body><ul>    <li id="end">紅：red</li>    <li>橙：orange</li>    <li>黃：yellow</li>    <li id="sel">綠：green</li>    <li>青：cyan</li>    <li>藍：blue</li>    <li>紫：purple</li></ul></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/jquery-3.5.1.js"></script>    <script>                        $(function () {            $("#sel").next().css("color","blue");        });
        

</script></head><body><ul>    <li>紅：red</li>    <li>橙：orange</li>    <li>黃：yellow</li>    <li id="sel">綠：green</li>    <li>青：cyan</li>    <li>藍：blue</li>    <li>紫：purple</li></ul></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/jquery-3.5.1.js"></script>    <script>                        $(function () {            $("#sel").nextAll().css("color","blue");        });
        

</script></head><body><ul>    <li>紅：red</li>    <li>橙：orange</li>    <li>黃：yellow</li>    <li id="sel">綠：green</li>    <li>青：cyan</li>    <li>藍：blue</li>    <li>紫：purple</li></ul></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/jquery-3.5.1.js"></script>    <script>                        $(function () {            $("#sel").nextUntil("#end").css("color","blue");        });
        


</script></head><body><ul>    <li>紅：red</li>    <li>橙：orange</li>    <li>黃：yellow</li>    <li id="sel">綠：green</li>    <li>青：cyan</li>    <li>藍：blue</li>    <li id="end">紫：purple</li></ul></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/jquery-3.5.1.js"></script>    <script>                        $(function () {           $("#sel").siblings().css("color","blue");        });</script></head><body>    <ul>        <li>紅：red</li>        <li>橙：orange</li>        <li>黃：yellow</li>        <li id="sel">綠：green</li>        <li>青：cyan</li>        <li>藍：blue</li>        <li>紫：purple</li>    </ul></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/jquery-3.5.1.js"></script>    <script>                        $(function () {            $("#sel").siblings(".select").css("color","blue");        });
        

        




</script></head><body><ul>    <li>紅：red</li>    <li class="select">橙：orange</li>    <li>黃：yellow</li>    <li id="sel">綠：green</li>    <li>青：cyan</li>    <li class="select">藍：blue</li>    <li>紫：purple</li></ul></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/jquery-3.5.1.js"></script>    <script>                        $(function () {           var str = " 學習jQuery編程技術 ";           document.writeln("開始長度：" + str.length + "<br>");           var str = $.trim(str);           document.writeln("trim長度：" + str.length);        });
        


</script></head><body>
</body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/jquery-3.5.1.js"></script>    <script>                        $(function () {           var person = {               name:"tom",               age:33           };
           var str = $.param(person);           alert(str);        });</script></head><body>
</body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/jquery-3.5.1.js"></script>    <script>                        $(function () {           var arr = [11,22,33,44,55];           var index = $.inArray(33,arr);           if(index == -1)           {               alert("沒有找到元素");           }           else           {               alert("元素下標為：" + index);           }        });        </script></head><body>
</body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/jquery-3.5.1.js"></script>    <script>                        $(function () {            var frontEnd = ["HTML","CSS","Javascript"];            var backEnd = ["PHP","JSP","ASP.NET"];            var result = $.merge(frontEnd,backEnd);            document.writeln(result);        });</script></head><body>
</body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/jquery-3.5.1.js"></script>    <script>                                function test() {            var arr = $.makeArray(arguments);            alert(arr);        }        test("yes",1,{});        
</script></head><body>
</body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/jquery-3.5.1.js"></script>    <script>                                $(function () {           var arr = $.makeArray($("li"));           $("ul").html(arr.reverse());        });
        
</script></head><body>    <ul>        <li>HTML</li>        <li>CSS</li>        <li>Javascript</li>        <li>jQuery</li>        <li>Vue.js</li>    </ul></body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/jquery-3.5.1.js"></script>    <script>                                $(function () {           var arr = [3,9,1,12,50,21];           var result = $.grep(arr,function (value, index) {                return value > 10;           },false);           alert(result);        });        
</script></head><body>
</body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/jquery-3.5.1.js"></script>    <script>                        $(function () {           var a = [3,9,1,12,50,21];           var b = [2,9,1,16,50,32];           var result = $.grep(a,function (value, index) {               if(b.indexOf(value) >= 0)               {                   return true;               }           },false);           alert(result);        });
        
</script></head><body>
</body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/jquery-3.5.1.js"></script>    <script>                        $(function () {           var arr = ["HTML","CSS","Javascript"];           $.each(arr,function (index,value) {               var result = "下標：" + index + "，值：" + value + "<br>";               document.writeln(result);           })        });        
</script></head><body>
</body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/jquery-3.5.1.js"></script>    <script>                        $(function () {           var arr = ["HTML","CSS","Javacript"];           $.each(arr,function (index,value) {               var result = value.split("").reverse().join("");               arr[index] = result;           });           document.writeln(arr);        });</script></head><body>
</body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/jquery-3.5.1.js"></script>    <script>        $(function () {           var person = {               name:"tom",               age : 28,               hobby: "football"           };           $.each(person,function (key, value) {               document.writeln(key + "=" + value + "<br>");           })        });
        


</script></head><body>
</body></html>
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/jquery-3.5.1.js"></script>    <script>        $(function () {            var person = {                name:"tom",                age : 28,                hobby: "football"            };            $.each(person,function (key, value) {                document.writeln(key + "=" + person[key] + "<br>");            })        });        


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

相關焦點

  • 從零開始,DIY一個jQuery(1)
    另外，本系列的相關代碼均可以從 我的github 上獲取到。1.於是乎以上就是咱寫的第一個 JQ 雛形，簡單跑一下：<div></div><script>    var $div = $('div');  //<div></div>    console.log($div.jquery);  //0.0.1</script
  • Jquery >>> 002
    可見，索引值是從1開始的，前面我們說過一個是從0開始的。那為什麼有的是從0開始，有的從1開始呢？？？因為jQuery中的:nth-child(n)是嚴格來自CSS規範，所以n的取值是1號索引，也就是說，從1開始計數。對於所有其他選擇器表達式，jQuery遵循javascript的0號索引的計數。案例2：nth-child(2n)
  • 前端JQuery知識體系詳解
    從CDN中載入jQuery// 百度<head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></head>// 谷歌<head><script src=
  • jQuery(一)選擇器
    1.2 jQuery的引用：    1.可以通過官網下載jquery.min.js,接著引用      2.引用在線連結　<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"
  • jquery mootools - CSDN
    <script type="text/javascript" src="moo1.2.4.js"></script><script type="text/javascript" src="jquery-1.4.js"></script><script type
  • 入門基礎|《基礎蛋糕體入門2.0》蛋糕體的主謂賓
    luotianshipin】經微信公眾號授權轉載，如需轉載與原文作者聯繫落甜課程體系中最重要的課程新手最值得學習的課程日常提問量最多的課程課程升級↑原課程《基礎蛋糕體入門1.0》共7集，講解的蛋糕體包括：天使蛋糕、分蛋海綿蛋糕、全蛋海綿蛋糕、戚風蛋糕、磅蛋糕、輕乳酪蛋糕。
  • jQuery animate動畫精講
    -1.11.2.js"></script><script src="model/js/jquery.color.js"></script><style>.btn {height: 50px;line-height: 50px;font-size: 32px;
  • jquery 三級聯動插件專題及常見問題 - CSDN
    下面我來介紹下開發的過程：1、 首先，我們需要構思好自己需要的什麼樣子的東西，然後根據圖紙，先定好樣式和基本模型。我自己設計的頁面如下：好了，下面我就來設計這樣的jquery插件吧。2、引入jquery，創建方法我在頁面中使用的是外部連結，https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js 然後我們來創建一個js文件，命名為 select.js，並引入到頁面中。
  • 小夥子這是一本從0基礎到編曲入門的到秘籍
    還有些就從入門到放棄那就整理一份讓你從0基礎到編曲的手冊吧選擇好需要用的編曲宿主這只是一個工具真的不要糾結誰說fl stuido比較好上手，cubase比較專業之類的屁話這只是一個工具，哪個趁手用哪個選擇宿主主要看你個人習慣還有你買得起哪一個～你足夠厲害可以在紙上寫總譜也完全沒問題的
  • 26個最棒的 jQuery 日期時間選擇器
    jQuery 日期時間選擇插件允許您將datepicker功能添加到您的網站,提供更好的用戶體驗。
  • 前端之jQuery
    jQuery對象jQuery對象是通過jQuery包裝DOM對象後產生的對象注意：jQuery對象只能使用jQuery裡的方法，DOM對象只能使用DOM對象的方法jQuery基礎知識點查找標籤: S.fn.init(1)]$('ul li:has(#l1)')S.fn.init [prevObject: S.fn.init(1)]length: 0prevObject: S.fn.init [document]__proto__: Object(0)$('ul li:not(.cl1)')S.fn.init(9) [li, li, li, li, li, li#l1, li, li, li
  • 自學原畫應該怎麼入門?0基礎怎樣學習原畫?
    自學原畫應該怎麼入門？ 0基礎怎樣學習原畫？一切的開始都應該是興趣驅動，繪畫入門是非常關鍵的，尤其是對於零基礎的人來說，因為你沒有接受過系統的訓練，你需要以基礎為起始點，循序漸進的學習，這個過程就是繪畫的樂趣，陶醉於自己腦海之中，完成一幅畫的成就感，不斷進步的喜悅，這就是最大的收穫。
  • jQuery 選擇器
    當我們在教程中演示 jQuery 時，會將函數直接添加到 <head> 部分中。不過，把它們放到一個單獨的文件中會更好，就像這樣（通過 src 屬性來引用文件）：實例<head> <scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" rel="external nofollow" > </script
  • JQuery如何阻止事件冒泡
    對應的jQuery代碼如下： <script type="text/JavaScript" src="js/jquery-1.8.3.js">修改如下：<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){
  • jQuery插件編寫步驟詳解
    分享給大家供大家參考，具體如下：如今做web開發，jquery 幾乎是必不可少的，就連vs神器在2010版本開始將Jquery 及ui 內置web項目裡了。至於使用jquery好處這裡就不再贅述了，用過的都知道。
  • 0基礎怎麼學插畫繪畫?插畫入門必備教程
    0基礎怎麼學插畫繪畫？插畫入門必備教程！在微課菌看來，沒有什麼事情是可以速成的。畫畫就是一個慢過程，找到你自已的頻率去堅持，也許一天兩天你收穫的細微，兩三個月也只是皮毛，但時間久了，你就會有自已的風格，找到屬於自已的路！
  • (進階篇)一款基於jQuery的QQ表情插件
    今天和大家分享一款基於jQuery的QQ表情插件，您可以輕鬆將其應用到你的項目中。首先在html頁面的head中引入jQuery庫文件和QQ表情插件jquery.qqFace.js文件。<script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="jquery.qqFace.js"></script> 然後在body中加入以下html
  • 每個程式設計師都會的 35 個 jQuery 小技巧
    1.在新窗口中打開連結XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid.
  • JQuery 實現頁面跳轉
    pagenum="+pn;});實例2:實現跳轉：window.location = 'user!add.action?id=1',   type:"POST",   cache : false,   dataType : "json",   data : {activityId:activityId.val()},   success:function(data) {        alert("請求成功");
  • JQuery高級
    ## JQuery 高級1. 動滑    1. 三種方式顯示和隱藏元素        1.