jQuery与Dom
2013-10-30 14:10
344 查看
上节讲解了jQuery的选择器,基本都掌握了,现在再讲解一下jQuery的Dom操作。
1、查找节点
1.1 查找元素节点
[javascript] view plaincopyprint?
var $li = $("ul li:eq(1)"); //获取<ul>里第二个<li>节点。
var li_txt = $li.text(); //获取第二个<li>元素节点的文本内容。
alert(li_txt);
1.2查找属性节点
jQuery选择器找到所需元素之后,就可以使用attr()方法来获取它的各种属性值。attr()的参数可以是一个,可以是两个。一个表示取值,两个表示赋值。
[javascript] view plaincopyprint?
var $para = $("p"); //获取<p>节点
var p_txt = $para.attr("title"); //获取<p>元素节点属性title
alert(p_txt);
2、创建节点
2.1创建元素节点
例如要创建两个<li>元素节点,并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上。完成这个任务需要两个步骤。
(1)创建两个<li>新元素
(2)将这两个元素插入文档中。
第(1)个步骤可以用jQuery的工厂函数$()来完成,格式如下:
[javascript] view plaincopyprint?
$(html);
$(html)方法会根据传入的html标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回。
首先创建两个<li>元素,如下:
var $li_1 = $("<li></li>");
var $li_2 = $("<li></li>");
插入元素:
$("ul").append($li_1);
$("ul").append($li_2);或者用如下写法:$("ul").append($li_1).append($li_2);
2.2创建文本节点
[javascript] view plaincopyprint?
var $li_1 = $("<li>香蕉</li>");
var $li_2 = $("<li>雪梨</li>");
其他的同2.1
2.3创建属性节点
[javascript] view plaincopyprint?
var $li_1 = $("<li title=’香蕉‘>香蕉</li>");
var $li_2 = $("<li title='雪梨'>雪梨</li>");
其他的同2.1
3、插入节点
动态的创建HTML元素并没有什么实际用处,还需要将新创建的元素插入到文档中去,前面已经介绍了一种append(),其实还有很多插入方法。
主要有四对方法处理,其实都很简单,很好记。如下:
append()和appendTo():向每个匹配元素的内部追加内容,指的是后部。
prepend()和prependTo():向每个匹配元素内部前置内容,指的是前部。
after()和insertAfter():在每个匹配元素后部插入内容,指的是同级后面。
before()和insertBefore():在每个匹配元素前部插入内容,指的是同级前面。
4、删除节点
如果文档中某一个元素多余,那么应该删除。jQuery提供了两种删除节点的方法,及remove()和empty()。
4.1remove()方法
var $li = $("ul li:eq(1)").remove(); //获取第二个<li>元素节点后,将它从网页上删除。
其返回值是一个指向已被删除的节点的引用,因此可以在以后继续使用这些元素。
$li.appendTo("ul"); //把刚才删除的节点又重新添加到<ul>元素里。
以上代码可以简写如下:
$("ul li:eq(1)").appendTo("ul"); //用来移动元素,移动元素首先删除元素,然后再插入。
remove()还可以添加参数,如下:
$("ul li").remove("li[title!=萝卜]");
4.2empty()方法
严格讲,empty()并不删除节点,只是清空节点,它能清空元素中的所有后代节点。
5、复制节点
clone()和clone(true),复制节点后,被复制的新元素并不具有任何行为。如果需要新元素有具有复制功能,则使用clone(true)
[javascript] view plaincopyprint?
$("ul li").click(function(){
$(this).clone().appendTo("ul");//复制当前节点,并将它追加到<ul>元素中。
});
6、替换节点
如果要替换某个节点,jQuery提供了相应的方法,即replaceWith()和replaceAll()。
$("p").repaceWith("<strong>你最不喜欢的水果是?</strong>"); //将所有匹配的元素都替换成指定的HTML或者DOM元素。
$("<strong>你最不喜欢的水果是?</strong>").repalceAll("p"); //和上面是一对操作。
7、包裹节点
使用wrap()和wrapAll()方法可以实现:
[javascript] view plaincopyprint?
$("strong").wrap("<b></b>"); //把每一个<strong>都用一个<b>包围起来,有几个包几个
$("strong").wrapAll("<b></b>"); //整体包裹
warpInner()方法,包裹元素的子内容(包括文本节点)
8、属性操作
在jQuery中,用attr()方法来获取和设置元素属性,removeAttr()方法来删除元素属性。
8.1获取和设置属性
attr()一个参数表示获取属性值,两个参数表示设置属性值,前面讲过。
$("p").attr("title","your title");
还可以设置多值,$("p").attr({"title":"your title","name":"test"})
jQuery中很多方法都是同一个函数实现获取(getter)和设置(setter)的,例如上面的attr()方法,既能设置元素属性的值,也能获取元素属性的值,类似的还有
html()、text()、height()、width()、val()和css()等方法。
8.2删除属性
$("p").removeAttr("title");
9、样式操作
9.1获取样式和设置样式
var p_class = $("p").attr("class"); //获取<p>元素的class
也可以用attr来设置<p>元素的class,jQuery代码如下:
$("p").attr("class","high"); //此代码的作用是将原来的class替换为新的class,而不是在原有的基础上追加新的class,追加的如下。
9.2追加样式
使用addClass();
$("p").addClass("another"); //给<p>元素追加”another“类,此时一共有两个样式了。
9.3移除样式
使用removeClass()来完成,当有参数时removeClass("another"),则移除指定的样式,还有removeClass("high another");移除两个样式
当没有参数时则表明移除该元素的所有样式。
9.4切换样式
之前有toggle()方法
[javascript] view plaincopyprint?
$toggleBtn.toggle(function(){
//show code
},function(){
//hide code
});
这里有toggleClass方法,控制样式的转换。如果类名存在则删除它,如果类名不存在则添加它。
$("p").toggleClass("another"); //重复切换类名"another"
9.5判断是否含有某个样式
hasClass(”another“); 其实其内部是使用is(".another")来实现的,这样做只是增加了可读性。
10、设置和获取HTML、文本和值
主要有如下方法:
html() 对应javaScript的innerHTML属性
text() 对应javascript的innerText属性,firefox不支持innerText属性
val()方法focus()、blur()方法
val()除了取值和设置之外,还可以给select checkbox 和radio选中值,jQuery的val()的原则是从最后一个往前读,value和text值
this.defaultValue方法。
11、遍历节点
11.1children()方法
遍历所有的子节点。
11.2next(),pre(),siblings()
closest()取得最近的匹配元素。
12、CSS-DOM操作
$("p").css("color");//获取颜色属性
$("p").css("color","red");//设置颜色
$("p").css({"fontSize":"30px",”backgroundColor“:”#888888“});//同时设置多个样式。
有两个注意点:
(1)如果值是数字,将会被自动转化为像素值。
(2)在css()方法中,如果属性中带有”-“符号,例如font-size和background-color属性,用驼峰式写法。
hight().width();
offset() .left .top 获取元素在当前视窗的偏移量,返回值对象包含两个属性left和top。
position() .left .top 获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的偏移量。
scrollTop() 、scrollLeft()方法。分别获取元素的滚动条距顶端的距离和距左侧的距离。也可以设置值。scrollTop(300)
下面是个经典的例子:鼠标移过图片,图片放大
[html] view plaincopyprint?
<html>
<head>
<title>jQuery DOM test</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
//alert("over");
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle ? "<br/>"+this.myTitle : "";
var tooltip = "<div id='tooltip'><img src='" + this.href +"' alt='产品预览图'/>"+imgTitle+"</div>";
$("body").append(tooltip);
$("#tooltip").css({"top":(e.pageY + y)+"px","left":(e.pageX + x)+"px"}).show("fast");
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove();
});
});
</script>
</head>
<body>
<div>
<ul style="list-style:none;">
<li style="display:inline"><a href="img/ipod.jpg" class="tooltip" title="苹果ipod" ><img src="img/ipod.jpg" alt="苹果ipod" style="width:150px; height:150px"/></a></li>
<li style="display:inline"><a href="img/iphone.jpg" class="tooltip" title="苹果iphone"><img src="img/iphone.jpg" alt="苹果iphone" style="width:150px; height:150px"/></a></li>
<li style="display:inline"><a href="img/ipad.jpg" class="tooltip" title="苹果ipad"><img src="img/ipad.jpg" alt="苹果ipad" style="width:150px; height:150px"/></a></li>
<li style="display:inline"><a href="img/air.jpg" class="tooltip" title="苹果air"><img src="img/air.jpg" alt="苹果air" style="width:150px; height:150px"/></a></li>
</ul>
</div>
</body>
</html>
注意其中的li的横向排列方法还有其他的方法使其横向排列:
[html] view plaincopyprint?
方法一:直接带<li>里面加样式来实现
<ul style=list-style:none;>
<li style="display:inline">我要横向排列</li>
<li style="display:inline">Hier of chsfish </li>
</ul>
方法二:通过定义ul li 来实现
ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}
<ul>
<li>我要横向排列</li>
<li>Hier of chsfish </li>
</ul>
方法三:通过定义li的CSS来实现
<style type="text/css">
<!--
li {
background-color: #CCCCCC;
text-align: center;
float: left;
width: 70px;
margin: 3px;
padding: 3px;
list-style-type: none;
}
-->
</style>
<ul>
<li>Text1Text1Text1</li>
<li>Text2Text2Text2</li>
<li>Text3Text3Text3</li>
<li>Text4Text4Text4</li>
<li>Text5Text5Text5</li>
<li>Text6Text6Text6</li>
</ul>
1、查找节点
1.1 查找元素节点
[javascript] view plaincopyprint?
var $li = $("ul li:eq(1)"); //获取<ul>里第二个<li>节点。
var li_txt = $li.text(); //获取第二个<li>元素节点的文本内容。
alert(li_txt);
1.2查找属性节点
jQuery选择器找到所需元素之后,就可以使用attr()方法来获取它的各种属性值。attr()的参数可以是一个,可以是两个。一个表示取值,两个表示赋值。
[javascript] view plaincopyprint?
var $para = $("p"); //获取<p>节点
var p_txt = $para.attr("title"); //获取<p>元素节点属性title
alert(p_txt);
2、创建节点
2.1创建元素节点
例如要创建两个<li>元素节点,并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上。完成这个任务需要两个步骤。
(1)创建两个<li>新元素
(2)将这两个元素插入文档中。
第(1)个步骤可以用jQuery的工厂函数$()来完成,格式如下:
[javascript] view plaincopyprint?
$(html);
$(html)方法会根据传入的html标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回。
首先创建两个<li>元素,如下:
var $li_1 = $("<li></li>");
var $li_2 = $("<li></li>");
插入元素:
$("ul").append($li_1);
$("ul").append($li_2);或者用如下写法:$("ul").append($li_1).append($li_2);
2.2创建文本节点
[javascript] view plaincopyprint?
var $li_1 = $("<li>香蕉</li>");
var $li_2 = $("<li>雪梨</li>");
其他的同2.1
2.3创建属性节点
[javascript] view plaincopyprint?
var $li_1 = $("<li title=’香蕉‘>香蕉</li>");
var $li_2 = $("<li title='雪梨'>雪梨</li>");
其他的同2.1
3、插入节点
动态的创建HTML元素并没有什么实际用处,还需要将新创建的元素插入到文档中去,前面已经介绍了一种append(),其实还有很多插入方法。
主要有四对方法处理,其实都很简单,很好记。如下:
append()和appendTo():向每个匹配元素的内部追加内容,指的是后部。
prepend()和prependTo():向每个匹配元素内部前置内容,指的是前部。
after()和insertAfter():在每个匹配元素后部插入内容,指的是同级后面。
before()和insertBefore():在每个匹配元素前部插入内容,指的是同级前面。
4、删除节点
如果文档中某一个元素多余,那么应该删除。jQuery提供了两种删除节点的方法,及remove()和empty()。
4.1remove()方法
var $li = $("ul li:eq(1)").remove(); //获取第二个<li>元素节点后,将它从网页上删除。
其返回值是一个指向已被删除的节点的引用,因此可以在以后继续使用这些元素。
$li.appendTo("ul"); //把刚才删除的节点又重新添加到<ul>元素里。
以上代码可以简写如下:
$("ul li:eq(1)").appendTo("ul"); //用来移动元素,移动元素首先删除元素,然后再插入。
remove()还可以添加参数,如下:
$("ul li").remove("li[title!=萝卜]");
4.2empty()方法
严格讲,empty()并不删除节点,只是清空节点,它能清空元素中的所有后代节点。
5、复制节点
clone()和clone(true),复制节点后,被复制的新元素并不具有任何行为。如果需要新元素有具有复制功能,则使用clone(true)
[javascript] view plaincopyprint?
$("ul li").click(function(){
$(this).clone().appendTo("ul");//复制当前节点,并将它追加到<ul>元素中。
});
6、替换节点
如果要替换某个节点,jQuery提供了相应的方法,即replaceWith()和replaceAll()。
$("p").repaceWith("<strong>你最不喜欢的水果是?</strong>"); //将所有匹配的元素都替换成指定的HTML或者DOM元素。
$("<strong>你最不喜欢的水果是?</strong>").repalceAll("p"); //和上面是一对操作。
7、包裹节点
使用wrap()和wrapAll()方法可以实现:
[javascript] view plaincopyprint?
$("strong").wrap("<b></b>"); //把每一个<strong>都用一个<b>包围起来,有几个包几个
$("strong").wrapAll("<b></b>"); //整体包裹
warpInner()方法,包裹元素的子内容(包括文本节点)
8、属性操作
在jQuery中,用attr()方法来获取和设置元素属性,removeAttr()方法来删除元素属性。
8.1获取和设置属性
attr()一个参数表示获取属性值,两个参数表示设置属性值,前面讲过。
$("p").attr("title","your title");
还可以设置多值,$("p").attr({"title":"your title","name":"test"})
jQuery中很多方法都是同一个函数实现获取(getter)和设置(setter)的,例如上面的attr()方法,既能设置元素属性的值,也能获取元素属性的值,类似的还有
html()、text()、height()、width()、val()和css()等方法。
8.2删除属性
$("p").removeAttr("title");
9、样式操作
9.1获取样式和设置样式
var p_class = $("p").attr("class"); //获取<p>元素的class
也可以用attr来设置<p>元素的class,jQuery代码如下:
$("p").attr("class","high"); //此代码的作用是将原来的class替换为新的class,而不是在原有的基础上追加新的class,追加的如下。
9.2追加样式
使用addClass();
$("p").addClass("another"); //给<p>元素追加”another“类,此时一共有两个样式了。
9.3移除样式
使用removeClass()来完成,当有参数时removeClass("another"),则移除指定的样式,还有removeClass("high another");移除两个样式
当没有参数时则表明移除该元素的所有样式。
9.4切换样式
之前有toggle()方法
[javascript] view plaincopyprint?
$toggleBtn.toggle(function(){
//show code
},function(){
//hide code
});
这里有toggleClass方法,控制样式的转换。如果类名存在则删除它,如果类名不存在则添加它。
$("p").toggleClass("another"); //重复切换类名"another"
9.5判断是否含有某个样式
hasClass(”another“); 其实其内部是使用is(".another")来实现的,这样做只是增加了可读性。
10、设置和获取HTML、文本和值
主要有如下方法:
html() 对应javaScript的innerHTML属性
text() 对应javascript的innerText属性,firefox不支持innerText属性
val()方法focus()、blur()方法
val()除了取值和设置之外,还可以给select checkbox 和radio选中值,jQuery的val()的原则是从最后一个往前读,value和text值
this.defaultValue方法。
11、遍历节点
11.1children()方法
遍历所有的子节点。
11.2next(),pre(),siblings()
closest()取得最近的匹配元素。
12、CSS-DOM操作
$("p").css("color");//获取颜色属性
$("p").css("color","red");//设置颜色
$("p").css({"fontSize":"30px",”backgroundColor“:”#888888“});//同时设置多个样式。
有两个注意点:
(1)如果值是数字,将会被自动转化为像素值。
(2)在css()方法中,如果属性中带有”-“符号,例如font-size和background-color属性,用驼峰式写法。
hight().width();
offset() .left .top 获取元素在当前视窗的偏移量,返回值对象包含两个属性left和top。
position() .left .top 获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的偏移量。
scrollTop() 、scrollLeft()方法。分别获取元素的滚动条距顶端的距离和距左侧的距离。也可以设置值。scrollTop(300)
下面是个经典的例子:鼠标移过图片,图片放大
[html] view plaincopyprint?
<html>
<head>
<title>jQuery DOM test</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
//alert("over");
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle ? "<br/>"+this.myTitle : "";
var tooltip = "<div id='tooltip'><img src='" + this.href +"' alt='产品预览图'/>"+imgTitle+"</div>";
$("body").append(tooltip);
$("#tooltip").css({"top":(e.pageY + y)+"px","left":(e.pageX + x)+"px"}).show("fast");
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove();
});
});
</script>
</head>
<body>
<div>
<ul style="list-style:none;">
<li style="display:inline"><a href="img/ipod.jpg" class="tooltip" title="苹果ipod" ><img src="img/ipod.jpg" alt="苹果ipod" style="width:150px; height:150px"/></a></li>
<li style="display:inline"><a href="img/iphone.jpg" class="tooltip" title="苹果iphone"><img src="img/iphone.jpg" alt="苹果iphone" style="width:150px; height:150px"/></a></li>
<li style="display:inline"><a href="img/ipad.jpg" class="tooltip" title="苹果ipad"><img src="img/ipad.jpg" alt="苹果ipad" style="width:150px; height:150px"/></a></li>
<li style="display:inline"><a href="img/air.jpg" class="tooltip" title="苹果air"><img src="img/air.jpg" alt="苹果air" style="width:150px; height:150px"/></a></li>
</ul>
</div>
</body>
</html>
注意其中的li的横向排列方法还有其他的方法使其横向排列:
[html] view plaincopyprint?
方法一:直接带<li>里面加样式来实现
<ul style=list-style:none;>
<li style="display:inline">我要横向排列</li>
<li style="display:inline">Hier of chsfish </li>
</ul>
方法二:通过定义ul li 来实现
ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}
<ul>
<li>我要横向排列</li>
<li>Hier of chsfish </li>
</ul>
方法三:通过定义li的CSS来实现
<style type="text/css">
<!--
li {
background-color: #CCCCCC;
text-align: center;
float: left;
width: 70px;
margin: 3px;
padding: 3px;
list-style-type: none;
}
-->
</style>
<ul>
<li>Text1Text1Text1</li>
<li>Text2Text2Text2</li>
<li>Text3Text3Text3</li>
<li>Text4Text4Text4</li>
<li>Text5Text5Text5</li>
<li>Text6Text6Text6</li>
</ul>
相关文章推荐
- JQuery动态创建DOM、表单元素的实现代码
- jQuery学习笔记之三 对Dom的操作
- js-jQuery对象与dom对象相互转换
- jQuery之DOM操作详细
- JQuery与DOM中的区别
- [知了堂学习笔记]_jQuery对DOM的操作
- 4、jQuery修改DOM(Head First笔记)
- 【译】用jQuery 处理XML-- DOM(文本对象模型)简介
- JQuery之DOM操作
- Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode
- 原生JS与jQuery操作DOM对比
- JQuery快速学二(DOM操作)
- jQuery学习之DOM节点的插入方法总结
- jQuery中事件加载 DOM—@ready中调用其他方法,会提示缺少对象的错误
- 《锋利的jQuery》三、jQuery的DOM操作
- DOM与javascript,jQuery的关系
- jQuery中图片展示插件highslide.js的简单dom
- jqueryDOM属性
- jQuery 学习笔记 (jQuery对象 和Dom 区别 )
- Jquery基础之DOM操作