jquery學習

時間 2019-11-10

標籤 jquery 學習欄目 JQuery 简体版

原文原文鏈接

一、jquery簡介

比如類庫，工具類，封裝了大量js代碼。js的bug，不足，兼容性好。javascript

jQuery是一個快速，小巧，功能豐富的JavaScript庫。
它經過易於使用的API在大量瀏覽器中運行，
使得HTML文檔遍歷和操做，事件處理，動畫和Ajax變得更加簡單。經過多功能性和可擴展性的結合，jQuery改變了數百萬人編寫JavaScript的方式。
操做: 獲取節點元素對象，屬性操做，樣式操做，類名，節點的建立，刪除，添加，替換
jquery核心：write less,do morecss

二、bootstrip簡介

搜索bootstrap，官網比較慢http://www.bootcss.com/html

使用cdn外頁，百度搜索bootcdn的中文網vue

好比咱們經常寫的導航，搜索框，輪廓圖，側邊欄等等都被叫作組件，封裝在框架中.裏面既有html結構，又有css樣式。java

這裏面有它全部的類名：jquery

進入下面的網頁：編程

起步：bootstrap

基本模板：api

https://v3.bootcss.com/getting-started/#template數組

https://v3.bootcss.com/components/

這頁有以下組件：

[root@xiaoma ~]# egrep "<h2.*>(.*)</h2>" index.html |sed -nr "s#.*>(.*)<.*#\1#p"
全部可用的圖標
如何使用
實例
實例
對齊
標題
分割線
禁用的菜單項
基本實例
按鈕工具欄
尺寸
嵌套
垂直排列
兩端對齊排列的按鈕組
單按鈕下拉菜單
分裂式按鈕下拉菜單
尺寸
向上彈出式菜單
基本實例
尺寸
做爲額外元素的多選框和單選框
做爲額外元素的按鈕
做爲額外元素的按鈕式下拉菜單
做爲額外元素的分裂式按鈕下拉菜單
Multiple buttons
標籤頁
膠囊式標籤頁
兩端對齊的標籤頁
禁用的連接
添加下拉菜單
默認樣式的導航條
品牌圖標
表單
按鈕
文本
非導航的連接
組件排列
固定在頂部
固定在底部
靜止在頂部
反色的導航條
默認分頁
翻頁
實例

可用的變體
默認樣式的實例
自定義內容
實例
可關閉的警告框
警告框中的連接
基本實例
帶有提示標籤的進度條
根據情境變化效果
條紋效果
動畫效果
堆疊效果
默認樣式
對齊
媒體對象列表
基本實例
徽章
連接
按鈕
被禁用的條目
情境類
定製內容
基本實例
帶標題的面版
帶腳註的面版
情境效果
帶表格的面版
帶列表組的面版
默認效果
可選類/樣式

將以前的模板裏的世界你好替換掉：

效果：

而後對源碼進行修改，變成本身想要的樣子。

本身建立一個container，已經生成這麼寬的大小了。

樣式中它已經給設置好了：

想讓他百分之百：類名container-fluid

<div class="container-fluid" style="background-color: red;height: 400px">小馬過河</div>

使用bt的優缺點。

bt和vue不利於seo優化，適合本身內部用，開發速度快。
原生的利於seo.

下面這種網頁通常是bt搭建的。

三、 jquery基礎

3.一、下載jquery庫

jquery.js開發環境用的js jquery.min.js是生成環境用的模塊

生產環境裏面變成了一行。簡寫了代碼佔的空間，開發環境不少行展開，方便寫代碼

複製庫連接，訪問複製文件內容，粘貼到新建的js目錄下的jquery.js文件中。

由下可看到壓縮成一行後，空間節省了不少。優化也能夠給圖片優化。

源碼：自執行函數:

傳進實參，形參global, factory。

global指的是window。

非嚴格模式下函數中的this：

function f() {
    console.log(this);
}
f()
-------------------結果：
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

嚴格模式下函數中的this：

function f() {
    'use strict';
    console.log(this ,typeof this);
}
f();
------------結果：
undefined "undefined"

函數中的this指向window對象，能夠重寫window對象上的某些屬性。防止意外修改window屬性，使用嚴格模式，這樣this未定義，給未定義賦值變量就報錯了。框架通常用的是嚴格模式

以下圖寫函數，返回一個對象。jquery做爲一個全局的變量。後面都是給這個對象封裝大量的方法

看下面：若是是全局（不是否是全局），即將jquery引入全局做用域下。就會將jquery賦值給window對象下的$，又賦值給window.jQuery 。

這樣在外面使用就能夠用$代指jquery對象。

<body>
   <div ></div>
   <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
   <script type="text/javascript">
      console.log($);    //$僞數組
      console.log(jQuery);
      console.log(window);
   </script>

點擊這個對象跳轉到source，找到函數所在的地方：

看這個$對象的方法：

    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
    <script type="text/javascript">
        console.dir($);
    </script>

    <script type="text/javascript">
        console.log(typeof $,$);
        console.log(this);
    </script>

四、基礎選擇器

4.一、jquery對象轉爲js對象

<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="box" class="box" >小馬過河</div>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
    <script type="text/javascript">
        console.log($('.box'));
    </script>
</body>
</html>

跟原生js獲取的不同，給jquery對象封裝了大量方法。獲取的標籤組成僞數組，最後是個length。可切片獲取。裏面封裝的方法不是數組的方法。

    <div id="box" class="box" >小馬過河</div>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
    <script type="text/javascript">
        console.log($('.box'));
  console.log($('#box')[0]);
        console.log($('.box')[0]);
    </script>

切片獲取到的第一個標籤對象。

$('.box') #jquery對象

$('#box')[0] #jquery對象轉換爲js對象

4.二、js對象轉爲jquery對象 $(js對象）

jquery只是封裝了一部分js的api，有些沒有封裝的時候就要轉換爲js對象，用js來寫jquery沒有封裝的模塊

    <div id="box" class="box" >小馬過河</div>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
    <script type="text/javascript">
        var  box=document.getElementById('box')
        console.log($(box));
        console.log(box);
    </script>

$(box)  jquery對象

box　　　　js對象

    <div id="box" class="box" >小馬過河</div>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
    <script type="text/javascript">
        var  box=document.getElementById('box')
        console.log($(box),typeof  $(box));
        console.log(typeof box);
        console.log(box);
    </script>

4.三、後代選擇器

<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="box" class="box" >
        <p class="active">魔降風雲變1</p>
        <p class="active">魔降風雲變2</p>
    </div>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
    <script type="text/javascript">
        console.log($('#box>p'));
    </script>
</body>
</html>

'#box p' '#box>p' 包括css交集選擇器，組合選擇器都能選中。哪怕只選中一個，也是僞數組形式顯示的。若是想要取值的話，[0]第一個，[1]第二個

4.四、屬性選擇器

<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="box" class="box" >
        <p class="active">魔降風雲變1</p>
        <p class="active">魔降風雲變2</p>
        <input type="text">
    </div>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
    <script type="text/javascript">
        console.log($('input[type=text]'));
    </script>
</body>
</html>

text也能夠不用寫引號。包括僞類，僞元素，就是以前css怎麼選的這裏怎麼寫就行。

    console.log($('input[type=submit]'));

改了下類型。若是打印的裏面沒有值，說明沒有獲取出對象：

4.五、綁定click事件

<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="box" class="box" >
        <p class="active">魔降風雲變1</p>
        <p class="active">魔降風雲變2</p>
        <input type="text">
    </div>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
    <script type="text/javascript">
        $('#box .active').click(function () {
            console.log("1");
        })
    </script>
</body>
</html>

我在瀏覽器上點擊兩個標籤裏的文本，點擊一次打印統計數加一。若是是js，是須要對着兩個標籤作for循環的，而jquery綁定事件省去了循環。jquery已經給咱們寫好了。

jq只需選中元素，綁定事件名，來個回調函數，在裏面作相應的事情。

4.六、this指向以及jq修改樣式

<div id="box" class="box" >
   <p class="active">魔降風雲變1</p>
   <p class="active">魔降風雲變2</p>
   <input type="text">
</div>
<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
<script type="text/javascript">
   $('#box .active').click(function () {
      console.log(this);
   })
</script>

點擊兩下，查看打印的this是js對象。jquery內部經過call和apply方法給咱們改變了指向。把this指向了當前節點對象，且是js對象

這樣的話，用this能夠操做節點對象的屬性等

    <script type="text/javascript">
        $('#box .active').click(function () {
            console.log(this.className);
        })
    </script>

若是沒有打印，多是你忘記打印了。

那麼使用js轉換爲jq的方法，使用jq操做對象：$(this) //事件函數中的這個this是每一個js節點對象

設置單個屬性

    <div id="box" class="box" >
        <p class="active">魔降風雲變1</p>
        <p class="active">魔降風雲變2</p>
        <input type="text">
    </div>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
    <script type="text/javascript">
        $('#box .active').click(function () {
            $(this).css("color","red")
        })
    </script>

點擊變紅。css樣式添加和修改： $(this).css('屬性','值')

    <div id="box" class="box" >
        <p class="active">魔降風雲變1</p>
        <p class="active">魔降風雲變2</p>
        <input type="text">
    </div>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
    <script type="text/javascript">
        $('#box .active').click(function () {
    $(this).css("color","red")
            $(this).css("color","blue")
            $(this).css("font-size",'20px')
        })
    </script>

同屬性的會覆蓋，不一樣屬性的屢次設置互不影響。帶-的屬性font-size 也能夠用駝峯體去- 後一變大fontSize

1         $('#box .active').click(function () {
2             $(this).css({
3                 "color": "red",
4                 'fontSize':'20px'
5             });
6         })

轉化爲jquery的每一個元素對象.css()，小中花，花中多個逗號隔。冒號拼值

總結：經過調用.css()方法，（內部實行函數重載）
若是傳入一個參數，看一下這個參數若是是一個字符串表示獲取值，若是是對象，表示設置多少屬性值，若是是兩個參數，設置單個屬性值

4.七、基本過濾選擇器

圖片來源：https://www.cnblogs.com/majj/p/9112112.html

代碼以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //獲取ul中的li設置爲粉色
            //後代：兒孫重孫曾孫玄孫....
            var jqLi = $("ul li");
            jqLi.css("margin", 5);
            jqLi.css("background", "pink");

            //子代：親兒子
            var jqOtherLi = $("ul>li");
            jqOtherLi.css("background", "red");
        });
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
</ul>
</body>
</html>

效果以下：

五、基本過濾選擇器

解釋：

代碼以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本過濾選擇器</title>
    </head>
    <body>
        <ul>
            <li>哈哈哈哈，基本過濾選擇器</li>
            <li>嘿嘿嘿</li>
            <li>天王蓋地虎</li>
            <li>小雞燉蘑菇</li>
            
        </ul>
    </body>
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
            //獲取第一個 :first ,獲取最後一個 :last
            
            //奇數
            $('li:odd').css('color','red');
            //偶數
            $('li:even').css('color','green');
            
            //選中索引值爲1的元素 *
            $('li:eq(1)').css('font-size','30px');
            
            //大於索引值1
            $('li:gt(1)').css('font-size','50px');
            
            //小於索引值1
            $('li:lt(1)').css('font-size','12px');
            
            
            
            
        })
        
        
    </script>
</html>

效果以下：

六、屬性選擇器

代碼以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <div id="box">
            <h2 class="title">屬性元素器</h2>
            <!--<p class="p1">我是一個段落</p>-->
            <ul>
                <li id="li1">分手應該體面</li>
                <li class="what" id="li2">分手應該體面</li>
                <li class="what">分手應該體面</li>
                <li class="heihei">分手應該體面</li>

            </ul>

            <form action="" method="post">

                <input name="username" type='text' value="1" checked="checked" />
                <input name="username1111" type='text' value="1" />
                <input name="username2222" type='text' value="1" />
                <input name="username3333" type='text' value="1" />
                <button class="btn-default">按鈕1</button>
                <button class="btn-info">按鈕1</button>
                <button class="btn-success">按鈕1</button>
                <button class="btn-danger">按鈕1</button>


            </form>
        </div>
    </body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
            //標籤名[屬性名] 查找全部含有id屬性的該標籤名的元素
            $('li[id]').css('color','red');
            
            //匹配給定的屬性是what值得元素
            $('li[class=what]').css('font-size','30px');
            //[attr!=value] 匹配全部不含有指定的屬性，或者屬性不等於特定值的元素
            $('li[class!=what]').css('font-size','50px');
            
            //匹配給定的屬性是以某些值開始的元素
            $('input[name^=username]').css('background','gray');
            //匹配給定的屬性是以某些值結尾的元素
            $('input[name$=222]').css('background','greenyellow');
            
            //匹配給定的屬性是以包含某些值的元素
            $('button[class*=btn]').css('background','red')
        
            
        })
    
    </script>
</html>

效果以下：

7.篩選選擇器

find

<ul>
   <li class="a">
      <a href="#">小馬過河</a>
   </li>
   <li class="b"></li>
   <li class="c"></li>
   <li class="d"></li>
</ul>
<script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
<script type="text/javascript">
   console.log($('ul'));  //
   console.log($('ul').find('li'));  //標籤選擇器
   console.log($('ul').find('li.b')); //交集選擇器li.b
   console.log($('ul').find('a')); //find 找子標籤
   console.log($('ul').find('li a')); //既選兒子又選孫
</script>

jq元素對象.children()

    <ul>
        <li class="a">
            <a href="#">小馬過河</a>
        </li>
        <li class="b">
            <p>mcw</p>
        </li>
        <li class="c"></li>
        <li class="d"></li>
    </ul>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
    <script type="text/javascript">
        console.log($('ul').children());
        console.log($('ul').children().children());
        console.log($('ul').children().children().children());

jq對象..parent(),屢次p。

    <ul>
        <li class="a">
            <a href="#">小馬過河</a>
        </li>
        <li class="b">
            <p>mcw</p>
        </li>
        <li class="c"></li>
        <li class="d"></li>
    </ul>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
    <script type="text/javascript">
        console.log($('a'));
        console.log($('a').parent());
        console.log($('a').parent().parent());
        console.log($('a').parent().parent().parent());
        console.log($('a').parent().parent().parent().parent());
        console.log($('a').parent().parent().parent().parent().parent());
        console.log($('a').parent().parent().parent().parent().parent().parent());
        console.log($('li.a').text());

獲取文檔，body，html

<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
    <style>
    </style>
</head>
<body>
    <ul>
        <li class="a">
            <a href="#">小馬過河</a>
        </li>
        <li class="b">
            <p>mcw</p>
        </li>
        <li class="c"></li>
        <li class="d"></li>
    </ul>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
    <script type="text/javascript">
        console.log(document,typeof document); //文檔
        console.log(document.body);  //body
        console.log(document.documentElement,typeof document.documentElement);  //html
        console.log(document.title,typeof document.title);
        console.log(document.head ,typeof document.head);
    </script>

^{7.二、兄弟方法應用：熱門卡片製做：多個選項，點擊誰就顯示誰的內容。}

先實現四個按鈕，默認一個被選中的狀態：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
    <style>
        button.active{
            color: red;
        }
    </style>
</head>
<body>
    <button class="active">熱門</button>
    <button>電視影音</button>
    <button>電腦</button>
    <button>傢俱</button>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
    <script type="text/javascript">

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

1）建立指定個button，其中一個默認有類名，類名對應有css樣式

下面實現點誰誰變紅：

    <script type="text/javascript">
           var  btns=document.getElementsByTagName('button')
        for(var i=0;i<btns.length;i++){
            btns[i].onclick=function () {
                this.className='active';
            }
        } 
    </script>

2）建立button標籤的DOM對象。

3）for循環每一個button對象

4）對每一個button對象添加點擊事件，點擊一下添加指定樣式的類名，擁有這個類名對應的樣式。

實現排他思想，有且只有一個標籤被選中

以下：

<script type="text/javascript">
      var  btns=document.getElementsByTagName('button')
   for(var i=0;i<btns.length;i++){
      btns[i].onclick=function () {
         for(var j=0;j<btns.length;j++){
            this.className='';
            console.log(this,this.innerHTML);
         }
         this.className='active';
         console.log(this,'wai')
      }
   }
</script>

沒有實現。外層三次循環。每次外層循環內層就作三次循環，三次設置this外層那個被點擊的內層循環的this是外層循環的this，打印的文本值一致。

改掉this

           var  btns=document.getElementsByTagName('button')
        for(var i=0;i<btns.length;i++){
            btns[i].onclick=function () {
                for(var j=0;j<btns.length;j++){
                    btns[j].className='';
                }
                this.className='active';
                console.log(this,'wai')
            }
        }

實現，點擊一個只選中一個：

5）排他思想，將點擊事件的標籤添加類名前其它的都設爲空字符串

6）for循環對每一個標籤對象設置爲空字符串

作卡包」：

    <style>
        button.active{
            color: red;
        }
 p{ display: none; } p.active{ display: block; } </style>
</head>
<body>
    <button class="active">熱門</button>
    <button>電視影音</button>
    <button>電腦</button>
    <button>傢俱</button>
    <p class="active">熱門</p>
    <p>電視影音</p>
    <p>電腦</p>
    <p>傢俱</p>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
    <script type="text/javascript">
           var  btns=document.getElementsByTagName('button')
        for(var i=0;i<btns.length;i++){
            btns[i].onclick=function () {
                for(var j=0;j<btns.length;j++){
                    btns[j].className='';
                }
                this.className='active';
            }
        }
    </script>

7）作四個卡包，按鈕有類名的css是紅色，有類名的卡包是顯示。卡包p標籤是display:none;

8）默認熱門按鈕有類名，默認熱門卡包有類名

卡包添加類名，得到樣式

           var  btns=document.getElementsByTagName('button')
        var  ops=document.getElementsByTagName('p')
        for(var i=0;i<btns.length;i++){
            btns[i].onclick=function () {
                for(var j=0;j<btns.length;j++){
                    btns[j].className='';
                    ops[j].className='';
                }
                this.className='active';
                ops[i].className='active';

            }
        }

報錯：緣由是ops[i]，i是循環後的最後一個i。因此應該將i保存起來

成功實現了：

    <script type="text/javascript">
           var  btns=document.getElementsByTagName('button')
        var  ops=document.getElementsByTagName('p')
        for(var i=0;i<btns.length;i++){
            btns[i].index=i;
            btns[i].onclick=function () {
                for(var j=0;j<btns.length;j++){
                    btns[j].className='';
                    ops[j].className='';
                }
                this.className='active';
                ops[this.index].className='active';

            }
        }
    </script>

9）給循環的每一個按鈕添加index索引，

10）當點擊事件發生而且將點擊過得按鈕添加有屬性的類名後，將索引爲按鈕的index索引的卡包（p標籤）添加有屬性的類名。這樣就實現了多個選項，點擊誰就顯示誰的內容。

方法二：

            for(let  i=0;i<btns.length;i++){
            btns[i].index=i;
            btns[i].onclick=function () {
                for(var j=0;j<btns.length;j++){
                    btns[j].className='';
                    ops[j].className='';
                }
                this.className='active';  //this代指得到點擊事件的對象
                ops[i].className='active';

            }
        }

將var變let，就可使用i了，let讓函數只在當前做用域下，局部做用域。

方法三 jq實現：

$('button').click(function () {

   $(this).addClass('active').siblings('button').removeClass('active');
   $('p').eq($(this).index()).addClass('active').siblings('p').removeClass('active');
})





  <script type="text/javascript">
           var  btns=document.getElementsByTagName('button')
        var  ops=document.getElementsByTagName('p')
        $('button').click(function () {
            console.log($(this).addClass('active')); //函數返回對象自己，而後能夠繼續執行方法
            console.log($(this).addClass('active').siblings('button')); //函數返回對象自己，而後能夠繼續調用方法。獲取兄弟節點對象，三個
            console.log($(this).addClass('active').siblings('button').removeClass('active')); //將三個兄弟節點對象的類移除。
            console.log($(this).index()); //獲取當前點擊事件對象的索引
            $('p').eq($(this).index()).addClass('active').siblings('p').removeClass('active');//將和點擊事件對象索引相同的p標籤添加類，其它的移除
        })
    </script>

鏈式編程，執行完方法能夠繼續執行這個類的方法，不斷循環。若是本身寫框架也能夠用鏈式編程

三種方法的源碼：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
    <style>
        button.active{
            color: red;
        }
        p{
            display: none;
        }
        p.active{
            display: block;
        }
    </style>
</head>
<body>
    <button class="active">熱門</button>
    <button>電視影音</button>
    <button>電腦</button>
    <button>傢俱</button>
    <p class="active">熱門</p>
    <p>電視影音</p>
    <p>電腦</p>
    <p>傢俱</p>
    <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script>
    <script type="text/javascript">
           var  btns=document.getElementsByTagName('button')
        var  ops=document.getElementsByTagName('p')

        //方法一
        // for(var i=0;i<btns.length;i++){
        //     btns[i].index=i;
        //     btns[i].onclick=function () {
        //         for(var j=0;j<btns.length;j++){
        //             btns[j].className='';
        //             ops[j].className='';
        //         }
        //         this.className='active';
        //         ops[this.index].className='active';
        //
        //     }
        // }
        //方法二：
        //     for(let  i=0;i<btns.length;i++){
        //     btns[i].index=i;
        //     btns[i].onclick=function () {
        //         for(var j=0;j<btns.length;j++){
        //             btns[j].className='';
        //             ops[j].className='';
        //         }
        //         this.className='active';
        //         ops[i].className='active';
        //
        //     }
        // }
        $('button').click(function () {
            $(this).addClass('active').siblings('button').removeClass('active');
            $('p').eq($(this).index()).addClass('active').siblings('p').removeClass('active');
        })
    </script>
</body>
</html>

View Code

咱們通常修改的是每一個li標籤下的，這樣a標籤與另外的a標籤不是兄弟元素。這裏應該要作，找到它的父親li,父親的兄弟下的a標籤作操做。找父，找父的兄弟，找父的兄弟的孩子。

代碼以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <div id="box">
            <p class="p1">
                <span>我是第一個span標籤</span>
                <span>我是第二個span標籤</span>
                <span>我是第三個span標籤</span>
            </p>
            <button>按鈕</button>
        </div>
        <ul>
            <li class="list">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        
        //獲取第n個元素 數值從0開始
        $('span').eq(1).css('color','#FF0000');
        
        //獲取第一個元素 :first :last    點語法  ：get方法 和set方法
        $('span').last().css('color','greenyellow');
        $('span').first().css('color','greenyellow');
        
        //查找span標籤的父元素（親的）
        $('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'});
        
        //選擇全部的兄弟元素（不包括本身）
                  $('.list').siblings('li').css('color','red');

                  
                //查找全部的後代元素
                   $('div').find('button').css('background','yellow');

                
                //不寫參數表明獲取全部子元素。
                   $('ul').children().css("background", "green");
                   $('ul').children("li").css("margin-top", 10);
                   

        
        
    </script>
</html>

效果以下：

參考連接：https://www.cnblogs.com/majj/p/9112112.html