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

JQuery小测试

阅读更多
<%@ 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功能测试源码_jquerydemo.zip

    《jQuery功能测试源码解析与实战应用》 jQuery,这个小巧而强大的JavaScript库,自2006年发布以来,就以其简洁的API和强大的功能深受开发者喜爱。它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互,使得前端...

    JS框架JQuery初步测试

    **JS框架JQuery初步测试** JQuery是一款广泛应用于前端开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在本文中,我们将深入探讨JQuery的基本概念、核心功能和常见用法...

    jquery1.2.6-1.7.1测试所需

    这个压缩包文件“jquery1.2.6-1.7.1测试所需”包含了从版本1.2.6到1.7.1的jQuery库,这是一系列非常重要的版本,因为它们见证了jQuery的快速发展和功能完善。 1. **jQuery 1.2.6**:这是jQuery早期的一个稳定版本,...

    超炫jQuery测试答题功能

    更详细"超炫jQuery测试答题功能”特效教程,http://www.sucaihuo.com/js/39.html。你也可以在素材火网页特效下载 http://www.sucaihuo.com/js,都是优质素材,最主要是既有教程,也有演示并且可下载哦,技术大咖也来...

    JQuery功能测试源码.zip

    三、jQuery测试实践 1. 单元测试:对于功能测试源码,我们可以使用JUnit、QUnit等单元测试框架,对jQuery的各个函数进行测试,确保它们按照预期工作。 2. 性能测试:通过模拟大量DOM操作和事件处理,评估jQuery在...

    JQuery功能测试源码

    **jQuery功能测试源码详解** jQuery是一个广泛应用于前端开发的JavaScript库,以其简洁的API和强大的功能著称。本测试源码旨在展示jQuery的核心功能,包括元素选择、事件处理、DOM操作以及动画效果等,帮助开发者更...

    Jquery跨域Ajax请求测试

    本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先,了解同源策略是理解跨域问题的关键。同源策略是浏览器为了保障用户安全而设定的一项机制,它规定了只有来自同一协议、同一域名和同一...

    JQuery选择器测试 离线版

    这个“JQuery选择器测试 离线版”是一个专门用于检验和学习jQuery选择器功能的应用,由一位国外专家创建,并进行了轻微的修改。** 在jQuery中,选择器分为多种类型,包括基础选择器、类别选择器、ID选择器、属性...

    jquery 测试题目 以及参考答案

    本篇将基于提供的"jQuery 测试题目 以及参考答案"来深入探讨jQuery的相关知识点。** 1. **jQuery选择器** - **基本选择器**:如 `$("#id")` 选择ID为指定ID的元素,`$(".class")` 选择具有指定类名的元素,`$("tag...

    基于JQuery实现的网页小游戏

    **jQuery实现的网页小游戏详解** 在网页开发领域,jQuery是一个非常流行和强大的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作等任务。本篇文章将深入探讨如何利用jQuery来实现一系列有趣的网页小游戏...

    jquery小游戏-台球

    我们可以使用jQuery的插件模式,将游戏的不同部分(如击球逻辑、碰撞检测、计分系统等)封装成独立的模块,便于管理和测试。 总的来说,利用jQuery实现台球小游戏是一个综合运用JavaScript、物理学、UI设计等多个...

    jQuery腾讯肌肤缺水指数测试

    【jQuery腾讯肌肤缺水指数测试】是一个基于jQuery技术开发的应用,旨在帮助用户了解自己的肌肤水分状况,通过互动式的测试提供个性化的护肤建议。这个项目利用了jQuery的强大功能,结合前端界面设计,为用户提供了一...

    应用js框架Jquery中ThickBox制作网页中div弹出效果

    其中,jQuery 的一个流行插件——ThickBox,就是一个用于创建全屏弹出效果的工具,尤其适合展示图片、视频或者任何网页内容。ThickBox 结合了 jQuery 的简洁性和强大的功能,使得在网页中实现 div 弹出效果变得非常...

    JQuery2.1.0的测试静态页面

    JQuery2.1.0的jar包已经有了,上传不了,就上传了一个测试的静态页面

    北大青鸟内部测试笔试题1

    北大青鸟内部测试笔试题1北大青鸟内部测试笔试题1北大青鸟内部测试笔试题1

    [其他类别]JQuery功能测试源码_jquerydemo(ASP.NET源码).rar

    【jQuery功能测试源码_jquerydemo(ASP.NET源码)】是一个针对JavaScript库jQuery的实践项目,主要用于展示和测试jQuery的各种功能。这个压缩包包含了在ASP.NET环境下使用jQuery的实例代码,可以帮助开发者深入理解...

    JQuery功能测试源码_aspx开发教程.rar

    【jQuery功能测试源码_aspx开发教程】 在Web开发领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。本教程将重点介绍如何利用jQuery在ASP.NET(ASPX)环境中...

    jquery easy ui模板

    **jQuery Easy UI 模板详解** jQuery Easy UI 是一个基于 jQuery 的前端开发框架,它提供了一系列的组件和样式,使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个压缩包包含的 "jQuery Easy UI 学习...

Global site tag (gtag.js) - Google Analytics