jquery属性选择器的用法

原创
|
浏览：4350
|
更新：2018-01-27 14:59
|
标签：JQUERY

分步阅读

jquery属性选择器的用法

工具/原料

jquery
eclipse

方法/步骤

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>
2
运行程序，查看英文是否变成了红色字体：
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>
5
运行程序，查看有哪些输入框会有这个值。
我们看到只有<input name="milk man" /> 这个包含空格属性的input才有这个值。
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>
6
该信息未经授权抓取自百度经验
7
运行程序，查看程序的执行结果，只有<input id="letterman" name="letterman" name="new-letterman" />才能设置到值。
END