サマリー： 通過該小節(jié)的學(xué)習(xí)后，讓自己對(duì)JQuery的基礎(chǔ)語法和選擇器有了初步的認(rèn)識(shí)，首先JQuery是需要引入頁面的，引入的方式可以直接寫在body體，也可以在head內(nèi)寫入引入的方式<script type="text/javascript" src="jquery-3.3.1-min.js"></script>,在寫JQuer
通過該小節(jié)的學(xué)習(xí)后，讓自己對(duì)JQuery的基礎(chǔ)語法和選擇器有了初步的認(rèn)識(shí)，首先JQuery是需要引入頁面的，引入的方式可以直接寫在body體，也可以在head內(nèi)寫入引入的方式<script type="text/javascript" src="jquery-3.3.1-min.js"></script>,在寫JQuery代碼時(shí)都要寫JQuery的文檔就緒函數(shù)，
$(document).ready(function(){
Jquery代碼部分;
})
還有就是選擇器，基礎(chǔ)選擇器，通過標(biāo)簽的Id名class名 還有標(biāo)簽名去獲得的寫法
：$('.box').css('color','red');
層級(jí)選擇器寫法：$('ul li').css('background','pink')祖先級(jí)與后代級(jí)元素，UL下邊所有的
li全部都會(huì)改變背景顏色；
順序選擇器寫法：$('p:even').css('color','red');p標(biāo)簽偶數(shù)行的元素內(nèi)容變紅色，一般都是從“0”行開始的
對(duì)應(yīng)的奇數(shù)行用odd，還有not等；
內(nèi)容選擇器屬性選擇器寫法：$(input'[屬性名=屬性值]').css('改變的屬性','改變的屬性值')；
input框下是這個(gè)屬性名和屬性值的所有元素改變，最后一個(gè)就是表單選擇器；
自己及總結(jié)，感覺這么多的選擇器，只要頁面需要改動(dòng)的部位有ID名或者class名，用基礎(chǔ)選擇器就可以實(shí)現(xiàn)改變相應(yīng)的屬性及其內(nèi)容了，為什么還要掌握后邊那么多的選擇器呀？
感覺掌握幾個(gè)選擇器就可以了，沒必要都掌握。
小案例如下：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery選擇器</title>
<link rel='shortcut icon' type='image/x-icon' href='../picture/mi.png'>
<link rel='stylesheet' type='text/css' href='../css/css.css'>
<script type='text/javascript' src='jquery-3.3.1.min.js'></script>
<style type='text/css'>
/*css 內(nèi)部樣式填寫*/
</style>
</head>
<body>
<!-- 層級(jí)選擇器（相當(dāng)于父類和子類的元素關(guān)系）
給定的父級(jí)元素下匹配所有的子元素： $('父級(jí)元素>子級(jí)元素')
給定的祖級(jí)元素下匹配所有的后代元素： $('祖級(jí)元素 后代元素')
匹配緊跟在prev元素后面的next元素：$('prev + next')(同級(jí)元素)
匹配prev元素后面所有的siblings元素：$('prev ~ siblings') -->
<script type='text/javascript'>
window.onload=function(){
var a=document.getElementById('user');
a.focus();
//load網(wǎng)頁后輸入光標(biāo)在輸入框內(nèi)
}
$(document).ready(function(){
// $('ul').css('margin-left','20px');
// $('ul>li').css('list-style','none');
//父類與子類的元素關(guān)系只是去出ul下li的樣式
// $('ul li').css('list-style','none');
//祖級(jí)元素與后代元素的關(guān)系，去除Ul里所有層級(jí)里的li的默認(rèn)樣式
$('label+input').css('height','50px');
//只能給label相鄰的input該變高度的屬性
// $('label~input').css('height','50px');
//可以改變label到最后一個(gè)input的高度屬性
// $('li:first').css('font-size','50px');
//li標(biāo)簽下第一個(gè)元素字體增大
// $('li:even').css('color','red');
//li標(biāo)簽下偶數(shù)行字體顏色變紅
$('ul:parent').css('background','blue');
//ul標(biāo)簽下所有元素含有內(nèi)容或者子標(biāo)簽的元素//相當(dāng)于給無序列表加背景色
})
</script>
<ul>
<li>01</li>
<li>02</li>
<div>
<li>001</li>
<li>002</li>
<li>003</li>
</div>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
<hr><br>
<label for='user'>用戶名：</label>
<input type='username' name='user' id='user' placeholder='請(qǐng)輸入用戶名'>
<input type='password' name='password' placeholder='請(qǐng)輸入密碼'>
<input type='button' value='提交'>
<input type='submit' value='提交'>
<input type="reset" value='重寫'>
</body>
</html>
添削の先生：天蓬老師添削時(shí)間：2018-12-06 11:48:54
先生のまとめ：表單選擇器, 效率最高的是, 是使用偽類來選擇,很遺憾,你幾乎沒有用, 有空看看手冊(cè), jQuery中定義了非常多的,非常方便的表單選擇器方法