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中文网</span>
<script>
$('#box').css('background','red');//id选择器
$('.box1').css('background','blue'); //class选择器
$('span').css('font-size','30px'); //标签选择器
$('*').css('font-family','宋体');//通配符选择器
$('#box,.box,span').css('color','pink');//匹配多个选择器
</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>
<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中文网</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');//匹配不含有内容的元素
$('div:parent').css('background','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>
<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'); //复合选择器
</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'); //下标从0开始
// $('p:lt(4)').css('color','red');
// $('p:eq(5)').css('color','red');
// $('p:eq(0)').css('color','red');
// $('p:odd').css('background','red');//奇数顺序 下标从0开始
// $('p:even').css('background','pink');//偶数
$('p:not(#box)').css('background','red');
</script>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-05-05 09:56:22
Teacher's summary：完成的不错。jq可以代替常规的js操作。继续加油。