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 ...
随机推荐
- JavaScript 数据值校验工具类
/** * 数据值校验工具类 */ var checkService = { // 不校验 none: function () { return true; }, //非空校验 isEmpty: fu ...
- day21 生成器，列表解析，三元表达式
Python之路,Day9 = Python基础9 判断可迭代对象和迭代器 from collections import Iterable, Iterator # 导入模块功能,用来判断对象是否为I ...
- MFC文档视图结构学习笔记
文档/视图概述 为了统一和简化数据处理方法,Microsoft公司在MFC中提出了文档/视图结构的概念,其产品Word就是典型的文档/视图结构应用程序 MFC通过其文档类和视图类提供了大量有关数据处理 ...
- YARN 原理简介
YARN 组件 参考:Spark on Yarn | Spark,从入门到精通 YARN 采用 Master/Slave结构 ,包含ResourceManager 和 NodeManager Reso ...
- 判断Paging File 的方法
当前环境,MiniFilter 1:FsRtlIsPagingFile 参数是一个 FileObject 2:判断操作标识 SL_OPEN_PAGING_FILE FlagOn 宏可以直接做到,传 ...
- android中实现监听的四种方法
(1)自身类作为事件监听器 package cn.edu.gdmec.s07150745.work5; import android.support.v7.app.AppCompatActivity; ...
- drupal-note2 drush运行make文件
进入durpal项目的根目录中执行 drush make build-openpublic.make /path/to/webroot 参考: Managing Drush make files fo ...
- Entity Framework 学习记录
msdn :https://msdn.microsoft.com/zh-cn/data/ee712907.aspx code first 入门: https://msdn.microsoft.com ...
- Tomcat小技巧
目录 1.项目路径忽略项目名 2.配置tomcat虚拟目录 3.显示目录文件列表 4.设置URL不区分大小写 1.项目路径忽略项目名 server.xml中修改Context标签中的path属性为/ ...
- F. Cowmpany Cowmpensation dp+拉格朗日插值
题意:一个数,每个节点取值是1-d,父亲比儿子节点值要大,求方案数 题解:\(dp[u][x]=\prod_{v}\sum_{i=1}^xdp[v][i]\),v是u的子节点,先预处理出前3000项, ...