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

时间：2017-04-23 01:20:10 阅读：261 评论：0 收藏：0 [点我收藏+]

标签：isp sed open http medium fast bsp block json

样式表属性操作.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>