基本选择器
基本选择器
标签选择器 $("a")
ID选择器 $("#id") $("p#id")
类选择器 $(".class") $("h2.class")
通配选择器 $("*")
并集选择器$("elem1,elem2,elem3")
后代选择器$(ul li)
父子选择器 $(ul>li)
后面第一个兄弟元素 prev + next
后面所有的兄弟元素 prev ~ next
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本选择器</title>
<style type="text/css">
.myClass{
background-color:cornflowerblue;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//标签选择器
//$("h3").addClass("myClass");
//id选择器
//$("#h31").addClass("myClass");
//类选择器
//$(".red1").addClass("myClass");
//通配选择器
//$("*").addClass("myClass");
//并集选择器
//$("h3,span").addClass("myClass");
//后代选择器
//$("p span").addClass("myClass");
//父子选择器
//$("p > span").addClass("myClass");
//紧接在 h3 元素后（紧挨着）的 p元素,
//$("h3+p").addClass("myClass");
//匹配 h3 元素之后的所有同级p元素
$("h3~p").addClass("myClass");
});
</script>
</head>
<body>
<h3 id="h31">JSP</h3>
<p>
JSP全名为Java Server Pages，中文名叫java服务器页面，其根本是一个简化的<span>Servlet</span>设计，
它[1] 是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。
JSP技术有点类似ASP技术，它是在传统的网页<em><span>HTML</span></em>（标准通用标记语言的子集）文件(*.htm,*.html)
中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件，后缀名为(*.jsp)。 用JSP开发的Web
应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。
</p>
<h3 id="h32" class="red1">Servlet</h3>
<p>
Servlet（Server Applet）是Java Servlet的简称，是为小服务程序或服务连接器，用Java编写的服务器端程序，主要功能在于交互式地浏览和修改数据，生成动态Web内容。
</p>
<p class="red1">
狭义的Servlet是指Java语言实现的一个接口，广义的Servlet是指任何实现了这个Servlet接口的类，一般情况下，人们将Servlet理解为后者。Servlet运行于支持Java的应用服务器中。从原理上讲，Servlet可以响应任何类型的请求，但绝大多数情况下Servlet只用来扩展基于HTTP协议的Web服务器。
</p>
</body>
</html>
属性选择器
[attribute]
[attribute1][attribute2]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value
[attribute*=value]
位置选择器
位置选择器
:first :last :odd :even
:eq(n) :gt(n) :lt(n)
:first-child :last-child :only-child
:nth-child(n) :nth-child(odd|even) :nth-child(xn+y)
注意：
nth-child(odd|even)和:odd|:even的区别
nth-child()选择器编号是从1开始，而其他选择器从0开始
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
font-size:20px;
border:1px solid #003a75;
margin:5px;
}
.myClass{
background-color:cornflowerblue;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//针对整个页面
//$("p").addClass("myClass");
//$("p:first").addClass("myClass");
//$("p:last").addClass("myClass");
//$("p:lt(3)").addClass("myClass");
//$("p:eq(3)").addClass("myClass");
//$("p:gt(3)").addClass("myClass");
//$("p:odd").addClass("myClass");
//$("p:even").addClass("myClass");
//针对上级元素
//$("p:first-child").addClass("myClass");
//$("p:last-child").addClass("myClass");
$("p:only-child").addClass("myClass");
//$("p:nth-child(2)").addClass("myClass");//seventh
//$("p:nth-child(odd)").addClass("myClass");
//$("p:nth-child(even)").addClass("myClass");
//$("p:nth-child(3n+1)").addClass("myClass");//n 0 1 2 3 4 1 4 7 10
});
</script>
</head>
<body>
<div>
<p>1. JavaSE</p>
<p>2. Oracle</p>
</div>
<div>
<p>3. HTML/CSS/JS</p>
<p>4. jQuery/EasyUI</p>
<p>5. JSP/Servlet/Ajax</p>
</div>
<div>
<p>6. SSM</p>
<p>7. SpringBoot/SpringCloud/SpringData</p>
<p>8. Maven/Linux/p>
<p>9. Redis/Solr/Nginx</p>
<p>10. SpringBoot/SpringCloud/SpringData</p>
</div>
<div>
<p>11. 就业指导</p>
</div>
</body>
</html>
表单选择器
表单选择器
:text :password :radio :checkbox :hidden :file :submit
:input 匹配所有 input, textarea, select 和 button 元素
:selected :checked :enabled :disabled
:hidden :visible :not
注意$("input")和$(":input")的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单选择器</title>
<style type="text/css">
.myClass{
background-color: cornflowerblue;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//1. ：input
//$("input").addClass("myClass"); //标签选择器
//$("input,select,textarea,button").addClass("myClass");//并集选择器
//$("form").addClass("myClass");
//$(":input").addClass("myClass");//相当于$("input,select,textarea,button")
//2. type
//$("input[type=text]").addClass("myClass");
//$("input[type=password]").addClass("myClass");
//$("input[type=submit]").addClass("myClass");
//$(":text").addClass("myClass");
//$(":radio").addClass("myClass");
//$(":checkbox").addClass("myClass");
//$(":reset").addClass("myClass");
//$(":hidden").addClass("myClass");
//3.选中状态
//$("input[checked][type=radio]").addClass("myClass");
$("option[selected]").addClass("myClass");
//$(":checked").addClass("myClass");
//$(":selected").addClass("myClass");
//$(":disabled").addClass("myClass");
//$(":input:not(:disabled)").addClass("myClass");
//$(":input:enabled").addClass("myClass");
});
</script>
</head>
<body>
<h3>注册用户</h3>
<form action="doRegister.jsp" method="get">
<table border="1" width="40%">
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username" value="请输入姓名" disabled="disabled"/></td>
</tr>
<tr>
<td>密 码</td>
<td><input type="password" name="pwd" id="pwd" /></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="color" name="repwd" id="repwd"/></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" checked="checked" value="女"/>女
</td>
</tr>
<tr>
<td>年龄</td>
<td><input type="number" min="6" max="30" name="age" id="age" value="18"/></td>
</tr>
<tr>
<td>电子邮箱</td>
<td><input type="email" name="email" id="email"/></td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby" value="music" checked/>音乐
<input type="checkbox" name="hobby" value="sports" checked="checked"/>体育
<input type="checkbox" name="hobby" value="art" checked/>美术
</td>
</tr>
<tr>
<td>身份</td>
<td>
<select name="professional" multiple="multiple">
<option value="1">工人</option>
<option value="2">农民</option>
<option value="3" selected="selected">解放军</option>
<option value="4">知识分子</option>
</select>
</td>
</tr>
<tr>
<td>简历</td>
<td>
<textarea name="resume" rows="5" cols="40">请输入简历</textarea>
</td>
</tr>
<tr>
<td>照片</td>
<td><input type="file" name="photo" id="photo"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交" disabled="disabled"/>
<input type="reset" value="重置"/>
<input type="button" value="返回" onclick="alert('back')"/>
<button onclick="confirm('返回2')">返回2</button>
</td>
</tr>
</table>
</form>
</body>
</html>
内容选择器
内容选择器
:empty 匹配所有不包含子元素或者文本的空元素
:parent 匹配含有子元素或者文本的元素
:has 匹配含有选择器所匹配的元素的元素
:contains 匹配包含给定文本的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.myClass{
background-color: aquamarine;
}
div{
border: 1px solid red;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//$("td:empty").addClass("myClass");
$("td:parent").addClass("myClass");
//$("div:has(p)").addClass("myClass");
$("div:contains(Hello)").addClass("myClass");
});
</script>
</head>
<body>
<table border="1" width="30%">
<tr><td>Value 1</td><td> </td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
<hr />
<div><p>Hello</p></div>
<div>Hello again!</div>
</body>
</html>
3853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
