jQuery权威指南（第2版） 学习一 jQuery操作DOM

时间：2022-12-17 09:43:26

jQuery操作DOM

获取元素的属性

attr(name)　

获取元素属性的语法格式如下：

　　　　　　

attr(name)

其中，参数 name 表示属性的名称。

例子:

<img alt="" title=" 这是一幅风景画 " src="Images/img01.jpg" />

 <script>

	var strAlt = $("img").attr("src"); // Images/img01.jpg

	var title = $("img").attr("title"); // 这是一幅风景画

 </script>

　　

设置元素的属性
attr(key, value)
其设置属性语法格式如下所示：
　　attr(key, value)
其中，参数 key 表示属性的名称，value 表示属性的值。

要设置多个属性，也可以通过attr() 方法实现，其语法格式如下所示：
　　attr({key0:value0, key1:value1})

attr() 方法还可以绑定一个 function() 函数,通过该函数返回的值作为元素的属性值，其
语法格式如下所示：
　　attr(key, function(index))

例子：

<img alt="" src="Images/img03.gif" style="float:left" />

<script>

	$("img").attr("src", "Images/img01.jpg"); // 设置 src 属性

	$("img").attr("title", " 这是一幅风景画 "); // 设置 title 属性

	$("img").attr({ src: "Images/img02.jpg",title: " 这是一幅风景画 " });// 同时设置两个属性

</script>

<img alt="" src="Images/img03.gif" style="float:left" />

<script type="text/javascript">

	$(function() {

		$("img").attr("src", function() {

		          return "Images/img0" +Math.floor(Math.random() * 2 + 1) + ".jpg" }); // 设置 src 属性

			$("img").attr("title", " 这是一幅风景画 "); // 设置 title 属性

			$("img").addClass("clsImg"); // 增加样式

		})

</script>

　删除元素的属性　

　　removeAttr()方法可以将元素的属性删除，其使用的语法格式为：
　　　　　　removeAttr(name)

　　其中，参数 name 为元素属性的名称。　

　　例子：

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

　　

html() text()
在页面中，用html()和text()方法获取 div 标记中的内容，将内容分别作为html(val)和text(val) 的参数，分别设置元素的内容，并将结果显示在页面中

val()
使用 val（val） 方法设置 和 val()获取元素的值

元素样式操作

css()
在 jQuery 中，可以通过 css() 方法为某个指定的元素设置样式值，其语法格式如下所示：
css(name, value)
其中 name 为样式名称，value 为样式的值。

addClass()
通过 addClass() 方法增加元素类别的名称，其语法格式如下：
　　　　addClass(class) 　　　　 $('div').addClass("class0");

其中，参数 class 为类别的名称，也可以增加多个类别的名称，只需要用空格将其隔开即可，
其语法格式为：
　　　　addClass(class0 class1 ...) 　　　　 $('div').addClass("class0 class1");

使用 addClass() 方法仅是追加样式类别，即它还保存原有的类别。

<p class="cls0"/>

$("p").addClass("cls1 cls2");

<p class="cls0 cls1 cls2"/>

removeClass()
用于删除类别，其语法格式如下：
removeClass([class])

其中，参数 class 为类别名称，该名称是可选项。当选该名称时，删除名称是 class 的类别，
有多个类别时用空格隔开。如果不选名称，则删除元素中的所有类别。

$(function(){

    $('div').addClass("class0 class1");

});

$("div").click(function() {

    //$(this).removeClass(); 全部删除

    $(this).removeClass("class0"); //只删除class0

})

　　

toggleClass()
通过 toggleClass() 方法切换不同的元素类别，其语法格式如下：
toggleClass(class)
其中，参数 class 为类别名称，其功能是当元素中含有名称为 class 的 CSS 类别时，删除该类
别，否则增加一个该名称的 CSS 类别。 有则减 无则加

<div></div>

$("div").click(function() {

　　$(this).toggleClass("clsImg"); // 切换样式类别

})

页面元素操作

创建节点元素$()
函数 $() 用于动态创建页面元素，其语法格式如下：
$(html)
其中，参数 html 表示用于动态创建 DOM 元素的 HTML标记字符串，即如果要在页面中动态创建一个 div 标记，并设置其内容和属性.

<div></div>

    $("div").click(function() {

    var a = $("<a href='http://www.baidu.com'>1234</a>");

    $("div").prepend(a);

    }

　　

内部插入节点
append(content) 　
content 表示追加到目标中的内容 　
向所选择的元素内部插入内容

append(function(index, html))
通过 function 函数返回追加到目标中的内容
向所选择的元素内部插入 function 函数所返回的内容

appendTo(content) 　
content 表示被追加的内容
把所选择的元素追加到另一个指定的元素集合中

prepend(content)
content 表示插入目标元素内部前面的内容
向每个所选择的元素内部前置内容

prepend(function(index, html))
通过 function 函数返回插入目标元素内部前面的内容
向所选择的元素内部前置 function 函数所返回的内容

prependTo(content)
content 表示用于选择元素的 jQuery表达式
将所选择的元素前置到另一个指定的元素集合中

append(function(index, html))
jQuery 1.4 中新增的，其功能是将一个 function 函数作为 append 方法的参数，
该函数的功能必须返回一个字符串，作为 append 方法插入的内容，其中 index 参数为对象在这个集合中的索引值，html 参数为该对象原有的 html 值

<script type="text/javascript">

$(function() {

$("div").append(retHtml);// 插入内容

function retHtml() {

    var str = " <b>Write Less Do More</b> ";

    return str;

}

})

</script>

　　

appendTo(content)
该方法用于将一个元素插入另一个指定的元素内容中。

$("img").appendTo($("span"));

　　

即把 appentTo 方法前部分的内容img插入其后部分span的内容中。

外部插入节点
after(content) 　
content 表示插入目标元素外部后面的内容 　
向所选择的元素外部后面插入内容

after(function)
　通过 function 函数返回插入目标外部后面的内容
　向所选择的元素外部后面插入 function 函数所返回的内容

before(content) 　
content 表示插入目标元素外部前面的内容 　
向所选择的元素外部前面插入内容

before(function)
　通过 function 函数返回插入目标外部前面的内容
　向所选择的元素外部前面插入 function 函数所返回的内容

insertAfter(content)
　content 表示插入目标元素外部后面的内容
　将所选择的元素插入另一个指定的元素外部后面

insertBefore(content)
　content 表示插入目标元素外部前面的内容
　将所选择的元素插入另一个指定的元素外部前面

after例子：

<span>jQuery</span>

$(function() {

$("span").after(retHtml); // 插入内容

function retHtml() {

    var str = "<span><b>Write Less Do More</b><span>";

    return str;

    }

}

　　

复制元素节点
clone()
如果需要在复制时将该元素的全部行为也进行复制，可以通过方法 clone(true) 实现，其格式为：
clone(true)
其中的参数设置为 true，就可以复制元素的所有事件处理
例子：

<span><img title=" 封面 " src="Images/img04.jpg" /></span>

<script type="text/javascript">

$(function() {

    $("img").click(function() {

    $(this).clone(true).appendTo("span");

})

</script>

　　

替换元素节点

替换元素中的节点，可以使用 replaceWith() 和 replaceAll()

其语法格式分别如下：
replaceWith(content)
该方法的功能是将所有选择的元素替换成指定的 HTML 或 DOM 元素，其中参数content 为被所选择元素替换的内容。

其语法格式分别如下：
replaceAll(selector)
该方法的功能是将所有选择的元素替换成指定 selector 的元素，其中参数 selector为需要被替换的元素。

<p> 姓名：<span id="Span1"></span></p>

<p> 邮箱：<span id="Span2"></span></p>

<script type="text/javascript">

$(function() {

    //replaceWith()用括号中的字符替换所选择的元素

    $("#Span1").replaceWith("<span title='replaceWith'> 陶国荣 </span>");

    //replaceAll()用字符串替换括号中所选择的元素。

      "  $(< spantitle='replaceAll'>tao_guo_rong@163.com</span>").replaceAll("#Span2");

})

</script>

　　

包裹元素节点

遍历元素
在 jQuery 中，可以直接使用 each() 方法实现元素的遍历。其语法格式如下：
each(callback)

其中，参数callback是一个function函数，该函数还可以接受一个形参index，此形参为遍历元素的序号（从 0 开始）；如果需要访问元素中的属性，可以借助形参 index，配合 this 关键字来实现元素属性的设置或获取.

<img src="Images/img05.jpg" alt=" 第 0 幅风景画 " />

<img src="Images/img06.jpg" alt=" 第 1 幅风景画 " />

<img src="Images/img07.jpg" alt=" 第 2 幅风景画 " />

$("img").each(function(index){

    console.log(this.alt); //第 0 幅风景画 第 1 幅风景画 第 2 幅风景画

     this.title = " 第 " + index + " 幅风景图片，alt 内容是 " + this.alt;

})

　　

删除页面元素
remove() 方法的语法格式如下：
remove([expr])
其中参数 expr 为可选项，如果接受参数，则该参数为筛选元素的 jQuery 表达式，通过该表述式获取指定的元素，并进行删除。

empty () 方法的语法格式如下：
empty()
其功能为清空所选择的页面元素或所有的后代元素

相关文章