前端与移动开发----jQuery----JQuery动画，JQ操作元素属性，JQ操作元素样式(大量案例)

最新推荐文章于 2024-08-30 10:25:23 发布
最新推荐文章于 2024-08-30 10:25:23 发布
阅读量489 收藏 1
点赞数
分类专栏： 前端与移动开发学习笔记 JQuery 文章标签： javascript jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40440961/article/details/110576541
版权

JQuery

1. JQuery动画

1.1 显示-隐藏动画

  • show()

    语法: 
$(对象).show([speed, [easing], [fn]])
//参数介绍:
1. show() 方法中的3个参数可以不用设置, 显示元素没有动画效果
2. 第一个参数表示动画速度,可以设置 'slow' , 'normal', 'fast' 或者表示动画的时长毫秒
3. 第二个参数表示动画切换效果, 默认 'swing[摇动摆动,由快到慢]' 或者 设置 'linear'
4. 第三个参数表示动画完成后执行的函数(回调函数)

//代码演示1,未设置任何参数,控制元素显示,没有动画效果
var btn = $('input');
var div = $('div');
btn.click(function(){
	div.show();
})

//代码演示2,设置第一个参数,元素按照动画显示
var btn = $('input');
var div = $('div');
btn.click(function(){
	div.show('fast');
})

//代码演示3,设置两个参数,元素实现切换效果
btn.click(function(){
	div.show('normal','swing');
})

//代码4演示,设置第三个参数,动画执行完后回调函数
btn.click(function(){
	div.show('normal','swing', function(){
		alert('动画完成');
	});
})

  • hide()

    语法:
$(对象).hide([speed, [easing], [fn]);
//参数介绍:
1. 参数可以省略,隐藏元素没有动画效果
2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间
3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear'
4. 第三个参数表示回调函数,动画完成后执行
//代码演示同上

  • toggle()

    语法:
$(对象).toggle([speed], [easing], [fn])
//参数介绍
1. 参数可以省略, 如果元素显示则切换为隐藏的,如果元素隐藏的则切换为显示的
2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间
3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear'
4. 第三个参数表示回调函数,动画完成后执行
//代码演示同上

  • 案例-好友列表案例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <style>
         .box {
             width: 300px;
             border: 1px solid #000;
             margin: 150px auto;
         }

         h4 {
             margin: 0;
             height: 55px;
             line-height: 55px;
             background-color: skyblue;
             text-align: center;
             border-bottom: 1px solid #000;
             cursor: pointer;
         }

         .list1:last-child h4 {
             border-bottom: 0 none;
         }

         .content {
             display: none;
             height: 300px;
         }
     </style>
</head>
<body>
     <div class="box">
         <div class="list1">
             <h4>我的好友</h4>
             <div class="content">
                 朋友列表
             </div>
         </div>
         <div class="list1">
             <h4>土豪</h4>
             <div class="content">
                 兰博基尼、布加迪、法拉利、劳斯莱斯
             </div>
         </div>
         <div class="list1">
             <h4>程序员</h4>
             <div class="content">
                 Tom、Jerry、nll、ll
             </div>
         </div>
         <div class="list1">
             <h4>美工</h4>
             <div class="content">
                 罗丝、朱迪、冰冰
             </div>
         </div>
     </div>
     <script src="./jQuery.min.js"></script>
     <script>
         $('h4').click(function(){           	                     $(this).siblings().show('fast').parent().siblings().find('.content').hide('fast');
         });
     </script>
</body>
</html>

    ​

1.2 滑动动画

  • slideDown()

    介绍: slideDown()  显示元素(通过改变元素高度)
语法:
// $(对象).slideDown([speed],[easing],[fn]);

参数介绍:
1. 参数可以省略
2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间
3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear'
4. 第三个参数表示回调函数,动画完成后执行

//代码演示1:
$('input').click(function(){
	$('div').slideDown();
})

//代码演示2
$('input').click(function(){
	$('div').slideDown('fast');
})

//代码演示3
$('input').click(function(){
	$('div').slideDown('fast', 'linear');
})

//代码演示4
$('input').click(function(){
	$('div').slideDown('fast', 'linear', function(){
		alert('动画完成')
	});
})

  • slideUp()

    介绍: 通过高度变化（向上减小）来动态地隐藏所有匹配的元素
语法:
// $(对象).slideUp([speed,[easing],[fn]])

参数介绍:
1. 参数可以省略
2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间
3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear'
4. 第三个参数表示回调函数,动画完成后执行

//代码演示:
$('input').click(function(){
	$('div').slideUp('fast', 'linear', function(){
		console.log('动画完成')
	});
})

  • slideToggle()

    语法:
// $(对象).slideToggle([speed],[easing],[fn])

参数介绍:
1. 参数可以省略
2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间
3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear'
4. 第三个参数表示回调函数,动画完成后执行

//代码演示:
$('input').click(function(){
	$('div').slideToggle('fast', 'linear', function(){
		 console.log('动画完成')
	});
})

  • 小米案例

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            color: #888;
            font-family: '微软雅黑';
            font-size: 14px;
        }

        .nav {
            width: 980px;
            height: 60px;
            margin: 0 auto;
            line-height: 60px;
            position: relative;
        }

        .nav li {
            float: left;
        }

        .nav li a {
            padding: 0 15px;
            font-size: 20px;
        }

        .nav ul {
            overflow: hidden;
        }

        .content {
            width: 100%;
            height: 200px;
            left: 0;
            position: absolute;
            display: none;
            border-top: 1px solid #ccc;
            box-shadow: 0 0 5px 2px #ccc;
        }

        .content .item {
            width: 100%;
            height: 100%;
            padding-left: 100px;
            padding-top: 60px;
            box-sizing: border-box;
            display: none;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li><a href="javascript:;">小米手机</a></li>
            <li><a href="javascript:;">Redmi红米</a></li>
            <li><a href="javascript:;">电视</a></li>
            <li><a href="javascript:;">笔记本</a></li>
            <li><a href="javascript:;">家电</a></li>
            <li><a href="javascript:;">路由器</a></li>
            <li><a href="javascript:;">智能硬件</a></li>
            <li><a href="javascript:;">服务</a></li>
            <li><a href="javascript:;">社区</a></li>
        </ul>

        <div class="content">
            <div class="item">小米手机</div>
            <div class="item">Redmi红米</div>
            <div class="item">电视</div>
            <div class="item">笔记本</div>
            <div class="item">家电</div>
            <div class="item">路由器</div>
            <div class="item">智能硬件</div>
            <div class="item">服务</div>
            <div class="item">社区</div>
        </div>
    </div>
    <script src="./jQuery.min.js"></script>
    <script>
        //1. 鼠标进入大盒子显示内容区域,鼠标离开隐藏内容区域
        $('.nav').hover(function () {
            $('.content').slideDown();
            //2.给每一项设置鼠标进入事件
            $(this).find('a').hover(function () {
                $(this).css('color', 'orange').parent().siblings().children().css('color', '#888');
                //获取索引
                var index = $(this).parent().index();
                //显示内容区域
                $('.item').eq(index).show().siblings().hide();
            }, function () {
                $(this).css('color', '#888');
            })
        }, function () {
            $('.content').slideUp();
        });

    </script>
</body>

</html>
1.3 淡入淡出动画

  • fadeIn()

    介绍: 通过透明度的变化来实现所有匹配元素的淡入效果[显示]
语法: 
// $(对象).fadeIn([speed],[easing],[fn])

参数介绍:
1. 参数可以不用设置
2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间
3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear'
4. 第三个参数表示回调函数,动画完成后执行

//代码演示1:
$('input').click(function(){
	$('div').fadeIn();
})

//代码演示2
$('input').click(function(){
	$('div').fadeIn('fast');
})

//代码演示3
$('input').click(function(){
	 $('div').fadeIn('fast', 'linear');
})

//代码演示4
$('input').click(function(){
	$('div').fadeIn('fast', 'linear', function() {
	 	alert('动画完成');
    });
})

  • fadeOut()

    介绍: 通过透明度的变化来实现所有匹配元素的淡出效果[隐藏]
语法:
// $(对象).fadeOut([speed],[easing],[fn])

参数介绍:
1. 参数可以不用设置
2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间
3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear'
4. 第三个参数表示回调函数,动画完成后执行

  • fadeToggle()

    介绍: 通过透明度的变化来开关所有匹配元素的淡入和淡出效果
语法:
//  $(对象).fadeToggle([speed,[easing],[fn]])

参数介绍:
1. 参数可以不用设置
2. 第一个参数表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间
3. 第二个参数表示动切换效果, 默认值 'swing' 或者 设置 'linear'
4. 第三个参数表示回调函数,动画完成后执行

  • fadeTo()

    介绍:  可以自定义透明度动画效果
语法:
//  $(对象).fadeTo([[speed],opacity,[easing],[fn]])

参数介绍:
1. speed 表示动画速度,可以设置 'fast', 'normal', 'slow' 或者自定义毫秒时间  [必须设置]
2. opacity 表示透明度, 0 - 1 之间必须设置
3. easing 表示动切换效果, 默认值 'swing' 或者 设置 'linear'
4. fn 表示回调函数,动画完成后执行

//代码演示:
$('input').click(function(){
    $('div').fadeTo(1000, 0.1);
})

  • 高亮显示案例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		html,body {
			width: 100%;
			height: 100%;
			background-color: #000;
		}

		.box {
			width: 630px;
			height: 400px;
			border: 1px solid #ccc;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-content: space-around;
		}

		.item {
			width: 200px;
			height: 186px;
		}
	</style>
</head>
<body>
    <div class="box">
        <div class="item"><img src="imgs/01.jpg" alt=""></div>
        <div class="item"><img src="imgs/02.jpg" alt=""></div>
        <div class="item"><img src="imgs/03.jpg" alt=""></div>
        <div class="item"><img src="imgs/04.jpg" alt=""></div>
        <div class="item"><img src="imgs/05.jpg" alt=""></div>
        <div class="item"><img src="imgs/06.jpg" alt=""></div>
    </div>
    <script src="./jQuery.min.js"></script>
    <script>
        
         $('.item').hover(function(){
             $(this).stop().fadeTo('fast', 1).siblings().stop().fadeTo('fast', 0.3);
         }, function(){
             $('.item').stop().fadeTo('fast', 1);
         });
    </script>
</body>
</html>

    $('.item').hover(function(){
	$(this).fadeTo('fast', 1, 'linear').siblings().fadeTo('fast', 0.5, 'linear');
},function(){
	$('.item').fadeTo('fast', 1);
})
// 问题: 当鼠标无限次晃动,动画会一直排队执行

// 解决: 通过stop()停止动画排队,必须写到动画前
$('.item').hover(function(){
	$(this).stop().fadeTo('fast', 1, 'linear').siblings().stop().fadeTo('fast', 0.5, 'linear');
},function(){
	$('.item').stop().fadeTo('fast', 1);
})
1.5自定义动画

  • animate()

    介绍: 用于创建自定义动画的函数。
语法:
// $(对象).animate(params,[speed],[easing],[fn]);

参数介绍:
1.params 一组包含作为动画属性和终值的样式属性和及其值的集合   [必须设置]
2.speed  三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
3.easing 默认jQuery提供"linear" 和 "swing".
4.fn:在动画完成时执行的函数

//代码演示1
$('input').click(function(){
	$('div').animate({
		'left': '500px'
	})
})

//代码演示2
$('input').click(function(){
	$('div').animate({
		'left': '500px'
	}, 'fast')
})

//代码演示3
$('input').click(function(){
	$('div').animate({
		'left': '500px'
	}, 'fast', 'linear')
})

//代码演示4
$('input').click(function(){
	$('div').animate({
		'left': '500px'
	}, 'fast', 'linear', function(){
		alert('动画完成')
	})
})

//注意: 
1. animate自定义动画,无法实现颜色动画效果,如果需要改变颜色,需要单独下载插件实现
2. 无法直接实现css中转化效果,如果需要实现,则可以通过添加类名得的方式实现
3. 单独的属性,可以使用驼峰命名法 ('marginLeft' 替代 'margin-left')

https://www.runoob.com/jquery/eff-animate.html

  • 案例-手风琴案例

    1. 搭建HTML结构

      <div id="box">
        <ul>
            <li class="current"><img src="images/1.jpg" /></li>
            <li class="small"><img src="images/2.jpg" /></li>
            <li class="small"><img src="images/3.jpg" /></li>
            <li class="small"><img src="images/4.jpg" /></li>
            <li class="small"><img src="images/5.jpg" /></li>
        </ul>
    </div>

    2. 设置CSS样式

          <style>
        ul {
            list-style: none
        }

        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 1150px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }

        div li {
            width: 240px;
            height: 400px;
            float: left;
        }
        div ul {
            width: 1300px;
        }
        #box .current {
            width: 900px;
        }
        #box .small {
            width: 90px;
        }
    </style>

    3. 设置JS代码

      <script src="./jQuery.min.js"></script>
    <script>
        $('li').hover(function(){
            $(this).stop().animate({
                'width': '900px'
            }).siblings().stop().animate({
                'width': '90px'
            })
        })
    </script>
      • 注意: 在所有动画前加 stop()方法停止动画排队

2.JQ操作元素属性

1.1 回顾webAPI中操作标签属性

  • 操作标签内置系统属性

    • getAttribute(属性名)
    • setAttribute(属性名, 值)
    • removeAttribute(属性名)

  • 操作标签自定义属性

    • getAttribute(属性名) setAttribute(属性名, 值) removeAttribute(属性名)

    • DOM.dataset

      DOM.dataset  返回的是一个对象
☞ 获取自定义属性值:   DOM.dataset.属性名
☞ 设置自定义属性值:   DOM.dataset.自定义属性名 = 值;
1.2 JQ操作元素属性

  • 获取标签内置系统属性

    语法:
$(对象).prop('属性名');

//代码演示:
var div = $('div');
var res = div.prop('class');
console.log(res);

  • 设置标签内置系统属性

    语法:
$(对象).prop('属性名', 值);

//代码演示:
var div = $('div');
var res = div.prop('class', 123);

//备注如果设置多个可以通过对象的方式设置,例如:
$('input').prop({
    'id': 'test',
    'name': 'abc'
});

  • 获取标签自定义属性

    语法:
$(对象).attr(自定义属性名);

//代码演示:
var div = $('div');
var res = div.attr('data-myname');

  • 设置标签自定义属性

    语法:
$(对象).attr(自定义属性名, 值);

//代码演示:
var div = $('div');
var res = div.attr('myAge', 18);

  • 备注

    $(对象).attr() 既可以操作标签自定义属性也可以操作标签内置属性

####1.3案例-选择功能

  1. 搭建HTML结构

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 980px;
            margin: 100px auto;
        }

        .title {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: #ccc;
            font-size: 14px;
            font-family: '微软雅黑';
        }

        .title .bar {
            float: left;
        }

        .ckAll {
            margin-left: 20px;
        }

        .price {
            margin-left: 400px;
            margin-right: 100px;
        }

        .totle {
            margin-left: 100px;
            margin-right: 100px;
        }

        .content {
            width: 100%;
            margin: 10px 0;
        }

        .item {
            width: 100%;
            height: 100px;
            border: 1px solid #ccc;
            margin-bottom: 2px;
            box-sizing: border-box;
            position: relative;
        }

        .item .ck {
            position: absolute;
            top: 50%;
            left: 20px;
            transform: translateY(-50%);
        }

        .bot {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: #ccc;
            font-size: 14px;
            font-family: '微软雅黑';
        }

        .bot .ck {
            margin-left: 20px;
        }

        .active {
            background-color: #fff4e8;
        }
    </style>
</head>
<body>
     <div class="box">
         <div class="title">
             <!-- 全选 -->
             <div class="bar ckAll">
                 <input type="checkbox" class='ckbtn'> 全选
             </div>
             <!-- 单价 -->
             <div class="bar price">单价</div>

             <!-- 数量 -->
             <div class="bar num">数量</div>

             <!-- 小计 -->
             <div class="bar totle">小计</div>

             <!-- 操作 -->
             <div class="bar done">操作</div>
         </div>
         <div class="content">
             <div class="item">
                 <div class="ck">
                     <input type="checkbox">
                 </div>
             </div>
             <div class="item">
                 <div class="ck">
                     <input type="checkbox">
                 </div>
             </div>
             <div class="item">
                 <div class="ck">
                     <input type="checkbox">
                 </div>
             </div>
         </div>
         <div class="bot">

         </div>
     </div>

     
</body>
</html>

  2. 实现选择效果

    <script src="./jQuery.min.js"></script>
     <script>
         
        //功能1: 点击全选按钮
        (function(){
            $('.ckbtn').click(function(){
                 //获取当前的状态
                 var flag = $(this).prop('checked');
                 $('.ck input').prop('checked', flag);

                 //点击全选按钮设置样式
                 if($(this).prop('checked')) {
                     $('.item').addClass('active');
                 }else {
                     $('.item').removeClass('active');
                 }
            })
        })();

        //功能2: 点击每一个复选框
        (function(){
            $('.ck input').click(function(){
            //给对应的item设置样式,如果当前是未被选中的,则需要添加样式,否则移除样式
            if($(this).prop('checked')) {
                $(this).parents('.item').addClass('active');
            }else {
                $(this).parents('.item').removeClass('active');
            }
            //定义一个变量,用来记录是否都选中了
            var flag = true;
            //实现全选功能: 如果每一个复选框都被选中,那么全选按钮就被选中, 否则不选中
            var cks = $('.ck input');
            for(var i = 0; i < cks.length; i++) {
               if(cks[i].checked == false) {
                    flag = false;
                    break;
               }
            }
            // 将flag的值赋值给全选按钮
            $('.ckbtn').prop('checked', flag);
        })

        })();

     </script>

4. JQ操作标签中的值

1.1 获取/设置表单控件中的值

  • 获取

    语法:
$(对象).val()

  • 设置

    语法:
$(对象).val(值);
1.2获取/设置普通标签中的值

  • 获取

    语法:
$(对象).text();     // 特点与原生js中的innerText一样
$(对象).html();	  // 特点与原生js中的innerHTML一样

  • 设置

    语法:
$(对象).text(值);   // 特点与原生js中的innerText一样
$(对象).html(值); 	 // 特点与原生js中的innerHTML一样
1.3 案例-小计功能

  1. 设置HTML结构

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>    
</head>
<body>
     <div class="box">
         <div class="title">
             <!-- 全选 -->
             <div class="bar ckAll">
                 <input type="checkbox" class='ckbtn'> 全选
             </div>
             <!-- 单价 -->
             <div class="bar price">单价</div>

             <!-- 数量 -->
             <div class="bar num">数量</div>

             <!-- 小计 -->
             <div class="bar totle">小计</div>

             <!-- 操作 -->
             <div class="bar done">操作</div>
         </div>
         <div class="content">
             <div class="item">
                 <!-- 复选框 -->
                 <div class="ck">
                     <input type="checkbox">
                 </div>
                 <!-- 图片展示 -->
                 <div class="imgShow left">
                     <img src="imgs/hr.jpg" alt="">
                 </div>

                 <!-- 文字内容 -->
                 <div class="text left">
                     <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                     <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                 </div>

                 <!-- 单价 -->
                 <div class="s-price left">
                     &yen; <strong>1299.00</strong>
                 </div>

                 <!-- 数量 -->
                 <div class="num1 left">
                     <a href="javascript:;" class="sub">-</a>
                     <input type="text" value="1">
                     <a href="javascript:;" class="add">+</a>
                 </div>

                 <!-- 总结 -->
                 <div class="t_price left">
                     &yen;<strong>1299.00</strong>
                 </div>

                 <!-- 删除 -->
                 <div class="del left">
                     <a href="javascript:;">移除购物车</a>
                 </div>
             </div>
             <div class="item">
                 <!-- 复选框 -->
                 <div class="ck">
                     <input type="checkbox">
                 </div>
                 <!-- 图片展示 -->
                 <div class="imgShow left">
                     <img src="imgs/hr.jpg" alt="">
                 </div>

                 <!-- 文字内容 -->
                 <div class="text left">
                     <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                     <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                 </div>

                 <!-- 单价 -->
                 <div class="s-price left">
                     &yen;<strong>1299.00</strong>
                 </div>

                 <!-- 数量 -->
                 <div class="num1 left">
                     <a href="javascript:;" class="sub">-</a>
                     <input type="text" value="1">
                     <a href="javascript:;" class="add">+</a>
                 </div>

                 <!-- 总结 -->
                 <div class="t_price left">
                     &yen;<strong>1299.00</strong>
                 </div>

                 <!-- 删除 -->
                 <div class="del left">
                     <a href="javascript:;">移除购物车</a>
                 </div>
             </div>
             <div class="item">
                 <!-- 复选框 -->
                 <div class="ck">
                     <input type="checkbox">
                 </div>
                 <!-- 图片展示 -->
                 <div class="imgShow left">
                     <img src="imgs/hr.jpg" alt="">
                 </div>

                 <!-- 文字内容 -->
                 <div class="text left">
                     <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                     <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                 </div>

                 <!-- 单价 -->
                 <div class="s-price left">
                     &yen;<strong>1299.00</strong>
                 </div>

                 <!-- 数量 -->
                 <div class="num1 left">
                     <a href="javascript:;" class="sub">-</a>
                     <input type="text" value="1">
                     <a href="javascript:;" class="add">+</a>
                 </div>

                 <!-- 总结 -->
                 <div class="t_price left">
                     &yen;<strong>1299.00</strong>
                 </div>

                 <!-- 删除 -->
                 <div class="del left">
                     <a href="javascript:;">移除购物车</a>
                 </div>
             </div>
         </div>
         <div class="bot">

         </div>
     </div>   
</body>
</html>

    ​

  2. 设置CSS样式

    <style type="text/css">
         * {
             margin: 0;
             padding: 0;
             font-family: '微软雅黑';
         }

         .box {
             width: 980px;
             margin: 100px auto;
         }

         .title {
             width: 100%;
             height: 40px;
             line-height: 40px;
             background-color: #ccc;
             font-size: 14px;
             font-family: '微软雅黑';
         }

         .title .bar {
             float: left;
         }

         .ckAll {
             margin-left: 20px;
         }

         .price {
             margin-left: 400px;
             margin-right: 100px;
         }

         .totle {
             margin-left: 100px;
             margin-right: 100px;
         }

         .content {
             width: 100%;
             margin: 10px 0;
         }

         .item {
             width: 100%;
             height: 100px;
             border: 1px solid #ccc;
             margin-bottom: 2px;
             box-sizing: border-box;
             position: relative;
         }

         .item .ck {
             position: absolute;
             top: 50%;
             left: 20px;
             transform: translateY(-50%);
         }

         .bot {
             width: 100%;
             height: 40px;
             line-height: 40px;
             background-color: #ccc;
             font-size: 14px;
             font-family: '微软雅黑';
         }

         .bot .ck {
             margin-left: 20px;
         }

         .active {
             background-color: #fff4e8;
         }

         .left {
             float: left;
         }

         .imgShow {
             border: 1px solid #ccc;
             margin-left: 80px;
             margin-top: 8px;
         }

         .text {
             margin-top: 8px;
             line-height: 40px;
             margin-left: 10px;
             font-size: 14px;

         }

         .s-price {
             line-height: 100px;
             margin-left: 42px;
             font-size: 14px;
             color: orange;
         }

         .num1 {
             width: 100px;
             height: 30px;
             border: 1px solid #ccc;
             margin-top: 30px;
             margin-left: 48px;
         }

         .sub {
             width: 20px;
             height: 30px;
             display: block;
             float: left;
             line-height: 30px;
             text-align: center;
             text-decoration: none;
             border-right: 1px solid #ccc;
             box-sizing: border-box;
         }

         .num1 input {
             border: 0 none;
             outline-style: none;
             width: 60px;
             height: 30px;
             float: left;
             text-align: center;
         }

         .add {
             width: 20px;
             height: 30px;
             display: block;
             float: left;
             line-height: 30px;
             text-align: center;
             text-decoration: none;
             border-left: 1px solid #ccc;
             box-sizing: border-box;
         }

         .t_price {
             line-height: 100px;
             font-size: 14px;
             margin-left: 40px;
             color: red;
         }

         .del {
             line-height: 100px;
             font-size: 14px;
             margin-left: 60px;
         }

         .del a {
             text-decoration: none;
             color: #888;
         }

         .del a:hover {
             color: orange;
         }
     </style>

  3. 实现具体功能

    1. 点击加号/减号修改输入框中的值

      //获取输入框中的值: 当前按钮的兄弟元素
var num_v = $(this).siblings('input').val();
// 将当前值增加1
num_v++;
//将当前值赋值给输入框
$(this).siblings('input').val(num_v);

    2. 点击加号/减号计算小计总价

      补充: 价格保留2位小数  toFixed(2)
例如:  var num = 123;
      num = num.toFixed(2);

      //计算总价: 当前商品数量 * 商品单价
var money = num_v * $(this).parent().siblings('.sprice').find('strong').text();
//将当前总价设置给总价标签
$(this).parent().siblings('.t_price').find('strong').text(money.toFixed(2));

    3. 用户修改输入框中的值计算小计总结

      $('.num1 input').change(function(){
  //获取当前输入框中的值
  var num_v = $(this).val();
  //计算总价: 当前商品数量 * 商品单价
  var money = num_v * $(this).parent().siblings('.sprice').find('strong').text();	 
  //将当前总价设置给总价标签
  $(this).parent().siblings('.t_price').find('strong').text(money.toFixed(2));
})

####1.4案例-商品总数-总价功能

  1. 设置HTML结构

  2. 设置CSS样式

  3. 实现功能

    1. JQ遍历对象,获取对象中的值

      <ul>
  <li>12</li>
  <li>12</li>    
  <li>12</li>    
</ul>
如何获取li标签中的值? 需要遍历li    //注意:隐式迭代只能在事件中使用,默认遍历不能依靠隐式迭代

语法:
$对象.each(function(index, item){ })

参数介绍:
1. index 伪数组中的索引值
2. item 伪数组中的每一个DOM对象

注意:
1. each遍历后item是一个dom对象不是JQ对象

    2. JQ遍历方式二

      //语法:
$.each(数组对象, function(index, item){ })

//参数介绍:
index  数组中索引值
item   数组中的每一个值

    3. 实现总数求和功能

      var num_sum = 0;
//数量求和: 获取页面中的每一个input标签中的值累加
$('.num1 input').each(function(index,item){
	num_sum += parseInt($(item).val());
})
//将总和设置给对应的标签
$('.product_num strong').text(num_sum);

    4. 实现总计求和功能

      var money_sum = 0;
$('.t_price strong').each(function(i, item){
	money_sum += Number($(item).text());
})
//将总价设置给对应的标签
$('.product_money strong').text(money_sum.toFixed(2));

5. JQ删除元素

1.1 删除元素/元素中内容

  • remove()

    语法:
$对象.remove();
// 特点: 从页面中将当前标签删除

  • empty()

    语法:
$对象.empty();
// 特点: 将标签中的所有内容清空,当前标签依然保存

  • html()

    语法:
$对象.html('');
//特点: 将标签中的所有内容清空,当标签标签依然保留

6.JQ创建元素

1.1 创建元素

  • $对象.html(标签)

    语法:
$对象.html('html标签名');
例如:
$('div').html('<h1>我是标题标签</h1>');
特点:
与原生js中 innerHTML的效果一样

  • $(html标签)

    语法:
$('html标签');
返回: JQ标签对象
例如:
var  span = $('<span></span>');
1.2 添加元素

  • 父元素末尾添加元素

    语法:
$父元素.append(元素);
例如:
var p = $('<p>我是创建的p</p>');
$('div').append(p);

  • 父元素开始位置添加元素

    语法;
$父元素.prepend(元素);

例如:
var p = $('<p>我是创建的p</p>');
$('div').prepend(p);

  • 设置为当前元素前一个兄弟元素

    语法:
$对象.before(元素);

例如:
var p = $('<p>我是创建的p</p>');
$('div').before(p)

  • 设置为当前元素后一个兄弟元素

    语法:
$对象.after(元素)

例如:
var p = $('<p>我是创建的p</p>');
$('div').after(p)
1.3 综合案例-弹幕效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .box {
            width: 980px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }

        .bottom_bar {
            width: 100%;
            height: 40px;
            border-top: 1px solid #000;
            position: absolute;
            bottom: 0;
            line-height: 40px;
            font-family: '微软雅黑';
            font-size: 14px;
            color: #222;
            padding-left: 50px;
            box-sizing: border-box;
        }

        .bottom_bar input {
            border: 0 none;
            border: 1px solid orange;
            border-radius: 5px;
            width: 350px;
            height: 30px;
            outline-style: none;
            padding: 0;
            vertical-align: middle;
            padding-left: 20px;
            box-sizing: border-box;
        }

        p {
            position: absolute;
            right: 0;
            transform: translateX(100%);
            word-break: keep-all;
        }
    </style>
</head>
<body>
    	<div class="box">
    	    <div class="screen"></div>
    	    <div class="bottom_bar">
    	        <input type="text" placeholder="开始你的表演">
    	        <a href="javascript:;">发送</a>
    	    </div>
        </div>
        
        <script src="./jQuery.min.js"></script>
        <script>
            

            //随机函数
            function getRandom(min, max) {
                return Math.floor(Math.random()*(max-min+1) + min);
            }


            //点击送按钮
            $('a').click(function(){

                //获取用户输入的内容
                var user_input = $('input').val();

                //动态创建元素
                var p = $('<p></p>');
                    p.text(user_input);
                    p.css({
                        'top' : getRandom(10,300),
                        'color': getRandom(100, 255),
                        'font-size': getRandom(14, 30)
                    })
                    p.stop().animate({
                        'right': '150%'
                    },30000, 'linear', function(){
                        $(this).remove();
                    })

                //将p标签添加到父元素中
                p.appendTo('.screen');
            })
            

            $(document).keydown(function(e){
                if(e.keyCode == 13) {
                    //获取用户输入的内容
                    var user_input = $('input').val();

                    //动态创建元素
                    var p = $('<p></p>');
                        p.text(user_input);
                        p.css({
                            'top' : getRandom(10,300),
                            'color':'rgb('+getRandom(100, 255)+','+ getRandom(50, 255)+','+ getRandom(120, 255)+')',
                            'font-size': getRandom(14, 30)
                        })
                        p.stop().animate({
                            'right': '150%'
                        },30000, 'linear', function(){
                            $(this).remove();
                        })

                    //将p标签添加到父元素中
                    p.appendTo('.screen');
                }
            })
        </script>
</body>
</html>
购物车案例完整代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-family: '微软雅黑';
        }

        .box {
            width: 980px;
            margin: 100px auto;
        }

        .title {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: #ccc;
            font-size: 14px;
            font-family: '微软雅黑';
        }

        .title .bar {
            float: left;
        }

        .ckAll {
            margin-left: 20px;
        }

        .price {
            margin-left: 400px;
            margin-right: 100px;
        }

        .totle {
            margin-left: 100px;
            margin-right: 100px;
        }

        .content {
            width: 100%;
            margin: 10px 0;
        }

        .item {
            width: 100%;
            height: 100px;
            border: 1px solid #ccc;
            margin-bottom: 2px;
            box-sizing: border-box;
            position: relative;
        }

        .item .ck {
            position: absolute;
            top: 50%;
            left: 20px;
            transform: translateY(-50%);
        }

        .bot {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: #ccc;
            font-size: 14px;
            font-family: '微软雅黑';
        }

        .bot .ck {
            margin-left: 20px;
        }

        .active {
            background-color: #fff4e8;
        }

        .left {
            float: left;
        }

        .imgShow {
            border: 1px solid #ccc;
            margin-left: 80px;
            margin-top: 8px;
        }

        .text {
            margin-top: 8px;
            line-height: 40px;
            margin-left: 10px;
            font-size: 14px;

        }

        .s-price {
            line-height: 100px;
            margin-left: 42px;
            font-size: 14px;
            color: orange;
        }

        .num1 {
            width: 100px;
            height: 30px;
            border: 1px solid #ccc;
            margin-top: 30px;
            margin-left: 48px;
        }

        .sub {
            width: 20px;
            height: 30px;
            display: block;
            float: left;
            line-height: 30px;
            text-align: center;
            text-decoration: none;
            border-right: 1px solid #ccc;
            box-sizing: border-box;
        }

        .num1 input {
            border: 0 none;
            outline-style: none;
            width: 60px;
            height: 30px;
            float: left;
            text-align: center;
        }

        .add {
            width: 20px;
            height: 30px;
            display: block;
            float: left;
            line-height: 30px;
            text-align: center;
            text-decoration: none;
            border-left: 1px solid #ccc;
            box-sizing: border-box;
        }

        .t_price {
            line-height: 100px;
            font-size: 14px;
            margin-left: 40px;
            color: red;
        }

        .del {
            line-height: 100px;
            font-size: 14px;
            margin-left: 60px;
        }

        .del a {
            text-decoration: none;
            color: #888;
        }

        .del a:hover {
            color: orange;
        }

        .del_p {
            margin-left: 100px;
            color: #222;
            font-size: 14px;
            font-family: '微软雅黑';
            text-decoration: none;
        }

        .clear_p {
            margin-left: 50px;
            color: #222;
            font-size: 14px;
            font-family: '微软雅黑';
            text-decoration: none;
        }

        .product_num {
            margin-left: 196px;
        }

        .product_num strong {
            color: red;
        }

        .product_money {
            margin-left: 36px;
        }

        .product_money strong {
            color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="title">
            <!-- 全选 -->
            <div class="bar ckAll">
                <input type="checkbox" class='ckbtn'> 全选
            </div>
            <!-- 单价 -->
            <div class="bar price">单价</div>

            <!-- 数量 -->
            <div class="bar num">数量</div>

            <!-- 小计 -->
            <div class="bar totle">小计</div>

            <!-- 操作 -->
            <div class="bar done">操作</div>
        </div>
        <div class="content">
            <div class="item">
                <!-- 复选框 -->
                <div class="ck">
                    <input type="checkbox">
                </div>
                <!-- 图片展示 -->
                <div class="imgShow left">
                    <img src="imgs/hr.jpg" alt="">
                </div>

                <!-- 文字内容 -->
                <div class="text left">
                    <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                    <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                </div>

                <!-- 单价 -->
                <div class="s-price left">
                    &yen; <strong>1299.00</strong>
                </div>

                <!-- 数量 -->
                <div class="num1 left">
                    <a href="javascript:;" class="sub">-</a>
                    <input type="text" value="1">
                    <a href="javascript:;" class="add">+</a>
                </div>

                <!-- 总结 -->
                <div class="t_price left">
                    &yen;<strong>1299.00</strong>
                </div>

                <!-- 删除 -->
                <div class="del left">
                    <a href="javascript:;">移除购物车</a>
                </div>
            </div>
            <div class="item">
                <!-- 复选框 -->
                <div class="ck">
                    <input type="checkbox">
                </div>
                <!-- 图片展示 -->
                <div class="imgShow left">
                    <img src="imgs/hr.jpg" alt="">
                </div>

                <!-- 文字内容 -->
                <div class="text left">
                    <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                    <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                </div>

                <!-- 单价 -->
                <div class="s-price left">
                    &yen;<strong>1299.00</strong>
                </div>

                <!-- 数量 -->
                <div class="num1 left">
                    <a href="javascript:;" class="sub">-</a>
                    <input type="text" value="1">
                    <a href="javascript:;" class="add">+</a>
                </div>

                <!-- 总结 -->
                <div class="t_price left">
                    &yen;<strong>1299.00</strong>
                </div>

                <!-- 删除 -->
                <div class="del left">
                    <a href="javascript:;">移除购物车</a>
                </div>
            </div>
            <div class="item">
                <!-- 复选框 -->
                <div class="ck">
                    <input type="checkbox">
                </div>
                <!-- 图片展示 -->
                <div class="imgShow left">
                    <img src="imgs/hr.jpg" alt="">
                </div>

                <!-- 文字内容 -->
                <div class="text left">
                    <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                    <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                </div>

                <!-- 单价 -->
                <div class="s-price left">
                    &yen;<strong>1299.00</strong>
                </div>

                <!-- 数量 -->
                <div class="num1 left">
                    <a href="javascript:;" class="sub">-</a>
                    <input type="text" value="1">
                    <a href="javascript:;" class="add">+</a>
                </div>

                <!-- 总结 -->
                <div class="t_price left">
                    &yen;<strong>1299.00</strong>
                </div>

                <!-- 删除 -->
                <div class="del left">
                    <a href="javascript:;">移除购物车</a>
                </div>
            </div>
        </div>
        <div class="bot">

            <!-- 删除选中商品 -->
            <a href="javascript:;" class="del_p left">删除选中商品</a>

            <!-- 清空购物车 -->
            <a href="javascript:;" class="clear_p left">清空购物车</a>

            <!-- 商品总数 -->
            <div class="product_num left">
                已购买
                <strong>0</strong>
                件商品
            </div>

            <!-- 商品总价 -->
            <div class="product_money left">
                总价:
                <strong>00.00</strong>
            </div>

        </div>
    </div>
    <script src="./jQuery.min.js"></script>
    <script>
        //全选功能
        (function () {
            $('.ckbtn').click(function () {
                $('.ck input').prop('checked', $(this).prop('checked'));
                if ($(this).prop('checked')) {
                    $('.item').addClass('active');
                } else {
                    $('.item').removeClass('active');
                }
            })
        })();

        //复选框点击功能
        (function () {
            $('.ck input').click(function () {
                var flag = true;
                if ($(this).prop('checked')) {
                    $(this).parents('.item').addClass('active');
                } else {
                    $(this).parents('.item').removeClass('active');
                }
                //循环遍历
                var cks = $('.ck input');
                for (var i = 0; i < cks.length; i++) {
                    if (cks[i].checked != true) {
                        flag = false;
                        break;
                    }
                }
                $('.ckbtn').prop('checked', flag);
            });
        })();

        //数量增加减少功能
        (function () {
            //计算总结
            var money = 0;
            // 增加
            $('.add').click(function () {
                //获取输入框中的值
                var num = Number($(this).siblings('input').val());
                num++;
                //将累加后的值赋值给输入框(赋值给当前按钮对应的输入框)
                $(this).siblings('input').val(num);

                //计算价格
                money = num * $(this).parent().siblings('.s-price').find('strong').text();
                //将价格赋值给总价标签
                $(this).parent().siblings('.t_price').find('strong').text(money.toFixed(2));

                //计算总结
                getMoney();
            });

            //减少
            $('.sub').click(function () {
                //获取输入框中的值
                var num = Number($(this).siblings('input').val());
                if (num <= 0) {
                    return;
                }
                num--;
                $(this).siblings('input').val(num);

                //计算价格
                money = num * $(this).parent().siblings('.s-price').find('strong').text();
                //将价格赋值给总价标签
                $(this).parent().siblings('.t_price').find('strong').text(money.toFixed(2));

                //计算总价
                getMoney();
            })
        })();
        //计算总价和数量
        function getMoney() {
            var money = 0;
            var lis = $('.t_price strong');
            $.each(lis, function (index, item) {
                money += Number($(item).text());
            })
            //将总结设置给总结标签
            $('.product_money strong').text(money.toFixed(2));

            var cont = 0;
            var items = $('.num1  input');
            items.each(function (inex, item) {
                cont += Number($(item).val());
            });

            //将总数设置给标签
            $('.product_num strong').text(cont);
        }
        getMoney();

        //清空购物车功能
        $('.clear_p').click(function () {
            if (confirm('确定清空么?')) {
                $('.content').empty();

                getMoney();
            }
        });

        //移除购物车功能
        $('.del a').click(function () {
            if (confirm('确定删除么?')) {
                $(this).parents('.item').remove();
                getMoney();
            }
        })

        //删除选中的商品
        $('.del_p').click(function () {

            //1. 先获取选中的商品
            var lis = $('.ck input:checked');
            //2. 遍历当前选中元素的父元素item
            $.each(lis, function (index, item) {
                $(item).parents('.item').remove();
            })
            getMoney();
        })

    </script>
</body>

</html>

如有不足，请多指教，
未完待续，持续更新！
大家一起进步！

​

東三城
关注
专栏目录
jQuery动画效果
张子又
01-19 6467
1. 隐藏和显示 show()方法和hide()方法是jQuery中最基本的动画方法。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”。 1.1 hide() 和 show() 我们可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素： &lt;body&gt; &lt;div style="width: 200px; ...
公众号网页flexible与jquery-weui样式冲突
01-08
公众号网页flexible与jquery-weui样式冲突 正在写一个微信公众号内嵌H5,因为可能还要写支付宝的，所以用了jquery-weui,刚开始都用pt做的单位，之后发现横屏时还是以高度为准，所以元素都特别小，所以改用rem,就用了...
jQuery元素属性操作实例(设置、获取及删除元素属性)
11-25
本文实例讲述了jQuery元素属性操作的方法。分享给大家供大家参考，具体如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> [removed][removed] [removed] //<![CDATA[ $(function(){ //设置<p>元素的属性'title' $("inp
jQuery基础——JQ动画
最新发布
m0_54066656的博客
08-30 1481
JQ基础——JQ动画。
jq 动画
哈哈绝的博客
12-03 696
jq 动画
jq动画
weixin_44892520的博客
10-01 239
jq横向轮播 ```javascript <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; ...
jq中的动画
个人笔记
04-07 491
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq中的动画</title> <style type="text/css"> div{ width: 200px; height: 200px; margin-right: 20px; margin-bottom: 30px; float: lef
jquery-3.4.1_jquery_3.4.1.js_jquery-3.4.1_sangat1_jquery3.4.1_jq
09-30
jQuery通过提供一套丰富的API，使得开发者可以快速实现常见的网页操作，如选择元素、添加事件监听器、执行AJAX请求等，而无需编写大量复杂的原生JavaScript代码。 在标签中，"jquery_3.4.1.js"和"jquery-3.4.1"再次...
jqweui图片上传插件jquery-weui.uploader.js
07-21
jqweui图片上传插件jquery-weui.uploader.js 实现 多图上传，预览，删除，初始化控件，图片赋值加载，获取图片数据。压缩包包含jquery-weui.uploader.js，weui以及示例demo
17前端学习之JQuery基础(一):jQ介绍,jQ基本使用,jQ选择器,jQ样式操作,jQ动画效果
浅弋、璃鱼的博客
05-04 1835
文章目录一、Jquery介绍:1. JavaScript 库:2 jQuery的概念3. jQuery的优点二、jQuery 的基本使用:1. jQuery 的下载2. 体验jQuery3. jQuery的入口函数4. jQuery中的顶级对象$5. jQuery 对象和 DOM 对象6. jQuery 对象和 DOM 对象转换三、jQuery选择器:1. 基础选择器2. 层级选择器3. 筛选选择...
jquery-ui.css、jquery-ui.js下载
11-05
《jQuery UI：深入理解与应用》 jQuery UI是基于JavaScript库jQuery的一个扩展，它提供了一系列丰富的用户界面组件，包括但不限于对话框（Dialogs）、日期选择器（Datepickers）、拖放功能（Drag and Drop）、排序...
前端——jQuery操作标签、jQuery事件操作、jQuery动画效果、bootstrap基础使用
kdq18486588014的博客
05-02 1254
文章目录一、jQuery操作标签1. class操作2.样式操作3.位置操作4.文本值操作5.属性操作6.文档处理二、jQuery事件操作1.事件操作2.悬浮事件3.监听事件4.阻止后续事件5.事件冒泡6.事件委托三、js动态效果四、bootstrap基础使用1. bootstrap框架介绍2. bootstrap版本3. bootstrap基本使用4. bootstrap文件组成5. 布局容器6. 栅格系统7.表格样式8. 按钮9. 图标样式10.bootstrap基础使用总结 一、jQuery操作标签
JQ动画函数
ddlovebaby的博客
04-16 458
JQ动画函数 //设置单个样式：css(属性，属性值)；----js通过style属性来设置样式 //添加类名：addClass("类名") //移出类名：removeClass("类名") //判断是否存在这个类名：hasClass("类名") //切换类：toggleClass("类名") //1. attr(标签属性)------用法和css(样式属性)一样 //pr...
jQuery动画
weixin_52629158的博客
05-17 866
三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000):三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
jQuery 样式、属性、元素操作、动画效果、尺寸位置操作
YuLong的博客
07-20 856
文章目录jQuery样式操作操作CSS方法设置样式类方法jQuery属性操作jQuery元素操作 jQuery样式操作 操作CSS方法 1、获取样式属性的值 $(selector).css('样式属性名') 2、设置样式属性的值对象方式：属性名和属性值用冒号隔开， 属性可以不用加引号 $(selector).css({'样式属性' : '值'}) 3、函数传值方式：属性必须加引号，值如果是数字可以不用跟单位和引号 $(selector).css('样式属性','值') 设置样式类方法 作用等同于以前的
dwv-jqui:基于 DWV (DICOM Web Viewer) 和 jQuery UI 的医学图像查看器
08-04
dwv-jqui 使用 (DICOM Web Viewer) 和医学查看器。 欢迎所有编码/实现贡献和评论。 发行版应该准备好进行部署，否则下载代码并使用yarn或npm install安装依赖项。 dwv-jqui 未获得诊断用途认证。 在 GNU GPL-3.0 ...
JQ+ANIMATION
TLROJE787的博客
11-13 286
div:hover { animation:test 1s ease//ease是平滑效果 } @keyframes tests { from { width:100px; } to { width:600px; } } 2.@keyframes的其他使用方法 @keyframes test { 0% { } 50% { } 100% { } } 3.div:hover { animatio...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

東三城

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值