2020-08-09

阿新 • • 發佈：2020-08-09

jquery選擇器

jQuery引入

下載連結：[jQuery官網](https://jquery.com/)，首先需要下載這個jQuery的檔案，然後在HTML檔案中引入這個檔案，就可以使用這個檔案中幫我們提供的jquery的介面了。

jquery物件和dom物件

jquery找到的標籤物件稱為 -- jquery物件
原生js找到的標籤物件稱為 -- dom物件
dom物件只能使用dom物件的方法,不能使用jquery物件的方法
jquery物件也是,它不能使用dom物件的方法

dom物件和jquery物件互相轉換:
	jquery物件轉dom物件 -- jquery物件[0]  示例:$('#d1')[0]
	dom物件轉jquery物件 -- $(dom物件)

jQuery選擇器

基本選擇器

jQuery('#d1')  -- $('#d1')
基本選擇器（同css）
　　　　　　id選擇器：

	$("#id")  #不管找什麼標籤，用什麼選擇器，都必須要寫$("")，引號裡面再寫選擇器，通過jQuery找到的標籤物件就是一個jQuery物件，用原生JS找到的標籤物件叫做DOM物件，看我們上面的jQuery物件部分的內容
　　　　　　標籤選擇器：

	$("tagName")  $('div')
　　　　　　class選擇器：

	$(".className")  
　　　　　　配合使用：

	$("div.c1")  // 找到有c1 class類的div標籤
　　　　　　所有元素選擇器：

	$("*")
　　　　　　組合選擇器：

	$("#id, .className, tagName")

	選擇器找到的可能是多個標籤,會放到數組裡面,但還是jquery物件,能夠直接使用jquery的方法,意思是找到的所有標籤進行統一設定,如果要單獨設定選中的所有標籤中的某個標籤,可以通過索引取值的方式找到,然後注意,通過索引取值拿到的標籤,是個dom物件

基本篩選器

<ul>
    <li>蔡世楠</li>
    <li>尤利陽</li>
    <li id="l3">張雷</li>
    <li>申凱琦</li>
    <li id="l5">程德浩</li>
    <li>羅新宇</li>
    <li>曾凡星</li>
</ul>

:first  -- 示例:$('li:first') // 第一個
:last // 最後一個
:eq(index)// 索引等於index的那個元素
:even // 匹配所有索引值為偶數的元素，從 0 開始計數
:odd // 匹配所有索引值為奇數的元素，從 0 開始計數
:gt(index)// 匹配所有大於給定索引值的元素
:lt(index)// 匹配所有小於給定索引值的元素
:not(元素選擇器)// 移除所有滿足not條件的標籤
:has(元素選擇器)// --$('li:has(.c1)')  找到後代中含有滿足has裡面選擇器的那個標籤
:not(:has(.c1)) -- $('li:not(:has(.c1))') 排除後代中含有滿足has裡面選擇器的那個標籤

屬性選擇器

[attribute]
[attribute=value]// 屬性等於
[attribute!=value]// 屬性不等於

// 示例,多用於input標籤
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox型別的input標籤
$("input[type!='text']");// 取到型別不是text的input標籤

表單篩選器

找到的是type屬性為這個值的input標籤中
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

表單物件屬性篩選器

:enabled   #可用的標籤
:disabled  #不可用的標籤
:checked   #選中的input標籤
:selected  #選中的option標籤

篩選器方法

下一個:
    $('#l3').next();  找到下一個兄弟標籤
    $('#l3').nextAll(); 找到下面所有的兄弟標籤
    $('#l3').nextUntil('#l5');#直到找到id為l5的標籤就結束查詢，不包含它
上一個
	$("#id").prev()
	$("#id").prevAll()
	$("#id").prevUntil("#i2")
父親元素
    $("#id").parent()
    $("#id").parents()  // 查詢當前元素的所有的父輩元素（爺爺輩、祖先輩都找到）
    $("#id").parentsUntil('body') // 查詢當前元素的所有的父輩元素，直到遇到匹配的那個元素為止，這裡直到body標籤，不包含body標籤，基本選擇器都可以放到這裡面使用。

兒子和兄弟元素
$('ul').children(); 
$('ul').children('#l3');  #找到符合後面這個選擇器的兒子標籤

$('#l5').siblings();
$('#l5').siblings('#l3'); #找到符合後面這個選擇器的兄弟標籤


find
	$('ul').find('#l3')  -- 類似於  $('ul #l3')
filter過濾
	$('li').filter('#l3');


.first() // 獲取匹配的第一個元素
.last() // 獲取匹配的最後一個元素
.not()  // 從匹配元素的集合中刪除與指定表示式匹配的元素  $('li').not('#l3');
.has()  // 保留包含特定後代的元素，去掉那些不含有指定後代的元素。
.eq()  // 索引值等於指定值的元素

作業1程式碼:時間控制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>定時器</title>

</head>
<body>

<input type="text" id="timer">
<button id="start">開始</button>
<button id="end">結束</button>


<script>
    var timetag;
    // 1 獲取當前時間
    function f1() {
        var showTime = new Date();
        var showLocaleTime = showTime.toLocaleString();
        var inpEle = document.getElementById('timer');
        inpEle.value = showLocaleTime;
    }
    // 2 把時間放進去
    //     2.1 找到strat開始按鈕,繫結點選事件
    var startBtn = document.getElementById('start');
    startBtn.onclick = function () {
        //2.2 找到input標籤,並將值放到input標籤裡面
        f1();
        if (timetag === undefined){
            timetag = setInterval(f1,1000);
        }
    };
    // 3 停止時間
    var endBtn = document.getElementById('end');
    endBtn.onclick = function () {
        clearInterval(timetag);
        timetag = undefined;
    }


</script>

</body>
</html>

作業2程式碼:二級聯動

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>select聯動</title>
</head>
<body>

<select id="province">
  <option>請選擇省:</option>

</select>

<select id="city">
  <option>請選擇市:</option>
</select>

<script>
    var data = {"河北省": ["廊坊", "邯鄲"], "北京": ["朝陽區", "海淀區"], "山東": ["威海市", "煙臺市"]};

    // 1 將省份的資料放到省份的下拉框裡面
    //1.1 找到省份下拉框
    var proSelect = document.getElementById('province');
    // 1.2 建立option標籤

    //1.3  將資料放到option標籤中,並將option標籤放到省份下拉框裡面
    for (var province in data){
        var proOption = document.createElement('option');
        proOption.innerText = province;
        proSelect.appendChild(proOption);
    }

    //2 選擇省份,將被選擇的省份的市都放到市的那個下拉框裡面
    var citySelect = document.getElementById('city');
    proSelect.onchange = function () {
        citySelect.innerText = '';
        var proText = this.options[this.selectedIndex].innerText;
        var cityData = data[proText];
        for (var cityindex in cityData){
            var cityOption = document.createElement('option');
            cityOption.innerText = cityData[cityindex];
            citySelect.appendChild(cityOption);

        }
    }


</script>

</body>
</html>