jQuery之基本选择器

敲代码敲到头发茂密

已于 2024-03-19 10:43:59 修改

阅读量366

点赞数 2

分类专栏：前端 # JavaScript 文章标签： jquery javascript css

于 2022-01-24 07:00:00 首次发布

本文链接：https://blog.csdn.net/YZL40514131/article/details/122611751

版权

前端同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

JavaScript

18 篇文章 2 订阅

订阅专栏

在这里插入图片描述

jQuery之基本选择器

基本选择器
案例

基本选择器

标签选择器：$('p')
id选择器：$(’#id‘)、$('p#id')
类选择器：$('.class')、$('h1.class')
通配选择器：$('*')
并集选择器：$('elem1,elem2,elem3')
后代选择器：$(ul li)
父子选择器：$(ul>li)
后面第一个兄弟元素 prev + next
后面所有的兄弟元素 prev ~ next

如果作为一个后端开发人员，必须会使用的选择器
id选择器 $("#id")
类选择器 $('.class属性值')
标签选择器 $("标签名")
addClass()方法表示增加类属性

案例

<!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"> 

            $(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>

敲代码敲到头发茂密

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery之基本选择器

基本选择器标签选择器：$('p')id选择器：$(’#id‘)、$('p#id')类选择器：$('.class')、$('h1.class')通配选择器：$('*')并集选择器：$('elem1,elem2,elem3')后代选择器：$(ul li)父子选择器：$(ul>li)后面第一个兄弟元素 prev + next后面所有的兄弟元素 prev ~ next如果作为一个后端开发人员，必须会使用的选择器id选择器 $("#id")类选择器 $('.class属性值')标签选
复制链接

扫一扫