雲原生資料庫mysql對共享儲存分散式檔案系統的介面需求分析
阿新 • • 發佈：2020-08-08
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>