jquery操作DOM元素的复习

使用attr()方法控制元素的属性

attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值。

操作元素的内容

使用html()text()方法操作元素的内容,当两个方法的参数为空时,表示获取该元素的内容,而如果方法中包含参数,则表示将参数值设置为元素内容。

var $content = "<b>唉,我又变胖了!</b>";

$("#html").html($content);

$("#text").text($content);

总结一下html和text的区别:

用html来获取文字,他会连同格式、样式一同的复制

用text来获取文字,他只是获取元素标签内的文本格式的内容并不会连带html格式

操作元素的样式

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

我们来谈谈。css()和.addcss()的相同和不同:

相同:

1:都可以用来改变元素的样式

不同:

1:addclass是将样式追加到属性class中,css是将样式追加到行内样式里。

2:从字面意思上来区分,addclass是添加类,css是样式。这也是两者显而易见的不同。

3:写法上的不同:

.addclass(”class1 class2 class3。。。。“);

.css("background","red")//设置单个样式

.css({background:"red",color:"white"})//设置多个样式的时候,使用数组的写法。

移除属性和样式

使用removeAttr(name)removeClass(class)分别可以实现移除元素的属性和样式的功能,前者方法中参数表示移除属性名,后者方法中参数则表示移除的样式名

$("#content").removeClass("blue");

$("#content").removeAttr("class");

使用append()方法向元素内追加内容

append(content)方法的功能是向指定的元素中追加内容,被追加的content参数,可以是字符、HTML元素标记,还可以是一个返回字符串内容的函数。

contentString, Element, jQueryV1.0

要追加到目标中的内容

function(index, html)FunctionV1.4

返回一个HTML字符串,用于追加到每一个匹配元素的里边。接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值。

使用appendTo()方法向被选元素内插入内容

appendTo()方法也可以向指定的元素内插入内容,它的使用格式是:

$(content).appendTo(selector)

参数content表示需要插入的内容,参数selector表示被选的元素,即把content内容插入selector元素内,默认是在尾部。

相当于追加的效果。

使用before()和after()在元素前后插入内容

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

$(selector).before(content)$(selector).after(content)

其中参数content表示插入的内容,该内容可以是元素或HTML字符串。

参数

contentString, Element, jQueryV1.0

插入到每个目标后的内容

functionFunctionV1.4

函数必须返回一个html字符串。

使用clone()方法复制元素

调用clone()方法可以生成一个被选元素的副本,即复制了一个被选元素,包含它的节点、文本和属性,它的调用格式为:

$(selector).clone()

其中参数selector可以是一个元素或HTML内容。

复制的时候,会连同样式和标签一起复制过来。

参数

EventsBooleanV1.0

一个布尔值(true 或者 false)指示事件处理函数是否会被复制。V1.5以上版本默认值是:false

Events[,deepEvents]Boolean,BooleanV1.5

1:一个布尔值(true 或者 false)指示事件处理函数是否会被复制。

2:一个布尔值,指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

替换内容

replaceWith()replaceAll()方法都可以用于替换元素或元素中的内容,但它们调用时,内容和被替换元素所在的位置不同,分别为如下所示:

$(selector).replaceWith(content)$(content).replaceAll(selector)

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

使用wrap()和wrapInner()方法包裹元素和内容

wrap()wrapInner()方法都可以进行元素的包裹,但前者用于包裹元素本身,后者则用于包裹元素中的内容,它们的调用格式分别为:

$(selector).wrap(wrapper)$(selector).wrapInner(wrapper)

参数selector为被包裹的元素,wrapper参数为包裹元素的格式。

参数:

htmlStringV1.2

HTML标记代码字符串,用于动态生成元素并包装目标元素

elemElementV1.2

用于包装目标元素的DOM元素

fnFunctionV1.4

生成包裹结构的一个函数

区别:

1:warp是包裹,就是在最外层用一个容器进行包裹,不会改变元素之前的样式,不会破坏原始文档的语义品质。

2:warpInner是被包裹,找到元素的祖先元素。然后加进去,这个方法会改变元素之前的语义。

使用each()方法遍历元素

使用each()方法可以遍历指定的元素集合,在遍历时,通过回调函数返回遍历元素的序列号,它的调用格式为:

$(selector).each(function(index))

参数function为遍历时的回调函数,index为遍历元素的序列号,它从0开始。

<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><script src="jquery-2.1.4.min.js"></script><script>    $(function(){        var $span = $("span")//创建一个jquery对象,要做什么?(用each方法遍历它,取出他的值)        $span.each(function(index){            if(index==3){                console.info($(this).html())            }        })    })

见解:调用这个方法会有一个回调函数,这个回调函数会提供给你一个值,这个值对应了不同的DOM元素,如果你需要调取某一个元素的值,或者你想取出所有元素的值,需要先创建一个对象,然后通过对象来获取值。

因为是遍历数组,所以每一次都指向一个不同的元素,可以用$(this)对象来获取相应的值

console.info($(this).html())

使用remove()和empty()方法删除元素

remove()方法删除所选元素本身和子元素,该方法可以通过添加过滤参数指定需要删除的某些元素,而empty()方法则只删除所选元素的子元素。

remove是删除整个元素和标签,empty用清空来说更加合理,它会清空所有选择的子元素的内容,但是结构还是保留的。

问题:在设置attr(”attribute“,value) 属性要打引号,要设置的值不用打引号

时间: 2024-10-11 02:31:34

jquery操作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 元素(2)

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

jQuery操作DOM元素

1.attr() 控制元素属性 2. html(),text()控制元素内容,其中text()只是文本内容 3. addClass(),css()操作元素的样式 4.使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能 5.append()追加内容 6.appendTo()反追加 7.before(),after()元素前后插入内容 8.clone() 复制元素 9. $(selector).replaceWith(content)--

10分钟-jQuery操作DOM元素

1.使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 例:调用attr()方法设置并获取<a>元素中 "href"属性的值: <h3>attr()方法设置元素属性</h3> <a href="http://127.0.0.1" id="a1">点我就变</a

JQuery 操作DOM元素

//使用attr()方法控制元素的属性 使用attr("属性名");是获取该属性的值.使用attr("属性名",属性值);是设置属性的值 //html(),text()方法控制元素的文本 /*包含样式*/使用html();时是获取元素的html文本(包括样式:如果文本是斜体的,获取到的也是斜体的),使用html("<b>哈哈哈</b>");时是将元素的html文本属性设置为粗体的哈哈哈 /*不包含样式*/使用text();

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()方法删

原生JS与jQuery操作DOM有什么异同点?

本文和大家分享的主要是原生JS与jQuery操作DOM相关内容,一起来看看吧,希望对大家学习javascript有所帮助. 一.创建元素节点 1.1 原生 JS 创建元素节点 document.createElement("p"); 1.2 jQuery 创建元素节点 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 document.createTextNode("Text Content"); 通常创建文

jQuery操作Dom、jQuery事件机制、jQuery补充部分

jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要修改的属性,就会进行修改,如果没有,直接添加 例:$("a").attr("href","http://www.baidu.com"); 修改多个属性值: //attr(obj) $(“img”).attr({ “title”: ”文件名称”, “s

JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)

一.jQuery操作DOM - 查询 html操作 - html(): 读取或修改节点的HTML内容,类似于JavaScript中的innerHTML属性 文本操作 - text(): 读取或修改节点的文本内容,类似于JavaScript中的textContent属性 值操作 - val(): 读取或修改节点的value属性值,类似于 JavaScript 中的value值 属性操作 - attr(): 读取或者修改节点的属性 - removeAttr(): 删除节点的属性 二.jQuery操作