jquery属性选择器的用法

2025-11-24 06:33:59

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() {

                $("[hreflang=en]").css("color","red");

        })

</script>

<html>

        <body>

                <div>

                        <div>

                                <div>

                                        <a href="#" hreflang="en">英文</a>

                                        <a href="#" hreflang="zh">中文</a>

                                </div>

                        </div>

                </div>

        </body>

</html>

jquery属性选择器的用法

2、运行程序,查看英文是否变成了红色字体:

jquery属性选择器的用法

3、选择指定属性值包含一个给定字符串的元素。

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() {

                $("input[name~='man']").val("猛男");

        })

</script>

<html>

        <body>

                <div class="container">

                        <div class="row">

                                <div class="col-md-3">

                                        <input name="man-news" /> 

                                </div>

                                

                                <div class="col-md-3">

                                        <input name="milk man" /> 

                                </div>

                                

                                <div class="col-md-3">

                                        <input name="letterman2" /> 

                                </div>

                                

                                <div class="col-md-3">

                                        <input name="newmilk" /> 

                                </div>

                        </div>

                </div>

        </body>

</html>

jquery属性选择器的用法

jquery属性选择器的用法

5、运行程序,查看有哪些输入框会有这个值。

我们看到只有<input name="milk man" /> 这个包含空格属性的input才有这个值。

jquery属性选择器的用法

6、选择指定属性是以给定字符串开始的元素:

语法:$("attribute^='value']"),查找有id属性,并且name属性并且以man结果的值。

<%@ 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() {

                $("input[id][name$='man']").val("百度");

        })

</script>

<html>

        <body>

                <div class="container">

                        <div class="row">

                                <div class="col-md-3">

                                        <input name="man-news" id="man-news"/> 

                                </div>

                                

                                <div class="col-md-3">

                                        <input name="milkman" /> 

                                </div>

                                

                                <div class="col-md-3">

                                        <input id="letterman" name="letterman" name="new-letterman" /> 

                                </div>

                                

                                <div class="col-md-3">

                                        <input name="newmilk" /> 

                                </div>

                        </div>

                </div>

        </body>

</html>

jquery属性选择器的用法

7、运行程序,查看程序的执行结果,只有<input id="letterman" name="letterman" name="new-letterman" />才能设置到值。

jquery属性选择器的用法

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢