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)---replaceWith用后面内容替换前面内容

$(content).replaceAll(selector)----replaceAll用前面内容替换后面内容

10.元素的包裹

$(selector).wrap(wrapper)包裹元素本身

例如:$(".red").wrap("<div></div>");即在.red外部包裹一层div

$(selector).wrapInner(wrapper)包裹元素中的内容 

例如 $(".red").wrapInner("<i></i>");即给文本加上斜体

11.each()方法遍历元素

<span style="font-size:18px;"><strong> <script type="text/javascript">
            $("span").each(function (index) { //index从0开始遍历,funtion为回调函数
                if (index == 1) {
                    $(this).attr("class", "red");
                }
            });
        </script></strong></span>

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

<strong><body>
        <h3>使用empty()方法删除元素</h3>
        <span class="green">香蕉</span>
        <span class="green">桃子</span>
        <span class="green">葡萄</span>
        <span class="green">荔枝</span>

        <script type="text/javascript">
            $("span").empty(); //把子元素删掉,在这里只是去掉文本,green的样式还在
            //$("span").remove(); //整个元素删除了
        </script>
    </body></strong>

时间: 2024-10-03 22:49:42

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元素的复习

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

jquery操作DOM 元素(2)

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

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操作