2_1基本选择器

 jQuery提供了丰富的选择器功能,这个是jQuery相比JavaScript的一大优势。我们先来看一下jQuery API。可以看到提供了众多的选择器,可以非常方便简单的获取要选择的内容。

 


基本选择器

标签选择器 $("a")  

ID选择器 $("#id")     $("p#id")

类选择器 $(".class")    $("h2.class")

通配选择器 $("*")

并集选择器$("elem1,elem2,elem3")

后代选择器$(ul li)    

父子选择器 $(ul>li)  

后面第一个兄弟元素 prev + next

后面所有的兄弟元素 prev ~ next

这些选择器其实我们并不陌生,因为在讲解CSS样式中都有类似的选择器,并且其含义也是一样的。不同的在CSS中是对选择的内容定义CSS样式,在jQuery中用来选择内容并后续进行更多的下步操作。

 
 

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>基本选择器</title> 
         <style type="text/css"> 
            .myClass{ 
                background-color:  aqua; 
            } 
        </style> 
        <script type="text/javascript" src="js/jquery.min.js"></script> 
        <script type="text/javascript"> 
        	// 必须自己会使用的选择器  id选择器  $("#id") 类选择器 $('.class属性值')  标签选择器 $("标签名")
        	
            $(function(){ 
                //标签选择器 $("a")   
                //$("h3").addClass("myClass"); 
                //$("p").addClass("myClass"); 
                //ID选择器 $("#id")     $("p#id") 
                //$("#h31").addClass("myClass"); 
                //$("h3#h31").addClass("myClass"); 
                //类选择器 $(".class")    $("h2.class") 
                //$(".red1").addClass("myClass"); 
                //通配选择器 $("*") 
                //$("*").addClass("myClass"); 
                //并集选择器$("elem1,elem2,elem3") 
                //$("#h31,span,div").addClass("myClass"); 
                //后代选择器$(ul li)   
                //$("p span").addClass("myClass");   
                //父子选择器 $(ul>li)   
                //$("p>span").addClass("myClass"); 
                //后面第一个兄弟元素 prev + next 
                //$("h3+p").addClass("myClass"); 
                //后面所有的兄弟元素 prev ~ next 
                $("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> 
       
      <div> 
        <p>div   p</p>   
      </div> 
      
      <span>span</span> 
      
       <p class="red1"> 
       		狭义的Servlet是指Java语言实现的一个接口,广义的Servlet
       		是指任何实现了这个Servlet接口的类,一般情况下,人们将Servlet
       		理解为后者。Servlet运行于支持Java的应用服务器中。从原理上讲,
       		Servlet可以响应任何类型的请求,但绝大多数情况下Servlet只用
       		来扩展基于HTTP协议的Web服务器。 
       </p>
       
    </body> 
</html>

 

posted @ 2023-01-06 16:39  CodeWhisperer001  阅读(31)  评论(0编辑  收藏  举报