jQuery基础之jQuery的DOM操作
- - CSDN博客推荐文章 为了能全面地讲解DOM操作，首先需要构建一个网页. 因为每一张网页都能用DOM表示出来，而每一份DOM都可以看作一棵DOM树. 苹果 . 橘子 .
你最喜欢的水果是?
.jQuery基础之jQuery的DOM操作
标签：
jquery
基础
jquery
| 发表时间：2012-03-16 17:32 | 作者：wustrive_2008
出处：http://blog.csdn.net
为了能全面地讲解DOM操作，首先需要构建一个网页。因为每一张网页都能用DOM表示出来，而每一份DOM都可以看作一棵DOM树。
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dom</title>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
</html>
一，查找节点
a,查找元素节点
var $li = $("ul li:eq(1)");//获取第二个<li>元素节点
var li_txt = $li.text();//获得第二个<li>元素的text
b,查找属性节点
var $para = $("p"); //获取p节点
var p_txt = $para.attr("title"); //输出<p>元素节点属性title的值
二，创建节点
a,创建元素节点
var $li_1 = $("<li></li>");
var $li_2 = $("<li></li>");
然后使用jQuery的append()方法将新建的元素插入到页面中
b,创建文本节点
var $li_1 = $("<li>香蕉</li>");
var $li_2 = $("<li>雪梨</li>");
var $parent = $("ul");
$("ul").append($li_1);
$("ul").append($li_2);
c,创建属性节点
var $li = $("<li title="香蕉"></li>");
var $parent = $("ul");
$parent.append($li);
三，插入节点
将新创建的节点插入某个文档的方法并非只有一种，在iQuery中还提供了其他儿种插入节点的方法。
a,append():向每个匹配的元素内部追加内容
HTML：<p>我想说:</p>
jQuery:$("p").append("<b>你好</b>");
结果:<p>我想说:<b>你好</b></p>
b,appendTo():将所有匹配的元素追加到指定的元素中。
HTML：<p>我想说:</p>
jQuery:$("<b>你好</b>").appendTo("p");
结果:<p>我想说:<b>你好</b></p>
c,prepend()：向每个匹配的元素内部前置内容
HTML：<p>我想说</p>
jQuery:$("p").prepend("<b>你好</b>");
结果：<p><b>你好</b>我想说:</p>
d,prependTo():将所有匹配的元素前置到指定的元素中。
e,after():在每个匹配的元索之后插入内容
f,insertAfter():将所有匹配的元素插入到指定元素的后面
g,before():在每个匹配的元素之前插入内容
h,insertBefore():将所有匹配的元素捅入到指定的元素的前面。
四，删除节点
a,remove()：从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。
b,empty():清空节点，它能清空元素中的所有后代节点。
五,复制节点
$("ul li").click(function(){
$(this).clone().appendTo("ul");
})
六,替换节点：replaceWith()和replaceAll()
$("p").replaceWith("<strong>替换</strong>");
下面代码实现同样的功能：
$("<strong>替换</strong>").replaceAll("p");
七，包裹节点 wrap()，wrapAll()，wrapInner()
$("strong").wrap("<b></b>");//用<b>把<strong>元素包裹起来。
八，属性操作
a,获取属性和设置属性
var $para = $("p");
var p_txt = $para.attr("title"); //获取属性
$("p").attr("title":"your title","name":"your name");//设置属性。
b,删除属性
$("p").removeAttr("title");
九,样式操作
a,获取样式和设置样式
HTML:<p class="myClass" title="选择你喜欢的水果">你喜欢的水果是？</p>
var p_class = $("p").attr("class");//获取<p>元素的class属性
$("p").attr("class","high");//设置<p>元素的class为high
b,追加样式
<style type="text/css">
.high{
font-weight:bold;
color:red;
}
.another{
font-weight:italic;
color:blue;
}
</style>
$("input:eq(2)").click(function(){
$("p").addClass("another");
});
c,移除样式
$("p").removeClass("high");
d,切换样式
toggleBtn.toggle(function(){
//元素显示 1
},function(){
//元素隐藏 2
})
toggle()方法此处的作用是交替执行代码③和代码④两个函数，如果元素原来是显示的，则隐藏它：如果元素原来是隐藏的，则显示它。此时，toggle()方法主要是控制行为上的重复切换。
$("p").toggleClass("another");//重复切换类名"another"
e,判断是否含有某个样式
hasClass()可以用来判断元素中是甭含有某个class，如果有，则返回true，否则返回false。
例如可以使用下面的代码来判断<p>元素中是否含有“another”的class:
$("p").hasClass("another");
十，设置和获取HTML、文本和值
a,html()方法
此方法类似于javascript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容。
$("p").html("<strong>你最喜欢的水果是？</strong>");
b,text()方法
此方法类似于JavaScript中的innerText属性，可以用来读取或者没置某个元素中的文本内容。
var p_text = $("p").text();
c,val()方法
此方法类似于JavaScript中的value属性，可以用来设置和获取元索的值。无论元素是文本框，
下拉列表还足单选框，它都可以返回元素的值。如果元素为多选，
则返回一个包含所有选择的值的数组。
例：HTML:<input type="text" id="address" value="请输入邮箱地址"/><br />
<input type="text" id="password" value="请输入邮箱密码"/><br />
<input type="button" value="登陆"/>
当地址框获取鼠标焦点时，如果地址框的值为“请输入邮箱地址”，则将地址框中的值清空。可以使用如下的jQuery代码：
$("#address").focus(function(){
var txt_value=$(this).val();
if(txt.value=="请输入邮箱地址"){
$(this).val("");
}
});
注意：focus()方法相当于JavaScript中的onfocus()方法，作用是处理获得焦点时的事件。blur()方法相当于JavaScript中的onblur()方法，作用是处理失去焦点时的事件。
十一，遍历节点
a,children()方法
该方法用于取得匹配元素的子元素集合。
b,next()方法
该方法用于取得匹配元素后面紧邻的同辈元素。
c,prev()方法
该方法用于取得匹配元素前面紧邻的同辈元素。
d,siblings()方法
该方法用于取得匹配元素前后所有的同辈元素。
e,closest()方法
它用来取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
十二，CSS-DOM操作
例：$("p").css("color");//获取<p>元素的样式颜色
$("p").css("color","red");//设置<p>元素的样式颜色为红色
a,offset()方法
它的作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。
var offset = $("p").offset();//获取<p>元素的offset()
var left = offset.left; //获取左偏移
var top = offset.top; //获取右偏移
b,position()方法
获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，它返回的对象也包括两个属性，即top和left。
c,scrollTop()方法和scrollLeft()方法
这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dom</title>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
</html>
一，查找节点
a,查找元素节点
var $li = $("ul li:eq(1)");//获取第二个<li>元素节点
var li_txt = $li.text();//获得第二个<li>元素的text
b,查找属性节点
var $para = $("p"); //获取p节点
var p_txt = $para.attr("title"); //输出<p>元素节点属性title的值
二，创建节点
a,创建元素节点
var $li_1 = $("<li></li>");
var $li_2 = $("<li></li>");
然后使用jQuery的append()方法将新建的元素插入到页面中
b,创建文本节点
var $li_1 = $("<li>香蕉</li>");
var $li_2 = $("<li>雪梨</li>");
var $parent = $("ul");
$("ul").append($li_1);
$("ul").append($li_2);
c,创建属性节点
var $li = $("<li title="香蕉"></li>");
var $parent = $("ul");
$parent.append($li);
三，插入节点
将新创建的节点插入某个文档的方法并非只有一种，在iQuery中还提供了其他儿种插入节点的方法。
a,append():向每个匹配的元素内部追加内容
HTML：<p>我想说:</p>
jQuery:$("p").append("<b>你好</b>");
结果:<p>我想说:<b>你好</b></p>
b,appendTo():将所有匹配的元素追加到指定的元素中。
HTML：<p>我想说:</p>
jQuery:$("<b>你好</b>").appendTo("p");
结果:<p>我想说:<b>你好</b></p>
c,prepend()：向每个匹配的元素内部前置内容
HTML：<p>我想说</p>
jQuery:$("p").prepend("<b>你好</b>");
结果：<p><b>你好</b>我想说:</p>
d,prependTo():将所有匹配的元素前置到指定的元素中。
e,after():在每个匹配的元索之后插入内容
f,insertAfter():将所有匹配的元素插入到指定元素的后面
g,before():在每个匹配的元素之前插入内容
h,insertBefore():将所有匹配的元素捅入到指定的元素的前面。
四，删除节点
a,remove()：从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。
b,empty():清空节点，它能清空元素中的所有后代节点。
五,复制节点
$("ul li").click(function(){
$(this).clone().appendTo("ul");
})
六,替换节点：replaceWith()和replaceAll()
$("p").replaceWith("<strong>替换</strong>");
下面代码实现同样的功能：
$("<strong>替换</strong>").replaceAll("p");
七，包裹节点 wrap()，wrapAll()，wrapInner()
$("strong").wrap("<b></b>");//用<b>把<strong>元素包裹起来。
八，属性操作
a,获取属性和设置属性
var $para = $("p");
var p_txt = $para.attr("title"); //获取属性
$("p").attr("title":"your title","name":"your name");//设置属性。
b,删除属性
$("p").removeAttr("title");
九,样式操作
a,获取样式和设置样式
HTML:<p class="myClass" title="选择你喜欢的水果">你喜欢的水果是？</p>
var p_class = $("p").attr("class");//获取<p>元素的class属性
$("p").attr("class","high");//设置<p>元素的class为high
b,追加样式
<style type="text/css">
.high{
font-weight:bold;
color:red;
}
.another{
font-weight:italic;
color:blue;
}
</style>
$("input:eq(2)").click(function(){
$("p").addClass("another");
});
c,移除样式
$("p").removeClass("high");
d,切换样式
toggleBtn.toggle(function(){
//元素显示 1
},function(){
//元素隐藏 2
})
toggle()方法此处的作用是交替执行代码③和代码④两个函数，如果元素原来是显示的，则隐藏它：如果元素原来是隐藏的，则显示它。此时，toggle()方法主要是控制行为上的重复切换。
$("p").toggleClass("another");//重复切换类名"another"
e,判断是否含有某个样式
hasClass()可以用来判断元素中是甭含有某个class，如果有，则返回true，否则返回false。
例如可以使用下面的代码来判断<p>元素中是否含有“another”的class:
$("p").hasClass("another");
十，设置和获取HTML、文本和值
a,html()方法
此方法类似于javascript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容。
$("p").html("<strong>你最喜欢的水果是？</strong>");
b,text()方法
此方法类似于JavaScript中的innerText属性，可以用来读取或者没置某个元素中的文本内容。
var p_text = $("p").text();
c,val()方法
此方法类似于JavaScript中的value属性，可以用来设置和获取元索的值。无论元素是文本框，
下拉列表还足单选框，它都可以返回元素的值。如果元素为多选，
则返回一个包含所有选择的值的数组。
例：HTML:<input type="text" id="address" value="请输入邮箱地址"/><br />
<input type="text" id="password" value="请输入邮箱密码"/><br />
<input type="button" value="登陆"/>
当地址框获取鼠标焦点时，如果地址框的值为“请输入邮箱地址”，则将地址框中的值清空。可以使用如下的jQuery代码：
$("#address").focus(function(){
var txt_value=$(this).val();
if(txt.value=="请输入邮箱地址"){
$(this).val("");
}
});
注意：focus()方法相当于JavaScript中的onfocus()方法，作用是处理获得焦点时的事件。blur()方法相当于JavaScript中的onblur()方法，作用是处理失去焦点时的事件。
十一，遍历节点
a,children()方法
该方法用于取得匹配元素的子元素集合。
b,next()方法
该方法用于取得匹配元素后面紧邻的同辈元素。
c,prev()方法
该方法用于取得匹配元素前面紧邻的同辈元素。
d,siblings()方法
该方法用于取得匹配元素前后所有的同辈元素。
e,closest()方法
它用来取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
十二，CSS-DOM操作
例：$("p").css("color");//获取<p>元素的样式颜色
$("p").css("color","red");//设置<p>元素的样式颜色为红色
a,offset()方法
它的作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。
var offset = $("p").offset();//获取<p>元素的offset()
var left = offset.left; //获取左偏移
var top = offset.top; //获取右偏移
b,position()方法
获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，它返回的对象也包括两个属性，即top和left。
c,scrollTop()方法和scrollLeft()方法
这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离
作者：wustrive_2008 发表于2012-3-16 17:32:25 原文链接
阅读：1 评论：0 查看评论
相关 [jquery 基础 jquery] 推荐：
JQuery 选择器
- - CSDN博客Web前端推荐文章}
点击我
. 像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥，因为它并没有将网页内容和行为分离，所以才有JQuery选择器的学习.点击我
. //给class为demo的元素添加行为.jquery操作xml
- - CSDN博客Web前端推荐文章jquery真的很强大，虽然一直在用jquery，不用一直都没有深入，这几天重新学习了一下，不得不感叹她的强大，已经让我深深入迷. 这里记录一下，她是怎么快速地操作xml的.. 这里我们有一个xml文件：. jquery如何操作呢,总的思想，就是和操作dom差不多的方法. 首先我们获取这个文件的内容：（我先引入jquery库哈）.
jQuery JSONP跨域
- - Web前端 - ITeye博客基于Jquery的Ajax跨域访问. 单点登录服务器(sso服务器). 登录网页项目的时候，由于使用了单点登录，所以页面会跳转到sso服务器，进行统一登录，. 现在需要在该界面增加令牌的认证，但是SSO服务器和令牌服务器部署在不同的服务器，且暂时没有要合并的可能，所以在SSO登录的时候必须要对令牌进行验证，就必须涉及到了跨域访问的问题.
jquery 插件
- - JavaScript - Web前端 - ITeye博客 jQuery插件的开发包括两种：. 一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.
让jquery更快
- - JavaScript - Web前端 - ITeye博客很久没有关注jQuery了，最近重新看了一下，看到一些不错的文章，转来坐一下笔记. 其内容和一些新提供的方法还是很多有值得学习的地方. 使用最新版本的jQuery. jQuery的版本更新很快，你应该总是使用最新的版本. 因为新版本会改进性能，还有很多新功能. 下面就来看看，不同版本的jQuery性能差异有多大.
jQuery Tools：Web开发必备的 jQuery UI 库
- - 博客园_首页jQuery Tools 是基于. jQuery 开发的网站界面库，包含网站最常用的Tabs（选项卡）、Tooltip（信息提示）、Overlay（遮罩、弹窗）、Scrollable（滚动控制）、Form Validator（表单验证）、Rangeinput（范围选择）、Dateinput（日期选择）等众多功能.
jQuery最佳实践
- andi - 阮一峰的网络日志上周，我整理了《jQuery设计思想》. 那篇文章是一篇入门教程，从设计思想的角度，讲解"怎么使用jQuery". 今天的文章则是更进一步，讲解"如何用好jQuery". 我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》（jQuery Proven Performance Tips And Tricks）.
jQuery设计思想
- ArBing - 阮一峰的网络日志jQuery是目前使用最广泛的javascript函数库. 据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库. 微软公司甚至把jQuery作为他们的官方库. 对于网页开发者来说，学会jQuery是必要的. 因为它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果.