实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
<style>
</style>
<script type="text/JavaScript">
$(document).ready(function (){
// $('p:odd').css('font-size','30px');//选择偶数奇数
// $('p:even').css('background','red')//选择偶数
// $('p:not(#box)').css('color','red')//不包括box元素
// $('p:eq(3),p:last,p:first').css('color','red')// 坐标0开始
// $("ul li:gt(3)").css('color','red')// 大于 3 的元素
// $("ul li:lt(3)").css('color','red')//小于 3 的元素
// $("input:not(:empty)").css('color','red')//所有不为空的 input 元素
// $('div+li').css('list-style','none');//同级div后面的li改变元素
// $('div~li').css('list-style','none');//div后面所有的li改变元素
// $('ul:has(div)').css('list-style','none');//ul 下面div改变的元素
// $('li:empty').css('list-style','none')//li为空内容的元素
// $('li:parent').css('list-style','none')//所有li包含内容的元素
// $('li:contains(234)').css('list-style','none')//包含234内容的
// $('input[name]').css('background','green');//所有 input 属性的值包含以 ".name" 的元素
// $('input[type=text]').css('background','green')//所有 type 属性的值包含以 ".text" 的元素
// $('input[type ^=t]').css('background','green')//包括t开头的
// $('input[type *=t]').css('background','green')//包含t开头所有的
// $('input[type !=t]').css('background','green');//所有 type 属性的值不包含以 ".t" 的元素
// $('input[type $=t]').css('background','green');//所有 type 属性的值包含以 ".t" 的元素
// $(":enabled").css('background','green');//所有激活的 input 元素
// $(":disabled").css('background','green');//所有禁用的 input 元素
// $(":selected").css('background','red');//所有被选取的元素
// $(':checked').hide();//所有被选中的元素
})
</script>
</head>
<body>
<ul>
<li>234</li>
<li>234</li>
<li>234</li>
<div>
<li>w</li>
<li>w</li>
<li>w</li>
<li>w</li>
</div>
<li>23</li>
<li>234</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<form action="">
<label>邮箱</label>
<input type="text" name="email">
<label>手机</label>
<input type="text" name="mobile">
<label>密码</label >
<input type="password" name="password" disabled>
<label>用户名</label>
<input type="text" name="username" >
<br>
<input type="checkbox" >多选
<input type="checkbox" checked >隐藏
<input type="checkbox" >多选
<br>
<select>
<option>星座</option>
<option selected>处女座</option>
<option >天蝎座</option>
<option>水瓶座</option>
<option>巨蟹座</option>
</select>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例