jQuery的属性与样式之样式操作.css()

通过JavaScript获取dom元素上的style属性，我们可以动态的给元素赋予样式属性。在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了

.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性

获取：

1. .css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值

2. .css( propertyNames )：传递一组数组，返回一个对象结果

设置：

1.  .css(propertyName, value )：设置CSS

2. .css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理

3. .css( properties )：可以传一个对象，同时设置多个样式   

4. css({
               'font-size'        :"15px",
               "background-color" :"#40E0D0",
               "border"           :"1px solid red"
           })
   

注意事项：

1. 浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px

2. .css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理

3. 当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，例如 .css("width",50}) 与 .css("width","50px"})一样

jQuery的属性与样式之切换样式.toggleClass()

在做某些效果的时候，可能会针对同一节点的某一个样式不断的切换，也就是addClass与removeClass的互斥切换，比如隔行换色效果

jQuery提供一个toggleClass方法用于简化这种互斥的逻辑，通过toggleClass方法动态添加删除Class，一次执行相当于addClass，再次执行相当于removeClass

.toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类

1. .toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名

2. .toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除   

   
   

       //第二个参数判断样式类是否应该被添加或删除

       //true，那么这个样式类将被添加;

       //false，那么这个样式类将被移除

       //所有的奇数tr元素，应该都保留class="c"样式

3.     $("#table tr:even").toggleClass("c", true); //这个操作没有变化，因为样式已经是存在的

4. .toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值

5. .toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

注意事项：

1. toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加

2. toggleClass会保留原有的Class名后新增，通过空格隔开

 $(this).next().addClass(className)：在当前元素的下一个元素上增加className样式。

$("div").?(function(index,className) {

            //找到类名中包含了imooc的元素

            if(-1 !== className.indexOf('imooc')){

                //this指向匹配元素集合中的当前元素

                $(this).addClass('imoocClass')

            }

        });

className.indexOf('imooc')是检索字符串"imooc"在字符串className中首次的位置，返回值就是字符串的位置，如果检索完毕后发现字符串并没有出现，那么返回值为-1。这句是判断字符串"imooc"是否在className中，如果不在，则执行代码块中的代码。...

jQuery的属性与样式之增加样式.addClass()

通过动态改变类名（class），可以让其修改元素呈现出不同的效果。在HTML结构中里，多个class以空格分隔，当一个节点（或称为一个标签）含有多个class时，DOM元素响应的className属性获取的不是class名称的数组，而是一个含有空格的字符串，这就使得多class操作变得很麻烦。同样的jQuery开发者也考虑到这种情况，增加了一个.addClass()方法，用于动态增加class类名

.addClass( className )方法

1. .addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名

2. .addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名

注意事项：

.addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上

简单的描述下：在p元素增加一个newClass的样式

<p class="orgClass"> $("p").addClass("newClass")

那么p元素的class实际上是 class="orgClass newClass"样式只会在原本的类上继续增加，通过空格分隔

jQuery的属性与样式之.val()

jQuery中有一个.val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea。，就是选中获取里面表单里已经被选择了的东西

.val()方法

1. .val()无参数，获取匹配的元素集合中第一个元素的当前值。之所以会默认选中第一个，因为单选框就是默认选择第一个的！！！

2. .val( value )，设置匹配的元素集合中每个元素的值

3. .val( function ) ，一个用来返回设置值的函数

 注意事项：

1. 通过.val()处理select元素， 当没有选择项被选中，它返回null，单选框会默认第一个，多选框没有的

2. .val()方法多用来设置表单的字段的值

3. 如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值

几种方式可以隐藏一个元素：

1. CSS display的值是none。

2. type="hidden"的表单元素。

3. 宽度和高度都显式设置为0。

4. 一个祖先元素是隐藏的，该元素是不会在页面上显示

5. CSS visibility的值是hidden

6. CSS opacity的指是0

jQuery的属性与样式之html()及.text()

读取、修改元素的html结构或者元素的文本内容是常见的DOM操作，jQuery针对这样的处理提供了2个便捷的方法.html()与.text()

.html()方法 

获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法：

1. .html() 不传入值，就是获取集合中第一个匹配元素的HTML内容

2. .html( htmlString )  设置每一个匹配元素的html内容

3. .html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数

注意事项：

.html()方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）

.text()方法

得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，具体有3种用法：

1. .text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代

2. .text( textString ) 用于设置匹配元素内容的文本

3. .text( function(index, text) ) 用来返回设置文本内容的一个函数

注意事项：

.text()结果返回一个字符串，包含所有匹配元素的合并文本

.html与.text的异同:

1. .html与.text的方法操作是一样，只是在具体针对处理对象不同

2. .html处理的是元素内容，.text处理的是文本内容

3. .html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用

4. 如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的

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

Query的属性与样式之.attr()与.removeAttr()

每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。如：在img元素中，src就是元素的特性，用来标记图片的地址。

操作特性的DOM方法主要有3个，getAttribute方法、setAttribute方法和removeAttribute方法，就算如此在实际操作中还是会存在很多问题，这里先不说。而在jQuery中用一个attr()与removeAttr()就可以全部搞定了，包括兼容问题

jQuery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()

attr()有4个表达式

1. attr(传入属性名)：获取属性的值

2. attr(属性名, 属性值)：设置属性的值

3. attr(属性名,函数值)：设置属性的函数值

4. attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

removeAttr()删除方法

.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）

例如：html中常用的id、class、title、align等：

<div id="immooc" title="慕课网"></div>

而Property是这个DOM元素作为对象，其附加的内容，例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法进行取值或赋值等

获取Attribute就需要用attr，获取Property就需要用prop

                   <p>第一类</p>

                    <a>.</a>

                    <a></a>

                    <a></a>

                    <a></a>

                    <a></a>

                    <a></a>

                    <a></a>

                    <a></a>

                    <a></a>

                    <a></a>

                    <a></a>

                    <a name="setColor"></a>

                    <a></a>

                    <a></a>

<script type="text/javascript">

    //不分，选中第一类衣服中第9个a元素，并改变颜色

    //这里用了nth-child 选择的他们所有父元素的第n个子元素

    $("#menu div.tag dd a:nth-child(10)").css('color','#66CD00');

</script>

a:nth-child(10)，指的是其父元素的第10个元素，如果这个元素是a，将其选择中；p:nth-child(10)，指的是其父元素的第10个元素（还是那个a），如果这个元素是p，将其选中；但此处第十个元素是a，所以并不能选中

                   <p>第一类</p>

                    <a>1.衬衫</a>

                    <a>2.T恤</a>

                    <a>3.牛仔裤</a>

                    <a>4.休闲裤</a>

                    <a>5.短裤</a>

                    <a>6.针织衫</a>

                    <a>7.西服</a>

                    <a>8.西裤</a>

                    <a>9.嘻哈裤</a>

                    <a>10.西服套装</a>

                    <a>11.马甲/背心</a>

                    <a name="setColor">12.羽绒服</a>

                    <a>13.棉服</a>

                    <a>14.夹克</a>

<script type="text/javascript">

    //不分，选中第一类衣服中第9个a元素，并改变颜色

    //这里用了nth-child 选择的他们所有父元素的第n个子元素

    $("#menu div.tag dd a:nth-child(10)").css('color','#66CD00');

</script>

a:nth-child(10)，指的是其父元素的第10个元素，如果这个元素是a，将其选择中；p:nth-child(10)，指的是其父元素的第10个元素（还是那个a），如果这个元素是p，将其选中；但此处第十个元素是a，所以并不能选中

                   <p>第一类</p>

                    <a>1.衬衫</a>

                    <a>2.T恤</a>

                    <a>3.牛仔裤</a>

                    <a>4.休闲裤</a>

                    <a>5.短裤</a>

                    <a>6.针织衫</a>

                    <a>7.西服</a>

                    <a>8.西裤</a>

                    <a>9.嘻哈裤</a>

                    <a>10.西服套装</a>

                    <a>11.马甲/背心</a>

                    <a name="setColor">12.羽绒服</a>

                    <a>13.棉服</a>

                    <a>14.夹克</a>

<script type="text/javascript">

    //不分，选中第一类衣服中第9个a元素，并改变颜色

    //这里用了nth-child 选择的他们所有父元素的第n个子元素

    $("#menu div.tag dd a:nth-child(10)").css('color','#66CD00');

</script>

a:nth-child(10)，指的是其父元素的第10个元素，如果这个元素是a，将其选择中；p:nth-child(10)，指的是其父元素的第10个元素（还是那个a），如果这个元素是p，将其选中；但此处第十个元素是a，所以并不能选中

                   <p>第一类</p>

                    <a>1.衬衫</a>

                    <a>2.T恤</a>

                    <a>3.牛仔裤</a>

                    <a>4.休闲裤</a>

                    <a>5.短裤</a>

                    <a>6.针织衫</a>

                    <a>7.西服</a>

                    <a>8.西裤</a>

                    <a>9.嘻哈裤</a>

                    <a>10.西服套装</a>

                    <a>11.马甲/背心</a>

                    <a name="setColor">12.羽绒服</a>

                    <a>13.棉服</a>

                    <a>14.夹克</a>

<script type="text/javascript">

    //不分男女，选中第一类衣服中第9个a元素，并改变颜色

    //这里用了nth-child 选择的他们所有父元素的第n个子元素

    $("#menu div.tag dd a:nth-child(10)").css('color','#66CD00');

</script>

a:nth-child(10)，指的是其父元素的第10个元素，如果这个元素是a，将其选择中；p:nth-child(10)，指的是其父元素的第10个元素（还是那个a），如果这个元素是p，将其选中；但此处第十个元素是a，所以并不能选中

                   <p>第一类</p>

                    <a>1.衬衫</a>

                    <a>2.T恤</a>

                    <a>3.牛仔裤</a>

                    <a>4.休闲裤</a>

                    <a>5.短裤</a>

                    <a>6.针织衫</a>

                    <a>7.西服</a>

                    <a>8.西裤</a>

                    <a>9.嘻哈裤</a>

                    <a>10.西服套装</a>

                    <a>11.马甲/背心</a>

                    <a name="setColor">12.羽绒服</a>

                    <a>13.棉服</a>

                    <a>14.夹克</a>

<script type="text/javascript">

    //不分男女，选中第一类衣服中第9个a元素，并改变颜色

    //这里用了nth-child 选择的他们所有父元素的第n个子元素

    $("#menu div.tag dd a:nth-child(10)").css('color','#66CD00');

</script>

a:nth-child(10)，指的是其父元素的第10个元素，如果这个元素是a，将其选择中；p:nth-child(10)，指的是其父元素的第10个元素（还是那个a），如果这个元素是p，将其选中；但此处第十个元素是a，所以并不能选中

                   <p>第一类</p>

                    <a>1.衬衫</a>

                    <a>2.T恤</a>

                    <a>3.牛仔裤</a>

                    <a>4.休闲裤</a>

                    <a>5.短裤</a>

                    <a>6.针织衫</a>

                    <a>7.西服</a>

                    <a>8.西裤</a>

                    <a>9.嘻哈裤</a>

                    <a>10.西服套装</a>

                    <a>11.马甲/背心</a>

                    <a name="setColor">12.羽绒服</a>

                    <a>13.棉服</a>

                    <a>14.夹克</a>

<script type="text/javascript">

    //不分男女，选中第一类衣服中第9个a元素，并改变颜色

    //这里用了nth-child 选择的他们所有父元素的第n个子元素

    $("#menu div.tag dd a:nth-child(10)").css('color','#66CD00');

</script>

a:nth-child(10)，指的是其父元素的第10个元素，如果这个元素是a，将其选择中；p:nth-child(10)，指的是其父元素的第10个元素（还是那个a），如果这个元素是p，将其选中；但此处第十个元素是a，所以并不能选中

                   <p>第一类</p>

                    <a>1.衬衫</a>

                    <a>2.T恤</a>

                    <a>3.牛仔裤</a>

                    <a>4.休闲裤</a>

                    <a>5.短裤</a>

                    <a>6.针织衫</a>

                    <a>7.西服</a>

                    <a>8.西裤</a>

                    <a>9.嘻哈裤</a>

                    <a>10.西服套装</a>

                    <a>11.马甲/背心</a>

                    <a name="setColor">12.羽绒服</a>

                    <a>13.棉服</a>

                    <a>14.夹克</a>

<script type="text/javascript">

    //不分男女，选中第一类衣服中第9个a元素，并改变颜色

    //这里用了nth-child 选择的他们所有父元素的第n个子元素

    $("#menu div.tag dd a:nth-child(10)").css('color','#66CD00');

</script>

a:nth-child(10)，指的是其父元素的第10个元素，如果这个元素是a，将其选择中；p:nth-child(10)，指的是其父元素的第10个元素（还是那个a），如果这个元素是p，将其选中；但此处第十个元素是a，所以并不能选中

                   <p>第一类</p>

                    <a>1.衬衫</a>

                    <a>2.T恤</a>

                    <a>3.牛仔裤</a>

                    <a>4.休闲裤</a>

                    <a>5.短裤</a>

                    <a>6.针织衫</a>

                    <a>7.西服</a>

                    <a>8.西裤</a>

                    <a>9.嘻哈裤</a>

                    <a>10.西服套装</a>

                    <a>11.马甲/背心</a>

                    <a name="setColor">12.羽绒服</a>

                    <a>13.棉服</a>

                    <a>14.夹克</a>

<script type="text/javascript">

    //不分男女，选中第一类衣服中第9个a元素，并改变颜色

    //这里用了nth-child 选择的他们所有父元素的第n个子元素

    $("#menu div.tag dd a:nth-child(10)").css('color','#66CD00');

</script>

a:nth-child(10)，指的是其父元素的第10个元素，如果这个元素是a，将其选择中；p:nth-child(10)，指的是其父元素的第10个元素（还是那个a），如果这个元素是p，将其选中；但此处第十个元素是a，所以并不能选中

jQuery选择器之特殊选择器this

相信很多刚接触jQuery的人，很多都会对$(this)和this的区别模糊不清，那么这两者有什么区别呢？

this是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的所有者

下面例子中，imooc是一个对象，拥有name属性与getName方法,在getName中this指向了所属的对象imooc

var imooc = {     name:"慕课网",     getName:function(){         //this,就是imooc对象         return this.name;     } } imooc.getName(); //慕课网

当然在JavaScript中this是动态的，也就是说这个上下文对象都是可以被动态改变的(可以通过call,apply等方法)，具体的大家可以查阅相关资料

同样的在DOM中this就是指向了这个html元素对象，因为this就是DOM元素本身的一个引用

假如给页面一个P元素绑定一个事件:

p.addEventListener('click',function(){     //this === p     //以下两者的修改都是等价的     this.style.color = "red";     p.style.color = "red"; },false);

通过addEventListener绑定的事件回调中，this指向的是当前的dom对象，所以再次修改这样对象的样式，只需要通过this获取到引用即可

 this.style.color = "red"

但是这样的操作其实还是很不方便的，这里面就要涉及一大堆的样式兼容，如果通过jQuery处理就会简单多了，我们只需要把this加工成jQuery对象

换成jQuery的做法：

$('p').click(function(){     //把p元素转化成jQuery的对象     var $this= $(this)      $this.css('color','red') })

通过把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象，我们就可以用jQuery提供的快捷方法直接处理样式了

总体：

this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。 $(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。

<script type="text/javascript">

         //查找所有input所有勾选的元素(单选框,复选框)

         //移除input的checked属性

        $('input:checked').removeAttr('checked')

    </script>

    <script type="text/javascript">

         //查找所有option元素中,有selected属性被选中的选项

         //移除option的selected属性

        $('option:selected').removeAttr('selected')

    </script>

jQuery选择器之表单对象属性筛选选择器

除了表单元素选择器外，表单对象属性筛选选择器也是专门针对表单元素的选择器，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行筛选

表单筛选选择器的描述：

注意事项：

1. 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器

2. 在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素

<script type="text/javascript">

        //匹配所有input元素中的单选按钮,并选中

        $('input:radio').attr('checked','true');

    </script>

  <script type="text/javascript">      

//匹配所有input元素中的复选按钮,并选中

        $('input:checkbox').attr('checked','true'); 

</script>

jQuery选择器之表单元素选择器

无论是提交还是传递数据，表单元素在动态交互页面的作用是非常重要的。jQuery中专门加入了表单选择器，从而能够极其方便地获取到某个类型的表单元素

表单选择器的具体方法描述：

注意事项：

除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=password]')