一.Dom元素类操作
<style>
.red0 {
color: red;
}
.red1{
color: deeppink;
}
.red2{
color: deepskyblue;
}
</style>
</head>
<body>
<button class='btn red0'>按钮</button>
<button class='btn red1'>按钮</button>
<button class='btn red2'>按钮</button>
</style>
- 添加类
$(’.btn’).addClass(‘red’);
$(’.btn’).addClass(function (index){
return ‘red’+index;
});
- 删除类
$(’.btn’).removeClass(‘btn’);
$(’.btn’).removeClass(function (index){
return ‘red’+index;
})
- 类别切换
true 代表添加
false 代表删除
$(’.btn’).toggleClass(‘btn-list’,false);
1.索引 2.原始类
$(’.btn’).toggleClass(function (index,cs){
return ‘list’+index;
},false);
- hasClass() 检测元素是否具有某个类 true false
console.log($(’.ipt’).hasClass(‘ipt’));
$(’.ipt’).val(123);
二. Html元素值操作
<button class="btn"><span>按钮</span></button>
<input type="text" class="ipt" value="请输入..."/>
- html元素的文本 内容 值 操作 html text val
console.log($(’.btn’).html());
console.log($(’.btn’).text());
console.log($(’.ipt’).val());
- 设置 直接写值 fn
var str = ‘< h3>按钮< /h3>’;
$(’.btn’).html(str);
$(’.btn’).text(str);
$(’.ipt’).val(‘1234’)
//
$(’.btn’).html(function (index){
console.log(index);
return ‘< p>文本</ p>’+index;
});
$(’.btn’).text(function (index){
console.log(index);
return ‘< p>文本</ p>’+index;
});
$(’.ipt’).val(function (index) {
console.log(index);
return ‘value’;
})
- hasClass() 检测元素是否具有某个类 true false
HTML代码/文本/值
html([val|fn])
text([val|fn])
val([val|fn|arr])**
三. 节点操作
- 尺寸
height([val|fn])
width([val|fn])
innerHeight()
innerWidth()
outerHeight([options])
outerWidth([options])
- 位置
offset([coordinates]) 相对视口的偏移
position() 相对父元素的偏移
scrollTop([val])
scrollLeft([val])
- 文档处理
dom元素子父节点
内部插入
append(content|fn)
appendTo(content)
prepend(content|fn)
prependTo(content)
- 外部插入
after(content|fn)
before(content|fn)
insertAfter(content)
insertBefore(content)
- 包裹
wrap(html|ele|fn)
unwrap()
wrapAll(html|ele)
wrapInner(html|ele|fn)
- 替换
replaceWith(content|fn)
replaceAll(selector)
- 复制
clone([Even[,deepEven]]) 参数是true false 一个参数 代表两个 true 事件处理函数被复制 子元素被复制
- 删除
empty() 删除元素的所有的子节点
remove([expr]) dom元素的事件删除
detach([expr]) dom会保留事件
示例:
<button class="btn">按钮</button>
<button class="btn list">按钮</button>
<button class="btn">按钮</button>
- 内部插入
1.追加到内容之后
var str='abc';
后边的参数 可以是字符串 也可以是对象
$( '.btn').append(str);
$(' < span> abc < /span >').appendTo($('.btn'));
var str='< span>123</ span>';
$(str). appendTo ($('.btn')); //**前面不能是字符串**
$('< div></ div>');
2.追加到元素的内容之前 prepend / prependTo
var str='abc';
$('.btn').prepend(str);
$(str).prependTo($('.btn'));
$('<div>123</div>').prependTo($('.btn'));
console.log($(str));
- 外部插入
var str=$('< span>标签</ span>');
$('.btn').after(str);
$('.btn').before(str);
var str=$('< span>标签</ span>');
str.insertAfter($('.btn'));
str.insertBefore($('.btn'));
- 元素包裹
$('.btn').wrap('< div></ div>');
$('.btn').wrap($('< div></ div>'));
$('.btn').wrap(function (index){
return $('< div></ div>');
});
1.移除包裹元素
$('.btn').unwrap();
$('.btn').wrap('<div></div>');
找到的同类元素全部包起来
$('.btn').wrapAll('<div></div>');
2.找到的同类元素全部包起来
$('.btn').wrapAll('<div></div>');
3.把元素的字内容全部包起来
$('.btn').wrapInner('<div></div>');
- 元素替换
$('.btn').replaceWith('<div>123</div>');
$('<div>123</div>').replaceAll($('.btn'));
- 元素克隆
$('body').append($('.btn').clone());
- 清除所有子节点
var button=$('.btn');
button.click(function (){
console.log(1);
});
//button.remove(); //全部删除
button.detach();
//$('.btn').remove('.list');
button[0].click();