jQuery3动画+创建元素
一、jQuery的动画
1、jQuery自带的动画
1》变化的是width height opacity display
<!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>jQuery动画+创建jQuery变量</title>
<style>
div{
width: 100px;
height:200px;
background-color: pink;
}
</style>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<div></div>
<script src="jQuery1-12-4.js"></script>
<script>
//第一个动画，变化的是width height opacity display
$(function () {
$("button:eq(0)").click(function(){
// $("div").show();
$("div").show(1000);
});
$("button:eq(1)").click(function () {
// $("div").hide();
$("div").hide(100);
});
});
</script>
</body>
</html>
2》变化的是height
//第二个动画，变化的是opacity display
$(function () {
$("button:eq(0)").click(function () {
$("div").slideUp("slow");//卷起 fast normal slow
});
$("button:eq(1)").click(function () {
$("div").slideDown(1000);//放下
});
$("button:eq(2)").click(function () {
$("div").slideToggle(1000);
});
});
3》淡入淡出
//第三个动画：淡入淡出
$(function () {
$("button:eq(0)").click(function () {
$("div").fadeOut(1000);
});
$("button:eq(1)").click(function () {
$("div").fadeIn(1000);
});
$("button:eq(2)").click(function () {
$("div").fadeToggle(1000);
});
$("button:eq(3)").click(function () {
$("div").fadeTo(1000,0.3);//时间，定值，回调函数
});
})
2、自定义动画
//自定义动画,该方法是异步的，因为底层使用了定时器
//animation(json,时间,回调函数);
$(function () {
$("button:eq(0)").click(function () {
$("div").animate({
"width": 0
}, 100, function () {
alert("运行完成");
});
}); });
二、创建对象
1、回顾原生js中是如何创建对象
//原生js中创建对象
//第一种方式：
// var p = document.createElement("p");
// p.innerHTML = "我是一个p";
// document.getElementsByTagName("div")[0].appendChild(p);
//第二种方式
// document.getElementsByTagName("div")[0].innerHTML = "<p>我是第二个p</p>";
//第三种方式
document.write("<p>我是第三个P</p>");
2、jQuery中创建元素的方式
//jQuery中创建元素的方式
var $p = $("<p>我是jquery生成的第一个标签</p>");
//放到div中，在div末尾追加
// $("div").append($p);//在div的末尾追加p
// $p.appendTo($("div"));//追加到div,也是在末尾加
//放在div中，在div的开头追加
// $("div").prepend($p);//在开头追加
// $p.prependTo($("div"));//在开头加
//在div的外边
// $("div").before($p);//前面
// $("div").after($p);//后边
//替换div内部
$("div").html($p);
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>选中移动</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 400px;
background-color: #ccc;
float: left;
margin-right: 10px;
text-align: center;
}
button{
width: 50px;
height: 50px;
margin: 10px;
}
select{
width: 50px;
height: 200px;
}
</style>
</head>
<body>
<div>
<p>水果摊</p>
<select name="" id="sel1" multiple="multiple">
<option value="">苹果</option>
<option value="">香蕉</option>
<option value="">鸭梨</option>
<option value="">橙子</option>
<option value="">黄瓜</option>
</select>
</div>
<div>
<button>></button>
<button><</button>
<button>>></button>
<button><<</button>
</div>
<div>
<p>购物车</p>
<select name="" id="sel2" multiple="multiple"> </select>
</div>
<script src="jQuery1-12-4.js"></script>
<script>
$(function () {
//移动到右边
$("button:eq(0)").click(function () {
$("#sel2").append($("#sel1>option:selected"));
});
//移动到左边
$("button:eq(1)").click(function () {
$("#sel1").append($("#sel2>option:selected"));
});
//全部移动到右边
$("button:eq(2)").click(function () {
$("#sel1>option").appendTo($("#sel2"));
});
//全部移动到左边
$("button:eq(3)").click(function () {
$("#sel1").append($("#sel2>option"));
});
});
</script>
</body>
</html>
的
jQuery3动画+创建元素的更多相关文章
- JavaScript 、jQuery动态创建元素的关键字~
JavaScript动态创建元素: 1.创建元素 如:a 标签 var alink= document.createElement("a"); 2.j添加元素属性 alink.h ...
- js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理
动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...
- js和jQuery创建元素和把元素插入到文档中所用的方法
js创建元素: document.createElement(" 创建的元素"); //“创建的元素”指:p ,h1,div,span........ js插入元素: docu ...
- Javascript:DOM动态创建元素实例应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理
插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...
- jQuery如何创建元素
1.$("<ul>").attr("id","taglist").appendTo("#tagCloud") ...
- 【2017-03-31】JS-DOM操作：操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素
一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...
- JavaScript获取和创建元素
1.JavaScript中获取元素 常用的获取document中元素的方法: 1) document.getElementById() =>通过元素ID获取文档中特定的元素,如获取 id = ...
- 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）
DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type 使用options[index]返回具体选项所对应的常用属性:defa ...
随机推荐
- 解析Mybatis入门第三天
目的:使用mybatis对数据的一些标签的使用和表与表之间的一对多和多对一的查询方式. 例如:if.where.foreach 前言:同样是使用idea创建一个普通的maven工程(如何创建一个普通的 ...
- Python 学习杂项
#print("Hello World!") #name = "nihfjkds" age = 454 num1 = 1 num2 = 2 #print(nam ...
- day20 装饰器补充
Python之路,Day8 = Python基础8 装饰器from functools imoort wraps # 保留原函数所有信息,比如:用__doc__查看注释的时候,显示原来的注释def f ...
- C++利用动态数组实现顺序表（不限数据类型）
通过类模板实现顺序表时,若进行比较和遍历操作,模板元素可以通过STL中的equal_to仿函数实现,或者通过回调函数实现.若进行复制操作,可以采用STL的算法函数,也可以通过操作地址实现.关于回调函数 ...
- Ros node启动与关闭
1. ros运行单位: Ros程序运行的单位是ros node. 2. ros 节点的启动: (1)初始化ros节点:通过调用ros::init()接口实现:可以通过参数指定默认节点名字,之所以是默认 ...
- Keras+Yolo 目标检测
参考:https://www.cnblogs.com/tensorflownews/p/8922359.html Github:https://github.com/qqwweee/keras-yol ...
- Delphi编写后台监控软件
Delphi编写后台监控软件 文章来源:Delphi程序员之家 后台监控软件,为了达到隐蔽监控的目的,应该满足正常运行时,不显示在任务栏上,在按Ctrl+Alt+Del出现的任 ...
- （转）Python成长之路【第九篇】：Python基础之面向对象
一.三大编程范式 正本清源一:有人说,函数式编程就是用函数编程-->错误1 编程范式即编程的方法论,标识一种编程风格 大家学习了基本的Python语法后,大家就可以写Python代码了,然后每个 ...
- POJ-1502-MPI Maelstrom-dijkstra+输入处理
BIT has recently taken delivery of their new supercomputer, a 32 processor Apollo Odyssey distribute ...
- hdu-1394(线段树求最小逆序数)
http://acm.hdu.edu.cn/showproblem.php?pid=1394 题意: 给定一个n,然后又n个数字,首先,这些数字的大小是从0开始到n-1,比如样例n=10,则这十个数就 ...