平民王子
- 浏览: 286246 次
- 性别:
- 来自: 深圳
-
文章分类
最新评论
-
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 2572基于jQuery的级联下拉效果 先看效果 JSP代码 ... -
基于jQuery的标签页效果
2010-11-25 20:25 1843JSP代码 <%@ page language ... -
基于jQuery的菜单
2010-11-25 20:23 1137JSP代码 <%@ page language=&qu ... -
基于jQuery的可编辑表格
2010-11-25 20:18 4824可编辑的表格 通过js来处理，分四步： 要解决内部单 ... -
使用jQuery技术进行用户名校验
2010-11-25 20:15 1212使用jQuery技术进行用户名校验 主要是在js代码中处理（ ... -
jQuery中Ajax相关方法
2010-11-24 22:36 1343Ajax相关方法，两个工具方法（serialize(),ser ... -
jQuery动画效果相关方法
2010-11-24 22:31 984动画效果相关的方法 <html> < ... -
jQuery事件相关方法
2010-11-24 22:29 1104jQuery事件相关方法 <body> & ... -
jQuery支持的方法
2010-11-24 22:27 1199字符串，数组和对象相关的工具方法 <html> ... -
jQuery操作类数组的工具方法
2010-11-24 16:54 1233jQuery对象提供了几个常用的方法来操作类数组： < ...
相关推荐
### 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简介与特点 **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....