jQuery基础（2）

1、jQuery的属性操做

       jQuery的属性操做分为四部分：

　　　　html标签属性操做：是对html文档中的标签属性进行读取，设置和移除操做。好比attr()、removeAttr()；

　　　　DOM属性操做：对DOM元素的属性进行读取，设置和移除操做。好比prop()、removeProp()；

　　　　类样式操做：是指对DOM属性className进行添加，移除操做。好比addClass()、removeClass()、toggleClass()；

　　　　值操做：是对DOM属性value进行读取和设置操做。好比html()、text()、val()；

一、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');

二、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()。

 

三、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’);

四、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('设置的值')；

       总结：无参数是获取值，有参数是设置值。

 

2、jQuery的样式操做

一、获取，例如：

    $('#box').css('color')；  // 取得id为box的元素的color样式属性的值

二、设置，例如：

       a、设置一个样式，例如：

    $('#box').css('color'，'red')；  // 设置id为box的元素的color值为red

       b、设置多个样式，例如：　　

    $('#box').css({'color':'red', 'font-size':'16px', 'background':'#ddd'})；

3、jQuery的文档操做

       以前js中咱们学习了js的DOM操做，也就是所谓的增删改查DOM操做。经过js的DOM的操做，咱们能发现，大量的繁琐代码才能实现咱们想要的效果。那么jQuery的文档操做的API为咱们提供了便利的方法来操做文档。

一、插入操做

       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对象将从原位置上消失，也就是说，从原位置移动了所选元素的前边。

 

二、删除操做

       a、$(selector).remove();   例如： 

    $('ul').remove(); // 删除节点后，事件也会删除

       b、$(selector).detach();   例如：　　

    var $btn = $('button').detach()
    // 此时按钮能追加到ul中
    $('ul').append($btn)  // 删除节点后，事件会保留

       c、$(selector).empty();   例如：　　

    // 清空选中元素中的全部后代节点
    $('ul').empty()  // 清空掉ul中的子元素，保留ul

三、修改操做

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

四、克隆操做

       $(selector).clone();  

       解释：克隆匹配的DOM元素，例如：

　　$('button').click(function(){
　　　　// 1.clone()：克隆匹配的DOM元素
　　　　// 2.clone(true)：克隆元素以及其全部的事件处理而且选中这些克隆的副本
　　　　                  // (简言之，副本具备与真身同样的事件处理能力)
　　　　$(this).clone(true).insertAfter(this);
　　})