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 ...
随机推荐
- php数组的快速排序
function quick($array){ if(count($array)<=1){ return $array; } $key=$array[0]; $right=array(); $l ...
- windows安装cygwin实现gcc/g++/linux操作等功能
首先安装cygwin:参照下列博客去cygwin官网下载即可.安装过程中记得勾选需要的安装包,比如gcc/gdb https://blog.csdn.net/qilvmilv/article/deta ...
- Jmeter使用：JSON返回数据处理
想要解决的问题: 通过查询接口,获取response数据,作为下个请求post的参数值 后置处理器:JSON Extractor 先下载一个插件:JSONPathExtractor Names of ...
- 专访阿里云MVP王俊杰：开发者的超能力是用技术让世界更美好
[王俊杰:阿里云MVP,陕西创博网络科技有限公司总经理.大数据与物联网的爱好者与实践者. 8年以上互联网从业经验,曾从事军工相关仿真分析软件研发与集成.4年以上大数据系统开发经验.目前正与天水市秦州区 ...
- vue双向绑定的原理
什么是双向数据绑定?Vue是一个MVVM框架,数据绑定简单来说,就是当数据发生变化时,相应的视图会进行更新,当视图更新时,数据也会跟着变化. 实现数据绑定的方式大致有以下几种: - 1.发布者-订阅者 ...
- JDK语法糖之switch字串与枚举支持
在JDK1.7之前,switch只支持byte,short,char,int,注意1.5之后的自动拆箱,对应的这四种基础类型的封装类也同样支持Byte,Short,Character,Integer, ...
- threading线程中的方法(27-11)
t1.start() # 执行线程 t1.join() # 阻塞 t1.setDaemon(True) #守护线程 threading.current_thread() # 查看执行的是哪一个线程 t ...
- 「APIO 2019」路灯
题目 显然一个熟练的选手应该能一眼看出我们需要维护点对的答案 显然在断开或连上某一条边的时候只会对左右两边联通的点产生贡献,这个拿\(set\)维护一下就好了 那现在的问题就是怎么维护了 考虑一个非常 ...
- 【Oracle】如何在查询视图时使用索引
通常我们使用hint来固定查询计划选择走表的索引 固定表的连接等等,但是如果第一层查询的是视图呢? yang@rac1>CREATE TABLE TA (ID NUMBER, NAME VARC ...
- C开发系列-数组
C语言数组 数组:用来存储一组数据. 计算C语言的数组长度 int age1 = 12; int age2 = 15; int age3 = 10; int age4 = 13; int ages[] ...