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

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

2024-09-16 15:47:26   216人阅读

样式表属性操作.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. 不立即完成当前动画，只是停止.stop（false，false）
      2. 不清空队列，后续动画执行
      3. 停止完成当前动画，执行下一个动画
  2. .stop（true，true）
      1. 清空动画队列，不执行以后的动画
      2. 立即完成当前的动画
  3. .stop（false，true）
      1. 不清空动画队列，后续动画执行
      2. 立即完成当前动画后，执行下一个动画

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

　　　　　　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="http://www.mamicode.com/jquery-1.11.1.js"></script>
    <script>
        $(function () {
            // 模拟从后台拿到的数据
            var data =http://www.mamicode.com/ [{
                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="http://www.mamicode.com/获取数据" 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>
动态创建表格

 

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


联系
我们