jQuery动画实现、each迭代器、自定义动画、json简介

最新推荐文章于 2022-11-23 20:57:56 发布

赵大土

最新推荐文章于 2022-11-23 20:57:56 发布

阅读量193

点赞数

文章标签： jQuery json

本文链接：https://blog.csdn.net/weixin_43647393/article/details/100164917

版权

1. 案例_通过jQuery操作页面上的表格信息

1.1 实现表格

通过html与css展示表格
效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
            width: 60%;
            font-size: 30px;
            margin-top: 60px;
        }
        th{
            text-align: center;
            border: 1px solid gray;
        }
        td{
            text-align: center;
            border: 1px solid gray;
        }
        div{
            margin-top: 100px;
            font-size: 30px;
        }
        button{
            font-size: 30px;
        }
    </style>
</head>
<body>
<table align="center">
    <tr>
        <th>编号</th>
        <th>书名</th>
        <th>作者</th>
        <th>价格</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>《三体》</td>
        <td>刘慈欣</td>
        <td>66.6</td>
        <td><a href="javascript:del()">删除</a></td>
    </tr>
</table>
<div align="center">
    编号<input type="text">
    书名<input type="text">
    作者<input type="text">
    价格<input type="text">
    <button>添加</button>
</div>
</body>
</html>

实现添加与删除

    <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        //加载页面
        $(function () {
            //将光标定位到第一个输入框
            var c=$("div input");//获取div下的所有input标签
            c[0].value=2;
            c[1].focus();//将光标定位到第二个标签

            //为button添加单击事件
            $("button").click(function () {
                //获取输入内容
                var v1=c[0].value;
                var v2=c[1].value;
                var v3=c[2].value;
                var v4=c[3].value;
                //如果有一行输入为空，则停止执行
                var check="";
                if(v1===check || v2===check || v3===check || v4===check){
                    alert("请全部输入！");//提示
                    return;
                }
                //创建表格
                var td1=$("<td>"+v1+"</td>");
                var td2=$("<td>"+v2+"</td>");
                var td3=$("<td>"+v3+"</td>");
                var td4=$("<td>"+v4+"</td>");
                var td5=$("<td><a href=\"javascript:void(0)\">删除</a></td>");
                var tr1=$("<tr></tr>");
                tr1.append(td1).append(td2).append(td3).append(td4).append(td5);
                $("table").append(tr1);
                //编号自增一
                c[0].value=parseInt(v1)+1;
                //清空输入框
                for(var i=1;i<c.length;i++){
                    c[i].value="";
                }
                //光标再次定位第二个输入框
                c[1].focus();
            });

            //为a添加单击事件
            $("a").live("click", function () {
                //获取当前事件的父标签
                var p=$(this).parent().parent();
                //获取当前事件的所有兄弟标签
                var c=p.children();
                if(confirm("确认删除"+c[1].innerText)+"?"){
                    p.remove();
                }
            })
        });
    </script>

2. jQuery实现显示/隐藏动画效果

2.1 直接显示

$object.show()
$object.show(过程持续时间)

2.2 直接隐藏

$object.hide()
$object.hide(过程持续时间)

2.3 渐显

$object.fadeIn()
$object.fadeIn(过程持续时间)

2.4 渐隐

$object.fadeOut()
$object.fadeOut(过程持续时间)

2.5 向下渐显

$object.sliedDown()
$object.sliedDown(过程持续时间)

2.6 向上渐隐

$object.sliedUp()
$object.sliedUp(过程持续时间)

2.7 切换显示

如果当前object隐藏，则显示
当前object显示，则隐藏

2.7.1 直接切换

$object.toggle()
$object.toggle(过程持续时间)

2.7.2 渐变切换

$object.fadeToggle()
$object.fadeToggle(过程持续时间)

2.7.3 滑动切换

$object.sliedToggle()
$object.sliedToggle(过程持续时间)

3. each迭代器

3.1 语法

$object.each(function(index,element){ }

3.2 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
            width: 60%;
            font-size: 30px;
            margin-top: 60px;
        }
        th{
            text-align: center;
            border: 1px solid gray;
        }
        td{
            text-align: center;
            border: 1px solid gray;
        }
        div{
            margin-top: 100px;
            font-size: 30px;
        }
        button{
            font-size: 30px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            $("li").each(function (index, element) {
                console.info(index+"-"+element.innerText);
            })
        })
    </script>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
</html>

4. 自定义动画

4.1 语法

$object.animate({动画}, 执行时间)

4.2 实现

自定义动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
            width: 60%;
            font-size: 30px;
            margin-top: 60px;
        }
        th{
            text-align: center;
            border: 1px solid gray;
        }
        td{
            text-align: center;
            border: 1px solid gray;
        }
        div{
            margin-top: 100px;
            font-size: 30px;
        }
        button{
            font-size: 30px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            setInterval(function () {
                //重复执行
                $("div").animate({
                    //设置高度为0-500px的随机数
                    width:Math.floor(Math.random()*500),
                    //设置高度为0-500px的随机数
                    height:Math.floor(Math.random()*500),
                    //设置边框圆角为0-400px的随机数
                    borderRadius:Math.floor(Math.random()*400)
                },500);//动画持续时间为0.5秒
            },500);//切换到下一动画时间0.5秒
        });
    </script>
</head>
<body>
<div style="background-color: aqua;
         width: 50%;height: 50%;
        position: absolute; top: 50%;left: 50%;
        transform: translate(-50%,-50%)
        "></div>
</body>
</html>

5. JSON

5.1 作用

在网页上声明对象和对象数组

5.2 语法

var object={
	att1:"val",
	att2:"val",
	...
	method1:function(){
			}
	...
}
//例如
var person={
	name:"khue",
	age:25,
	study:function(){
			alert("hello json");
			}
}

赵大土

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery动画实现、each迭代器、自定义动画、json简介

1. 案例_通过jQuery操作页面上的表格信息1.1 实现表格2. jQuery实现显示/隐藏动画效果2.1 直接显示2.2 直接隐藏2.3 渐显2.4 渐隐2.5 向下渐显2.6 向上渐隐2.7 切换显示2.7.1 直接切换2.7.2 渐变切换2.7.3 滑动切换3. each迭代器3.1 语法3.2 案例4. 自定义动画4.1 语法4.2 实现5. JSON5.1 作用5.2 语法6. 案...
复制链接

扫一扫