jquery基础选择器的用法

 时间:2026-02-13 08:01:19

1、选择所有元素:

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%

        pageContext.setAttribute("APP_PATH",request.getContextPath());

%>

<!-- 此时表示根据设备的大小调整页面的显示宽度 -->

<meta name="viewport" content="width=device-width,initial-scale=1">

<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>

<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />

<script type="text/javascript"块倘 src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<script type="text/javascript">

        $(function() {

                $("div *").html("我是大神");

        })

</script>

<html>

        <body>

                <div>

   侮陵荡                    

                        <label></label>

                </div>

        </body>

</html>

jquery基础选择器的用法

jquery基础选择器的用法

2、运行程序,查看程序的执行结果,div下的单个表单都加上了我们脚本中的内容。

jquery基础选择器的用法

3、类选择器,选择给定类名"pcontent"的所有元素。

<%@ page language="java" contentType="text/html; charset=UTF-8"

 蚊驾   pageEncoding="UTF-8"%>

<%@taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%

        pageContext.setAttribute("APP_PATH",request.getContextPath());

%>

<!-- 此时表示根据设备的大小调整页面的显示宽度 -->

<meta name="viewport" content="width=device-width,initial-scale=1">

<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>

<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />

<script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<script type="text/javascript">

        $(function() {

                $(".pcontent").html("我是大神");

        })

</script>

<html>

        <body>

                <div>

                        <p class="pcontent">

                        <label></label>

                </div>

        </body>

</html>

jquery基础选择器的用法

4、元素选择器:根据给定标记名称选择所有的元素:

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%

        pageContext.setAttribute("APP_PATH",request.getContextPath());

%>

<!-- 此时表示根据设备的大小调整页面的显示宽度 -->

<meta name="viewport" content="width=device-width,initial-scale=1">

<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>

<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />

<script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<script type="text/javascript">

        $(function() {

                $("span").html("我是大神666");

        })

</script>

<html>

        <body>

                <div>

                       

                        <label></label>

                        <span></span>

                </div>

        </body>

</html>

jquery基础选择器的用法

5、id选择器:选择一个具有给定id属性的单个元素:

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%

        pageContext.setAttribute("APP_PATH",request.getContextPath());

%>

<!-- 此时表示根据设备的大小调整页面的显示宽度 -->

<meta name="viewport" content="width=device-width,initial-scale=1">

<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>

<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />

<script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<script type="text/javascript">

        $(function() {

                $("#content").html("我是大神666");

        })

</script>

<html>

        <body>

                <div>

                       

                        <label></label>

                        <span id="content"></span>

                </div>

        </body>

</html>

jquery基础选择器的用法

6、多个元素选择器,将每一个选择器匹配到的元素合并后一起返回。

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%

        pageContext.setAttribute("APP_PATH",request.getContextPath());

%>

<!-- 此时表示根据设备的大小调整页面的显示宽度 -->

<meta name="viewport" content="width=device-width,initial-scale=1">

<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>

<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />

<script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<script type="text/javascript">

        $(function() {

                $("#content,p,label").html("我是大神6676");

        })

</script>

<html>

        <body>

                <div>

                       

                        <label></label>

                        <span id="content"></span>

                </div>

        </body>

</html>

jquery基础选择器的用法

  • jquery怎么使用选择器
  • jquery 选择器 如何实用
  • jQuery九大选择器
  • jQuery选择器总结
  • jQuery 选择器:*号选择全部
  • 热门搜索
    我明白了什么作文 意味深长是什么意思 未来世界是什么样的 槿的意思 鹦鹉学舌的意思 走婚是什么意思 fmvp是什么意思 诸葛亮挥泪斩马谡是因为什么一事 严阵以待的意思 ai用什么打开