JQuery小测试

最新推荐文章于 2025-06-19 20:05:32 发布

原创最新推荐文章于 2025-06-19 20:05:32 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #HTML #ViewUI

JQuery文章专栏收录该内容

12 篇文章

订阅专栏

本文介绍使用JQuery进行DOM元素的选择与动态创建的方法。包括通过不同选择器获取特定元素，如div内的p标签及特定类名的元素；演示如何创建新的div与输入按钮，并绑定点击事件。

<%@ 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 testP()
    	{
    		//获取div中的p对象
    		$("div > p").each(function(i){alert("获取div中的p对象\n" + $(this).text());});
    		//获取div中class名称是pp的对象，包含span对象
    		$("div > .pp").each(function(i){alert("获取div中class名称是pp的对象，包含span对象\n" + $(this).text());});
    		//获取全文中class名称是pp的对象，包含p对象和span对象
    		$(".pp").each(function(i){alert("获取全文中class名称是pp的对象，包含p对象和span对象\n" + $(this).text());});
    		//获取div中p的class名称是pp的对象，不包含div中的span对象
    		$("div").find("p.pp").each(function(i){alert("获取div中p的class名称是pp的对象，不包含div中的span对象\n" + $(this).text());});
    	}
    	function createrDiv()
    	{
    		//创建一个层，层里面有两个P对象，把该层添加至body
    		$("<div id='create' style='border:solid 1px orange;'><p>十</p><p class='pp'>十一</p></div><br/>").appendTo("body");
    		//创建一个层，层里面有两个P对象，把该层添加至现有的层对象中的div对象
    		$("<div id='create' style='border:solid 1px orange;'><p>十</p><p class='pp'>十一</p></div><br/>").appendTo($("#div1 > div"));
    	}
    	function createInput()
    	{
    		//动态创建一个按钮
    		//需要注意的是第一个参数是完整的HTML标记，事件注册函数时不能加双引号
    		$("<input>",{
    			type:"button",
    			value:"动态创建的按钮",
    			click:function (){alert('这是动态创建的哟！');}
    		}).appendTo("body");
    	}
    </script>

  </head>

<body>
  	<input type="button" value="获取元素" onclick="testP();"/>&nbsp;&nbsp;<input type="button" value="创建一个层和按钮" onclick="createrDiv();createInput();"/>
    <p>一</p><br/>
    <div id="div1" style="border:solid 1px red;">
    	<p>二</p><br/>
    	<p>三</p><br/>
    	<p class="pp">五</p><br/>
    	<p class="pp">六</p><br/>
    	<div class="pp" style="border:solid 1px blue;">八</div><br/>
    </div><br/>
    <p>四</p><br/>
    <p class="pp">七</p><br/>
  </body>
</html>