jQuery的常用方法
DOM操作
增加：
一、append(),在被选中元素的结尾（仍然在内部），插入指定内容；
- 可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象。
- 如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的html值。
<body>
<div class="container">hello</div>
<p class="text">world</p>
</body>
<script>
$('div.container').append($('p.text'))
</script>
执行前：
image.png
执行后：
image.png
- .appendTo(target)作用是把指定内容插入到目标元素尾部。
二、prepend()在被选元素的开头插入内容
<div class="container">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<script>
$('div.container').prepend('<h1>hello</h1>')
</script>
执行前：
image.png
执行后：
image.png
三、.before()在被选元素之前插入内容，同级
<div class="container">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<script>
$('div.container').before('<h1>hello</h1>')
</script>
执行后：
image.png
- after()在被选元素之前插入内容，同级
<div class="container">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<script>
$('div.container').after('<h1>hello</h1>')
</script>
执行后：
image.png
删除：
一、.remove()删除被选元素（及其子元素）
<div class="container">
<p >1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<script>
$('div.container').remove()
</script>
运行前：
image.png
运行后:
image.png
remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
<div class="container">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<div class="box">hello</div>
<script>
$('div').remove('.box')
</script>
执行后：
image.png
二、empty()从被选元素中删除子元素
执行后：
image.png
设置：
一、html() - 设置或返回所选元素的内容（包括 HTML 标记）
<div class="container">
</div>
<button id="btn">设置</button>
<script>
$('#btn').on('click',function(){
$('.container').html('<h1>hello</h1>')
})
</script>
运行前：
image.png
运行后
image.png
二、text() - 设置或返回所选元素的文本内容
<div class="container">
</div>
<button id="btn">设置文本</button>
<script>
$('#btn').on('click',function(){
$('.container').text('haha')
})
</script>
运行后：
image.png
三、val() - 设置或返回表单字段的值
<input type="text">
<script>
// $('input').val('name');
</script>
运行前：
image.png
运行后：
image.png
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
属性操作：
一、attr() 方法设置或返回被选元素的属性值。
语法：
返回属性的值：
$(selector).attr(attribute)
设置属性和值：
$(selector).attr(attribute,value)
使用函数设置属性和值：
$(selector).attr(attribute,function(index,currentvalue))
设置多个属性和值：
$(selector).attr({attribute:value, attribute:value,...})
<div class="box">haha</div>
<script>
console.log($('.box').attr('class')) //box
$('.box').attr('id','show');
</script>
执行后：
image.png
二、.removeAttr() 方法从被选元素中移除属性。
<div class="box" id="show">haha</div>
<script>
$('div').removeAttr('id')
</script>
执行后：
image.png
三、prop() 方法设置或返回被选元素的属性和值。对应的，如需移除属性，请使用 removeProp()方法
<input type="checkbox" id="test" abc="111">
<script>
console.log($('#test').attr('style')); //undefined
console.log($('#test').prop('style')); //CSSStyleDeclaration
$('#test').attr('abc','222'); //用attr给abc属性设置值，会改变html结构
$('#test').prop('abc','333'); //用prop不会
console.log($('#test').attr('abc')); //222
console.log($('#test').prop('abc')); //333,如果不用prop设置333,这里获取到的就是undefined
</script>
CSS相关：
一、css()设置或返回样式属性
<div class="box" style="border:1px solid">hello</div>
<script>
$('.box').css('width','300')
$('.box').css({
height:'100px',
backgroundColor:'pink',
color:'#000',
fontSize:'50px'
})
</script>
运行后：
image.png
二、.addClass()向被选元素添加一个或多个类
<style>
.active{
font-size: 50px;
color:green;
}
.size {
width:200px;
height:300px;
margin-left:100px;
}
</style>
</head>
<body>
<div class="box" style="border:1px solid red">hello</div>
<script>
$('.box').addClass('active size')
</script>
</body>
运行后：
image.png
- .removeClass()从被选元素删除一个或多个类
三、hasClass()备选元素是否包含某个类,返回布尔值
<div class="box" style="border:1px solid red">hello</div>
<script>
$('.box').addClass('active size')
console.log($('.box').hasClass('size')); //true
</script>
四、.toggleClass()对被选元素进行添加/删除类的切换操作
<style>
.active{
font-size: 50px;
color:green;
}
.size {
width:200px;
height:300px;
margin-left:100px;
}
</style>
</head>
<body>
<div class="box" style="border:1px solid red">hello</div>
<script>
$('.box').toggleClass('size');
</script>
执行后：
image.png
再执行一次
<script>
$('.box').toggleClass('size');
$('.box').toggleClass('size');
</script>
执行后：
image.png
