目录
创建节点
$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象
返回值:该标记的jQuery对象
var $div=$("<div class="one">添加节点</div>");
//创建没有加入节点则还不能显示
添加节点
在元素内插入(插入子元素)
append()
向每个匹配的元素内追加内容
appendTo()
将所有匹配的元素追加到指定的元素中，该方法与append()使用颠倒
prepend()
向每个匹配的元素内部追加前置内容
prependTo()
将所有匹配的元素前置到指定的元素中。
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
</div>
<script>
$(function(){
//创建节点
var $inner=$('<div class="inner">hello</div>');
//将$inner节点插入到.outer后面
$('.outer').append($inner);
//和上面的等价
$inner.appendTo($('.outer'));
//将$inner节点插入到.outer元素内的最前面(作为第一个子元素)
$inner.prependTo($('.outer'));
//和上面的等价
$('.outer').prepend($inner);
});
</script>插入兄弟元素
after()
向每个匹配的元素之后追加内容
insertAfter()
将所有匹配的元素追加到指定的元素后，该方法与append()使用颠倒
before()
向每个匹配的元素的最前面追加内容
insertBefore()
将所有匹配的元素插入到指定元素的最前面。
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
</div>
<script>
$(function(){
//创建节点
var $inner=$('<div class="inner">hello</div>');
//将$inner节点插入到.outer后面
$('.outer').after($inner);
//和上面的等价
$inner.insertAfter($('.outer'));
//将$inner节点插入到.outer的最前面(作为上个兄弟元素)
$inner.before($('.outer'));
//和上面的等价
$('.outer').insertBefore($inner);
});
</script>替换节点
replaceWith()
将所有匹配的元素替换成指定的HTML或者DOM元素。
replaceAll()
用法与replaceWidth颠倒，作用相同
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
</div>
<script>
$(function(){
//创建span标签
var $span=$('<span>我是一个span</span>');
//用span替换.outer里的第一个元素
$('.outer :first').replaceWith($span);
$span.replaceAll($('.outer:first'));
});
</script>删除节点
remove()
作用是从DOM中删除所有匹配的元素
返回值
返回删除元素的jQuery对象,其中中不包含事件
detach()
作用和remove相同，但返回值的包含原来的绑定事件
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
</div>
<script>
$(function(){
//删除 .outer的第一个子元素
//$result 中没有该元素绑定的事件
var $result=$('.outer :first-child').remove();
//$result中包含删除元素之前绑定的事件
var $result=$('.outer :first-child').detach();
//给inner绑定事件
$('.inner').click(function(){
//this -->inner DOM
// alert(this.innerHTML);
alert($(this).html());
});
});
</script>清空节点
empty()
清空元素中的所有后代节点,该元素还在.而删除节点则将该元素与后代一起删除
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
</div>
<script>
$(function(){
$('.outer').empty();
});
</script>包裹节点
该方法对于需要在文档中插入额外的结构标记非常有用，而且它不会破坏原始文档的语义。
wrap()
将所有的匹配的元素进行单独的包裹
innerwrap()
该方法将每一个匹配的元素的子内容用其他结构的标记包裹起来。
wrapAll()
将所有匹配的元素用一个元素来包裹。
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
</div>
<script>
$(function(){
//创建包裹元素
var $wrap=$('<div class="wrap"></div>');
//用$wrap元素包裹每一个.inner里的子内容
$('.inner').wrapInner($wrap);
});
</script>遍历节点
children()
该方法用于匹配元素的直接子元素集合。
find('span')
在后代中找符合条件的
closest()
它用来取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身，如果不匹配则查找父元素，则逐级向上查找直到匹配选择器的元素。如果什么都没找到则返回空jQuery对象
parent()
返回直接父元素。
parents()
返回所有祖先元素
next()
用于取得匹配元素后面紧邻的同辈元素
nextAll()
用于取得匹配元素后面所有的同辈元素
prev()
用于取得匹配元素前面紧邻的同辈元素
prevAll()
用于取得匹配元素前面所有的同辈元素
siblings()
用于取得匹配元素前后所有的同辈元素
filter('span')
//返回div中有'span'标签的
$('div').filter('span')属性操作
attr(key)
获取该属性对应的属性值
attr(key,val)
设置属性的值
var $p=$('p'); //获取<p>节点
var p_txt=$p.attr('title'); //获取<p>元素节点属性title
$('p').attr('title','my is a <p>') //设置单个属性值prop(key,value)
一个参数
获取该属性对应的属性值
两个参数
设置属性的值
一般对Boolean属性进行操作
removeAttr(attrName)
删除属性
$('p').removeAttr('title') //删除<p>元素的属性title removeProp(propName)
一般用于删除自定义的属性
案例:全选和反选
$(function(){
var $checkbox=$('input[type=checkbox]');
$('button:first').click(function(){
$checkbox.prop('checked',true);
});
$('button:eq(1)').click(function(){
$checkbox.prop('checked',function(index,attr){
return !attr;
});
});
});**：prop与attr不能混搭使用，即用attr设置属性用prop去获取则获取不到。
文本操作
val()
无参
获取第一元素的value
有参
设置所有val()
html()
无参
获取所有元素的InnerHtml
有参
设置所有innerHTML
text()
无参
获取第一元素的innerText
有参
设置所有innerText
样式操作
addClass(className)
给选择元素追加class,追加后有过个样式则合并。相同时后者会覆盖前者
removeClass(className)
给指定元素删除class
hasClass(className)
判断是否含有某个样式，有则返回true，否则false
toggleClass(className)
重复切换class类名样式
<head>
<script>
$(function() {
$('.one').css({
width: '100px',
height: '100px',
border: '1px solid red',
"font-size": '12px'
});
$('button:first').click(function() {
$('.one').addClass('red');
});
$('button:nth-child(2)').click(function() {
$('.one').removeClass('red');
});
$('button:last').click(function() {
if ($('.one').hasClass('red')) {
$('.one').removeClass('red');
} else {
$('.one').addClass('red');
}
//和上面的判断语句等价
// $('.one').toggleClass('red');
});
})
</script>
</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类 </button>
<div class="one"></div>
</body>