`
mimang2007110
  • 浏览: 232389 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

JQuery小测试

jQueryJavaScriptHTML 
阅读更多 
<%@ 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>

 

分享到：
| jquery层级选择器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics