- 浏览: 1334001 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
kay11:
...
JAVA生成简单的随机字符串(a-zA-Z0-9) -
zhangliguoaccp:
您好关于登录页面的验验证码这块怎么解决的?还有登录成功后,跳转 ...
JAVA,模拟HTTP登录 -
107x:
不错,谢谢!
<c:foreach 循环 map -
wenjin:
不知楼主是不还在想请叫一下我自己开的Tomcat下载一个文件C ...
Android 下载文件及写入SD卡 -
zyywgf:
JSTL c标签,fn标签,fmt标签
官方网站:http://jquery.com Starterkit http://jquery.bassistance.de/jquery-starterkit.zip)jQuery Downloads (http://jquery.com/src/)
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("a").click(function() {
alert("Hello world!");
});
});
<script>
上边的效果是点击文档中所有a标签时将弹出对话框,$("a") 是一个jQuery选择器,$本身表示一个jQuery类,所有$()是构造一个jQuery对象,click()是这个对象的方法,同理$(document)也是一个jQuery对象,ready(fn)是$(document)的方法,表示当document全部下载完毕时执行函数。
在进行下面内容之前我还要说明一点$("p")和$("#p")的区别,$("p")表示取所有p标签(<p></p>)的元素,$("#p")表示取id为"p"(<span id="p"></span>)的元素.
一:核心部分
$(expr)
说明:该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础
参数:expr:字符串,一个查询表达式或一段html字符串
例子:
未执行jQuery前:
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()" >jQuery</a>
jQuery代码及功能:
function jq(){
alert($("div > p").html());
}
运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
function jq(){
$("<div><p>Hello</p></div>").appendTo("body");
}
运行:当点击id为test的元素时,向body中添加“<div><p>Hello</p></div>”
$(elem)
说明:限制jQuery作用于一个特定的dom元素,这个函数也接受xml文档和windows对象
参数: elem:通过jQuery对象压缩的DOM元素
例子:
未执行jQuery前:
<p>one</p>
<div>
<p>two</p>
</div><p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
alert($(document).find("div > p").html());
}
运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
function jq(){
$(document.body).background("black");
}
运行:当点击id为test的元素时,背景色变成黑色
$(elems)
说明:限制jQuery作用于一组特定的DOM元素
参数: elem:一组通过jQuery对象压缩的DOM元素
例子:
未执行jQuery前:
<form id="form1">
<input type="text" name="textfield">
<input type="submit" name="Submit" value="提交">
</form>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
$(form1.elements ).hide();
}
运行:当点击id为test的元素时,隐藏form1表单中的所有元素。
$(fn)
说明:$(document).ready()的一个速记方式,当文档全部载入时执行函数。可以有多个$(fn)当文档载入时,同时执行所有函数!
参数:fn (Function):当文档载入时执行的函数!
例子:
$( function(){
$(document.body).background("black");
})
运行:当文档载入时背景变成黑色,相当于onLoad。
$(obj)
说明:复制一个jQuery对象,
参数:obj (jQuery): 要复制的jQuery对象
例子:
未执行jQuery前:
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
var f = $("div");
alert($(f).find("p").html())
}
运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容。
each(fn)
说明:将函数作用于所有匹配的对象上
参数:fn (Function): 需要执行的函数
例子:
未执行jQuery前:
<img src="1.jpg"/>
<img src="1.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
$("img").each(function(){
this.src = "2.jpg"; });
}
运行:当点击id为test的元素时,img标签的src都变成了2.jpg。
eq(pos)
说明:减少匹配对象到一个单独得dom元素
参数:pos (Number): 期望限制的索引,从0 开始
例子:
未执行jQuery前:
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
alert($("p").eq(1).html())
}
运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容
get() get(num)
说明:获取匹配元素,get(num)返回匹配元素中的某一个元素
参数:get (Number): 期望限制的索引,从0 开始
例子:
未执行jQuery前:
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
alert($("p").get(1).innerHTML);
}
运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容
注意get和eq的区别,eq返回的是jQuery对象,get返回的是所匹配的dom对象,所有取$("p").eq(1)对象的内容用jQuery方法html(),而取$("p").get(1)的内容用innerHTML
index(obj)
说明:返回对象索引
参数:obj (Object): 要查找的对象
例子:
未执行jQuery前:
<div id="test1"></div>
<div id="test2"></div>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
alert($("div").index(document.getElementById('test1')));
alert($("div").index(document.getElementById('test2')));
}
运行:当点击id为test的元素时,两次弹出alert对话框分别显示0,1
size() Length
说明:当前匹配对象的数量,两者等价
例子:
未执行jQuery前:
<img src="test1.jpg"/>
<img src="test2.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
alert($("img").length);
}
运行:当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象
发表评论
-
jQuery 取值、赋值的基本方法[转]
2013-01-18 15:39 907/*获得TEXT.AREATEXT的值*/ var ... -
jquery处理JSONArray
2013-01-18 15:37 1378var bcvList = eval('<c:out ... -
jQuery的Select操作集合
2013-01-14 15:42 803jQuery获取Select选择的Text和Value: 语 ... -
JS 浮点计算 精度缺失
2013-01-14 15:41 1023<!DOCTYPE HTML PUBLIC " ... -
DIV层被Flash或表单遮盖的解决方法
2013-01-05 15:21 820在网页制作中,经常会遇到DIV层被Flash、input、se ... -
zTree子节点异步加载注意
2012-12-17 17:10 1908子节点异步加载注意1.后台数据不需要传pid到页面,页面的配置 ... -
js刷新页面--2【转】
2012-10-24 16:33 1079reload 方法,该方法强迫浏览器刷新当前页面。语法:loc ... -
jQuery 的DatePicker 添加一个Clear清除按钮
2012-08-17 16:13 22514$(document).ready(function () ... -
Ext 总结
2012-05-15 11:20 912一. GridPanel var sm ... -
javascript简易验证码
2012-04-10 16:33 1455<!DOCTYPE html PUBLIC " ... -
下拉框,且可以编辑
2011-05-17 14:22 1123一个,可以选择的下拉框,并可以实现自行输入值 < ... -
省市级联菜单,静态HTML
2011-05-17 10:21 1682<html> <head> ... -
input只允许输入数字
2011-04-21 13:53 1087function onlyNum(){ if(!((even ... -
javascript判断字符长度
2011-04-21 13:29 917function getlengthB(str){ ... -
HTML 日期
2011-02-24 17:40 1974html 写道 <!DOCTYPE HTML PUBL ... -
JS中window.setInterval和window.setTimeout的区别
2010-10-19 16:37 1367setTimeout(表达式,延时时间) 在执行时,是在载入后 ... -
dwr定时获取后台数据
2010-10-19 16:35 21291.在JSP页面加入展示代码: 新消息<input ty ... -
JS 跳出iframe框架,退出
2010-05-04 09:49 4603(1)session过期后登陆页面跳出iframe页面问题 登 ... -
文件上传页面控制动态添加删除的代码
2010-03-24 16:50 1093<%@ page language="java ... -
jQuery 操作手册(4)
2010-01-21 18:04 1518...
相关推荐
**jQuery入门手册1.3.2** jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这个“jQuery入门手册1.3.2”是针对初学者的指导性资料,旨在帮助读者快速...
jquery入门教程 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery 包装集 从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始...
### jQuery入门手册精要 #### 一、jQuery简介与优势 **jQuery** 是一款轻量级的 JavaScript 库,由 John Resig 在2006年1月创立,旨在简化 HTML 文档遍历、事件处理、动画以及 Ajax 交互开发。它的核心代码不到...
《jQuery入门手册及API》是一本面向初学者的指南,旨在帮助读者快速掌握jQuery这一强大的JavaScript库。jQuery简化了JavaScript的许多复杂操作,特别是在CSS选择、DOM操作、事件处理和AJAX方面。以下是对该书内容的...
这个入门手册旨在帮助初学者理解 jQuery 的核心概念和使用方法。 首先,jQuery 的核心部分是其选择器功能,它允许开发者使用 CSS 选择器、XPath 或 HTML 代码来选取页面上的元素。例如,`$("a")` 会选择所有的 `<a>...
**jQuery经典学习手册** jQuery,一个轻量级的JavaScript库,因其简洁的API和强大的功能而深受开发者喜爱。本手册将带你逐步深入了解jQuery,从基础到高级,让你全面掌握这个强大的工具。 ### 一、jQuery简介 ...
这个“jQuery 操作手册中文版”是初学者入门和进阶的宝贵资源,包含了丰富的 API、函数、选择器等内容,帮助开发者快速理解和掌握 jQuery。 **jQuery 的核心概念** 1. **选择器**: jQuery 的选择器类似于 CSS,...
jQuery 是一个著名的 JavaScript 库,由 John Resig 在2006年初创建,它极大地简化了DOM操作和Ajax交互,适合新手和经验丰富的开发者。jQuery 的核心理念是使代码更加简洁、可读和可重用,减少开发者的重复劳动。 ...
《jQuery中文API手册》是为...这份中文API手册不仅适合初学者入门,也是经验丰富的开发者查阅和参考的重要资源。通过深入学习,开发者可以更好地理解和利用jQuery的强大功能,构建出更加动态和交互性强的网页应用。
这个入门操作手册,"APEX5入门操作手册_V1.0",旨在引导初学者掌握APEX 5的基本操作和开发流程。以下是手册中的关键知识点: 1. **系统需求与建议**: - 推荐使用的浏览器是Firefox或Chrome,因为Internet ...
《jQuery入门到精通学习资源概览》 jQuery是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本资源集合是针对jQuery从入门到精通的学习资料,旨在帮助初学者快速...
### JQuery入门手册详解 #### 一、什么是JQuery JQuery是一个非常优秀的JavaScript库,它以其轻量级的体积(压缩后仅21K大小)和强大的功能深受开发者喜爱。作为一个跨平台的JavaScript库,JQuery支持多种浏览器,...
《jQuery使用手册》作为一本入门书籍,旨在帮助初学者快速掌握jQuery的基本用法和核心概念,从而在实际项目中灵活运用。 #### 核心知识点解析 ##### 1. 选择器与元素操作 jQuery最吸引人的特性之一就是其强大的...
1. **入门指南**: 解释如何引入jQuery库,创建第一个jQuery实例,以及使用选择器的基本概念。 2. **选择器与遍历**: 详述jQuery的各种选择器,以及如何遍历选定的元素集合。 3. **DOM操作**: 描述如何添加、删除、...
**jQuery入门教程** jQuery,一个轻量级的JavaScript库,由John Resig在2006年创建,因其简洁易用的API而迅速流行起来。它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。本教程将帮助初学者...
这个在线版手册不仅适合初学者入门,也对有经验的开发者在查阅特定功能时提供了便利。将其挂载在个人主页上,可以在任何时候快速查找和学习jQuery的相关知识,提升开发效率。 总的来说,jQuery 1.4.1是JavaScript...
这份"106个jQuery入门实例代码合集"是针对初学者精心编排的实践教程,旨在帮助新接触jQuery的朋友们快速掌握其基本用法和常见操作。 一、jQuery简介 jQuery是由John Resig于2006年创建的,它的核心理念是“写得更少...
首先,`index.html`通常是手册的主页面,它通常包含目录和入门指南,引导用户快速了解jQuery的基本概念和核心功能。在这个页面中,开发者可以找到关于选择器、DOM操作、事件处理、动画效果等主要内容的链接。 `ui....
总的来说,这个压缩包提供的资源覆盖了jQuery的基本用法、API、UI组件以及实际应用案例,非常适合初学者入门和有经验的开发者深入学习。通过这些资料,你可以掌握如何选择和操作DOM元素,处理事件,创建动画,以及...