- 浏览: 286998 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
cheetah_ysc:
不错不错,我喜欢!
Java固定时间间隔执行 -
voyage_mh:
阿选百度竟然一下可以吧你百度出来
使用DWR注解Annotation
jQuery是一个非常优秀的JavaScript库。
使用jQuery动态更新HTML页面只需要两个步骤:
-
获取jQuery对象,jQuery对象通常是对DOM对象的包装
-
调用jQuery对象的方法来改变自身
学习jQuery只要掌握两点,一就是获取jQuery对象,二就是怎样灵活使用jQuery对象的方法。
让jQuery与其他JavaScript库共存:
-
如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的级联下拉效果
2010-11-25 22:17 2573基于jQuery的级联下拉效果 先看效果 JSP代码 ... -
基于jQuery的标签页效果
2010-11-25 20:25 1847JSP代码 <%@ page language ... -
基于jQuery的菜单
2010-11-25 20:23 1142JSP代码 <%@ page language=&qu ... -
基于jQuery的可编辑表格
2010-11-25 20:18 4828可编辑的表格 通过js来处理,分四步: 要解决内部单 ... -
使用jQuery技术进行用户名校验
2010-11-25 20:15 1216使用jQuery技术进行用户名校验 主要是在js代码中处理( ... -
jQuery中Ajax相关方法
2010-11-24 22:36 1346Ajax相关方法,两个工具方法(serialize(),ser ... -
jQuery动画效果相关方法
2010-11-24 22:31 987动画效果相关的方法 <html> < ... -
jQuery事件相关方法
2010-11-24 22:29 1110jQuery事件相关方法 <body> & ... -
jQuery支持的方法
2010-11-24 22:27 1203字符串,数组和对象相关的工具方法 <html> ... -
jQuery操作类数组的工具方法
2010-11-24 16:54 1238jQuery对象提供了几个常用的方法来操作类数组: < ...
相关推荐
### jQuery入门精要 #### 一、jQuery概览与崛起 **标题与描述解析:** "jquery 入门帮助.pdf"这一标题明确指向了对jQuery初学者的指导资料,而描述“对于了解ajax并初识jq的人很有帮助”则暗示了内容会涵盖jQuery...
一、jQuery入门 1. 引入jQuery库:在HTML文件中,可以通过在`<head>`标签内添加`<script>`标签来引入jQuery库,通常从CDN(内容分发网络)获取,如`https://code.jquery.com/jquery-latest.min.js`。 2. jQuery...
本篇将作为jQuery入门的起点,带领初学者逐步理解并掌握这个强大的工具。 ### 1. jQuery 的安装与引入 在开始学习jQuery之前,首先需要在项目中引入jQuery库。最常见的方式是通过CDN(内容分发网络)链接,这样...
**jQuery 入门经典教程** jQuery 是一个广泛应用于前端开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这个经典教程将带你深入理解jQuery的核心概念,帮助你快速上手并...
jQuery插件通常通过`$.fn.extend()`方法来扩展jQuery对象,使其具备新的方法。 **八、版本差异** 1.3.2是jQuery的一个较早版本,相比现在的最新版,可能缺少了一些特性或优化。例如,从1.9版本开始,jQuery移除了...
jquery入门教程 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery 包装集 从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始...
**jQuery技术入门介绍** jQuery,一个轻量级的JavaScript库,自2006年发布以来,因其简洁的API和强大的功能,迅速成为了前端开发人员的首选工具之一。本资源包"JQuery技术入门介绍_20090427"旨在帮助初学者掌握...
本教程将引导你快速入门jQuery,通过基础实例帮助你掌握其核心概念。 ### 1. jQuery 构造函数与 $(document).ready() `$` 符号是 jQuery 的核心构造函数,它可以用来选择和操作DOM元素。`$(function() {...})` 是...
接下来,学习"管理jQuery包装集",理解jQuery对象与JavaScript原生对象的区别,以及如何对选择的元素集合进行操作。jQuery包装集允许我们一次性对多个元素执行相同的操作,提高了代码效率。 在"操作元素的属性与...
### jQuery入门基础知识详解 #### 一、jQuery简介与特点 **jQuery** 是一款非常流行的 JavaScript 库,它的设计目标是让 Web 开发变得更加简洁高效。根据文档中的介绍,我们可以了解到以下几点关键信息: 1. **...
**jQuery入门小示例** jQuery 是一款非常流行的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画设计和Ajax交互等任务。对于初学者来说,掌握jQuery的基础知识可以大大提高开发效率,减少代码量。本文将...
**jQuery入门培训及案例** jQuery是一款广泛应用于前端开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。通过学习jQuery,开发者可以更高效地编写代码,提升网页的交互性和用户体验...
### jQuery入门教程精要 #### 一、简介与重要性 **jQuery**,作为一款流行的JavaScript库,自2006年诞生以来,迅速成为Web开发者们的首选工具。它简化了HTML文档遍历、事件处理、动画以及与服务器交互的过程。...
**jQuery入门与总结** jQuery是一个深受开发者喜爱的JavaScript库,它的出现极大地方便了JavaScript的编程,使得HTML元素的选择、操作和隐藏等任务变得更加简单。jQuery的核心理念是"write less, do more",即用更...
《jQuery JavaScript与CSS开发入门经典》是一本专为初学者设计的编程指南,旨在帮助读者快速掌握前端开发的核心技术——jQuery、JavaScript和CSS。通过学习这本书的源码,你可以深入理解这三个关键技术的工作原理,...
jQuery对象与DOM对象间可以相互转换,但只有jQuery对象能使用jQuery方法。 4. **选择器** - **基础选择器**:如`#id`(ID选择器)、`.class`(类选择器)和`element`(元素选择器)等,以及通配符`*`用于匹配所有...
**jQuery入门例子代码详解** jQuery是一个轻量级的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在本篇中,我们将深入探讨两个关键文件——"JQuery.html"和"jquery-1.3.2....