jquery内容选择器

JQuery选择器实战

最新推荐文章于 2024-09-05 16:56:18 发布

原创最新推荐文章于 2024-09-05 16:56:18 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #CSS #单元测试 #HTML #ViewUI

JQuery文章专栏收录该内容

12 篇文章

订阅专栏

<%@ page language="java" pageEncoding="GBK"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <title>JQuery单元测试</title>
    <script type="text/javascript" src="js/jquery-1.4.3.js"></script>
    <script type="text/javascript">
    	$(function(){
    		//DOM加载完成后给div和table加样式
    		$("div").css({border:"solid 1px red",width:"20%"});
    		$("table").css({border:"solid 1px red",width:"20%"});
    	});
    	function contentTest()
    	{
    		//匹配内容中含有John的层对象
    		$("div:contains('John')").each(function(i){alert($(this).text());});
    	}
    	function emptyTest()
    	{
    		//匹配内容为空的td对象
    		$("td:empty").each(function(i){alert("id:" + $(this).attr("id"));});
    	}
    	function hasTest()
    	{
    		//匹配含有p对象的div元素
    		$("div:has(p)").each(function(i){alert($(this).html());});
    	}
    	function parentTest()
    	{
    		//匹配内容包含子元素的td对象
    		$("td:parent").each(function(i){alert($(this).html());});
    	}
    </script>
  </head>
  
  <body>
  	<input type="button" value="匹配包含John的层" onclick="contentTest();"><br/><br/>
  	<div>John Resig</div><br/>
	<div>George Martin</div><br/>
	<div>Malcom John Sinclair</div><br/>
	<div>J. Ohn</div><br/>
	
	<input type="button" value="匹配空元素" onclick="emptyTest();">
	<input type="button" value="匹配含有子元素的对象" onclick="parentTest();"><br/><br/>
	<table border="1" cellspacing="0" cellpadding="0">
	  <tr><td>Value 1</td><td id="1"></td></tr>
	  <tr><td>Value 2</td><td id="2"></td></tr>
	</table><br/>
	
	<input type="button" value="匹配含有P的div" onclick="hasTest();"><br/><br/>
	<div><p>Hello</p></div>
	<div>Hello again!</div>
  </body>
</html>