jquery选择器

基本选择器

基本选择器
标签选择器 $("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>密&nbsp;码</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>&nbsp;</td></tr>
                 <tr><td>Value 2</td><td></td></tr>
               </table>
               <hr />
               <div><p>Hello</p></div>
               <div>Hello again!</div>
       </body>
</html>

 

©️2020 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值