jquery选择器篇章

Original 2018-11-13 16:28:01 277
abstract:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
<!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>jQuery</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;font-size: 22px;}
div{width: 80%;margin: 0 auto;}
ul,li{list-style: none;margin: 10px;}
.con3{width: 100px;height: 100px;border: 1px solid #ccc;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#con').css('border','5px solid pink');
$('.con1').css('box-shadow','5px 5px 10px #888');
$('.con1').css('border','5px solid #ea5404');

$('#con > p').css('color','green');
$('#con p').css('color','orange');
//匹配.con_li后面的所有兄弟li
$('.con_li ~ li').css('background','#ccc');

$('p:contains(www.php.cn)').css('font-weight','blod');
$('div:empty').css('background','#ea5404');
$('div:empty').css('color','red');

$('input[name=jinggege]').css('background','green');
$('input[name=btn]').css('background','green');
$(':selected').css('background','red');
$(':checked').parent().css('background','pink');
})
</script>
</head>
<body>
<h4>jQuery选择器</h4>
<div id="con">
<p>www.php.cn</p>
<p>www.baidu.com</p>
<ul class="con_ul">
<li class="con_li"><a href="">php中文网</a></li>
<li><a href="">php中文网</a></li>
<li><a href="">php中文网</a></li>
<li><a href="">php中文网</a></li>
<li><a href="">php中文网</a></li>
</ul>
<div class="con1">
<a href="">link</a>
<p>pppppppppp</p>
<span></span>
<ul>
<li>11</li>
<li id="con_li2">11</li>
<li>11</li>
</ul>
<div class="con3"></div>
</div>
<div class="con3"></div>
</div>
<div class="con3"></div>
<form action="./jquery.html" type='post'>
<input type="text" name="jinggege" value="姓名"><br>
<input type="text" name="age" value="年龄" disabled><br>
<input type="button" value="按钮" name="btn"><br>
<select name="" id="">
<option value="java">java</option>
<option value="java">java</option>
<option value="java" selected>java</option>
<option value="java">java</option>
<option value="java">java</option>
</select>
<br>
<input type="checkbox" name="check" value="php">
<label for=""><input type="checkbox" name="check" value="php" checked>选择</label>
<input type="checkbox" name="check" value="php">
</form>
</body>
</html>


Correcting teacher:灭绝师太Correction time:2018-11-13 16:30:38
Teacher's summary:选择器的学习还是非常重要的,测试全面,棒棒哒!

Release Notes

Popular Entries