abstract：表單選擇器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-
表單選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表單選擇器</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js" ></script>
</head>
<body>
<form action="">
輸入框1 <input type="text"><br>
輸入框2 <input type="text"><br>
輸入框3 <input type="text" disabled><br>
輸入框4 <input type="text"><br>
</form>
<select>
<option value="">魔蝎座</option>
<option value="">雙魚座</option>
<option value="">射手座</option>
<option selected value="">天蝎座</option>
</select>
<br>
愛好:
<label for=""><input type="checkbox" name="">看書</label>
<label for=""><input type="checkbox" name="" checked>音樂</label>
<label for=""><input type="checkbox" name="">電影</label>
<script>
// $('input:enabled').css('background','red');//所有激活的input元素
// $('input:disabled').css('background','red');//所有禁用的input元素
// $(':selected').css('color','red ');
$(':checked').parent().css('color','red');
</script>
</body>
</html>
基本選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本選擇器</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js" ></script>
</head>
<style>
div{
width: 100px;
height: 100px;
background: #ccc;
margin-top: 10px;
}
</style>
<body>
<div id="box">大家好</div>
<div class="box">我是MT</div>
<span>php中文網(wǎng)</span>
<script>
$('#box').css('background','red');//id選擇器
$('.box1').css('background','blue'); //class選擇器
$('span').css('font-size','30px'); //標(biāo)簽選擇器
$('*').css('font-family','宋體');//通配符選擇器
$('#box,.box,span').css('color','pink');//匹配多個(gè)選擇器
</script>
</body>
</html>
內(nèi)容選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>內(nèi)容選擇器</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js" ></script>
<style>
div{
width: 100px;
height: 100px;
background: #ccc;
margin-top: 10px;
}
</style>
</head>
<body>
<div>jack</div>
<div>jun</div>
<div>jack cheng</div>
<div>join</div>
<div><span>php中文網(wǎng)</span></div>
<div></div>
<div>
<b>1</b>
</div>
<script>
// $('div:contains(join)').css('background','red');
// $('div:has(span)').css('background','red');
// $('div:empty').css('background','red');//匹配不含有內(nèi)容的元素
$('div:parent').css('background','red');//匹配含有子元素或者文本的元素
</script>
</body>
</html>
層級(jí)選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>層級(jí)選擇器</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<div>
<li>
<div>
<li>4</li>
</div>
</li>
</div>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<form action="">
<label >姓名:</label>
<input type="text">
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
</form>
<script>
// $('ul>li').css('list-style','none');
// $('ul li').css('list-style','none');
// $('label+input').css('height','50px');
$('input~button').css('height','50px');
</script>
</body>
</html>
屬性選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>屬性選擇器</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js" ></script>
</head>
<body>
<form action="">
<label for="">1</label> <input type="text" name="new" id="woman"><br>
<label for="">2</label><input type="password" name="new1" id="man"><br>
<label for="">3<label> <input ><br>
<label for="">4</label><input type="button" value="按鈕"><br>
</form>
<script>
// $('input[type]').css('background','red');
// $('input[type=button]').css('width','200px');
// $('input[type!=text]').css('background','red');
// $('input[type ^= b]').css('width','100px');
// $('input[type $=n]').css('width','600px');
// $('input[type *=o]').css('background','red');
$('input[id][name*=n]').css('background','red'); //復(fù)合選擇器
</script>
</body>
</html>
順序選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>順序選擇器</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<p id="box">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<script>
// $('p:first').css('color','red');
// $('p:last').css('color','red');
// $('p:gt(2)').css('color','red'); //下標(biāo)從0開始
// $('p:lt(4)').css('color','red');
// $('p:eq(5)').css('color','red');
// $('p:eq(0)').css('color','red');
// $('p:odd').css('background','red');//奇數(shù)順序 下標(biāo)從0開始
// $('p:even').css('background','pink');//偶數(shù)
$('p:not(#box)').css('background','red');
</script>
</body>
</html>
Correcting teacher：查無此人Correction time：2019-05-05 09:56:22
Teacher's summary：完成的不錯(cuò)。jq可以代替常規(guī)的js操作。繼續(xù)加油。