jquery選擇器（nth-of-type（） nth-child（）區別內容更新）

時間 2019-11-10

標籤 jquery 選擇器 nth type child 區別內容更新欄目 JQuery 简体版

原文原文鏈接

官網傳送門： http://jquery.com/
中文API文檔： http://jquery.cuishifeng.cn/
jQuery是一個快速，小巧，功能豐富的JavaScript庫。它經過易於使用的API在大量瀏覽器中運行，使得HTML文檔遍歷和操做，事件處理，動畫和Ajax更加簡單。經過多功能性和可擴展性的結合，jQuery改變了數百萬人編寫JavaScript的方式。css

小例子

1.引入文件<script src="jquery-3.3.1.js"></script>
<div id="div1">div1</div>
$('#div1').css('background','red'); //表示給前面這個對象加css樣式

2.<div class="aa">div2</div>
<div class="aa">div3</div> 
$('.aa').css('background','green');

對象

<div id="div1">div1</div>
原生js方法獲取對象：var oDiv1 = document.getElementById('div1');//原生對象
jquery獲取對象： var $div1 = $('#div1');//jq對象
將兩種方式獲得的對象打印出來看一下區別
console.log(oDiv1);
console.log($div1);

這裏jq對象是有長度的，至關於數組。
jquery

若是想打印輸出對象的內容。
console.log(oDiv1.innerHTML);//obj.innerHTML是原生對象的方法
console.log($div1.get(0).innerHTML);

原生對象的方法和jq的方法是不同的，不能混用，可是二者能夠相互轉化。
//原生對象轉化成jq對象  $(obj)
//obj.css()是jq對象的方法 原生對象使用jq對象的。css()方法
$(oDiv1).css('background','red'); 

//jq對象轉化成原生對象   $obj.get(0)
//jq對象就想使用原生對象的.innerHTML方法
console.log($div1.get(0).innerHTML);

文檔就緒函數

在寫jquery代碼的時候建議將代碼寫在文檔就緒函數裏面
//當dom已經加載 而且頁面已經徹底呈現時 會ready事件
//由於ready()最後執行 因此將其餘函數事件放在ready()中
$(document).ready(function(){
    var a = 5;
});

//是上面的簡寫形式
$(function(){

});

$和jquery是一個意思，源碼中有解釋。

![圖片上傳中...]數組

幾種選擇器

1 空格表示後代
2 >表示親子代
3 +表示緊挨着的兄弟
4 ~表示全部兄弟
5 ：eq()瀏覽器

<ul id="ul1">
     <li>001</li>
     <li>002</li>
     <li>003</li>
     <li>004</li>
     <li>005</li>    
 </ul>
$('#ul1 li').css('background','red');
5項全是紅色

//選中第3個元素 003   正值從前日後找
 $('#ul1 li:eq(2)').css('background','red');
 第3項是紅色

//選中第6行，什麼效果也沒有，可是也不會報錯
$('#ul1 li:eq(5)').css('background','red');

//倒數第一個   負值從後往前找
 $('#ul1 li:eq(-1)').css('background','red');

如下同理
$('#ul1 li:even').css('background','red'); //偶數
$('#ul1 li:odd').css('background','green');//奇數

$('#ul1 li:first').css('background','red');
$('#ul1 li:last').css('background','green');

$('#ul1 li:gt(1)').css('background','red'); //大於1的會被選中
$('#ul1 li:lt(1)').css('background','green');

 <ul id="ul1">
        <li>001</li>
        <li>002</li>
        <li class="aaa">003</li>
        <li>004</li>
        <li>005</li>
 </ul>
 $('#ul1 li:not(.aaa)').css('background','green');

$('#ul1 li:contains(3)').css('background','red');//包含3

：target()舉個例子

導航欄中有3項點擊其中某一項，顯示對應的內容。dom

<style>
    #nav{
        margin-bottom:800px;
       
    }
    #nav li{
        width: 100px;
        height: 30px;
        background: #cccccc;
        list-style:none;
        float:left;
        margin-right:5px;
        cursor:pointer;
        text-align:center;
        line-height:30px;
    }
    div{
        height: 400px;
    }
    #menu1{
         background: #ff0000;
     }
    #menu2{
        background: #00ff00;
    }
    #menu3{
        background: #0000ff;
    }
  /* #menu3:target{      /*target是css的標籤 用css執行會更快*/
        background: #ffff00;;
    } */
</style>

</head>
<body>iphone

<ul id="nav">
        <li><a href="#menu1">菜單1</a></li>
        <li><a href="#menu2">菜單2</a></li>
        <li><a href="#menu3">菜單3</a></li>
    </ul>

    <div id="menu1"></div>
    <div id="menu2"></div>
    <div id="menu3"></div>

</body>函數

若想讓導航欄浮在上方，要給ul加高度
 #nav{
        margin-bottom:800px;
        height:30px;
    }

jquery來實現
<script src="jquery-3.3.1.js"></script>
    <script>
             $(function(){
                 $('#nav li:last').on('click',function(){
                    alert(123);
                     setTimeout(function(){
                         $('#menu3:target').css('background','#ff0');
                         //一點擊 函數就執行 target須要時間
                     },1000);
                  });
             });
    </script>

1000ms後，藍色變成黃色

也能夠用css來實現這樣的效果
 #menu3:target{      /* target是css的標籤 用css執行會更快 */
        background: #ffff00;;
    }

點擊菜單3 藍色變成黃色佈局

:input

舉個例子      輸入什麼  列表中對應的顏色改變
 <input type="text" id="search" value="123">
    <ul id="list">
        <li>iphone8</li>
        <li>iphoneX</li>
        <li>huawei</li>
        <li>xiaomi</li>
    </ul>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function(){
            var $Lis = $('#list li');
            $('#search').on('keyup',function(){//keyup當前值
             console.log(this.value);//原生方法  效率高
              
            });
        });
    </script>

打印輸出值，keyup取當前值，keydown取前一個值

 console.log(this);

這裏的this指的是function以前的對象，固然會輸出那句話。

<input type="text" id="search" value="123">
    <ul id="list">
        <li>iphone8</li>
        <li>iphoneX</li>
        <li>huawei</li>
        <li>xiaomi</li>
    </ul>
    
 $(function(){
       var $Lis = $('#list li');
       $('#search').on('keyup',function(){//keyup當前值
       $('#list li:contains( this.value ).css('background','red');
         });
   });
不會改變，由於this.value是js代碼放在字符串裏面識別不了。因此這裏要用到字符串拼接。$('#list li:contains('+ this.value +')').css('background','red');

加上else判斷 若是鍵入值爲空 背景透明 巴特 這樣很差使
 $(function(){
            var $Lis = $('#list li');
            $('#search').on('keyup',function(){//keyup當前值
              //console.log(this.value);//原生方法  效率高
              //  console.log($(this).val());//jq方法'
                if(this.value != ''){
                    //this.value 要字符串拼接 $('#list li:contains(this.value)') 不行得把this.value字符串拼接
                    $('#list li:contains('+ this.value +')').css('background','red');
                }else{
                    $('#list li').css('background','transparent');
                }
            });
        });

把else放在前面
 $(function(){
            var $Lis = $('#list li');
            $('#search').on('keyup',function(){//keyup當前值
             //console.log(this.value);//原生方法  效率高
              //  console.log($(this).val());//jq方法'
                $('#list li').css('background','transparent');
                if(this.value != ''){
                    //this.value 要字符串拼接 $('#list li:contains(this.value)') 不行得把this.value字符串拼接
                    $('#list li:contains('+ this.value +')').css('background','red');
                }
            });
        });
        
$(function(){     
            $('#search').on('keyup',function(){//keyup當前值
             //console.log(this.value);//原生方法  效率高
              //  console.log($(this).val());//jq方法'
                $('#list li').css('background','transparent');
                if(this.value != ''){
                    //this.value 要字符串拼接 $('#list li:contains(this.value)') 不行得把this.value字符串拼接
                    $('#list li:contains('+ this.value +')').css('background','red');
                }
            });
        });

如今功能上沒有問題，可是性能上有問題，#list li取了2次，多找了一次，咱們能夠把#list li先存起來賦給一個變量.性能

$(function(){
            var $Lis = $('#list li');
            $('#search').on('keyup',function(){//keyup當前值 綁定事件用on
             //console.log(this.value);//原生方法  效率高
              //  console.log($(this).val());//jq方法'
              $Lis.css('background','transparent');
                if(this.value != ''){
                    //this.value 要字符串拼接 $('#list li:contains(this.value)') 不行得把this.value字符串拼接
                    $('#list li:contains('+ this.value +')').css('background','red');
                }
            });
        });
        
        console.log($Lis);

jquery對象 相似數組

:empty 選擇內容爲空的節點
:parent 選擇有內容的節點
:has() 匹配含有選擇器所匹配的元素的元素

:hidden

元素被認爲是隱藏的幾種狀況：
1.他們的display:是none.
2.他們是type="hidden"的表單元素。
3.他們的寬高都顯示設置爲0.
4.一個祖先元素是隱藏的。
元素visibility:hidden opacity:0被認爲是可見的，由於他們仍然佔據佈局空間。

input[type="text"][name="userid"]{
        background: red;
        }
 <input type="text" name="userid">
 <input type="text" name="userid1111">
 會選中第一個輸入框
 用jquery寫 $（'input[type="text"][name="userid"]'）;

nth-child

nth-child(1) 從1開始
nth-child(2n) 從1開始
nth-child(2n+1) 從0開始

<div class="test">
    <p>A元素</p>
    <div>B元素</div>
    <p>C元素</p>
    <p>D元素</p>
</div>

$('p:nth-of-type(2)');//C元素從後往前看第2次出現p標籤的元素
$('p:nth-child(2)');//什麼也沒選中從後往前看第二個孩子不是p 是div 不選動畫

加上顏色看效果更明顯
   <div class="test">
            <p>A元素</p>
            <div>B元素</div>
            <p>C元素</p>
            <p>D元素</p>
    </div>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $('p:nth-of-type(2)').css('background','green');
        $('p:nth-child(2)').css('background','red');
    </script>

p:nth-of-type(2) 想找第2次出現p標籤的孩子選中第三行 C元素第三行背景變成綠色
p:nth-child(2) 想要找第2個孩子而且要是p標籤下的可是如今第二個孩子是div標籤因此並無選中，沒有內容變成紅色

<div class="test">
            <p>A元素</p>
            <div>B元素</div>
            <p>C元素</p>
            <p>D元素</p>
    </div>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $('p:nth-of-type(2)').css('background','green');
        $('div:nth-child(2)').css('background','red');
    </script>

div:nth-child(2)要找第2個孩子 而且要是div標籤下的孩子  選中 背景變成紅色

var n = $("input:checked").length; 取選中的輸入框

inputtype="text"：focus{

background: red;
        }

inputtype="text"{

background: yellow;
        }

黃色輸入框，獲取焦點以後變成紅色

<input type="file">自動會讓你選擇文件：selected 選中下拉菜單

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

jquery選擇器 （nth-of-type（） nth-child（）區別內容更新）

小例子