- 浏览: 1334086 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
kay11:
...
JAVA生成简单的随机字符串(a-zA-Z0-9) -
zhangliguoaccp:
您好关于登录页面的验验证码这块怎么解决的?还有登录成功后,跳转 ...
JAVA,模拟HTTP登录 -
107x:
不错,谢谢!
<c:foreach 循环 map -
wenjin:
不知楼主是不还在想请叫一下我自己开的Tomcat下载一个文件C ...
Android 下载文件及写入SD卡 -
zyywgf:
JSTL c标签,fn标签,fmt标签
二:DOM操作
属性
我们以<img id="a" scr="5.jpg"/>为例,在原始的javascript里面可以用var o=document.getElementById('a')取的id为a的节点对象,在用o.src来取得或修改该节点的scr属性,在jQuery里$("#a")将得到jQuery对象[ <img id="a" scr="5.jpg"/> ],然后可以用jQuery提供的很多方法来进行操作,如$("#a").scr()将得到5.jpg,$("#a").scr("1.jpg")将该对象src属性改为1,jpg。下面我们来讲jQuery提供的众多jQuery方法,方便大家快速对DOM对象进行操作
herf() herf(val)
说明:对jQuery对象属性herf的操作。
例子:
未执行jQuery前
<a href="1.htm" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
alert($("#test").href());
$("#test").href("2.html");
}
运行:先弹出对话框显示id为test的连接url,在将其url改为2.html,当弹出对话框后会看到转向到2.html
同理,jQuery还提供类似的其他方法,大家可以分别试验一下:
herf() herf(val) html() html(val) id() id (val) name() name (val) rel() rel (val)
src() src (val) title() title (val) val() val(val)
操作
after(html) 在匹配元素后插入一段html
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
$("#test").after("<b>Hello</b>");
}
执行后相当于:
<a href="#" id="test" onClick="jq()">jQuery</a><b>Hello</b>
after(elem) after(elems) 将指定对象elem或对象组elems插入到在匹配元素后
<p id="test">after</p><a href="#" onClick="jq()">jQuery</a>
jQuery代码及功能
function jq(){
$("a").after($("#test"));
}
执行后相当于
<a href="#" onClick="jq()">jQuery</a><p id="test">after</p>
append(html)在匹配元素内部,且末尾插入指定html
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
$("#test").append("<b>Hello</b>");
}
执行后相当于
<a href="#" onClick="jq()">jQuery<b>Hello</b></a>
同理还有append(elem) append(elems) before(html) before(elem) before(elems)请执行参照append和after的方来测试、理解!
appendTo(expr) 与append(elem)相反
<p id="test">after</p><a href="#" onClick="jq()">jQuery</a>
jQuery代码及功能
function jq(){
$("a"). appendTo ($("#test"));
}
执行后相当于
<p id="test">after<a href="#" onClick="jq()">jQuery</a> </p>
clone() 复制一个jQuery对象
<p id="test">after</p><a href="#" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
$("#test").clone().appendTo($("a"));
}
复制$("#test")然后插入到<a>后,执行后相当于
<p id="test">after</p><a href="#" onClick="jq()">jQuery</a><p id="test">after</p>
empty() 删除匹配对象的所有子节点
<div id="test">
<span>span</span>
<p>after</p>
</div>
<a href="#" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
$("#test").empty();
}
执行后相当于
<div id="test"></div><a href="#" onClick="jq()">jQuery</a>
insertAfter(expr) insertBefore(expr)
按照官方的解释和我的几个简单测试insertAfter(expr)相当于before(elem),insertBefore(expr)相当于after (elem)
prepend (html) prepend (elem) prepend (elems) 在匹配元素的内部且开始出插入
通过下面例子区分append(elem) appendTo(expr) prepend (elem)
<p id="a">p</p>
<div>div</div>
执行$("#a").append($("div")) 后相当于
<p id="a">
P
<div>div</div>
</p>
执行$("#a").appendTo($("div")) 后 相当于
<div>
div
<p id="a">p</p>
</div>
执行$("#a").prepend ($("div")) 后 相当于
<p id="a">
<div>div</div>
P
</p>
remove() 删除匹配对象
注意区分empty(),empty()移出匹配对象的子节点,remove(),移出匹配对象
wrap(htm) 将匹配对象包含在给出的html代码内
<p>Test Paragraph.</p> <a href="#" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
$("p").wrap("<div class='wrap'></div>");
}
执行后相当于
<div class='wrap'><p>Test Paragraph.</p></div>
wrap(elem) 将匹配对象包含在给出的对象内
<p>Test Paragraph.</p><div id="content"></div>
<a href="#" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
$("p").wrap( document.getElementById('content') );
}
执行后相当于
<div id="content"><p>Test Paragraph.</p></div>
遍历、组合
add(expr) 在原对象的基础上在附加符合指定表达式的jquery对象
<p>Hello</p><p><span>Hello Again</span></p>
<a href="#" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
var f=$("p").add("span");
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}
执行$("p")得到匹配<p>的对象,有两个,add("span")是在("p")的基础上加上匹配<span >的对象,所有一共有3个,从上面的函数运行结果可以看到$("p").add("span")是3个对象的集合,分别是[<p>Hello</p>],[<p><span>Hello Again</span></p>],[<span>Hello Again</span>]。
add(el) 在匹配对象的基础上在附加指定的dom元素。
$("p").add(document.getElementById("a"));
add(els) 在匹配对象的基础上在附加指定的一组对象,els是一个数组。
<p>Hello</p><p><span>Hello Again</span></p>
jQuery代码及功能:
function jq(){
var f=$("p").add([document.getElementById("a"), document.getElementById("b")])
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}
注意els是一个数组,这里的[ ]不能漏掉。
ancestors () 依次以匹配结点的父节点的内容为对象,根节点除外(有点不好理解,看看下面例子就明白了)
<div>
<p>one</p>
<span>
<u>two</u>
</span>
</div>
jQuery代码及功能:
function jq(){
var f= $("u").ancestors();
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}
第一个对象是以<u>的父节点的内容为对象,[ <u>two</u> ]
第二个对象是以<u>的父节点的父节点(div)的内容为对象,[<p>one</p><span><u>two</u></span> ]
一般一个文档还有<body>和<html>,依次类推下去。
ancestors (expr) 在ancestors()的基础上只取符合表达式的对象
如上各例子讲var f改为var f= $("u").ancestors(“div”),则只返回一个对象:
[ <p>one</p><span><u>two</u></span> ]
children() 返回匹配对象的子节点
<p>one</p>
<div id="ch">
<span>two</span>
</div>
jQuery代码及功能:
function jq(){
alert($("#ch").children().html());
}
$("#ch").children()得到对象[ <span>two</span> ].所以.html()的结果是”two”
children(expr) 返回匹配对象的子节点中符合表达式的节点
<div id="ch">
<span>two</span>
<span id="sp">three</span>
</div>
jQuery代码及功能
function jq(){
alert($("#ch").children(“#sp”).html());
}
$("#ch").children()得到对象[<span>two</span><span id="sp">three</span> ].
$("#ch").children(“#sp”)过滤得到[<span id="sp">three</span> ]
parent () parent (expr)取匹配对象父节点的。参照children帮助理解
contains(str) 返回匹配对象中包含字符串str的对象
<p>This is just a test.</p><p>So is this</p>
jQuery代码及功能:
function jq(){
alert($("p").contains("test").html());
}
$("p")得到两个对象,而包含字符串”test”只有一个。所有$("p").contains("test")返回 [ <p>This is just a test.</p> ]
end() 结束操作,返回到匹配元素清单上操作前的状态.
filter(expr) filter(exprs) 过滤现实匹配符合表达式的对象 exprs为数组,注意添加“[ ]”
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
jQuery代码及功能:
function jq(){
alert($("p").filter(".selected").html())
}
$("p")得到三个对象,$("p").contains("test")只返回class为selected的对象。
find(expr) 在匹配的对象中继续查找符合表达式的对象
<p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>
Query代码及功能:
function jq(){
alert($("p").find("#a").html())
}
在$("p")对象中查找id为a的对象。
is(expr) 判断对象是否符合表达式,返回boolean值
<p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>
Query代码及功能:
function jq(){
alert($("#a").is("p"));
}
在$("#a ")是否符合jquery表达式。
大家可以用$("#a").is("div"); ("#a").is("#a")多来测试一下
next() next(expr) 返回匹配对象剩余的兄弟节点
<p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>
jQuery代码及功能
function jq(){
alert($("p").next().html());
alert($("p").next(".selected").html());
}
$("p").next()返回 [ <p id="a">Hello Again</p> , <p class="selected">And Again</p> ]两个对象
$("p").next(".selected)只返回 [<p class="selected">And Again</p> ]一个对象
prev () prev (expr) 参照next理解
not(el) not(expr) 从jQuery对象中移出匹配的对象,el为dom元素,expr为jQuery表达式。
<p>one</p><p id="a">two</p>
<a href="#" onclick="js()">jQuery</a<span
发表评论
-
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 804jQuery获取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 1975html 写道 <!DOCTYPE HTML PUBL ... -
JS中window.setInterval和window.setTimeout的区别
2010-10-19 16:37 1367setTimeout(表达式,延时时间) 在执行时,是在载入后 ... -
dwr定时获取后台数据
2010-10-19 16:35 21301.在JSP页面加入展示代码: 新消息<input ty ... -
JS 跳出iframe框架,退出
2010-05-04 09:49 4603(1)session过期后登陆页面跳出iframe页面问题 登 ... -
文件上传页面控制动态添加删除的代码
2010-03-24 16:50 1094<%@ 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 是一个著名的 JavaScript 库,由 John Resig 在2006年初创建,它极大地简化了DOM操作和Ajax交互,适合新手和经验丰富的开发者。jQuery 的核心理念是使代码更加简洁、可读和可重用,减少开发者的重复劳动。 ...
这个“jQuery 操作手册中文版”是初学者入门和进阶的宝贵资源,包含了丰富的 API、函数、选择器等内容,帮助开发者快速理解和掌握 jQuery。 **jQuery 的核心概念** 1. **选择器**: jQuery 的选择器类似于 CSS,...
2. **DOM操作**:jQuery提供了简便的DOM操作方法,如`append()`用于在元素内部添加内容,`prepend()`在元素内部开头插入内容,`remove()`移除元素,`html()`、`text()`和`attr()`分别用于设置或获取HTML内容、文本...
这个入门操作手册,"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交互。本教程将帮助初学者...
2. **DOM操作**:jQuery封装了DOM操作,如`.append()`、`.prepend()`、`.html()`、`.attr()`等,使得插入、删除、修改元素内容和属性变得更加便捷。 3. **事件处理**:jQuery的事件处理机制允许开发者用更简洁的...
这份"106个jQuery入门实例代码合集"是针对初学者精心编排的实践教程,旨在帮助新接触jQuery的朋友们快速掌握其基本用法和常见操作。 一、jQuery简介 jQuery是由John Resig于2006年创建的,它的核心理念是“写得更少...
首先,`index.html`通常是手册的主页面,它通常包含目录和入门指南,引导用户快速了解jQuery的基本概念和核心功能。在这个页面中,开发者可以找到关于选择器、DOM操作、事件处理、动画效果等主要内容的链接。 `ui....
总的来说,这个压缩包提供的资源覆盖了jQuery的基本用法、API、UI组件以及实际应用案例,非常适合初学者入门和有经验的开发者深入学习。通过这些资料,你可以掌握如何选择和操作DOM元素,处理事件,创建动画,以及...