目录
一、属性操作
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>')
文中若有不当之处,欢迎各位朋友批评指正。