jQuery选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery选择器</title>
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div{width: 100px;height: 100px; background:#ccc ;margin-top: 20px;}
</style>
</head>
<body>
<script type="text/javascript">
// $('#id')
// $('.classs')
// $('element')
// $('*')
// $('#id,.class,element')
$(document).ready(function(){
$('#box').css('background','red')
$('.box').css('background','blue')
$('span').css('font-size','30px')
$('*').css('font-size','30px')
$('#box,.box,span').css('color','pink')
})
</script>
<div id="box">大家好</div>
<div class="box">我是玄微</div>
<span>php中文网</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>jQuery层级选择器/顺序选择器</title>
<script type="text/javascript" src=jquery-3.3.1.min.js></script>
</head>
<body>
<!-- <ul>
<li>1</li>
<li>2</li>
<li>3</li>
<div>
<li>0</li>
</div>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<from>
<label>姓名</label>
<input type="" name="">
<button>按钮</button>
<input type="" name="">
<input type="" name="">
</from> -->
<p id='box'>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<script type="text/javascript">
$(document).ready(function(){
// $('ul>li').css('list-style',"none")
// $('ul li').css('list-style',"none")
// $('label+button').css('height','50px')
// $('label~input').css('background-color','pink')
//
//$('p:first').css('color','red')
//$('p:last').css('color','bule')
//$('p:gt(1)').css('font-size','30px')
//$('p:lt(2)').css('color','red')
//$('p:eq(1)').css('color','red')
//$('p:odd').css('color','red')
//$('p:even').css('color','red')
$('p:not(#box)').css('background-color','red')
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery内容选择器</title>
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div{width: 100px;height: 100px; background:#ccc ;margin-top: 20px;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
//$('div:contains(jun)').css('background-color','blue')
//$('div:has(span)').css('color','red')
//$('div:empty').css('background-color','red')
$('div:parent').css('background-color','red')
})
</script>
<div>jack</div>
<div>jun</div>
<div>jack cheng</div>
<div>jion</div>
<div><span>php中文网</span></div>
<div></div>
<div><b></b></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery属性选择器</title>
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div{width: 100px;height: 100px; background:#ccc ;margin-top: 20px;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
//$('div:contains(jun)').css('background-color','blue')
//$('div:has(span)').css('color','red')
//$('div:empty').css('background-color','red')
//$('div:parent').css('background-color','red')
//
//
$(document).ready(function(){
//$('input[type]').css('background','pink')
//$('input[type=button]').css('background','blue')
//$('input[type!=text]').css('background','red')
//$('input[type ^=t]').css('background','red')
//$('input[type $=n]').css('background','red')
//$('input[type *=o ]').css('background','blue')
//$('input[type *=o ]').css('background','blue')
$('input[id][name*=n]').css('background','red')
})
})
</script>
<from>
<label>1</label> <input type="text" name="new" id="woman"><br>
<label>2</label> <input type="password" name="new1" id="man"><br>
<label>3</label> <input name=""><br>
<label>4</label> <input type="button" name="" value="按钮" =""><br>
</from>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery表单选择器</title>
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
div{width: 100px;height: 100px; background:#ccc ;margin-top: 20px;}
</style>
</head>
<body>
<script type="text/javascript">
// $('#id')
// $('.classs')
// $('element')
// $('*')
// $('#id,.class,element')
$(document).ready(function(){
//$('#box').css('background','red')
//$('.box').css('background','blue')
//$('span').css('font-size','30px')
//$('*').css('font-size','30px')
//$('#box,.box,span').css('color','pink')
//$(':enabled').css('background-color','pink')
//$(':disabled').css('background-color','red')
//$(':selected').css('color','blue')
$('input:checked').parent().css('color','red')
})
</script>
<from>
输入框1<input type="text" name=""><br>
输入框2<input type="text" name=""><br>
输入框3<input type="text" name="" disabled="disabled"><br>
输入框4<input type="text" name=""><br>
<br>
<select>
<option>摩羯座</option>
<option selected>双鱼座</option>
<option>射手座</option>
<option>天蝎座</option>
</select>
<br>
<br>
爱好
<label><input type="checkbox" name="">看书</label>
<label><input type="checkbox" name="" checked>游泳</label>
<label><input type="checkbox" name="">游戏</label>
</from>
</body>
</html>