jQuery - 02. 样式表属性操作/类操作、动画、显示隐藏、滑入、淡入、停止动画、节点操作、添加对象、清空节点

样式表属性操作.css

　　$("div").css({'width':100,'height':100,'background':'red'});

　　$("div").css("background","pink");

类操作

　　.addClass添加类　　$("div").addClass("class");

　　.removeClass删除类 $("div).removeClass("class");

　　hasClass判断是否有类 $("div).hasClass("class");

　　.toggleClass 切换类 $("div").toggleClass("class"); 有class类将删除没有将添加class类

动画

　显示／隐藏：

　　.show/.hide/.toogle() 括号可以啥都不写；是通过display：block／none。来实现隐藏和显示

　　.show/.hide/.toogle(毫秒值）固定时间；通过控制宽高透明度。dispaly控制／各属性只在变换的时候才存在，显示完毕后，宽高和opacity属性清楚

　　.show/.hide/.toogle(fast/normer/slow)： slow:(慢600ms）／normer：正常400毫秒／fast：快：200毫秒

　　.show/.hide.toogle(fast/normer/slow,function(){函数}); 回掉函数。显示完毕后执行回调函数

　　无参数／毫秒数／字符串／回调函数

　滑入／滑出：　淡入／淡出　　　　自定义

　　.slideDown() 显示　　fadeIn：显示　　.animate({json串},时间，回调函数)

　　slideUp(); 隐藏　　 fadeOut：隐藏　　animate不支持背景色

　　.toogle();　　　　　　fadeToggle：切换

　停止动画:

　　.stop(false,fasle) 停止执行当前正在执行的动画，执行下一个动画

　　.stop（true，false）

　　　　　　　　清空队列，后续动画不执行

1. 1. 不立即完成当前动画，只是停止.stop（false，false）
  2. 不清空队列，后续动画执行
  3. 停止完成当前动画，执行下一个动画
.stop（true，true）
.stop（false，true）

　　　　第一个参数判断是否清空队列。可以立即结束动画。

　　　　　　true 清空　　　　false 不清空

　　　　第二个参数让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等

1. 　　true 立即完成
2. 　　false 不立即完成

节点操作：

　　创建jQuery对象

　　　　$name = $("<li></li>"); 创建一个li标签

　　　　$("标签名“).html("内容")

　　添加对象

　　　　$("目标位置“).append("要添加的元素");　　在目标最后的位置添加

　　　　newNode.appendTo($('添加到哪') ;

　　　　prepend() 在盒子最前面添加　　newNode.prependTo($('要添加到哪'));

　　　　$("").after(newNode): 兄弟之后。成倍添加

　　　　$("").before(newNode); 在兄弟之前

清空节点：

　　　　$("node").html("空字符") ;

　　　　$("node").empty()

　　删除指定元素. $("node").remove();删除自身

复制节点：

　　　　var newNode = $(要复制的元素).clone;

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        table {

            border-collapse: collapse;

            border-spacing: 0;

            border: 1px solid #c0c0c0;

        }

        th,

        td {

            border: 1px solid #d0d0d0;

            color: #404060;

            padding: 10px;

        }

        th {

            background-color: #09c;

            font: bold 16px "微软雅黑";

            color: #fff;

        }

        td {

            font: 14px "微软雅黑";

        }

        tbody tr {

            background-color: #f0f0f0;

        }

        tbody tr:hover {

            cursor: pointer;

            background-color: #fafafa;

        }

    </style>

    <script src="jquery-1.11.1.js"></script>

    <script>

        $(function () {

            // 模拟从后台拿到的数据

            var data = [{

                name: "传智播客",

                url: "http://www.itcast.cn",

                type: "IT最强培训机构"

            }, {

                name: "黑马程序员",

                url: "http://www.itheima.com",

                type: "大学生IT培训机构"

            }, {

                name: "传智前端学院",

                url: "http://web.itcast.cn",

                type: "前端的黄埔军校"

            }];

            //需求:点击按钮，然后生成tr里面生成三个td.数组元素个数个tr。然后放入tbody中

            //步骤：

            //1.绑定事件

            //2.利用for循环,把数组中的所有数据组合成一个字符串。

            //3.把生成的字符串设置为html内容添加进tbody中。

            //1.绑定事件

            $("input").click(function () {

                //写入到click事件中，每次点击以后把str清空

                var str = "";

                //2.利用for循环,把数组中的所有数据组合成一个字符串。

                for(var i=0;i<data.length;i++){

                    //如何生成3组？？？

//                    str += "<tr><td>1</td><td>2</td><td>3</td></tr>";

                    //data[i] = 数组中的每一个json

                    //data[i].name = 数组中的每一个json的name属性值

                    str += "<tr><td>"+data[i].name+"</td><td>"+data[i].url+"</td><td>"+data[i].type+"</td></tr>";

                }

                //3.把生成的字符串设置为html内容添加进tbody中。

                $("#j_tbData").html(str);

            })

        })

    </script>

</head>

<body>

<input type="button" value="获取数据" id="j_btnGetData"/>

<table>

    <thead>

    <tr>

        <th>标题</th>

        <th>地址</th>

        <th>说明</th>

    </tr>

    </thead>

    <tbody id="j_tbData">

        <!--<tr>-->

            <!--<td>1</td>-->

            <!--<td>2</td>-->

            <!--<td>3</td>-->

        <!--</tr>-->

    </tbody>

</table>

</body>

</html>

动态创建表格