您的位置：首页 > Web前端 > JQuery

jQuery学习笔记（1）-DOM 操作

2014-04-22 13:56 435 查看

1.元素属性操作

通过attr()获取和设置元素的属性，removeAttr()方法删除指定属性

eg:

<body>
<<img alt="" title="this is a image"
src="images/01.jpg" />
<div id="divAlt">
</div>
<body>


我们编写如下jQuery代码在divAlt中写入 img 的 src属性：

var strAlt = $("img").attr("scr");
$("#divAlt").html(strAlt);


修改img 的 src 属性:

$("img").attr("src", "images/img02.jpg");

删除 img 的 src 属性：

$("img").removeAttr("src");

attr()方法还可以绑定一个 function() 函数，用函数的返回值作为元素的属性值:

attr(key, function(index));

*补充说一点：

在jQuery1.9+以后，具有true, false两个属性使用prop();其它则使用attr()

2.获取和设置元素

在jQuery中操作元素内容的方法包括html() 和 text()

关于 html() 和 text() 的区别如下表：

html() 和 text()方法区别

语法格式参数说明功能描述
html()无用户获取元素的HTML内容
html(val)val 参数为元素的HTML内容用户设置元素的 HTML内容
text()无用户获取元素的文本内容
text(val)val 参数为元素的文本内容用于设置元素的文本内容
可能看了这个还是不太明白两者的区别，再来看下面的例子：

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var strHTML = $("#divShow").html();
var strText = $("#divShow").text();
$("#divHTML").html(strHTML);
$("#divText").text(strText);
})
</script>
</head>
<body>
<div id="divShow">
<b><i>Write Less Do More</i></b>
</div>
<div id="divHTML"></div>
<div id="divText"></div>
</body>
</html>


在浏览器中的显示如下图：



可以看到 html() 方法有加粗和斜体效果，而 text() 没有这些效果，在Chrome中调试，我们发现

var strHTML = $("#divShow").html();

得到的是：

<b><i>Write Less Do More</i></b>


而 var strText = $("#divShow").text(); 得到的仅仅是 Write Less Do More

这说明 text() 方法是去除了 html 标签，仅仅获取标签里面的内容，而 html() 方法是获取标签里的html()

3.元素样式操作

在jQuery中，操作元素样式有如下方法：

css(name, value)

addClass(class)

toggleClass(class)

removeClass([class])

首先来看看 css() 方法的使用

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("p").click(function() {
$(this).css("font-weight", "bold");
$(this).css("font-style", "italic");
$(this).css("background-color", "#cde");
});
})
</script>
</head>
<body>
<p>Write Less Do More</p>
</html>


开始截图如下：



点击之后效果截图如下：



也可以使用 addClass() 方法

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
<style type="text/css">
.cls1 {font-weight: bold; font-style: italic}
.cls2 {border:solid 1px #eee; background-color: #cde}
</style>
<script type="text/javascript">
$(function() {
$("p").click(function() {
$(this).addClass('cls1 cls2');
});
})

</script>
</head>
<body>
<p>Write Less Do More</p>
</html>


点击段落后截图如下：



需要补充一点的是，addClass() 并不是覆盖原来的 class， 仅仅是添加 class

toggle 是切换的意思， toggleClass() 方法用于 css 样式的切换，讲上面代码的 addClass 改成 toggleClass之后，通过点击就可以在原样式和新样式直接切换

要删除某一样式可以通过 removeClass() 方法实现，多个样式之间用空格隔开

eg:

　　 $("p").removeClass("cls0 cls1");

4.页面元素操作

当要增加某个元素，首先找到该元素的上级节点，然后用 $(html) 来创建节点元素， 最后添加到该节点。

例如给 body 添加一个 div

var $new_div = $("<div title='jQuery'>Write Less Do More</div>");
$("body").append($new_div);


插入内部节点的方法：

语法格式功能描述
append(content)向所选择的元素内部插入内容
append(function(index, html))function 返回值追加到目标内容
appendTo(content)把所选的元素追加到另一个指定的元素集合中
prepend(content)向目标前置内容
prepend(function(index, html))前置插入function返回值
prependTo(content)把所选的元素前置插入到另一个指定的元素集合中
appendTo() 方法举例：

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("p").appendTo($("span"));
})

</script>
</head>
<body>
<p>Write Less Do More</p>
<span><p>Hello</p></span>
</html>


在Chrome中查看代码结构如下：



可以发现 appendTo() 是讲 p 标签都移到了 span 标签内部

外部节点插入：

语法格式功能描述
after(content)外部后面插入内容
after(function())外部后面插入函数返回值
befort(content)外部前面插入内容
before(function())外部前面插入函数返回值
insertAfter(content)将所选元素插入到另一指定元素外部后面
insertBefore(content) 将所选元素插入到另一指定元素外部前面
after() 举例：

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("span").after(retHtml);
function retHtml() {
// var str = "<span><b>Write Less Do More</b></span>";
var str = "<b>Write Less Do More</b>";
return str;
}
})

</script>
</head>
<body>
<span>jQuery</span>
</html>


Chrome中代码如下：



可以看到仅仅是在<span>标签之后添加了相应代码

复制节点：

clone () 只是单独的复制， clone(true) 怎会复制元素的所有处理事件

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("img").click(function() {
$(this).clone().appendTo('span');
});
})

</script>
</head>
<body>
<span><img title="封面" src="images/00.png" /></span>
</html>


通过点击图片会复制一张相同的图片，但是复制的图片点击没有效果，如果将代码改为 clone(true) 则复制的图片点击之后也会复制新图片

替换元素节点：

替换节点使用 replaceWith() 或者 replaceAll() 方法

eg:

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#span1").replaceWith("<span title ='replaceWith'>fly</span>");
$("<span title='replaceAll'>fly@gmail.com</span>").replaceAll('#span2');
})

</script>
</head>
<body>
<p>name: <span id="span1">aa</span></p>
<p>email: <span id="span2">bb</span></p>
</body>
</html>


上面代码中的 aa 和 bb 将分别被替换为 fly 和 fly@gmail.com

replaceWith() 和 replaceAll() 操作的是 Html 而不是标签的内容，个人感觉两个函数的作用一样，只不过写法不一样。

包裹元素节点：

wrap(html)

wrap(elem)

wrap(fn)

unwrap()

wrapAll(html)

wrapInner(html)

wrapInner(elem)

wrapInner(fn)

其中常用的有： wrap 和 wrapInner

eg：

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("p").wrap('<b></b>');
$("span").wrapInner('<i></i>');
})

</script>
</head>
<body>
<p>favorite people: <span>wang fei</span></p>
<p>favorite movie: <span>Titanic</span></p>
</body>
</html>


在Chrome中查看代码：



可以看到 <p> 放在了 <b>标签内部，而 <span> 放在了 <i>标签外部

遍历元素：

这个比较简单，直接上例子：

$("img").each(function(index) {
this.title = "the " + index + " picture";
})


删除页面元素：

jQuery提供了两种删除元素的方法： remove() 和 empty()

eg:

$("ul li").remove("li[titel=t]");
$("ul li:eq(1)").remove();
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航