JQuery 第二天 - 属性过滤选择器

最新推荐文章于 2025-08-10 18:18:28 发布

最新推荐文章于 2025-08-10 18:18:28 发布 · 161 阅读

文章标签：

#jQuery #CSS #HTML #ViewUI

Ajax 同时被 3 个专栏收录

8 篇文章

订阅专栏

JQuery

8 篇文章

订阅专栏

Ext js...

8 篇文章

订阅专栏

本文通过一个具体的示例展示了如何使用JQuery中的属性选择器来定位页面中的元素，并应用样式更改。示例中包含了多种属性选择器的用法，如[id]、[title=value]等。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <base href="<%=basePath%>"><title>JQuery DEMO</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <!--
        <link rel="stylesheet" type="text/css" href="styles.css">
        -->
        <style type="text/css">
        	div{
        		width:250px;
				height:100px;
				border:1px solid black;
				float:left;
				padding:10px;
        	}
			span{
				margin:3px;
				border:1px solid black;
				padding:5px;
			}
			h1,h2{
				display:inline;
			}
        </style>
		<!--引入 jquery.js 文件-->
        <script type="text/javascript" src="js/jquery/jquery-1.3.2.js">
        </script>
        <script type="text/javascript">
         		$(function(){
					//选取拥有属性id的元素
					$("div[id]").css("color","red");

					//选取title的值为 normal 的div元素
					$("div[title=normal]").css("color","blue");

					//选取title的值不为normal2 的span元素
					$("span[title!=normal2]").css("color","red");

					//选取属性的值以test开头的元素
					$("span[title^=test]").css("font-size","20");

					//选取属性的值以3结束的元素
					$("span[title$=3]").css("font-size","20");

					//选取属性的值含有 normal 的元素
					$("span[title*=normal]").css("font-size","20");

					//选取满足多个条件 选取拥有属性id,并且属性title以test结束的 div 元素
					$("div[id][title$=test]").css("color","blue");
				});
        </script>
    </head>
    <body>
    	<span title="normal">
			SPAN2
		</span>
		<div id="div1">
			<h1>div h1</h1>			
		</div>
		<div title="normal">
			<h2 >div h2</h2>
		</div>
		<div>
			<span>div span</span>
		</div>
		<div>
			<span title="test123">
				<span  id="sp1" title="normal2">div.div.span1</span>				
				<span>div.div.span2</span>				
			</span>
		</div>
		<span title="normal2">
			SPAN1
		</span>
    </body>
</html>