jQuery篇之操作jQuery对象(样式)

目录
    1. 获取/设置 元素内容
    2. 获取/设置 元素属性
    3. 获取/设置 元素样式
    4. 获取/设置 元素位置和大小

获取/设置 元素内容

获取/设置 元素中的文本内容（所有子孙元素的文本内容）
    不能使用在表单元素
    var text=$("#test").text()  所有
    $("#test").text("Hello world!");
    $("#test").text(function(i,oldText){  
        return "Old text: " + oldText + " New text: Hello world!
    (index: " + i + ")";
    });

获取/设置 元素中的内容（包括标签和文本内容）
    不能使用在表单元素
    $("#test").html()  第一个
    $("#test").html("<b>Hello world!</b>")
    $("#test").html(function(i,oldhtml){
        return '<p>增加新的文本内容</p>' + oldhtml
    })

获取/设置 表单输入值（用来读取表单元素的"value"值）
    只能使用在表单元素
    如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值
    $("#test").val()  第一个
    $("#test3").val("Dolly Duck");

    
兼容:
    火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器

2. 获取/设置 元素属性

类似DOM对象的getAttribute方法、setAttribute方法和removeAttribute方法

    获取
    $("#test").attr("href")

    设置
    $("#test").attr("href","http://www.w3school.com.cn/jquery");
    $("#w3s").attr({
      "href" : "http://www.w3school.com.cn/jquery",
      "title" : "W3School jQuery Tutorial"
    });
    $("#w3s").attr("href", function(i,origValue){
      return origValue + "/jquery";
    });

    移除属性
    $("p").removeAttr("id");

获取/设置 元素样式

是否拥有该类
    $("p:first").hasClass("intro");

// ---------方式一（常用）---------
添加样式类
     $("h1,h2,p").addClass("blue");
     $("#div1").addClass("redStyle blueStyle");
     $("#div1").addClass(function(index, currentClass){
           //找到类名中包含了hello的元素
            if(-1 !== className.indexOf('hello')){
                //this指向匹配元素集合中的当前元素
                $(this).addClass('redStyle blueStyle')
            }
      });

删除样式类
     $("h1,h2,p").removeClass();    // 所有
     $("h1,h2,p").removeClass("blue");
     $("h1,h2,p").removeClass(function(index,className){
            //className = aa bb imoocClass
            //把div的className赋给下一个兄弟元素div上作为它的class
            $(this).next().addClass(className)
            //删除自己本身的blue
            return 'blue'
        });


切换添加删除样式类    如果存在（不存在）就删除（添加）
     $("h1,h2,p").toggleClass("blue");
     $("#table tr:even").toggleClass("c", true);  是否应该添加或删除
     $("h1,h2,p").toggleClass( function(index, class, switch){});
     $("h1,h2,p").toggleClass( function(index, class, switch){},true);


// ---------方式二---------
    获取
    $("p").css("background-color");
    $("p").css("backgroundColor")
    $("p").css(['width','height']);
    设置
    $("p").css({"background-color":"yellow","font-size":"200%"});
    $("p").css("width",function(index,value){
            //value带单位，先分解
            value = value.split('px');
            //返回一个新的值，在原有的值上，增加50px
            return (Number(value[0]) + 50) + value[1];
        })
    $("p").css({
            'font-size'        :"15px",
            "background-color" :"#40E0D0",
            "border"           :"1px solid red"
        })
    浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px

.css 和addClass的区别

1、可维护性：
  .addClass()的本质是通过定义个class类的样式规则，给元素添加一个或多个类。
  css方法是通过JavaScript大量代码进行改变元素的样式

  通过.addClass()我们可以批量的给相同的元素设置统一规则，变动起来比较方便，可以统一修改删除。如果通过.css()方法就需要指定每一个元素是一一的修改，日后维护也要一一的修改，比较麻烦

2、灵活性：
  通过.css()方式可以很容易动态的去改变一个样式的属性，不需要在去繁琐的定义个class类的规则。一般来说在不确定开始布局规则，通过动态生成的HTML代码结构中，都是通过.css()方法处理的

3、样式值：
  .addClass()本质只是针对class的类的增加删除，不能获取到指定样式的属性的值，.css()可以获取到指定的样式值。

4、样式的优先级：
  .css优先级（内联）要高于.addClass（内部、外部）


动态样式时使用.css,样式固定的使用.addClass

获取/设置 元素位置和大小

位置
    x=$("p").position();
    x.left 
    x.top

获取/设置 元素的宽高（不包括内边距、边框或外边距）
    $("#div1").width() 
    $("#div1").height()
获取/设置 元素的宽高（包括内边距，不包括边框或外边距）
    $("#div1").innerWidth()
    $("#div1").innerHeight()
获取/设置 元素的宽度/高度（包括内边距，边框或外边距）
    $("#div1").outerHeight()
    $("#div1").outerWidth()

    $(document).width()、$(document).height()、$(window).width()、$(window).height()

最近定位的祖先元素
    $("p").offsetParent()

左移
    $("div").scrollLeft(100);  
上移
    $("div").scrollTop(100);
当前偏移
    x=$("p").offset();