jQuery_2操作dom元素

1 元素属性操作

在jQuery中,可以对元素的属性执行获取、设置、删除的操作,通过attr()方法可以对元素属性执行获取和设置操作,removeAttr()方法可以删除某一指定的属性。

1.1 获取元素属性

语法:attr(name)  参数name表示属性的名称

1.2 设置元素属性

单个属性设置语法:attr(key, value)

多个属性设置语法:attr({key0:value0, key1:value1})

1.3 删除元素属性

语法:removeAttr(name)

示例 使用attr()方法设置、获取、删除a标记中href属性。

<script type="text/javascript">
$(function(){
    $("#a1").attr("href","http://www.xxx.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.hxxxz.com" id="a1">点我就变</a>
<div>改变后的地址:<span id="tip"></span></div>
...省略代码

result:

2 元素内容操作

在jQuery中,操作元素内容的方法包括html()和text()。详细如下:

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

<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">**_几天不见你又瘦了_**</div>
<div id="divHtml"></div>
<div id="divText"></div>
 

result:

3 元素样式操作

通过addClass()css()可以方便地操作元素中的样式,前者括号中的参数为增加元素的样式名称,后者直接将样式的属性内容写在括号中。

示例 使用css()和addClass()方法,改变div元素的背景色,再用removeClass()移除一个元素的样式。

<style type="text/css">
    body{font-size:15px;text-align:center}
    div{border:solid 1px #666;
        padding:5px;width:220px;margin:5px}
    .blue{background-color:blue}
</style>
<script type="text/javascript">
$(function(){ //增加表单中所有属性为可用的元素类别
    $("#content0").css("background-color","red");
    $("#content1").addClass("blue");
    $("#rem").click(function(){//click点击事件我们将在后面介绍到。
        $("#content1").removeClass("blue");
    })
})
</script>
...省略代码

### css()方法设置元素样式

<div id="content0">我穿了一件红色外衣</div>
<div id="content1">我穿了一件红色外衣</div>
<div><button id="rem">脱下蓝色的外衣</button></div>

result:

4 向元素追加内容

如果在页面中增加某个元素,只需要找到元素的上级节点,然后通过append()向指定的元素中追加内容或者通过appendTo()把内容追加到指定元素内。

如果是在元素前后插入内容,使用before()和after()方法可以在元素的前后插入内容,它们分别表示在整个元素的前面和后面插入指定的元素或内容

append()语法形式:$(html).append(content)

appendTo()语法形式:$(content).appendTo(html)

before()的语法形式:$(html).before(content)

after()的语法形式:$(html).after(content)

参数html用于找到需要追加内容的元素字符串,参数content是追加的内容,可以是字符、HTML元素标记还可以是一个返回字符串内容的函数。

示例 向p标记中或前或后分别追加内容。

<script type="text/javascript">
$(function(){ //增加表单中所有属性为可用的元素类别
    var $content = "**我是append()方法追加的内容**";
    var $contentTo = "**我是appendTo()方法追加的内容**";
    var $before = "**我是before()方法追加到前面的内容**";
    var $after = "**我是before()方法追加到后面的内容**";
    $("#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>

result: 后三个方法并没有实现

5

时间: 2024-10-29 19:12:07

jQuery_2操作dom元素的相关文章

操作DOM元素,Dom元素添加颜色,删除第二个li元素

<html> <head> <title>demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> /* 示例操作DOM元素 */ window.onload = function(){ //给Dom元素添

web进阶之jQuery操作DOM元素&amp;&amp;MySQL记录操作&amp;&amp;PHP面向对象学习笔记

hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 控制就是获取以及设置 <h3>attr()方法设置元素属性</h3> <a href="http://127.0.0.1" id="a1">点我就变</a> <d

jquery学习记录四(操作DOM元素)

jQuery 操作DOM元素主要有: 1.使用attr()方法控制元素的属性 2.操作元素的内容 3.操作元素的样式 4.移除属性和样式 5.使用append()方法向元素内追加内容 6.使用appendTo()方法向被选元素内容插入内容 7.使用before()和after()在元素前后插入内容 8.使用clone()方法复制元素 9.替换内容 10.使用wrap()和wrapinner()方法包裹元素和内容 11.使用each()方法遍历元素 12.使用remove()和empty()方法删

jquery操作DOM元素的复习

使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 操作元素的内容 使用html()和text()方法操作元素的内容,当两个方法的参数为空时,表示获取该元素的内容,而如果方法中包含参数,则表示将参数值设置为元素内容. var $content = "<b>唉,我又变胖了!</b>"; $("#html").h

Javascript操作DOM元素

1.动态创建DOM的步骤 (1)调用document的createElement方法来创建具有指定标签的DOM对象 (2)然后通过调用某个元素的appendChild();方法将新创建的元素添加到相应的元素下. 2.操作DOM的方法 createElement('element');创建一个节点 document.createElement('<input type="button" value="hello" />');快速创建元素,并且赋值,但是注意

不获取元素,直接使用id操作dom元素

今天无意中发现个让我很吃惊的问题. 不使用getElementById方法,也可以用id直接操作有id的元素. 继续搜索后,发现name也可以直接操作... 这让我大感意外,了解以后,忍不住写点东西记录下来. 如果dom元素的id名称不和js内置属性或全局变量重名的话,该名称自动成为window对象的属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

jquery操作DOM 元素(2)

.after() 在匹配的元素集合中的每个元素后面插入参数指定的内容,作为其兄弟节点. .after(content[,content]) content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面. content HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面. .after(function) function 返回一个 HTML字符串 DOM 元素 元素数组 对象,用来插入到集合中每个匹配元素的后面. this指向中

Dojo操作dom元素的样式

1.使用dom-style的set方法,可以直接设置dom元素的样式属性,这和使用dom元素的style属性效果一样. 2.使用dom-class的replace方法可以替换某个dom元素的样式,add方法可以为dom元素增加样式,remove方法可以移除dom元素的样式 require(["dojo/dom", "dojo/window", 'dojo/dom-style', 'dojo/topic', "dojo/dom-class", &q

js操作dom元素属性和方法

1.用于处理xml文档的dom元素属性 属性名                      描述 childNodes返回当前元素所有子元素的数组 firstChild返回当前元素的第一个下级子元素 lastChild返回当前元素的最后一个子元素 nextSbling返回紧跟在当前元素后面的元素 nodeValue指定表示元素值的读写属性 parentNode返回元素的父节点 previousSibling返回紧邻当前元素之前的的元素 2.用于遍历XML文档的dom元素方法 方法名