正文

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

明明明明明明明明  2022-02-10  363

关键词：

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

动态创建表格

jquery操作元素属性操作样式操作样式类操作html代码以及其他操作[学完你还不会吗](代码片段)

目录操作元素属性操作样式操作样式类练习:判断用户名是否可用操作HTML代码其他操作操作文本获取或设置元素的高度和宽度操作值操作元素的固有属性查找和筛选元素操作元素属性操作元素的属性即操作元素的自定义属性和固... 查看详情

7.1.7对类样式的操作

...ow=true;　　$(‘#btn‘).click(function()　　　　//1.通过控制类样式属性对盒子显示隐藏　　　　if(isShow)　　　　　　$(‘.box‘).css(‘display‘,‘none‘);　　　　　　isShow=false;　　　　　　$(this).text("显示");　　查看详情

jquerycss类

通过jQuery，可以很容易地对CSS元素进行操作。jQuery操作CSSjQuery拥有若干进行CSS操作的方法。我们将学习下面这些：addClass()-向被选元素添加一个或多个类removeClass()-从被选元素删除一个或多个类toggleClass()-对被选元素进行添加/删... 查看详情

jquery的操作及事件处理(代码片段)

目录jQuery的操作操作元素的属性操作样式操作样式类获取和设置元素的宽度和高度操作HTML代码操作文本操作值操作元素的固有属性data()方法查找和筛选元素jQuery的事件处理jQuery的事件对象jQuery的动画jQuery的操作操作元素的属性... 查看详情

jquerydom操作

jQuery将js中的属性封装成方法类样式addClass("类样式名1"["类样式名2""类样式名2"])__-|toggleClass()切换加样式,移除样式-|toggle()切换隐藏显示 --->判断进行切换一个函数内进行效果判断后进行切换$(this)DOM对象转换为jQuery对象复合事... 查看详情

jquery-获取并设置css类

通过jQuery，可以很容易地对CSS元素进行操作。 jQuery操作CSSjQuery拥有若干进行CSS操作的方法。我们将学习下面这些：addClass()-向被选元素添加一个或多个类removeClass()-从被选元素删除一个或多个类toggleClass()-对被选元素进行添加... 查看详情

16.jquery属性操作(代码片段)

jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()DOM属性操作：对DOM元素的属性进行读取，设置和移除操作... 查看详情

jquery的属性操作(代码片段)

jquery之动画操作篇

1.隐藏/显示（操作的是displagcss属性）hide()show()toggle()(显示和隐藏切换)2.上卷/下拉（设置的位置的heightcss属性）slideDown()slideUp()slideToggel()(上卷和下拉切换)3.淡入/淡出（设置的是opacitycss属性）fadeOut()fadeIn()fadeToggle()(淡入淡出的切... 查看详情

jquery编程

4-1jQuery介绍及常用API导读01-jQuery入门导读02-JavaScript库03-jQuery概述04-jQuery基本使用-入口函数05-jQuery顶级对象$06-DOM对象和jQuery对象07-DOM对象和jQuery对象相互转换08-jQuery常用API导读4-2jQuery选择器及案例09-jQuery基本和层级选择器10-jQuery... 查看详情

04-jquery的属性操作(代码片段)

前端----jquery的属性操作(代码片段)

jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()DOM属性操作：对DOM元素的属性进行读取，设置和移除... 查看详情

快速上手jquery：样式操作效果(代码片段)

一、jQuery样式操作1.1 操作css方法jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式。1.参数只写属性名，则是返回属性值$(this).css(''color'');2. 参数是属性名，属性值，逗号分... 查看详情

类样式的操作(代码片段)

　　*通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面 *这样子的执行的性能是比较差的，而且这种形式当我们修改样多个样式时，也不太方便。 *希望一行代码就可以修改多个样式 *我们... 查看详情

css初级教程操作方法如下

参考技术A1、CSS概述CSS指层叠样式表(CascadingStyleSheets)样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML4.0中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中... 查看详情

正文

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

样式表属性操作.css

类操作

动画

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

清空节点：

复制节点：

jquery操作元素属性操作样式操作样式类操作html代码以及其他操作[学完你还不会吗](代码片段)

7.1.7对类样式的操作

jquerycss类

jquery的操作及事件处理(代码片段)

jquerydom操作

jquery-获取并设置css类

16.jquery属性操作(代码片段)

jquery的属性操作(代码片段)

jquery之动画操作篇

jquery编程

04-jquery的属性操作(代码片段)

04-jquery的属性操作(代码片段)

04-jquery的属性操作(代码片段)

04-jquery的属性操作(代码片段)

前端----jquery的属性操作(代码片段)

快速上手jquery：样式操作效果(代码片段)

类样式的操作(代码片段)

css初级教程操作方法如下

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