jQuery基础（2）
一、jQuery的属性操作
jQuery的属性操作分为四部分：
html标签属性操作：是对html文档中的标签属性进行读取，设置和移除操作。比如attr()、removeAttr()；
DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()；
类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()；
值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()；
1、attr()、removeAttr()
a、attr()
// 获取属性值：attr()的参数为一个字符串时，是获取该属性对应的属性值 var id = $('div').attr('id'); console.log(id); // 打印div的id属性值 // 设置属性值 // 1.设置一个属性，设置div的class为box $('div').attr('class','box'); // 2.设置多个属性，参数为对象，键值对存储 $('div').attr({title:'haha',class:'happy'});
b、removeAttr()
// 删除单个属性 $('#box').removeAttr('name'); $('#box').removeAttr('class'); // 删除多个属性 $('#box').removeAttr('name class');
2、prop()、removeProp()
a、prop()
返回属性的值：$(selector).prop(property)
设置单个属性和值：$(selector).prop(property,value)
设置多个属性和值：$(selector).prop({property:value, property:value,...})
b、removeProp()
removeProp()方法用来删除由prop()方法设置的属性集。
语法：$(selector).removeProp(property);
注意: 不要使用此方法来删除原生的属性（property）。
总结：什么时候用attr()，什么时候用prop()？
只有true和false两种属性值时用prop()，其他则使用attr()。
3、addClass()、removeClass()、toggleClass()
a、addClass()
为匹配的元素添加指定的类名，如下：
$('div').addClass("box"); // 追加一个类名，原有类名不变
为匹配的元素添加多个类名，如下：
$('div').addClass("box box2"); // 追加多个类名，用空格隔开
b、removeClass()
为匹配的元素删除一个或多个指定的类名，如下：
$('div').removeClass('box')； // 删除类名box，也可以删除多个类名，类名用空格隔开
移除全部的类，如下：
$('div').removeClass();
应用：可以通过添加/删除类名，来实现元素的显示/隐藏。
c、toggleClass()
如果指定类名存在（不存在）就删除（添加），如下：
$('div').toggleClass(‘active’);
4、html()、text()、val()；
获取值：
html() // 获取选中标签元素中所有的内容（包括标签） text() // 获取匹配元素中包含的文本内容（不包括标签） val() // 用于表单控件中获取value值，比如input、textarea、select等
设置值：
// 设置该元素的所有内容，会替换掉，标签中原来的内容（标签会被渲染） $('#box').html('<a href="https://www.baidu.com">百度一下</a>'); // 设置该元素所有的文本内容（标签不会被渲染） $('#box').text('<a href="https://www.baidu.com">百度一下</a>'); // 设置表单控件中的value值 $('input').val('设置的值')；
总结：无参数是获取值，有参数是设置值。
二、jQuery的样式操作
1、获取，例如：
$('#box').css('color')； // 取得id为box的元素的color样式属性的值
2、设置，例如：
a、设置一个样式，例如：
$('#box').css('color'，'red')； // 设置id为box的元素的color值为red
b、设置多个样式，例如：
$('#box').css({'color':'red', 'font-size':'16px', 'background':'#ddd'})；
三、jQuery的文档操作
之前js中我们学习了js的DOM操作，也就是所谓的增删改查DOM操作。通过js的DOM的操作，我们能发现，大量的繁琐代码才能实现我们想要的效果。那么jQuery的文档操作的API为我们提供了便利的方法来操作文档。
1、插入操作
a、父元素.append(子元素)、子元素.appendTo(父元素)，例如：
var oLi = document.createElement('li'); oLi.innerHTML = '哈哈哈'; $('ul').append('<li>1233</li>'); // string $('ul').append(oLi); // js对象 $('ul').append($('#app')); // jQuery对象，此jQuery对象从原位置移走 // 将新的子元素添加到父元素，并为这个子元素添加类名active $('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active') ;
总结：上述两种方法都能为父元素在后边添加一个新的子元素，要添加的元素可以是string，element（js对象），jQuery对象，并且如果追加的是jQuery对象，那么这个jQuery对象将从原位置上消失，也就是说，从原位置移动了所选的父元素中。
b、父元素.prepend(子元素)、子元素.prependTo(父元素)
$('ul').prepend('<li>我是第一个</li>');
$('<li>我也是第一个</li>').prependTo('ul');
总结：上述两种方法都能为父元素在前边添加一个新的子元素，要添加的元素可以是string，element（js对象），jQuery对象，并且如果添加的是jQuery对象，那么这个jQuery对象将从原位置上消失，也就是说，从原位置移动了所选的父元素中。
c、元素.after(要插入的兄弟元素)、要插入的兄弟元素.insertAfter(元素)
$('ul').after('<h4>我是一个h4标题</h4>');
$('<h5>我是一个h5标题</h5>').insertAfter('ul');
总结：上述两种方法都能在元素后边插入一个新的兄弟元素，要插入的元素可以是string，element（js对象），jQuery对象，并且如果插入的是jQuery对象，那么这个jQuery对象将从原位置上消失，也就是说，从原位置移动了所选元素的后边。
d、兄弟元素.before(要插入的兄弟元素)、要插入的兄弟元素.insertBefore(兄弟元素)
$('ul').before('<h3>我是一个h3标题</h3>');
$('<h2>我是一个h2标题</h2>').insertBefore('ul');
总结：上述两种方法都能在元素前边插入一个新的兄弟元素，要插入的元素可以是string，element（js对象），jQuery对象，并且如果插入的是jQuery对象，那么这个jQuery对象将从原位置上消失，也就是说，从原位置移动了所选元素的前边。
2、删除操作
a、$(selector).remove(); 例如：
$('ul').remove(); // 删除节点后，事件也会删除
b、$(selector).detach(); 例如：
var $btn = $('button').detach() // 此时按钮能追加到ul中 $('ul').append($btn) // 删除节点后，事件会保留
c、$(selector).empty(); 例如：
// 清空选中元素中的所有后代节点 $('ul').empty() // 清空掉ul中的子元素，保留ul
3、修改操作
a、$(selector).replaceWith(content);
解释：将所有匹配的元素替换成指定的string、js对象、jquery对象。例如：
// 将所有的h5标题替换为a标签 $('h5').replaceWith('<a href="#">hello world</a>') // 将所有h5标题标签替换成id为app的dom元素 $('h5').replaceWith($('#app'));
b、$('<p>哈哈哈</p>')replaceAll('h2');
解释：替换所有，将所有的h2标签替换成p标签。例如：
$('<br/><hr/><button>按钮</button>').replaceAll('h4');
4、克隆操作
$(selector).clone();
解释：克隆匹配的DOM元素，例如：
$('button').click(function(){
// 1.clone()：克隆匹配的DOM元素
// 2.clone(true)：克隆元素以及其所有的事件处理并且选中这些克隆的副本
// (简言之，副本具有与真身一样的事件处理能力)
$(this).clone(true).insertAfter(this);
})
