一、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()设置或返回样式属性
<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
