jQuery中的DOM操作

最新推荐文章于 2024-05-16 04:04:41 发布

可乐喽

最新推荐文章于 2024-05-16 04:04:41 发布

阅读量1.9k

点赞数 3

分类专栏：前端文章标签：前端 javascript html jquery html5

本文链接：https://blog.csdn.net/m0_52660785/article/details/126043994

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一、属性操作

1.prop()

prop()方法用于添加或删除元素的属性值。但是removeProp()方法只可以删除某一个自定义的属性，也就是说它不能删除固有属性，比如说class，checked等属性。

方法	功能
prop(name,value)	添加属性
prop(name)	获取属性
removeProp(name)	删除属性

示例：

 // 将div的class属性设置为box
 $('div').prop('class', 'box')
 // 获取div的class属性值
 console.log($('div').prop('class'))
 // 删除div的class属性
 $('div').removeProp('class')
 // 再次获取div的class属性值，仍然可以获得
 console.log($('div').prop('class'))
 // 给div添加classname属性，并给其赋值为white
 $('div').prop('classname', 'white')
 // 输出div的classname属性值
 console.log($('div').prop('classname'))
 // 删除div的classname属性
 $('div').removeProp('classname')
 // 再次输出div的classname属性值，输出undefined，已删除
 console.log($('div').prop('classname'))

2.attr()

attr()方法与prop()方法功能类似，但是用removeAttr()方法可以删除设置的固有属性。

方法	作用
attr(name,value)	添加属性
attr(name)	获取属性
removeAttr(name)	删除属性

示例：

 // 将div的class属性设置为box
 $('div').attr('class', 'box')
 // 获取div的class属性值
 console.log($('div').attr('class'))
 // 删除div的class属性
 $('div').removeAttr('class')
 // 再次获取div的class属性值，输出undefined，已删除
 console.log($('div').attr('class'))

3.data()

使用data()方法也可以给元素自定义属性和查询元素的属性值。

 // 给div添加自定义属性index
 $('div').data('index','200')
 // 查询div的index属性
 console.log($('div').data('index'))
 // 给div的添加固有属性class
 $('div').data('class','white')
 // 查询div的class属性
 console.log($('div').data('class'))

二、样式操作

1.行内样式操作

在浏览网页时，我们经常碰到通过点击鼠标等事件可以使网页的显示样式改变。通过jQuery对元素的行内样式进行操作就可以实现这个效果了。

 // 修改多个样式
 $('div').css({
     width: '100px',
     height: '100px',
     background: 'red',
 })
 // 修改一个样式
 $('div').css('background-color','blue')

2.类选择器操作

方法	功能
addClass(class)	添加类选择器
removeClass([class])	删除类选择器
hasClass(class)	判断类选择器是否存在，存在返回true，不存在则返回false
toggleClass(class)	类选择器如果存在就删除，不存在就添加

示例：

 // 给第二个div元素添加类选择器d1
 $('div').eq(1).addClass('d1')
 // 查询第二个div元素的class属性 输出d1
 console.log($('div').eq(1).attr('class'))
 // 删除第二个div元素的类选择器
 $('div').eq(1).removeClass(['d1'])
 // 查询第二个div元素是否存在值为d1的类选择器（存在返回true，不存在返回false），返回false。
 console.log($('div').eq(1).hasClass('d1'))
 // 如果第二个div元素存在值为d1的类选择器就删除，不存在就添加
 $('div').eq(1).toggleClass('d1')
 // 再次查询，返回true
 console.log($('div').eq(1).hasClass('d1'))
 // 此时第二个div元素已经存在值为d1的类选择器，那么就会将其删除
 $('div').eq(1).toggleClass('d1')
 // 再次查询，返回false
 console.log($('div').eq(1).hasClass('d1'))

三、内容操作

1.html()

html()方法可以匹配和设置html元素的内容。

 // 获取匹配元素的html内容
 $("div").html();
 // 设置匹配元素的html内容
 $("div").html('内容')

2.text()

text()方法可以匹配和设置html元素中的文本的内容。

 // 获取匹配元素的文本内容
 $("div").text();
 // 设置匹配元素的文本内容
 $("div").text('内容');

3.val()

val()方法可以匹配和设置表单元素的值。

 // 获取匹配的表单元素的值
 $(":input").val();
 // 设置匹配的表单元素的值
 $(":input").val('值');

四、节点操作

1.插入节点

内部插入

方法	功能
append(content)	向元素内部追加内容
appendTo(content)	把元素追加到另一个指定的元素中
prepend(content)	向元素内部前置内容
prependTo(content)	把元素前置到另一个指定的元素中

示例：

 // 向元素内部追加内容。
 $('div').append('<p>内部后面1</p>')
 // 把元素追加到另一个指定的元素中
 $('<p>内部后面2</p>').appendTo($('div'))
 // 向元素内部前置内容
 $('div').prepend('<p>内部前面1</p>')
 // 把元素前置到另一个指定的元素中
 $('<p>内部前面2</p>').prependTo($('div'))

外部插入

方法	功能
after(content)	向元素内部追加内容
insertAfter(content)	把元素插入到另一个指定的元素后面
before(content)	在元素之前插入内容
insertBefore(content)	把元素插入到另一个指定的元素前面

示例：

 // 在元素之后插入内容
 $('div').after('<p>外部后面1</p>')
 // 把元素插入到另一个指定的元素后面
 $('<p>外部后面2</p>').insertAfter($('div'))
 // 在元素之前插入内容
 $('div').before('<p>外部前面1</p>')
 // 把元素插入到另一个指定的元素前面
 $('<p>外部前面2</p>').insertBefore($('div'))

2.删除节点

方法	功能
empty()	删除元素中所有的子节点
remove()	从DOM中删除所匹配的元素
detach()	从DOM中删除所匹配的元素,所有绑定的事件、附加的数据等都会保留下来

示例：

 // 删除元素中所有子节点
 $('button:first').click(function () {
     $('div').empty()
 })
 
 // 删除节点对象 不保留事件和附加数据
 $('button:eq(1)').click(function () {
     div1 = $('div').remove()
 })
 
 // 删除节点对象 保留事件和附加数据
 $('button:eq(2)').click(function () {
     div1 = $('div').detach()
 })
 
 // 找回节点
 $('button:last').click(function () {
     div1.prependTo('body')
 })

3.替换节点

方法	功能
replaceWith(content)	将所有匹配的元素替换成指定的HTML或DOM元素
replaceAll(selector)	用匹配的元素替换掉所有 selector匹配到的元素

示例：

 //两种方法的功能基本相同，首先使用的起作用
 // replaceWith(content) 
 $('p').replaceWith('<h1>标题1</h1>')
 // replaceAll(selector)
 $('<h2>标题2</h2>').replaceAll('p')
 // 可以只替换标签 也可以添加内容并替换标签
 $('p').replaceWith(function(index,content){
     return '<h1>' + content + 123456 + '</h1>'
 })

4.复制节点

clone([bool])方法的功能是复制节点。如果无参数或者参数为false则只会克隆匹配的DOM元素并且选中这些克隆的副本；如果参数为true，则会在复制元素的同时将与其有关方法一起复制。

 // 复制节点
 $('div').click(function(){
     alert('hello world2')
 })
 // 不带事件复制 相当于只复制了形
 $('div').clone().appendTo('body')
 // 带事件复制 相当于一比一复制
 $('div').clone(true).appendTo('body')

5.包裹节点

方法	功能
wrap(html)	把所有匹配的元素用指定的html元素的结构化标记包裹起来
unwrap()	移除元素的父元素，能快速取消 .wrap()方法的效果
wrapall(html)	将所有匹配的元素用单个元素包裹起来
wrapInner(html)	将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

示例：

 // 不带点击事件了 将p标签用div包裹起来
 $('p').wrap('<div></div>')
 // 移除所有p标签的父元素、
 $('p').unwrap()
 // 将所有的p标签拿出来 然后整合在一起拿一个div包裹起来
 $('p').wrapAll('<div></div>')
 // 把p标签的内容用div包裹起来
 $('p').wrapInner('<div></div>')