jquery-操作DOM - 简书
jquery-操作DOM
使用attr()方法控制元素的属性
attr()方法的作用是设置或者返回元素的属性，其中attr(属性名)格式是获取元素属性名的值，attr(属性名，属性值)格式则是设置元素属性名的值。
操作元素的内容
使用html()和text()方法操作元素的内容，当两个方法的参数为空时，表示获取该元素的内容，而如果方法中包含参数，则表示将参数值设置为元素内容。
html()方法可以获取元素的HTML内容，因此，原文中的格式代码也被一起获取，而text()方法只是获取元素中的文本内容，并不包含HT
操作元素的样式
通过addClass()和css()方法可以方便地操作元素中的样式，前者括号中的参数为增加元素的样式名称，后者直接将样式的属性内容写在括
号中。L格式代码，
移除属性和样式
使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能，前者方法中参数表示移除属性名，后者方法中参数则表示移除的样式名
使用append()方法向元素内追加内容
append(content)方法的功能是向指定的元素中追加内容，被追加的content参数，可以是字符、HTML元素标记，还可以是一个返回字符串内容的函数。
使用appendTo()方法向被选元素内插入内容
appendTo()方法也可以向指定的元素内插入内容，它的使用格式是：
$(content).appendTo(selector)
参数content表示需要插入的内容，参数selector表示被选的元素，即把content内容插入selector元素内，默认是在尾部。
使用before()和after()在元素前后插入内容
使用before()和after()方法可以在元素的前后插入内容，它们分别表示在整个元素的前面和后面插入指定的元素或内容，调用格式分别为：
$(selector).before(content)和$(selector).after(content)
其中参数content表示插入的内容，该内容可以是元素或HTML字符串。
使用clone()方法复制元素
调用clone()方法可以生成一个被选元素的副本，即复制了一个被选元素，包含它的节点、文本和属性，它的调用格式为：
$(selector).clone()
其中参数selector可以是一个元素或HTML内容。
replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容，但它们调用时，内容和被替换元素所在的位置不同，分别为如下所示：
$(selector).replaceWith(content)和$(content).replaceAll(selector)
参数selector为被替换的元素，content为替换的内容。
使用wrap()和wrapInner()方法包裹元素和内容
wrap()和wrapInner()方法都可以进行元素的包裹，但前者用于包裹元素本身，后者则用于包裹元素中的内容，它们的调用格式分别为：
$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)
使用each()方法遍历元素
使用each()方法可以遍历指定的元素集合，在遍历时，通过回调函数返回遍历元素的序列号，它的调用格式为：
$(selector).each(function(index))
参数function为遍历时的回调函数，index为遍历元素的序列号，它从0开始。
使用remove()和empty()方法删除元素
remove()方法删除所选元素本身和子元素，该方法可以通过添加过滤参数指定需要删除的某些元素，而empty()方法则只删除所选元素的子元素。
用Att操作属性时，ture和false 不能用引号
eq是从0开始
使用 attr() 方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性，其中attr(属性名)格式是获取元素属性名的值，attr(属性名，属性值)格式则是设置元素属性名的值。 例如，使用attr(属性名)的格式获取页面中 元素的 & href & 属性值，并...
DOM DOM节点 DOM的概念 DOM是文档对象模型（Document Object Model）的简称，它的基本思想是把结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口...
jQuery操作DOM元素 使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性，其中attr(属性名)格式是获取元素属性名的值，attr(属性名，属性值)格式则是设置元素属性名的值。例如，使用attr(属性名)的格式获取页面中 元素的“hre...
一、基础选择器 $(&#my_id&）表示根据id选择器获取页面中指定的标签元素，且返回唯一一个元素。 jquery中获取网页内容的调用代码是$(&选择器&).html()jquery中修改显示内容的调用代码是$(&选择器&).html(&修改后的内容&)jquery中设置...
问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：CSS里 {margin...
人民的名义
我常常很羡慕那些能当面跟人表白的人，包括但不限于耿直地说喜欢你、摆蜡烛表白、聚众表白、各种花式求爱，我羡慕的不仅仅是这种行为，而是这种行为模式传达出来的对于爱情的态度，放得开，不拘束，洒脱，不怯懦。 我谈过恋爱，但是没有跟女生当面表白过，我初恋故事的开头充满了各种扭捏，两个...
怕自己的希望一寸寸坠下去，所以避免一切失望的可能。 2016年的最后一个月，你会做什么？ 除了学业上必须做的，剩下的时间中给自己一点私人的时间，反思，沉静。
我们生活在世间，如果能够相信因果、运用因果，就能够幸福人生。但是它不是究竟。“道生一，一生二，二生三，三生万物。”这个一二三缘起的人生世界，这叫世间法。道以下，都叫世间法。世间法就是因果世界！ 我们要研究它，因为我们有烦恼，因为我们有痛苦，所以们要研究世间法，研究我们有形的...
1、Why？ Url中有些字符会引起歧义web设计者面临的众多难题之一便是怎样处理不同操作系统间的差异性。这些差异性能引起URL方面的问题：例如，一些操作系统允许文件名中含有空格符，有些又不允许。大多数操作系统不会认为文件名中含有符号“#”会有什么特殊含义;但是在一个URL...兼容各浏览器
该问题被发起重新开启投票
投票剩余时间：
之前被关闭原因：
该问题被发起删除投票
投票剩余时间：
距离悬赏到期还有：
参与关闭投票者：
关闭原因：
该问题已经被锁定
锁定原因：（）
保护原因：避免来自新用户不合宜或无意义的致谢、跟帖答案。
该问题已成功删除，仅对您可见，其他人不能够查看。
一种方法是用jquery来获取，代码如下：
&script type="text/javascript" language="javascript"&
$(document).ready(function(){
$(document).click(function(e){
if($.browser.msie) {
alert(document.activeElement.tagName);
else if($.browser.mozilla){
alert(( e ? e.explicitOriginalTarget : null).tagName);
//或document.activeElement.id
如果是自己写js代码：
&script type="text/javascript"&
function msg(e) // e = event
{ //initialisation
if ("activeElement" in document)
target = document.activeE //Si IE
target = e ? e.explicitOriginalTarget : // Si Firefox
alert(target.id);
&div id="tata" name="tata"
style="background-color:#FFFF00;width:50%;height:50"
onclick="msg(event);"&contenu du div&/div&
在IE下就比较简单了，直接用:document.activeElement就可以得到当前的焦点元素。但是在FireFox下document.activeElement不起作用，所以得用另外的方法来实现FireFox下的实现方法是：通过对网页上的表单元素绑定一个onfocus事件，并让其指定同一个函数，这样当触发onfocus时就将当前元素的ID或者是name记录到指定的变量里，这也算是取巧的一种方法吧！以下是测试代码：
&!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&&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&title&无标题文档&/title&&/head&&body&&form action="#" id="formArea"&
&p&text1&input type="text" id="text1" /&&/p&
&p&text2&input type="text" id="text2" /&&/p&
&p&text3&input type="text" id="text3" /&&/p&
&p&text4&input type="text" id="text4" /&&/p&
&p&text5&input type="text" id="text5" /&&/p&
&p&text6&input type="text" id="text6" /&&/p&
&p&Radio1&input type="radio" name="r" id="Radio1" /& || Radio2&input type="radio" name="r" id="Radio2" /&
|| Radio3&input type="radio" name="r" id="Radio3" /&&/p&&/form&&p id="info"&&/p&&/body&&/html&&script type="text/javascript"&var obj=document.getElementById("formArea").var length=obj.var info=document.getElementById("info");for(var i=0;i&i++){
obj[i].onblur=function(){
info.setAttribute("prevName",this.id);
obj[i].onfocus=function(){
if(info.getAttribute("prevName")==this.id){}
info.innerHTML="上一个是"+info.getAttribute("prevName")+",当前元素是"+this.
info.setAttribute("name",this.id);
}}&/script&
不是您所需，查看更多相关问题与答案
德问是一个专业的编程问答社区，请
后再提交答案
关注该问题的人
共被浏览 (15724) 次读jQuery之五（取DOM元素）
转载 & & 作者：
使用过Prototype.js的同学知道$(xx)调用后返回的是HTMLElement或其集合。
jQuery的$调用后想要获取DOM元素可以使用get方法，如下
代码如下: // 方式1 $('div').get(1); // 获取页面中第二个div
当然，也可以使用数组索引方式获取
代码如下: // 方式2 $('div')[1]; // 获取页面中第二个div
上面两种方式都可以获取某一个特定的DOM元素，而获取DOM元素集合却要使用toArray方法
代码如下: $('div').toArray(); // 返回页面中所有的div，依次放入数组中
看看get方法的源码
代码如下: get: function( num ) { return num == null ? // Return a 'clean' array this.toArray() : // Return just the object ( num & 0 ? this[ this.length + num ] : this[ num ] ); },
get内就一个三元运算符，即两个分支。 分支1，当不传参数时将获取所有DOM元素（调用toArray） 分支2，当num为数字（索引）时返回指定的某一个DOM元素（数字为负数时为逆向获取） 分支1实际是将jQuery对象（伪数组）转成真正的数组，分支2实际是（用中括号[]）取“伪数组”元素。下面以$('div')来描述整个调用过程 1，获取页面div元素（document.getElementsByTagName('div')） 2，将集合HTMLCollection/NodeList转成真正的数组 3，将数组转成伪数组/ArrayLike（jQuery对象）如图
第一步是选择器做的事；第二步将HTMLCollection/NodeList转成数组以前；第三步又将数组转成伪数组/ArrayLike（jQuery对象），只需调用下数组的push即可。也许下面的例子容易理解 代码如下: var jqObj = {0:'one',1:'two',2:'three',length:3}, // 伪数组(ArrayLike) ary = ['one','two','three']; //数组 // 将伪数组(ArrayLike)转成数组 function jqObjToArray(json){ var slice = Array.prototype. return slice.call(json,0); } // 将数组转成伪数组(ArrayLike) function ArrayToJqObj(ary){ var obj = {}, push = Array.prototype. push.apply(obj,ary);
} console.log(jqObjToArray(jqObj)); console.log(ArrayToJqObj(ary));
jQuery还提供了first/last/eq/slice方法，它们与上面提到的get/toArray不同。它们返回的是jQuery对象而非返回HTMLElement。如下html片段
代码如下: &div id="a"&A&/div& &div id="b"&B&/div& &div id="c"&C&/div& &div id="d"&D&/div&
$('div').first() 返回jq对象集合的第一个元素， 即Div[id=a]，结构:{0:div,length:1,...}；//...表示省略了其它属性 $('div').last() 返回jq对象集合的最后的元素， 即Div[id=d]，结构:{0:div,length:1,...}； $('div').eq(2) 返回jq对象匹配的第三个元素， 即Div[id=c]，结构:{0:div,length:1,...}； 查看源码得知： 1，first，last方法中直接调用了eq方法。 2，eq方法中调用了slice方法。 因此slice方法才是根本。该方法让我们自然想到数组的slice方法，实际上jQuery正是利用Array的push和slice方法。 1，利用Array.prototype.slice方法将 伪数组 转成 数组 2，利用Array.prototype.push方法将 数组 转成 伪数组 当然jQuery中的slice方法调用了pushStack。我这里简写了slice，如下
代码如下: slice : function(){ var ret = $();//关键的一句,构造一个新的jq对象， var ary = slice.apply(this,arguments);//这里的this是jq对象，根据参数转成数组子集 push.apply(ret,ary);//转成jq对象，即伪数组形式
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具浅谈jQuery 选择器和dom操作
转载 & & 投稿：jingxian
下面小编就为大家带来一篇浅谈jQuery 选择器和dom操作。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈jQuery 选择器和dom操作
JQuery选择器
1.基本选择器
基本选择器是JQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class 和标签名来查找DOM元素。这个非常重要，下面的内容都是以此为基础，逐级提高的。
1).“$(“#id”)”，获取id指定的元素，id是全局唯一的，所以它只有一个成员。
2).“$(“.class”)”，获取class指定的元素，不同的元素可以具有相同的class属性，所以它可能具有多个成员。
3).“$(“element”)”，获取element（元素名，比如div、table等）指定的元素，它可能具有多个成员。
4).“$(“*”)”，获取所有元素，相当于document。
5).“$(“selector1,selector2,…,selectorN”)”，将每个选择器匹配到的元素合并后一起返回。返回selector1匹配的集合+selector2匹配的集合+…+selectorN匹配的集合。
2.层次选择器
什么是层次？层次就是父子关系、兄弟关系的节点。所以，层次选择器就是用来获取指定元素的父子节点、兄弟节点。
1).“$(“ancestor descendant”)”，获取ancestor元素下边的所有元素。
2).“$(“parent & child”)”，获取parent元素下边的所有子元素（只包含第一层子元素）。
3).“$(“pre + next”)”，获取紧随pre元素的后一个兄弟元素。
4).“$(“pre ~ siblings”)”，获取pre元素后边的所有兄弟元素。
3.过滤选择器
过滤？肯定是要添加过滤条件的。通过“:”添加过滤条件，比如“$(“div:first”)”返回div元素集合的第一个div元素，first是过滤条件。
按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器。
1). 基本过滤选择器
a) “:first”，选取第一个元素，别忘记它也是被放在一个集合里哦！因为JQuery它是DOM对象的一个集合。如，“$("tr:first")”返回所有tr元素的第一个tr元素，它仍然被保存在集合中。
b)“:last”，选取最后一个元素。如，“$("tr:last")”返回所有tr元素的最后一个tr元素，它仍然被保存在集合中。
c) “:not(selector)”，去除所有与给定选择器匹配的元素。如，“$("input:not(:checked)")”返回所有input元素，但去除被选中的元素（单选框、多选框）。
d)“:even”，选取所有元素中偶数的元素。因为JQuery对象是一个集合，这里的偶数指的就是集合的索引，索引从0开始。
e) “:odd”，选取所有元素中奇数的元素，索引从0开始。
f) “:eq(index)”，选取指定索引的元素，索引从0开始。
g)“:gt(index)”，选取索引大于指定index的元素，索引从0开始。
h)“:lt(index)”，选取索引小于指定index的元素，索引从0开始。
i)& “:header”，选取所有的标题元素，如hq、h2等。
j)& “:animated”，选取当前正在执行的所有动画元素。
2). 内容过滤选择器
它是对元素和文本内容的操作。
a) “:contains(text)”，选取包含text文本内容的元素。
b)“:empty”，选取不包含子元素或者文本节点的空元素。
c) “:has(selector)”，选取含有选择器所匹配的元素的元素。
d)“:parent”，选取含有子元素或文本节点的元素。（它是一个父节点）
3). 可见性过滤选择器
根据元素的可见与不可见状态来选取元素。
“:hidden”，选取所有不可见元素。
“:visible”，选择所有可见元素。
可见选择器：hidden 不仅包含样式属性 display 为 none 的元素，也包含文本隐藏域 (&input type=“hidden”&)和 visible:hidden 之类的元素。
4).属性过滤选择器
通过元素的属性来选取相应的元素。
a) “[attribute]”，选取拥有此属性的元素。
b)“[attribute=value]”，选取指定属性值为value的所有元素。
c) “[attribute !=value]”，选取属性值不为value的所有元素。
d)“[attribute ^= value]”，选取属性值以value开始的所有元素。
e) “[attribute $= value]”，选取属性值以value结束的所有元素。
f) “[attribute *= value]”，选取属性值包含value的所有元素。
g)“[selector1] [selector2]…[selectorN]”，复合性选择器，首先经[selector1]选择返回集合A，集合A再经过[selector2]选择返回集合B，集合B再经过[selectorN]选择返回结果集合。
5). 子元素过滤选择器
一看名字便是，它是对某一元素的子元素进行选取的。
a) “:nth-child(index/even/odd)”，选取索引为index的元素、索引为偶数的元素、索引为奇数的元素。
l nth-child(even/odd)：能选取每个父元素下的索引值为偶(奇)数的元素。
l nth-child(2)：能选取每个父元素下的索引值为 2 的元素。
l nth-child(3n)：能选取每个父元素下的索引值是 3 的倍数的元素。
l nth-child(3n + 1)：能选取每个父元素下的索引值是 3n + 1的元素。
b)“:first-child”，选取第一个子元素。
c) “:last-child”，选取最后一个子元素。
d)“:only-child”，选取唯一子元素，它的父元素只有它这一个子元素。
6). 表单过滤选择器
选取表单元素的过滤选择器。
a) “:input”，选取所有&input&、&textarea&、&select &和&button&元素。
b)“:text”，选取所有的文本框元素。
c) “:password”，选取所有的密码框元素。
d)“:radio”，选取所有的单选框元素。
e) “:checkbox”，选取所有的多选框元素。
f) “:submit”，选取所有的提交按钮元素。
g)“:image”，选取所有的图像按钮元素。
h)“:reset”，选取所有重置按钮元素。
i)& “:button”，选取所有按钮元素。
j)& “:file”，选取所有文件上传域元素。
k)“:hidden”，选取所有不可见元素。
7).表单对象属性过滤选择器
选取表单元素属性的过滤选择器。
“:enabled”，选取所有可用元素。
“:disabled”，选取所有不可用元素。
“:checked”，选取所有被选中的元素，如单选框、复选框。
“:selected”，选取所有被选中项元素，如下拉列表框、列表框。
四、JQuery中的DOM操作
一种与浏览器，平台，语言无关的接口。使用该接口可以轻松地访问页面中所有的标准组件。
DOM Core：DOM Core 并不专属于 JavaScript，任何一种支持 DOM 的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种是用标记语言编写出来的文档，例如：XML。
HTML DOM：使用 JavaScript 和 DOM 为 HTML 文件编写脚本时，有许多专属于HTML-DOM的属性。
CSS-DOM：针对于CSS操作，在JavaScript中，CSS-DOM 主要用于获取和设置 style 对象的各种属性。
1.查找节点
请见上面的“基本选择器”。
2.创建节点
使用JQuery的工厂函数，创建一个新节点：var $newNode = $(“&p&你好&/p&”);，然后将新节点插入到指定元素节点处。
3.插入节点
将新创建的节点，或获取的节点插入指定的位置。
“$node.append($newNode)”，向每个匹配的元素内部的结尾处追加结尾处。如，“$("p").append("&b&Hello&/b&");”将"&b&Hello&/b&"添加到"p"内部的结尾处。
“$newNode.appendTo($node)”，将新元素追加到每个匹配元素内部的结尾处。
“$node.prepend($newNode)”，向每个匹配的元素内部的结尾处追加开始处。如，“$("p").prepend("&b&Hello&/b&");”将"&b&Hello&/b&"添加到"p"内部的起始处。
“$newNode.prependTo($node)”， 将新元素追加到每个匹配元素内部的开始处。
“$node.after($newNode)”，向每个匹配的元素的之后插入内容，是并列兄弟。如，“$("p").after("&b&Hello&/b&");”将"&b&Hello&/b&"插入到"p"的后边。它们是兄弟关系。
“$newNode.insertAfter($node)”，将新元素插入到每个匹配元素之后。
“$newNode.before($node)”，向每个匹配的元素的之前插入内容。如，“$("p").before("&b&Hello&/b&");”将"&b&Hello&/b&"插入到"p"的前面，它们是兄弟关系。
“$node.insertBefore($newNode)”，将新元素插入到每个匹配元素之前。
注意：如果插入的节点是不是新创建的，插入将变成移动操作。所以，在插入这样的节点之前应该使用clone的节点。
4.删除节点
从DOM中删除所有匹配的元素。如，“$("p").remove(".hello");”删除所为class属性值为hello的p元素，还有它下面的所有元素。
从DOM中清除所有匹配的元素。如，“$("p").empty();”清除所有p元素，还有它下面的所有元素。
5.复制节点
克隆匹配的DOM元素。如，“$("p").clone();”返回克隆后的副本，但不具有任何行为。如果要将DOM的事件一起克隆，应该使用“$("p").clone(true);”。
6.替换节点
将所有匹配的元素都替换为指定的 HTML 或 DOM 元素。如，$("p").replaceWith("&b&Paragraph. &/b&");，将所有p元素，替换为"&b&Paragraph. &/b&"。
与replaceWith相返：$("&b&Paragraph. &/b&").replaceAll("p");。
7.包裹节点
wrap()：将指定节点用其他标记包裹起来。该方法对于需要在文档中插入额外的结构化标记非常有用， 而且不会破坏原始文档的语义。如，“$("p").wrap("&div class='wrap'&&/div&");”。每个p元素被包裹到&div&中。
wrapAll()：将所有匹配的元素用一个元素来包裹。而wrap()方法是将所有的元素进行单独包裹。如，“$("p").wrapAll("&div&&/div&");”，将所有p元素包裹到&div&中。
wrapInner()：将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来。如，“$("p").wrapInner("&b&&/b&");”， &b&被每一个p元素包裹。
8.属性设置
attr()：获取属性和设置属性。
当为该方法传递一个参数时，即为某元素的获取指定属性。如，“$("img").attr("src");”，获取img元素的src属性值。
当为该方法传递两个参数时，即为某元素设置指定属性的值。如，“$("img").attr("src","test.jpg");”，设置img元素的src属性值为test.jsp。
jQuery 中有很多方法都是一个函数实现获取和设置。如：attr()，html()，text()，val()，height()，width()，css()等。
removeAttr()：删除指定元素的指定属性。
9.样式操作
可以通过“attr()”设置或获取css样式。
追加样式：addClass() 。如，“$("p").addClass("selected");”，向所有P元素中追加“selected”样式。
移除样式：removeClass() --- 从匹配的元素中删除全部或指定的class。如，“$("p").removeClass("selected");”，删除所有P元素中的“selected”。
切换样式：toggleClass() --- 控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它。如，“$("p").toggleClass("selected");”，所有的P元素中，如果存在“selected”样式就删除“selected”样式，否则就添加“selected”样式。
判断是否含有某个样式：hasClass() --- 判断元素中是否含有某个 class，有返回 true； 否则返回 false。如，“$(this).hasClass("protected")”，判断当前节点是否有“protected”样式。
10.设置或获取HTML、文本和值
读取和设置某个元素中的 HTML 内容： html()，该方法可以用于 XHTML，但不能用于 XML 文档。
读取和设置某个元素中的文本内容：text()，该方法既可以用于 XHTML 也可以用于 XML 文档。
读取和设置某个元素中的值：val()，该方法类似 JavaScript 中的 value 属性。对于文本框，下拉列表框，单选框该方法可返回元素的值(多选框只能返回第一个值)。如果为多选下拉列表框，则返回一个包含所有选择值的数组。
11.常用遍历节点的方法
取得匹配元素的所有子元素组成的集合：children()。该方法只考虑第一层子元素而不考虑任何后代元素。
取得匹配元素后面紧邻的兄弟元素的集合(但集合中只有一个元素)：next()。
取得匹配元素前面紧邻的兄弟元素的集合(但集合中只有一个元素)：prev()。
取得匹配元素前后所有的兄弟元素: siblings()。
12.CSS-DOM操作
获取和设置元素的样式属性：css()。
获取和设置元素透明度：opacity()属性。
获取和设置元素高度，宽度：height()，width()。在设置值时，若只传递数字，则默认单位是px。如需要使用其他单位则需传递一个字符串，例如 “$(“p:first”).height(“2em”)”；
获取元素在当前视窗中的相对位移：offset()。它返回的对象包含了两个属性：top，left。该方法只对可见元素有效。
五、JQuery中的事件
在页面加载完毕后，浏览器会通过 JavaScript 为 DOM 元素添加事件。在常规的 JavaScript 代码中，通常使用 window.onload 方法，在JQuery 中使用$(document).ready() 方法。JQuery中的简化写法“$()”。在window.onload中注册事件时，只能在一个window.onload体中注册。但使用JQuery，可以在多个$(document).ready()或$()中注册。
2.事件绑定
对匹配的元素对指定的事件绑定。
如，昨天我们在window.onload中绑定事件的方法：
“$("p").onclick(function(){
alert( $(this).text() );
在JQuery的$(document).ready()
中可以这样绑定：
“$("p").click(function(){ alert( $(this).text() );
使用bind()，可以这样绑定：
$("p").bind("click", function(){
alert( $(this).text() );
3.合成事件
hover()：模拟光标悬停时间。当光标移动到元素上时，会触发指定的第一个函数，当光标移出这个元素时，会触发指定的第二个函数。
如，悬停效果：
$("td").hover( function ()
{$(this).addClass("hover");},
function ()
{$(this).removeClass("hover");});
toggle()：
用于模拟鼠标连续单击事件。第一次单击元素，触发指定的第一个函数，当再一次单击同一个元素时，则触发指定的第二个函数，如果有更多个函数，则依次触发，直到最后一个。如，设置元素的选择与非选中效果：
$("td").toggle( function ()
{$(this).addClass("selected");},
function ()
{$(this).removeClass("selected");});
使用toggle()而不传递参数，效果为切换元素的可见状态。
4.事件的冒泡
事件会按照 DOM 层次结构像水泡一样不断向上只止顶端。
解决：在事件处理函数中返回 false，会对事件停止冒泡。还可以停止元素的默认行为。
目前的所有UI交互或其事件，都支持这个特性。在自己的事件处理函数返回false将中止事件的继续向下传递。返回true事件继续向下传递。
5.事件对象的属性
事件对象：当触发事件时，事件对象就被创建了。在程序中使用事件只需要为处理函数添加一个参数。在事件处理函数中使用些参数。
如，获取事件发生时，相对于页面的位置：event.pageX, event.pageY，event是事件处理函数的参数。
6.移除事件
移除某按钮上的所有click 事件：$(“btn”).unbind(“click”)
移除某按钮上的所有事件：$(“btn”).unbind();
one()：该方法可以为元素绑定处理函数。当处理函数触发一次后，事件立即被删除。即在每个对象上，事件处理函数只会被执行一次。
六、JQuery中的DOM动画
通过设置DOM对象的显示与隐藏方式，可以产生动画效果。
1.无动画效果的隐藏与显示
hide()：在HTML文档中，为一个元素调用hide()方法会将该元素的display样式改为none。代码功能同css(“display”, “none”);相同。
show()：将元素的display样式改为先前的显示状态。
toggle()：切换元素的可见状态：如果元素时可见的，则切换为隐藏；如果元素时隐藏的，则切换为可见的。
2.通过设置透明度效果的隐藏与显示，达到淡入淡出的动画效果
fadeIn()，fadeOut()：只改变元素的透明度。fadeOut() 会在指定的一段时间内降低元素的不透明度，直到元素完全消失。fadeIn() 则相反。如，用600毫秒缓慢的将段落淡入：$("p").fadeIn("slow");。
fadeTo()：把不透明度以渐近的方式调整到指定的值(0 – 1 之间)。并在动画完成后可选地触发一个回调函数。如，用200毫秒快速将段落的透明度调整到0.25，动画结束后，显示一个“Animation Done”信息框：“$("p").fadeTo("fast", 0.25, function(){ alert("Animation Done."); });”。
3.通过设置高度效果的隐藏与显示，达到滑下与收起的动画效果
slideDown()，slideUp()：只会改变元素的高度。如果一个元素的display属性为none，当调用slideDown() 方法时，这个元素将由上至下延伸显示。slideUp() 方法正好相反，元素由下至上缩短隐藏。如，用600毫秒缓慢的将段落滑下：$("p").slideDown("slow");。
slideToggle()：通过高度变化来切换匹配元素的可见性。
如，200毫秒快速将段落滑上或滑下，动画结束后，会显示一个“Animation Done”信息框：
“$("p").slideToggle("fast",function(){
alert("Animation Done.");
使用JavaScript、JQuery可以处理当前页面的动态更新，再结合CSS样式可以做出十分漂亮的UI，甚至比桌面软件UI漂亮的多。JavaScript的编写与调试非常麻烦，所以也有一些公司出品了专门针对JavaScript应用的简化开发，比如Google出品的GWT，可以像使用Java编写swing那样编写JavaScript。它为用户提供像swing那样的UI接口与事件等操作并且支持JAVA的核心库。使用GWT自己的编译器，可以将JAVA代码编译为JavaScript代码、CSS样式文件和HTML。
以上这篇浅谈jQuery 选择器和dom操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具