jQuery入門二（慕課網）筆記

1.jQuery選擇器之內容篩選選擇器

1.1 contains與:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
1.2 如果:contains匹配的文本包含在元素的子元素中，同樣認爲是符合條件的。
1.3 parent與:empty是相反的，兩者所涉及的子元素，包括文本節點

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>內容篩選器</h2>
    <h3>:contains/:has</h3>
    <div class="left">
        <div class="div">
            <p>:contains</p>
        </div>
        <div class="div">
            <p>:contains</p>
        </div>
        <div class="div">
            <p>
                <span>:has</span>
            </p>
        </div>
        <div class="div">
            <p>:contains</p>
        </div>
    </div>

    <script type="text/javascript">
        //查找所有class='div'中DOM元素中包含"contains"的元素節點
        //並且設置顏色
        $(".div:contains(':contains')").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查找所有class='div'中DOM元素中包含"span"的元素節點
        //並且設置顏色
        $(".div:has(span)").css("color", "blue");
    </script>


    <h3>:parent/:empty</h3>
    <div class="left">
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a></a>
        </div>
    </div>
    <script type="text/javascript">
       //選擇所有包含子元素或者文本的a元素
       //增加一個藍色的邊框
       $("a:parent").css("border", "3px groove blue");
    </script>

    <script type="text/javascript">
       //找到a元素下面的所有空節點(沒有子元素)
       //增加一段文本與邊框
       $("a:empty").text(":empty").css("border", "3px groove red"); 
    </script>

</body>

</html>

2. jQuery選擇器之可見性篩選選擇器

:hidden選擇器，不僅僅包含樣式是display="none"的元素，還包括隱藏表單、visibility等等
我們有幾種方式可以隱藏一個元素：
CSS display的值是none。
type="hidden"的表單元素。
寬度和高度都顯式設置爲0。
一個祖先元素是隱藏的，該元素是不會在頁面上顯示
CSS visibility的值是hidden
CSS opacity的指是0

	//查找id = div1的DOM元素,是否可見
    	show( $('#div1:visible') );

3.jQuery選擇器之屬性篩選選擇器

[attr=“value”]能幫我們定位不同類型的元素，特別是表單form元素的操作，比如說input[type=“text”],input[type=“checkbox”]等
[attr*=“value”]能在網站中幫助我們匹配不同類型的文件

	<script type="text/javascript">
         //查找所有div中，屬性name=p1的div元素
          $('div[name=p1]').css("border", "3px groove red"); 
    </script>

    <script type="text/javascript">
        //查找所有div中，有屬性p2的div元素
        $('div[p2]').css("border", "3px groove blue"); 
    </script>

    <script type="text/javascript">
        //查找所有div中，有屬性name中的值只包含一個連字符“-”的div元素
        $('div[name|="-"]').css("border", "3px groove #00FF00"); 
    </script>

    <script type="text/javascript">
        //查找所有div中，有屬性name中的值包含一個連字符“空”和“a”的div元素
         $('div[name~="a"]').css("border", "3px groove #668B8B"); 
    </script>

	<script type="text/javascript">
         //查找所有div中，屬性name的值是用imooc開頭的
         $('div[name^=imooc]').css("border", "3px groove red"); 
    </script>

    <script type="text/javascript">
         //查找所有div中，屬性name的值是用imooc結尾的
         $('div[name$=imooc]').css("border", "3px groove blue"); 
    </script>

    <script type="text/javascript">
        //查找所有div中，有屬性name中的值包含一個test字符串的div元素
        $('div[name*="test"]').css("border", "3px groove #00FF00"); 
    </script>

    <script type="text/javascript">
        //查找所有div中，有屬性testattr中的值沒有包含"true"的div
        $('div[testattr!="true"]').css("border", "3px groove #668B8B"); 
    </script>

4.jQuery選擇器之子元素篩選選擇器

4.1 irst只匹配一個單獨的元素，但是:first-child選擇器可以匹配多個：即爲每個父級元素匹配第一個子元素。這相當於:nth-child(1)
4.2 last 只匹配一個單獨的元素， :last-child 選擇器可以匹配多個元素：即，爲每個父級元素匹配最後一個子元素
如果子元素只有一個的話，:first-child與:last-child是同一個
4.3 only-child匹配某個元素是父元素中唯一的子元素，就是說當前子元素是父元素中唯一的元素，則匹配
4.4 jQuery實現:nth-child(n)是嚴格來自CSS規範，所以n值是“索引”，也就是說，從1開始計數，:nth-child(index)從1開始的，而eq(index)是從0開始的；jQuery合集是從0開始索引的，所以eq(1)就是第二個元素
nth-child(n) 與 :nth-last-child(n) 的區別前者是從前往後計算，後者從後往前計算

	<script type="text/javascript">
        //查找class="first-div"下的第一個a元素
        //針對所有父級下的第一個
        $('.first-div a:first-child').css("color", "#CD00CD");
    </script>
    <script type="text/javascript">
        //查找class="last-div"下的倒數第二個a元素
        $('.last-div a:nth-last-child(2)').css("color", "red");
    </script>

5.jQuery選擇器之表單元素選擇器

	<script type="text/javascript">
        //匹配所有input元素中的單選按鈕,並選中
        $('input:radio').attr('checked','true');
    </script>

6.jQuery選擇器之表單對象屬性篩選選擇器

選擇器適用於複選框和單選框，對於下拉框元素, 使用 :selected 選擇器
在某些瀏覽器中，選擇器:checked可能會錯誤選取到元素，所以保險起見換用選擇器input:checked，確保只會選取元素

<script type="text/javascript">
         //查找所有input所有勾選的元素(單選框,複選框)
         //移除input的checked屬性
        $('input:checked').removeAttr('checked')
    </script>

    <script type="text/javascript">
         //查找所有option元素中,有selected屬性被選中的選項
         //移除option的selected屬性
        $('option:selected').removeAttr('selected')
    </script>

7.jQuery選擇器之特殊選擇器this

this是JavaScript中的關鍵字，指的是當前的上下文對象，簡單的說就是方法/屬性的所有者

var imooc = {
    name:"慕課網",
    getName:function(){
        //this,就是imooc對象
        return this.name;
    }
}
imooc.getName(); //慕課網

在DOM中this就是指向了這個html元素對象，因爲this就是DOM元素本身的一個引用

p.addEventListener('click',function(){
    //this === p
    //以下兩者的修改都是等價的
    this.style.color = "red";
    p.style.color = "red";
},false);

把this加工成jQuery對象

$('p').click(function(){
    //把p元素轉化成jQuery的對象
    var $this= $(this) 
    $this.css('color','red')
})

通過把$()方法傳入當前的元素對象的引用this，把這個this加工成jQuery對象，我們就可以用jQuery提供的快捷方法直接處理樣式了
this，表示當前的上下文對象是一個html對象，可以調用html對象所擁有的屬性和方法。
$(this),代表的上下文對象是一個jquery的上下文對象，可以調用jQuery的方法和屬性值

8 綜合案例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery標籤切換效果</title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<!--代碼部分begin-->
<div id="menu">
    <!--tag標題-->
    <div id="menu_female">
        <h3>女裝</h3>
        <div class="tag" style="display: block;">
            <dl>
                <dd>
                    <p>第一類</p>
                    <a>1.襯衫</a>
                    <a>2.T恤</a>
                    <a>3.雪紡衫</a>
                    <a>4.針織衫</a>
                    <a>5.短外套</a>
                    <a>6.衛衣</a>
                    <a>7.小西褲</a>
                    <a>8.風衣</a>
                    <a>9.吊帶背心</a>
                    <a>10.連衣裙</a>
                    <a name="setColor">11.蕾絲連衣裙</a>
                    <a>12.復古連衣裙</a>
                    <a>13.印花連衣裙</a>
                    <a>14.真絲連衣裙</a>
                    <a>更多</a>
                </dd>
            </dl>
        </div>
        <div class="tag_More" style="display:block">
            <dl>
                <dd>
                    <p>第二類</p>
                    <a>1.揹帶褲</a>
                    <a>2.哈倫褲</a>
                    <a>3.牛仔褲</a>
                    <a>4.休閒褲</a>
                    <a>5.小腳褲</a>
                    <a>6.西裝褲</a>
                    <a>7.打底褲</a>
                    <a>8.闊腳褲</a>
                    <a>9.短褲</a>
                    <a>10.馬甲/背心</a>
                    <a>11.羽絨服</a>
                    <a>12.棉服</a>
                    <a>13.夾克</a>
                    <a>14.POLO衫</a>
                    <a>更多</a>
                </dd>
            </dl>
        </div>>
    </div>
    <div id="menu_con">
        <h3>男裝</h3>
        <div class="tag" style="display:block">
            <dl>
                <dd>
                    <p>第一類</p>
                    <a>1.襯衫</a>
                    <a>2.T恤</a>
                    <a>3.牛仔褲</a>
                    <a>4.休閒褲</a>
                    <a>5.短褲</a>
                    <a>6.針織衫</a>
                    <a>7.西服</a>
                    <a>8.西褲</a>
                    <a>9.嘻哈褲</a>
                    <a>10.西服套裝</a>
                    <a>11.馬甲/背心</a>
                    <a name="setColor">12.羽絨服</a>
                    <a>13.棉服</a>
                    <a>14.夾克</a>
                    <p>更多</p>
                </dd>
            </dl>
        </div>
        <div class="tag_More" style="display:block">
            <dl>
                <dd>
                    <p>第二類</p>
                    <a>1.襯衫</a>
                    <a>2.T恤</a>
                    <a>3.牛仔褲</a>
                    <a name='setColor'>4.休閒褲</a>
                    <a>5.短褲</a>
                    <a>6.針織衫</a>
                    <a>7.西服</a>
                    <a>8.西褲</a>
                    <a>9.嘻哈褲</a>
                    <a>10.西服套裝</a>
                    <a>11.馬甲/背心</a>
                    <a>12.羽絨服</a>
                    <a>13.棉服</a>
                    <a>14.夾克</a>
                    <p>更多</p>
                </dd>
            </dl>
        </div>>
    </div>
</div>

<script type="text/javascript">
    //找到男裝下第一類衣服中的第一個p元素，並改變顏色
    //可以通過子類選擇器  p:first-child 篩選出第一個p元素
    $("#menu_con div.tag dd > p:first-child").css('color','#9932CC');
</script>

<script type="text/javascript">
    //找到男裝下第一類衣服把a元素從順序1-4加上顏色
    //可以通過基本篩選器lt,選擇匹配集合中所有索引值小於給定index參數的元素
    //注意了index是從0開始計算，所以選在1-4,爲對應的index就是4
   $("#menu_con div.tag dd > a:lt(4)").css('color','red');
</script>

<script type="text/javascript">
    //找到男裝所有a元素中屬性名name="setColor"的元素，並設置顏色
    //這裏用的屬性選擇器[attribute='value']選擇指定屬性是給定值的元素
   $("#menu_con a[name=setColor]").css('color','blue');
</script>

<script type="text/javascript">
    //不分男女，選中第一類衣服中第9個a元素，並改變顏色
    //這裏用了nth-child 選擇的他們所有父元素的第n個子元素
    $(".tag a:nth-child(10)").css('color','#66CD00');
</script>

<script type="text/javascript">
    //找到女裝下第一類衣服，把a元素中包含文字"更多"的節點，改變顏色
    $("#menu_female div.tag a:contains(更多)").css('color','#C71585');
</script>



</body>

</html>

結果：

“.tag a:nth-child(10)“因爲P標籤和a標籤同級所以P標籤頁算1個子孩子，結果$(”.tag a:nth-child(10)”)是第10個元素，但是是第九個a標籤。

jQuery入門二（慕課網）筆記

1.jQuery選擇器之內容篩選選擇器

2. jQuery選擇器之可見性篩選選擇器

3.jQuery選擇器之屬性篩選選擇器

4.jQuery選擇器之子元素篩選選擇器

5.jQuery選擇器之表單元素選擇器

6.jQuery選擇器之表單對象屬性篩選選擇器

7.jQuery選擇器之特殊選擇器this

8 綜合案例

PyTorch自動求導

pandoc不是內部或外部命令

前端全套視頻HTML+CSS+JS+jQuery筆記（六）

前端全套視頻HTML+CSS+JS+jQuery筆記（八）

前端全套視頻HTML+CSS+JS+jQuery筆記（七）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結