JQuery入门(4)

简介: 一、元素属性操作 在jQuery中,可以对元素的属性执行获取、设置、删除的操作,通过attr()方法可以对元素属性执行获取和设置操作,removeAttr()方法可以删除某一指定的属性。 1.获取元素的属性 语法:attr(name) 参数name表示属性的名称 2.设置元素的属性 单个属性设置语法:attr(key,value) 多个属性设置语法:attr({

一、元素属性操作
在jQuery中,可以对元素的属性执行获取、设置、删除的操作,通过attr()方法可以对元素属性执行获取和设置操作,removeAttr()方法可以删除某一指定的属性。
1.获取元素的属性
语法:attr(name)
参数name表示属性的名称
2.设置元素的属性
单个属性设置语法:attr(key,value)
多个属性设置语法:attr({key0:value0,key1:value1})
3.删除元素的属性
语法:removeAttr(name)
我们将通过下面示例讲解上述语法:
示例如下:
(1)描述
使用attr()方法设置、获取、删除a标记中href属性。
(2)代码实现

<script type="text/javascript">
$(function(){
    $("#a1").attr("href","http://www.baidu.com");//设置a标记中的href属性
    var $url = $("#a1").attr("href");//获取a标记中的href属性
    $("#tip").html($url);
})
$(function(){//删除a标记中的href属性
    $("#a1").removeAttr("href");
})
</script>
...省略代码
<h3>attr()方法设置元素属性</h3>
<a data="http://www.hubwiz.com" id="a1">点我就变</a>
<div>改变后的地址:<span id="tip"></span></div>

二、元素内容操作

<script type="text/javascript">
$(function(){ //增加表单中所有属性为可用的元素类别
    var $strHtml = $("#divShow").html();//获取HTML内容
    var $strText = $("#divShow").text();//获取文本内容
    $("#divHtml").html($strHtml);//设置HTML内容
    $("#divText").text($strText);//设置文本内容
})
</script>
...省略代码
<div id="divShow"><b><i>hello</i></b></div>
<div id="divHtml"></div>
<div id="divText"></div>

三、向元素中追加内容
如果在页面中增加某个元素,只需要找到元素的上级节点,然后通过append()向指定的元素中追加内容或者通过appendTo()把内容追加到指定元素内。
如果是在元素前后插入内容,使用before()和after()方法可以在元素的前后插入内容,它们分别表示在整个元素的前面和后面插入指定的元素或内容。参数html用于找到需要追加内容的元素字符串,参数content是追加的内容,可以是字符、HTML元素标记还可以是一个返回字符串内容的函数。

<script type="text/javascript">
$(function(){ //增加表单中所有属性为可用的元素类别
    var $content = "<b>我是append()方法追加的内容</b>";
    var $contentTo = "<b>我是appendTo()方法追加的内容</b>";
    var $before = "<b>我是before()方法追加到前面的内容</b>";
    var $after = "<b>我是before()方法追加到后面的内容</b>";
    $("#id1").append($content);
    $($contentTo).appendTo("#id2");
    $("#id3").before($before);
    $("#id4").after($after);
})
</script>
...省略代码
<p id="id1">append()追加内容:</p>
<p id="id2">appendTo()追加内容:</p>
<p id="id3">before()追加到前面</p>
<p id="id4">after()追加到后面</p>

四、复制元素
想要复制元素,调用clone()方法可以生成一个被选元素的副本,即复制了一个被选元素,包含它的节点、文本和属性
语法形式:$(content).clone()
参数content可以HTML内容、HTML元素标记。
五、元素替换
在jQuery中想要替换元素或元素中的内容,replaceWith()和replaceAll()方法都可以但它们调用时,内容和被替换元素所在的位置不同

replaceWith()语法形式:$(selector).replaceWith(content)

replaceAll()语法形式:$(content).replaceAll(selector)

参数selector为被替换的元素,content为替换的内容。

六、包裹元素
在jQuery中使用wrap()和wrapInner()方法包裹元素和内容,但前者用于包裹元素本身,后者则用于包裹元素中的内容。

wrap()语法形式:$(selector).wrap(wrapper)

wrapInner()语法形式:$(selector).wrapInner(wrapper)

参数selector为被包裹的元素,wrapper参数为包裹元素的格式。
七、遍历元素
在DOM元素操作中,有时需要对同一标记的全部元素进行统一操作。在jQuery中,使用each()方法可以实现元素的遍历。

语法形式:$(selector).each(callback)

参数callback是一个function函数,该函数还可以接收一个行参index,这个形参为遍历元素的序号,序号从0开始;如果需要访问元素中的属性,可以借助形参index,配合this关键字来实现元素属性的设置或获取。
八、删除元素
在DOM元素操作中,jQuery为删除元素提供了两种方法:remove()和empty()。remove()-删除被选元素(及其子元素),empty()-从被选元素中删除子元素

目录
相关文章
|
存储 JavaScript 前端开发
JQuery(入门~选择器)
JQuery 是快速、简洁的JavaScript库,也就是写好的JS文件。
|
JavaScript 前端开发 索引
jQuery入门&以及选择器
jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
50 0
|
JavaScript 前端开发
jQuery01-入门-选择器
jQuery01-入门-选择器
|
JavaScript 前端开发 Java
jQuery入门&选择器
jQuery入门&选择器
|
存储 JavaScript 前端开发
jQuery 入门&选择器
jQuery 入门&选择器
69 0
|
2月前
|
JavaScript
Jquery从入门到精通
Jquery从入门到精通
|
6月前
|
JavaScript 前端开发 API
jQuery 入门:轻松创建与插入节点
jQuery 入门:轻松创建与插入节点
|
XML JSON JavaScript
jQuery入门到实战
jQuery入门到实战
jQuery入门到实战
|
存储 JavaScript 前端开发
JQuery入门基础
JQuery入门基础
46 0
|
JavaScript 前端开发 开发工具
jQuery入门级别介绍及选择器的使用----详细介绍
jQuery入门级别介绍及选择器的使用----详细介绍
60 0