`

jQuery入门与介绍,jQuery对象

阅读更多

jQuery是一个非常优秀的JavaScript库。

 

使用jQuery动态更新HTML页面只需要两个步骤:

  1. 获取jQuery对象,jQuery对象通常是对DOM对象的包装

  2. 调用jQuery对象的方法来改变自身

学习jQuery只要掌握两点,一就是获取jQuery对象,二就是怎样灵活使用jQuery对象的方法。

 

让jQuery与其他JavaScript库共存:

  1. 如Prototype,要使他们两共存,就要解决$()函数的使用,解决办法就是取消jQuery中的$()函数,使用其他的代替 ,请看下面的代码
    <html>
      <head>
        <base href="<%=basePath%>">
        
        <title>取消$()函数,使用其他的代替</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">
    	<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
    
      </head>
      
      <body>
        <div id="a"></div>
        <script type="text/javascript">
        	var j = jQuery.noConflict();
        	var d = j("#a");
        	d.html("我要学习jQuery")
        </script>
      </body>
     

获取jQuery对象,看下面的代码
<body>
		<center>
			<h3>
				获取jQuery对象,jQuery()函数是获得jQuery对象的根本途径,有四种获得方式:
			</h3>
			<h3>
				第一种CSS选择器jQuery(CSS选择器)获得
			</h3>
			<h3>
				第二种HTMLjQuery(HTML)获得
			</h3>
			<h3>
				第三种element元素jQuery(element元素)获得
			</h3>
			<h3>
				第四种callback函数jQuery(callback)获得
			</h3>
		</center>
		<div id="msg1"></div>
		<div id="msg2"></div>
		<script type="text/javascript">
			//获取所有<div.../>标签对应的DOM对象
			$("div").append("新增的内容");
			//使用字符串创建一个DOM对象,并将添加到body元素内
			$("<input type='button' value='单击我'/>").appendTo(document.body);
			//直接将一个DOM对象包装成jQuery对象
			$(document.getElementById('msg1')).css("background-color", "#aaffaa").css(
					"border", "1px  solid black");
			//指定页面加载完成后
			$(function() {
				alert("页面加载完成");
			});
		</script>
	</body>
 使用jQuery函数,通过css选择器来访问DOM元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>使用jQuery()函数(以CSS选择器访问DOM元素)</title>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
		<style type="text/css">
		.test {
			font-size: 20pt;
		}
		</style>
		
		<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
		
	</head>
	<body>
		<ul>
			<li id="java">
				Java
			</li>
			<li id="javaee" class="test">
				Java EE
			</li>
			<li id="ajax">
				Ajax
			</li>
			<li id="xml">
				XML
			</li>
			<li id="ejb">
				EJB
			</li>
			<li>
				<span id="hibernate">Hibernate</span>
			</li>
		</ul>
		<script type="text/javascript">
			//获取id为java的元素(#id),文档处理,使用append(content)函数
			$("#java").append("<b> 是id为java的元素</b>");
			//获取所有包含id属性的<li.../>元素,为它们增加背景色(tagName[attribute]),操作CSS使用css(name, value)函数
			$("li[id]").css("background-color", "#bbbbff");
			//获取class属性为test的元素,并为它们增加边框(.class)的css选择器,操作CSS使用CSS(name, value)函数
			$(".test").css("border", "3px dotted black");
			//同时获取id为xml、hibernate的元素
			$("#xml,#hibernate").append("<b> 是id为xml、hibernate其中之一的元素</b>");
			//获取ul之内,id为hibernate的元素
			$("ul #hibernate").append("<br /><b> 位于ul之内、id为hibernate的子元素</b>");
			//获取ul之内,id为ajx的直接子元素
			$("ul>#ajax").append("<b>ul之内、id为ajax的子元素</b>").css("border",
					"2px solid black");
			//获取id为ajax之后的所有li元素
			$("#ajax~li").css("background-color", "#ff5555");
		</script>
	</body>
</html>
 使用jQuery函数,通过css选择器来访问DOM元素(附加限定)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>使用jQuery()函数(选择器附加限定词)</title>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
		<style type="text/css">
		.test {
			font-size: 20pt;
		}
		</style>
		<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
	</head>
	<body>
		<ul>
			<li id="java">
				Java
			</li>
			<li id="javaee" class="test">
				Java EE
			</li>
			<li id="ajax">
				Ajax
			</li>
			<li id="xml">
				XML
			</li>
			<li id="ejb">
				EJB
			</li>
			<li>
				<span id="hibernate">Hibernate</span>
			</li>
		</ul>
		
		<script type="text/javascript">
			//访问ul元素下第一层的第一个li子元素。
			$("ul>li:first").append("<b> 是ul元素之内第一个li子元素</b>");
			//访问ul元素之内,没有id属性的li子元素
			$("ul>li:not([id])").append("<b> 是ul元素之内、没有id属性li子元素</b>");
			//访问ul元素之内,索引为奇数的li子元素,并为它们添加背景色
			$("ul>li:even").css("background-color", "#ccffcc");
			//访问ul元素之内,索引大于4的li子元素(元素索引从0开始)
			$("ul>li:gt(4)").append("<br/><b> 是ul元素之内、索引大于4的li子元素</b>").css("border",
					"1px dashed black");
			//访问ul元素之内,且包含span元素的li子元素
			$("ul>li:has('span')").append("<br/><b> 是ul元素之内、且包含span元素的li子元素</b>");
			//访问li元素之内,且可见的span子元素
			$("li>span:visible").append("<b> 是li元素之内,且可见的span子元素</b>").css(
					"background-color", "#bbbbbb");
		</script>
	</body>
</html>
 使用jQuery()函数(表单相关选择器)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>使用jQuery()函数(表单相关选择器)</title>
		<meta name="website" content="http://www.crazyit.org" />
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
		<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
	</head>
	<body>
		<input id="user" type="text" />
		<br />
		<input id="pass" type="password" />
		<br />
		<textarea id="intro"></textarea>
		<br />
		<select id="gender">
			<option value="male" selected="selected">
				男
			</option>
			<option value="female">
				女
			</option>
		</select>
		<br />
		<br />
		<br />
		<input id="pass" type="checkbox" checked="checked" value="xx" />
		<br />
		<script type="text/javascript">
			//获取所有的input、textarea、button、select元素,也可以使用tagName("input")
			$(":input").val("test");
			//获取所有指定了selected="selected"的元素
			$(":selected").css("border", "2px dashed black");
			//获取所有指定了checked="checked"的元素,并取消它们的选中
			$(":checked").attr("checked", "");;
		</script>
	</body>
</html>
 

 

分享到:
评论

相关推荐

    jquery 入门帮助.pdf

    ### jQuery入门精要 #### 一、jQuery概览与崛起 **标题与描述解析:** "jquery 入门帮助.pdf"这一标题明确指向了对jQuery初学者的指导资料,而描述“对于了解ajax并初识jq的人很有帮助”则暗示了内容会涵盖jQuery...

    jQuery 入门到精通

    一、jQuery入门 1. 引入jQuery库:在HTML文件中,可以通过在`&lt;head&gt;`标签内添加`&lt;script&gt;`标签来引入jQuery库,通常从CDN(内容分发网络)获取,如`https://code.jquery.com/jquery-latest.min.js`。 2. jQuery...

    jquery入门(一)

    本篇将作为jQuery入门的起点,带领初学者逐步理解并掌握这个强大的工具。 ### 1. jQuery 的安装与引入 在开始学习jQuery之前,首先需要在项目中引入jQuery库。最常见的方式是通过CDN(内容分发网络)链接,这样...

    jQuery 入门经典教程

    **jQuery 入门经典教程** jQuery 是一个广泛应用于前端开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这个经典教程将带你深入理解jQuery的核心概念,帮助你快速上手并...

    jQuery入门手册1.3.2

    jQuery插件通常通过`$.fn.extend()`方法来扩展jQuery对象,使其具备新的方法。 **八、版本差异** 1.3.2是jQuery的一个较早版本,相比现在的最新版,可能缺少了一些特性或优化。例如,从1.9版本开始,jQuery移除了...

    jQuery使用手册 jquery入门教程

    jquery入门教程 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery 包装集 从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始...

    JQuery技术入门介绍_20090427

    **jQuery技术入门介绍** jQuery,一个轻量级的JavaScript库,自2006年发布以来,因其简洁的API和强大的功能,迅速成为了前端开发人员的首选工具之一。本资源包"JQuery技术入门介绍_20090427"旨在帮助初学者掌握...

    jquery快速入门实例

    本教程将引导你快速入门jQuery,通过基础实例帮助你掌握其核心概念。 ### 1. jQuery 构造函数与 $(document).ready() `$` 符号是 jQuery 的核心构造函数,它可以用来选择和操作DOM元素。`$(function() {...})` 是...

    jquery入门基础知识

    ### jQuery入门基础知识详解 #### 一、jQuery简介与特点 **jQuery** 是一款非常流行的 JavaScript 库,它的设计目标是让 Web 开发变得更加简洁高效。根据文档中的介绍,我们可以了解到以下几点关键信息: 1. **...

    Jquery入门小示例

    **jQuery入门小示例** jQuery 是一款非常流行的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画设计和Ajax交互等任务。对于初学者来说,掌握jQuery的基础知识可以大大提高开发效率,减少代码量。本文将...

    jquery入门培训及案例

    **jQuery入门培训及案例** jQuery是一款广泛应用于前端开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。通过学习jQuery,开发者可以更高效地编写代码,提升网页的交互性和用户体验...

    jquery入门教程.pdf

    ### jQuery入门教程精要 #### 一、简介与重要性 **jQuery**,作为一款流行的JavaScript库,自2006年诞生以来,迅速成为Web开发者们的首选工具。它简化了HTML文档遍历、事件处理、动画以及与服务器交互的过程。...

    JQuery入门,JQuery总结

    **jQuery入门与总结** jQuery是一个深受开发者喜爱的JavaScript库,它的出现极大地方便了JavaScript的编程,使得HTML元素的选择、操作和隐藏等任务变得更加简单。jQuery的核心理念是"write less, do more",即用更...

    jQuery JavaScript与CSS开发入门经典 源码

    《jQuery JavaScript与CSS开发入门经典》是一本专为初学者设计的编程指南,旨在帮助读者快速掌握前端开发的核心技术——jQuery、JavaScript和CSS。通过学习这本书的源码,你可以深入理解这三个关键技术的工作原理,...

    jquery入门培训文档

    jQuery对象与DOM对象间可以相互转换,但只有jQuery对象能使用jQuery方法。 4. **选择器** - **基础选择器**:如`#id`(ID选择器)、`.class`(类选择器)和`element`(元素选择器)等,以及通配符`*`用于匹配所有...

    JQuery入门的例子代码

    **jQuery入门例子代码详解** jQuery是一个轻量级的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在本篇中,我们将深入探讨两个关键文件——"JQuery.html"和"jquery-1.3.2....

Global site tag (gtag.js) - Google Analytics