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. JSON
- 5.1 作用
- 5.2 语法

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");}
}

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

【jQuery笔记Part2】05-jQuery自定义动画
jQuery自定义动画简介 animate() 使用操作多个属性使用相对值使用预定义的值通过连缀或者顺序来实现列队动画顺序写法连缀写法停止动画延时动画 jQuery笔记目录简介 j ...
【jQuery小实例】---2自定义动画
---本系列文章所用使用js均可在本博客文件中找到本节用jQuery完一个简易的动画效果,一个小驴跑跑的效果.和一个类似qq面板效果.大致也分为三步:添加jquery-1.8.3.js文件.这个是不 ...
jQuery之animate自定义动画
下面是对jQuery自定义动画的整理,希望可以帮助到有需要的小伙伴. jQuery的animate()方法可以用来自定义动画方法语法结构如下: animate(properties,duration ...
jquery动画效果 animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡出
jquery动画效果今天给大家介绍一下jQuery当中的几种动画效果. . animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡 ...
html 放上去动画停止,使用jQuery的animate()+CSS样式实现动画效果及stop()停止动画
01第1节:jQuery动画概述 #JavaScript#在jQuery中,除了可以淡入淡出.滑动效果之外,还可以使用animate()方法创建自定义的动画效果. 对于自定义的动画函数animate( ...
jQuery 淡入淡出、滑动和动画
一.淡入淡出 1.jQuery fadeIn() 方法 jQuery fadeIn() 用于淡入已隐藏的元素. 语法:$(selector).fadeIn(speed,callback); 可选的 s ...
android 自定义loading,Android自定义动画-StarLoadingView
今天来分享第二个自定义loading的动画,起了个名字叫蹦跶的星星 ,还是老规矩先介绍,后上图. 实现效果在最后,GIF有点大,手机流量慎重. 介绍首先声明做这个动画的初衷是为了学习和分享,所以从 ...
PowerPoint演示文稿中设置自定义动画
动态的东西,总是给人活灵活现的感觉.在制作演示文稿时,除了会设置幻灯片的切换方式外,还通常会为幻灯片中的某些内容(如图片.文字等)设置动画效果,使幻灯片欣赏起来不至于太呆板. 1.制作进入动画效果选 ...
animation 自定义动画
animation 自定义动画 animation-name 动画名 animation-duration 动画持续时间 keyframes 关键帧自定义动画播放次数 animation-itera ...
animate.css 签字动画,使用animate.css完成动画
animate.css aniamte.css是一个很方便的库,内置了许多常用的动画和jquery搭配使用比较方便 $.fn.extend({ animateCss: function (anima ...

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