jQuery基础 (一)—样式篇(慕课网)

迈不过友情╰ 2021-06-24 16:11 361阅读 0赞

### 第1章 初识jQuery ###

##### 1-1课程介绍 #####

**简介：**jquery轻量级的javascript库，核心依然是javascript，不仅兼容css3，还兼容多种浏览器。

![2789632-30d6c01c53ca0455.png][]

兼容性

其宗旨：写的少，做得多。

##### 1-2 环境搭建 #####

进入官方网站获取最新的版本 [http://jquery.com/download/][http_jquery.com_download] ，这里需要注意 jQuery 分 2 个系列版本 1.x 与 2.x，主要的区别在于 2.x 不再兼容 IE6、7、8浏览器，这样做的目的是为了兼容移动端开发。由于减少了一些代码，使得该版本比 jQuery 1.x 更小、更快。  
  如果开发者比较在意老版本 IE 用户，只能使用 jQuery 1.9 及之前的版本了。我们这本课程为了兼容性问题，使用的是 1.9 版本。jQuery 每一个系列版本分为：压缩版(compressed) 与 开发版(development)，我们在开发过程中使用**开发版**（开发版本便于代码修改及调试），项目上线发布使用**压缩版**（因为压缩版本体积更小，效率更快）。  
   jQuery是一个JavaScript脚本库，不需要特别的安装，只需要我们在页面 <head> 标签内中，通过 script 标签引入 jQuery 库即可。

这里用的是百度的jq1.9.1版本的CDN。

##### 1-3 jQueryHelloWorld体验 #####

这里是使用jq的基本方法，注意格式，.html（）这个方法封装了.innerHTML=" "用于插入文本。

##### 1-4 jQuery对象与DOM对象 #####

**注意：**

##### jQuery对象与DOM对象是不一样的 #####

例如：

var $p = $('#imooc');
    $p.html('您好！通过慕课网学习jQuery才是最佳的途径').css('color','red');

通过p的jQuery对象，$p是一个类数组对象。这个对象里面包含了DOM对象的信息，然后封装了很多操作方法，调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。  
例题：

![2789632-04c8038c10158fa2.png][]

jq使用

<!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <script src="http://code.jquery.com/jquery-1.11.3.js"></script>
        
        
        <script type="text/javascript">
            window.onload = function(){
                // 通过原生JS语法获取id为imooc1的元素p
                var p = document.getElementById('imooc1');
                // 将元素p在html中内容改变
                p.innerHTML = 'P1：您好！通过慕课网学习jQuery才是最佳的途径';
                // 将元素p的内容颜色改为红色
                p.style.color = 'red';  
            }
        </script>
        
        
        <script type="text/javascript">
            $(document).ready(function() {
                /**
                 * 通过jQuery语法获取id为imooc2的元素获得一个jQuery对象
                 * 调用该对象的html()方法进行更改内容
                 * 调用该对象的css()方法进行更改颜色样式
                 */   
                var $p = $('#imooc2');
                $p.html('P2：您好！通过慕课网学习jQuery才是最佳的途径').css('color','red');
            });
        </script>
        
    </head>
    
    <body>
        <p id="imooc1"></p>
        <p id="imooc2"></p>
    </body>
    
    </html>

##### 1-5 jQuery对象转化成DOM对象 #####

jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中，我们需要jQuery与DOM能够相互的转换，它们都是可以操作的DOM元素，**jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。**  
转换方式一：

var $div = $('div') //jQuery对象
    var div = $div[0] //转化成DOM对象
    div.style.color = 'red' //操作dom对象的属性

转换方式二：

var $div = $('div') //jQuery对象
    var div = $div.get(0) //通过get方法，转化成DOM对象
    div.style.color = 'red' //操作dom对象的属性

##### 1-6 DOM对象转化成jQuery对象 #####

相比较jQuery转化成DOM，开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法，通过传递不同的参数而产生不同的作用。

> 如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象

转换方式一：

var div = document.getElementsByTagName('div'); //dom对象
    var $div = $(div); //jQuery对象
    var $first = $div.first(); //找到第一个div元素
    $first.css('color', 'red'); //给第一个元素设置颜色

### 第2章 jQuery选择器 ###

##### 2-1 jQuery选择器之id选择器 #####

*用法：*

> $( "\#id" )

*注意：*  
  id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的。  
例题：

![2789632-0f29248707036ad1.png][]

界面显示

代码：

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
        div {
            width: 100px;
            height: 90px;
            float: left;
            padding: 5px;
            margin: 5px;
            background-color: #EEEEEE;
        }
        </style>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    </head>
    
    <body>   
         <div id="aaron">
            <p>id="aaron"</p>
            <p>选中</p>
        </div>
        <div id="imooc">
            <p>id="imooc"</p>
            <p>jQuery选中</p>
        </div>
        <div id="imooc">
            <p>id="imooc"</p>
            <p>jQuery未选中</p>
        </div>
    
        <script type="text/javascript">
           //通过原生方法处理
            var div = document.getElementById('aaron');
            div.style.border = "3px solid blue";
        </script>
    
        <script type="text/javascript">
            //通过jQuery直接传入id
            //id的唯一，只选择到了第一个匹配的id为imooc的div节点
            $("#imooc").css("border", "3px solid red");
        </script>
    
    </body>
    
    </html>

##### 2-2 jQuery选择器之类选择器 #####

*用法：*

> $( ".class" )

类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以**多选**  
例题：

![2789632-027c76a00b41ec0e.png][]

$(".XX")

代码：

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
            div {
                width: 100px;
                height: 90px;
                float: left;
                padding: 5px;
                margin: 5px;
                background-color: #EEEEEE;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>   
         <div class="aaron">
            <p>class="aaron"</p>
            <p>选中</p>
        </div>   
         <div class="aaron">
            <p>class="aaron"</p>
            <p>选中</p>
        </div>
    
        <div class="imooc">
            <p>class="imooc"</p>
            <p>jQuery选中</p>
        </div>
        <div class="imooc">
            <p>class="imooc"</p>
            <p>jQuery选中</p>
        </div>
    
        <script type="text/javascript">
            //通过原生方法处理
            //样式是可以多选的，所以得到的是一个合集
            //需要通过循环给合集中每一个元素修改样式
            var divs = document.getElementsByClassName('aaron');
            for (var i = 0; i < divs.length; i++) {
                divs[i].style.border = "3px solid blue";
            }
        </script>
    
        <script type="text/javascript">
            //通过jQuery直接传入class
            //class选择器可以选择多个元素
            $(".imooc").css("border", "3px solid red");
        </script>
    
    
    </body>
    
    </html>

##### 2-3 jQuery选择器之元素选择器 #####

*用法：*

> $( "element" )

##### 2-4 jQuery选择器之全选择器（\*选择器） #####

在CSS中，经常会在第一行写下这样一段样式

>  *  \{padding: 0; margin: 0;\}

通配符*意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递*选择器来选中文档页面中的元素  
*用法：*

> $( "\*" )

##### 2-5 jQuery选择器之层级选择器 #####

文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点直接就会存在父子，兄弟，祖孙的关系了。  
通过一个列表，对比层级选择器的区别:

![2789632-99ef61e1281b75a8.png][]

##### 2-7 jQuery选择器之基本筛选选择器 #####

![2789632-c743cd6a534e1d89.png][]

基本筛选

例题：

![2789632-e6ee82c8d72d9fcc.png][]

代码：

<!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" href="imooc.css" type="text/css">
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    </head>
    
    <body>
        <h2>基本筛选器</h2>
        <h3>:first/:last/:even/:odd</h3>
        <div class="left">
            <div class="div">
                <p>div:first</p>
                <p>:even</p>
            </div>
            <div class="div">
                <p>:odd</p>
            </div>
            <div class="div">
                <p>:even</p>
            </div>
            <div class="div">
                <p>:odd</p>
            </div>
            <div class="div">
                <p>:even</p>
            </div>
            <div class="div">
                <p>div:last</p>
                <p>:odd</p>
            </div>
        </div>
        <script type="text/javascript">
        //找到第一个div
        $(".div:first").css("color", "#CD00CD");
        </script>
        
        <script type="text/javascript">
        //找到最后一个div
        $(".div:last").css("color", "#CD00CD");
        </script>
        
        <script type="text/javascript">
        //:even 选择所引值为偶数的元素，从 0 开始计数
        $(".div:even").css("border", "3px groove red");
        </script>
        
        <script type="text/javascript">
        //:odd 选择所引值为奇数的元素，从 0 开始计数
        $(".div:odd").css("border", "3px groove blue");
        </script>
        
        
        <h3>:eq/:gt/:lt</h3>
        <div class="left">
            <div class="aaron">
                <p>:lt(3)</p>
            </div>
            <div class="aaron">
                <p>:lt(3)</p>
            </div>
            <div class="aaron">
                <p>:eq(2)</p>
            </div>
            <div class="aaron">
            </div>
            <div class="aaron">
                <p>:gt(3)</p>
            </div>
            <div class="aaron">
                <p>:gt(3)</p>
            </div>
        </div>
        <script type="text/javascript">
        //:eq
        //选择单个
        ?.css("border", "3px groove blue");
        </script>
        
        <script type="text/javascript">
        //:gt 选择匹配集合中所有索引值大于给定index参数的元素
        ?.css("border", "3px groove blue");
        </script>
        
         <script type="text/javascript">
        //:lt 选择匹配集合中所有索引值小于给定index参数的元素
        //与:gt相反
        ?.css("color", "#CD00CD");
        </script>
        
        <h3>:not</h3>
        <div class="left">
            <div>
                <input type="checkbox" name="a" />
                <p>Aaron</p>
            </div>
            <div>
                <input type="checkbox" name="b" />
                <p>慕课</p>
            </div>
            <div>
                <input type="checkbox" name="c" checked="checked" />
                <p>其他</p>
            </div>
        </div>
        <script type="text/javascript">
            //:not 选择所有元素去除不匹配给定的选择器的元素
            //选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色
            ?.css("background-color", "#CD00CD");
        </script>
    </body>
    
    </html>

##### 2-8 jQuery选择器之内容筛选选择器 #####

基本筛选选择器针对的都是元素DOM节点，如果我们要通过内容来过滤，jQuery也提供了一组内容筛选选择器，当然其规则也会体现在它所包含的子元素或者文本内容上。

![2789632-59a2c80147bc69fd.png][]

*注意事项：*  
  contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素  
如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。  
:parent与:empty是相反的，两者所涉及的子元素，包括文本节点  
例题：

![2789632-a5519636770975f4.png][]

代码：

##### 2-9 jQuery选择器之可见性筛选选择器 #####

![2789632-1f851a0e899f8e37.png][]

###### :hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等 ######

##### 2-10 jQuery选择器之属性筛选选择器 #####

![2789632-62d6caad47e7089b.png][]

属性筛选选择器

例题：

![2789632-3275b44e799576ac.png][]

代码：

<!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" href="imooc.css" type="text/css">
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    </head>
    
    <body>
        <h2>属性筛选选择器</h2>
        <h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>
        <div class="left" testattr="true" >
            <div class="div" testattr="true" name='p1'>
                <a>[att=val]</a>
            </div>
            <div class="div" testattr="true" p2>
                <a>[att]</a>
            </div>
            <div class="div" testattr="true" name="-">
                <a>[att|=val]</a>
            </div>
            <div class="div" testattr="true" name="a b">
                <a>[att~=val]</a>
            </div>
        </div>
    
        <script type="text/javascript">
             //查找所有div中，属性name=p1的div元素
             $("div[name = p1]").css("border", "3px groove red"); 
        </script>
    
        <script type="text/javascript">
            //查找所有div中，有属性p2的div元素
            $('div[p2]').css("border", "3px groove blue"); 
        </script>
    
        <script type="text/javascript">
            //查找所有div中，有属性name中的值只包含一个连字符“-”的div元素
            $('div[name|="-"]').css("border", "3px groove #00FF00"); 
        </script>
    
        <script type="text/javascript">
            //查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素
             $('div[name~="a"]').css("border", "3px groove #668B8B"); 
        </script>
    
    
        <h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>
        <div class="left" testattr="true" >
            <div class="div" testattr="true"  name='imooc-aaorn'>
                <a>[att^=val]</a>
            </div>
            <div class="div" testattr="true"  name='aaorn-imooc'>
                <a>[att$=val]</a>
            </div>
            <div class="div" testattr="true"  name="attr-test-selector">
                <a>[att*=val]</a>
            </div>
            <div class="div" name="a b">
                <a>[att!=val]</a>
            </div>
        </div>
    
    
        <script type="text/javascript">
             //查找所有div中，属性name的值是用imooc开头的
             $('div[name^=imooc]').css("border", "3px groove red"); 
        </script>
    
        <script type="text/javascript">
             //查找所有div中，属性name的值是用imooc结尾的
             $('div[name$=imooc]').css("border", "3px groove blue"); 
        </script>
    
        <script type="text/javascript">
            //查找所有div中，有属性name中的值包含一个test字符串的div元素
            $('div[name*="test"]').css("border", "3px groove #00FF00"); 
        </script>
    
        <script type="text/javascript">
            //查找所有div中，有属性testattr中的值没有包含"true"的div
            $('div[testattr!="true"]').css("border", "3px groove #668B8B"); 
        </script>
    
    
    </body>
    
    </html>

个人感觉，类别好多，看的晕乎乎的，自己也记不了这么多，根据需要到这里找好了……

##### 2-11 jQuery选择器之子元素筛选选择器 #####

![2789632-846f1895af861744.png][]

##### 2-12 jQuery选择器之表单元素选择器 #####

![2789632-c064941affe60acb.png][]

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

('\[type=password\]')  
例题：

![2789632-fc851292b1dc20be.png][]

代码：

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" href="imooc.css" type="text/css">
        <style> 
            input{
                display: block;
                margin: 10px;
                padding:10px;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    </head>
    
    <body>
        <h2>子元素筛选选择器</h2>
        <h3>input、text、password、radio、checkbox</h3>
        <h3>submit、image、reset、button、file</h3>
        <div class="left first-div">
            <form>
                <input type="text" value="text类型"/>
                <input type="password" value="password"/>
                <input type="radio"/> 
                <input type="checkbox"/>
                <input type="submit" />
                <input type="image" />
                <input type="reset" />
                <input type="button" value="Button" />
                <input type="file" />
            </form>
        </div>
    
        <script type="text/javascript">
            //查找所有 input, textarea, select 和 button 元素
            //:input 选择器基本上选择所有表单控件
            $(":input").css("border", "1px groove red"); 
        </script>
    
        <script type="text/javascript">
            //匹配所有input元素中类型为text的input元素
            $("input:tesxt").css("background", "#A2CD5A");
        </script>
    
        <script type="text/javascript">
            //匹配所有input元素中类型为password的input元素
            $("input:password").css("background", "yellow");
        </script>
    
        <script type="text/javascript">
            //匹配所有input元素中的单选按钮,并选中
            $("input:radio").attr('checked','true');
        </script>
    
        <script type="text/javascript">
            //匹配所有input元素中的复选按钮,并选中
            $("input:checkbox").attr('checked','true'); 
        </script>
    
        <script type="text/javascript">
            //匹配所有input元素中的提交的按钮,修改背景颜色
            $("input:submit").css("background", "#C6E2FF");
        </script>
    
        <script type="text/javascript">
            //匹配所有input元素中的图像类型的元素,修改背景颜色
            $("input:image").css("background", "#F4A460");
        </script>
    
        <script type="text/javascript">
            //匹配所有input元素中类型为按钮的元素
            $("input:button").css("background", "red");
        </script>
    
        <script type="text/javascript">
            //匹配所有input元素中类型为file的元素
            $("input:file").css("background", "#CD1076");
        </script>
    
    </body>
    
    </html>

这个蛮简单的，运行的结果也蛮好看的……

##### 2-14 jQuery选择器之表单对象属性筛选选择器 #####

![2789632-455c31c44181cb6a.png][]

选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器  
  在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素

##### 2-15 jQuery选择器之特殊选择器this #####

![2789632-989b906f3d9baabd.png][]

基本用法

### 第3章 jQuery的属性与样式 ###

##### 3-1 jQuery的属性与样式之.attr()与.removeAttr() #####

attr()有4个表达式  
  attr(传入属性名)：获取属性的值  
  attr(属性名, 属性值)：设置属性的值  
  attr(属性名,函数值)：设置属性的函数值  
  attr(attributes)：给指定元素设置多个属性值，即：\{属性名一: “属性值一” , 属性名二: “属性值二” , … … \}  
  removeAttr()删除方法

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

![2789632-97513210ba2c9e4b.png][]

<!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
        input {
            display    : block;
            margin     : 10px;
            padding    : 10px;
            background : #bbffaa;
            border     : 1px solid #ccc;
        }
        </style>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    </head>
    
    <body>
        <h2>.attr()与.removeAttr()</h2>
        <h3>.attr</h3>
        <form>
            <input type="text" value="设置value" />
            <input type="text" value="获取value"/>
            <input type="text" value="回调拼接value" />
            <input type="text" value="删除value" />
        </form>
    
        <script type="text/javascript">
            //找到第一个input，通过attr设置属性value的值
            $("input:first").attr('value','.attr( attributeName, value )')
        </script>
    
        <script type="text/javascript">
            //找到第二个input，通过attr获取属性value的值
            $("input:eq(1)").attr('value')
        </script>
    
        <script type="text/javascript">
            //找到第三个input，通过使用一个函数来设置属性
            //可以根据该元素上的其它属性值返回最终所需的属性值
            //例如，我们可以把新的值与现有的值联系在一起：
            $("input:eq(2)").attr('value',function(i, val){
                return '通过function设置' + val
            })
        </script>
    
        <script type="text/javascript">
            //找到第四个input，通过使用removeAttr删除属性
            $("input:eq(3)").removeAttr('value')
        </script>
    
    
    </body>
    
    </html>

##### 3-2 jQuery的属性与样式之html()及.text() #####

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

jQuery中有一个.val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea。

> .val()方法  
> .val()无参数，获取匹配的元素集合中第一个元素的当前值  
> .val( value )，设置匹配的元素集合中每个元素的值

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

*  注意事项：\*  
      通过.val()处理select元素， 当没有选择项被选中，它返回null  
    **.val()方法多用来设置表单的字段的值**  
      如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值

.html(),.text()和.val()的差异总结：  
  .html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。  
  .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。  
  .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

##### 3-4 jQuery的属性与样式之增加样式.addClass() #####

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

简单的描述下：在p元素增加一个newClass的样式  
<p class="orgClass">  
$("p").addClass("newClass")  
那么p元素的class实际上是 class="orgClass newClass"样式只会在原本的类上继续增加，通过空格分隔

##### 3-5 jQuery的属性与样式之删除样式.removeClass() #####

.removeClass( )方法  
.removeClass( \[className \] )：每个匹配元素移除的一个或多个用空格隔开的样式名  
.removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名

##### 3-5 jQuery的属性与样式之切换样式.toggleClass() #####

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

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

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

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

> .toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除  
> .toggleClass( \[switch \] )：一个用来判断样式类添加还是移除的 布尔值  
> .toggleClass( function(index, class, switch) \[, switch \] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

*注意事项：*  
  toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加  
  toggleClass会保留原有的Class名后新增，通过空格隔开  
例题：

![2789632-f1f42b4a3c8aacaf.png][]

代码：

<!DOCTYPE HTML>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>隔行换色</title>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
        <style type="text/css">
        body,
        table,
        td,
        {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
        }
        
        .h {
            background: #f3f3f3;
            color: #000;
        }
        
        .c {
            background: #ebebeb;
            color: #000;
        }
        </style>
    </head>
    
    <body>
        <h4>.toggleClass(className)和.toggleClass(className,switch)</h4>
        <table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
            <tr>
                <td>慕课jQuery入门</td>
                <td>慕课jQuery入门</td>
            </tr>
            <tr>
                <td>慕课jQuery入门</td>
                <td>慕课jQuery入门</td>
            </tr>
            <tr>
                <td>慕课jQuery入门</td>
                <td>慕课jQuery入门</td>
            </tr>
            <tr>
                <td>慕课jQuery入门</td>
                <td>慕课jQuery入门</td>
            </tr>
            <tr>
                <td>慕课jQuery入门</td>
                <td>慕课jQuery入门</td>
            </tr>
        </table>
        </div>
        <script type="text/javascript">
        //给所有的tr元素加一个class="c"的样式
        $("#table tr").toggleClass("c");
        </script>
        <script type="text/javascript">
        //给所有的偶数tr元素切换class="c"的样式
        //所有基数的样式保留，偶数的被删除
        $("#table tr:odd").toggleClass("c");
        </script>
        <script type="text/javascript">
        //第二个参数判断样式类是否应该被添加或删除
        //true，那么这个样式类将被添加;
        //false，那么这个样式类将被移除
        //所有的奇数tr元素，应该都保留class="c"样式
        $("#table tr:even").toggleClass("c", true); //这个操作没有变化，因为样式已经是存在的
        </script>
    </body>
    
    </html>

##### 3-7 jQuery的属性与样式之样式操作.css() #####

*获取：*  
.css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值  
.css( propertyNames )：传递一组数组，返回一个对象结果

*设置：*  
.css(propertyName, value )：设置CSS  
.css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理  
.css( properties )：可以传一个对象，同时设置多个样式

*注意事项：*  
浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px  
.css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理  
当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，例如 .css("width",50\}) 与 .css("width","50px"\})一样  
例题：

![2789632-90cf80096b32d382.png][]

代码：

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="imooc.css" type="text/css">
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    </head>
    <body>
        
        <h3>获取css属性</h3>
        <div class="first">获取颜色</div>
        <p></p>
        <div class="second">获取文字尺寸</div>
        <p></p>
        <div class="third">获取宽高尺寸</div>
        <p></p>
    
        <script type="text/javascript">
            //background-color:blue; => rgb(0, 0, 255)
            //颜色都会转化成统一的rgb标示
            $('p:eq(0)').text( $('.first').? )
            
        </script>
    
        <script type="text/javascript">
            //字体大小都会转化成统px大小 em=>px
            $('p:eq(1)').text( $('.first').? )
        </script>
    
        <script type="text/javascript">
            //获取尺寸，传入CSS属性组成的一个数组
            //{width: "60px", height: "60px"}   
            var value = $('.first').?;
            //因为获取的是一个对象，取到对应的值
            $('p:eq(2)').text( 'widht:' + value.width +  ' height:' +value.height )
        </script>
    
        </br></br></br>
        <h3>设置css属性</h3>
        <div class="fourth">设置颜色设置文字尺寸</div>
        <div class="fifth">设置颜色设置文字尺寸</div>
        <div class="sixth">通过回调设置新的值</div>
        <div class="seventh">同时设置多少个样式</div>
    
        <script type="text/javascript">
            //多种写法设置颜色
            $('.fourth').?
            $('.fifth').?
        </script>
    
        <script type="text/javascript">
            //多种写法设置字体大小
            $('.fourth').?
            $('.fifth').?
        </script>
    
    
        <script type="text/javascript">
            //获取到指定元素的宽度，在回调返回宽度值
            //通过处理这个value，重新设置新的宽度
            $('.sixth').?
        </script>
    
        <script type="text/javascript">
            //合并设置,通过对象传设置多个样式
        $('.seventh').?</script></body></html>

##### 3-8 jQuery的属性与样式之.css()与.addClass()设置样式的区别 #####

可维护性：  
  .addClass()的本质是通过定义个class类的样式规则，给元素添加一个或多个类。css方法是通过JavaScript大量代码进行改变元素的样式  
  通过.addClass()我们可以批量的给相同的元素设置统一规则，变动起来比较方便，可以统一修改删除。如果通过.css()方法就需要指定每一个元素是一一的修改，日后维护也要一一的修改，比较麻烦

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

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

样式的优先级：  
  css的样式是有优先级的，当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候，优先级如下

> 外部样式 < 内部样式 < 内联样式

.addClass()方法是通过增加class名的方式，那么这个样式是在外部文件或者内部样式中先定义好的，等到需要的时候在附加到元素上  
  通过.css()方法处理的是内联样式，直接通过元素的style属性附加到元素上的  
  通过.css方法设置的样式属性优先级要高于.addClass方法

总结：  
  .addClass与.css方法各有利弊，一般是静态的结构，都确定了布局的规则，可以用addClass的方法，增加统一的类规则  
  如果是动态的HTML结构，在不确定规则，或者经常变化的情况下，一般多考虑.css()方式

##### 3-9 jQuery的属性与样式之元素的数据存储 #####

jQuery提供的存储接口

> jQuery.data( element, key, value ) //静态接口,存数据  
> jQuery.data( element, key ) //静态接口,取数据  
> .data( key, value ) //实例接口,存数据  
> .data( key ) //实例接口,存数据

*例题：*

![2789632-905b9c5b10494418.gif][]

代码：

<!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
        .left,
        .right {
            width: 300px;
            height: 120px;
        }
        
        .left div,
        .right div {
            width: 100px;
            height: 90px;
            padding: 5px;
            margin: 5px;
            float: left;
            border: 1px solid #ccc;
        }
        
        .left div {
            background: #bbffaa;
        }
        
        .right div {
            background: yellow;
        }
        </style>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    </head>
    
    <body>
        <h2>jQuery.data()静态方法</h2>
        <div class="left">
            <div class="aaron">
                <p>点击看结果</p>
                <p>jQuery.data</p>
            </div>
            <div><span></span></div>
        </div>
        <h2>.data()实例方法</h2>
        <div class="right">
            <div class="aaron">
                <p>点击看结果</p>
                <p>.data</p>
            </div>
            <div><span></span></div>
        </div>
        <script type="text/javascript">
        $('.left').click(function() {
            var ele = $(this);
            //通过$.data方式设置数据
            $.data(ele, "a", "data test")
            $.data(ele, "b", {
                name : "慕课网"
            })
            //通过$.data方式取出数据
            var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name
            ele.find('span').append(reset)
        })
        </script>
        <script type="text/javascript">
        $('.right').click(function() {
            var ele = $(this);
            //通过.data方式设置数据
            ele.data("a", "data test")
            ele.data("b", {
                name: "慕课网"
            })
            //通过.data方式取出数据
            var reset = ele.data("a") + "</br>" + ele.data("b").name
            ele.find('span').append(reset)
        })
        </script>
    </body>
    
    </html>

![2789632-3b18269684ea9294.png][]

公众号.png

[2789632-30d6c01c53ca0455.png]: /images/20210615/c5a2548fc70f40e39aafa74cba0a1d27.png
[http_jquery.com_download]: http://jquery.com/download/
[2789632-04c8038c10158fa2.png]: /images/20210615/807e84e511ec49278100fba35e0173f3.png
[2789632-0f29248707036ad1.png]: /images/20210615/de94eb351bba4b17ba4b7286e5569fbe.png
[2789632-027c76a00b41ec0e.png]: /images/20210615/2cd8027327d543ff9ced952f16e9067d.png
[2789632-99ef61e1281b75a8.png]: /images/20210615/ddab4f57ad8942319208acff9204c792.png
[2789632-c743cd6a534e1d89.png]: /images/20210615/ced8be99bcf84f2d989de5bb8ff4ec81.png
[2789632-e6ee82c8d72d9fcc.png]: /images/20210615/e6df185700474021a8647f8a1d74f383.png
[2789632-59a2c80147bc69fd.png]: /images/20210615/79bfc694bf5b41dcabe2a9a798dbb042.png
[2789632-a5519636770975f4.png]: /images/20210615/512fa7244ae0456da506345183abac12.png
[2789632-1f851a0e899f8e37.png]: /images/20210615/8295088f0a9c495daca061d31276c8ce.png
[2789632-62d6caad47e7089b.png]: /images/20210615/2241b7c4ff57487bb720100dd9c30d14.png
[2789632-3275b44e799576ac.png]: /images/20210615/90a92dbe4b74464aadf34c61d84539ed.png
[2789632-846f1895af861744.png]: /images/20210615/1c7ef7750e8c4ab9ad192a11fc6babd7.png
[2789632-c064941affe60acb.png]: /images/20210615/cc5b180de74b454baa0730a90812d66f.png
[2789632-fc851292b1dc20be.png]: /images/20210615/3b4c5baf3b294ac798c5a28644e1e26a.png
[2789632-455c31c44181cb6a.png]: /images/20210615/a8cb3ba90c9340a7b5f1849f090012c3.png
[2789632-989b906f3d9baabd.png]: /images/20210615/f66469fb091b49ccadc9c02cb9d6d47a.png
[2789632-97513210ba2c9e4b.png]: /images/20210615/ff1076c129274ac99f00902428d35e99.png
[2789632-f1f42b4a3c8aacaf.png]: /images/20210615/907677116ee64c8da9a1b22efaad0d73.png
[2789632-90cf80096b32d382.png]: /images/20210615/f4d57f432b674fa8bf345f191d84b5fa.png
[2789632-905b9c5b10494418.gif]: /images/20210615/11ca80dea0844001a80b371cbdf5dc5e.png
[2789632-3b18269684ea9294.png]: /images/20210615/4a0b40921dfa4b9e953889e6a4380af4.png