jQuery基础之jQuery的DOM操作
2012-03-16 17:32
676 查看
为了能全面地讲解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()方法
这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery基础教程之DOM操作-节点操作函数（二）
- JQuery基础DOM操作
- jQuery碎语(1) 基础、选择要操作的元素、处理DOM元素
- Jquery基础之DOM操作
- Jquery基础之DOM操作
- Jquery基础之DOM操作
- a毛 jquery 学习记 5 基础DOM和CSS操作3
- Jquery基础之DOM操作
- jQuery基础教程之DOM操作-遍历节点-parents()方法
- jQuery基础知识点（DOM操作）
- Jquery基础之DOM操作
- Jquery基础之DOM操作
- 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条
- jQuery基础之三 -- 操作DOM
- Jquery基础之DOM操作
- jQuery基础教程之DOM操作-遍历节点-prev()方法
- Jquery基础之DOM操作
- jQuery基础教程之DOM操作-样式操作
- 【知了堂学习笔记】_Jquery基础知识之DOM操作（二）
- Jquery基础DOM和css操作