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);
　　})