简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > jquery选择器
Blogger Information
Blog 18
fans 0
comment 0
visits 11663
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jquery选择器
专业交作业
Original
696 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery选择器</title>
</head>
<body>
	
	
</body>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Jquery选择器</title>
</head>
<body>
    <!-- 选择器的种类：
    1.基本选择器：元素 ，类，ID，通配符*；
    2.层级选择器；类似css选择器，其中大于是gt，小于是lt，其他even为偶数选择器，odd为奇数选择器
    3.内容选择器；$()选定的当前标签+：containes"包含内容"，其他有empty为空选择器，has包含选择器，parnent选择器：所有包含于该标签的内容，not选择器
    4.表单form选择器：选择当前所有控件，如果选择当前标签为input前面加input：，也可根据文件类型来选择，
    5.其他常用选择器：.get（）数字，.eq（），.first（），.last（），.find（）,.toArray（）返回数组需要添加函数.children所有子元素，.each（）需要添加函数，.next（）.prev（），.prevAll（），.add()添加元素，.filter（）从结果中仅返回符合条件，.not（）与filter相反，.slice（）起止序号，不包括最后一个， -->

     <h2>Jquery选择器</h2>
     <div>
     	<ul>
     		<li>选择方式一：标签选择器</li>
     		<li>选择方式二：层级选择器</li>
     		<li>选择方式三：内容选择器</li>
     		<li>选择方式四：表单选择器</li>
     		<li>选择方式五：.get()选择器</li>
     		<li>选择方式六：.find()选择器</li>
     	</ul>
     	<p>这是一个注册表单</p>
     	<form action="" method="">
     		<fieldset>
     			<legend>
     				用户注册
     			</legend>
     			<p>用户名：<input type="text" name="name" required=""> </p>
     			<p>邮箱：<input type="email"   name="email" required=""> </p>
     			<p>密码：<input type="text"  name="pws" required=""> </p>
     			<p>确定密码：<input type="text" name="pws" required=""> </p>
     			<p>
     				性别：<input type="radio" name="xingbie" value="nan" checked="">男
     				<input type="radio" name="xingbie" value="nv" checked="">女
     			</p>
     			<p><input type="file" name=""></p>
     			
     		</fieldset>
     	</form>
     </div>
</body>
</html>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	// 元素选择器
	$('li').css('background-color','green')
	       .css('list-style','none')
     // 层级选择器
     $('li:nth-child(2)+li').css('color','white')
     // 内容选择器
     $('ul:contains("选择器")').css('color','red')
     // 表单选择器
     $('input').css('background-color','blue')
     $('input:file').css('color','brown')
     // .find()选择器  .get（）选择器
     $('li').get(3).style.color="black"
     $('ul').find('li').css('color','blue')


</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！