盒子
盒子
文章目录
  1. 简介（write less.do more.）
    1. 初体验
    2. 优点
    3. jQuery是啥
    4. API方法
    5. jQuery版本问题
  • jQuery入口函数的解释
  • jq对象与DOM对象的区别（重点）
  • jq对象和DOM对象
  • 隔行变色案例
  • $符号的实质
  • jQuery的基本选择器
  • jQuery的层级选择器
  • mouseenter与mouseover的区别
  • 过滤选择器
  • 筛选选择器（方法）
  • 下拉菜单案例
  • 突出展示案例
  • 手风琴案例
  • 淘宝精品案例
  • index方法详解
  • jQuery操作样式
    1. css操作
    2. class操作
    3. tab栏切换
  • jQuery操作属性
    1. attr操作
    2. prop方法
  • jQuery动画
    1. 三组基本动画
      1. show—hide动画
      2. 滑入滑出动画
      3. 淡入淡出动画
    2. 自定义动画
      1. 手风琴案例进阶版
    3. 停止动画
      1. 音乐导航
  • 创建节点与添加节点
  • 清空节点与删除节点
  • 案列弹幕发送
  • 复习
  • 链式编程

    • jQuery浅入

    2019.06.25 Jzh 前端  热度 ℃

    简介（write less.do more.）

    初体验

    让div显示与设置内容：

    1、需要引入jQuery文件

    <script src="jquery-1.12.4.js"></script>

    2、入口函数
    $(function(){})
    $(document).ready(function(){})
    $(window).load(function(){})
    jQuery(function(){})

    ​3、注册事件，jquery中事件没有on开头

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

    ​	$("#btn1").click(function(){

    ​		隐式迭代：偷偷的遍历所有div，jquery会自动的遍历

    ​		$("div").show(1000);		

    ​	});

    ​	$("#btn2").click(function(){

    ​		隐式迭代：偷偷的遍历所有div，jquery会自动的遍历

    ​		$("div").text("我是内容");		

    ​	});

    });
    优点

    ​ 1. 查找元素的方法多种多样，非常灵活

    ​ 2. 拥有隐式迭代特性，因此不再需要手写for循环了

    ​ 3. 完全没有兼容性问题

    ​ 4. 实现动画非常简单，而且功能更加的强大

    ​ 5. 代码简单、粗暴

    jQuery是啥

    jQuery官网：http://jquery.com/ ,jQuery就是一个js库，简化js的。

    js库：把一些常用的方法写到一个单独的js文件，使用的时候直接去引用js文件就可以了。

    学习jQuery就是学习这个js文件中封装的一大堆方法。

    API方法

    jQuery官网：http://jquery.com/ ,——>API Documentation

    jQuery版本问题

    大版本分类：

    ​ 1.x版本：能够兼容IE678浏览器

    ​ 2.x版本：不兼容IE678浏览器

    ​ 1.x和2.x版本都不再更新版本了，现在只更新3.x版本。

    ​ 3.x版本：不兼容IE678，更加的精简，国内不流行，因为国内使用jQuery主要目的是兼容IE678

    关于压缩版和未压缩版：

    ​ jquery-1.12.4.min.js压缩版本，适用于生产环境，因为文件比较小，去除了注释，换行，空格等东西

    ​ ，但是基本没有阅读性。

    ​ jquery-1.12.4.js未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

    jQuery入口函数的解释

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    		<script type="text/javascript">
    			//js的入口函数执行要比jQuery的入口函数执行的晚一些
    			//jq的入口函数会等待页面的加载完成才执行，但是不会等待图片的加载
    			//js的入口函数会等待页面加载完成，并且等待图片加载完成才会执行
    			window.onload = function(){
    				console.log("这是js的入口函数");
    			};
    			
    			$(document).ready(function(){
    				console.log("这是jQuery入口函数的第一种写法");
    			});
    			
    			$(function(){
    				console.log("这是jQuery入口函数的第二种写法");
    			});
    		</script>
    	</body>
    </html>

    使用jQuery的三个步骤：

    ​ 1. 引入jQuery文件

    ​ 2. 入口函数

    ​ 3. 功能实现

    如果script代码写在最后面，可以不需要写入口函数，但是推荐写上。

    jq对象与DOM对象的区别（重点）

    伪数组：有数组的特性，没有数组的方法，但是有自己的方法（比如jq对象）

    DOM对象与jq对象

    洗衣服一件件洗麻烦，洗衣机一次性方便

    js和dom区别就像洗衣服一样

    jq对象和DOM对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<ul>
    			<li id="cloth">衣服</li>
    			<li>裤子</li>
    			<li>裤衩子</li>
    			<li>袜子</li>
    		</ul>
    		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				//DOM无法调用jQuery对象的方法：为什么：因为是两个不同的对象
    				//DOM对象调用jQuery对象的方法。需要把DOM对象转换成jQuery对象。
    				var cloth = document.getElementById("cloth");
    				//DOM对象就变成jQuery对象(就是买个洗衣机，用钱$)
    				$(cloth).text("DOM对象变成jQuery对象啦");
    				
    				//jQuery对象怎么转换成DOM对象(取出来)
    				var $li = $("li");
    				//第一种方法，推荐
    				$li[1].style.backgroundColor = "red";
    				//第二种
    				$li.get(0);
    			});
    		</script>
    	</body>
    </html>

    总结：

    ​ 1、什么是DOM对象：用js的方式获取到的对象是DOM对象

    ​ 2、jQuery对象：用jq的方式获取到的对象是jq对象

    ​ 3、区别与联系

    ​ 4、区别：js对象与jq对象的方法不能混着用

    ​ 5、联系：

    ​ DOM——>jQuery $()

    ​ jQuery——>DOM $li[0] $li.get(0)

    隔行变色案例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<ul>
    			<li>我是第1个li</li>
    			<li>我是第2个li</li>
    			<li>我是第3个li</li>
    			<li>我是第4个li</li>
    			<li>我是第5个li</li>
    			<li>我是第6个li</li>
    			<li>我是第7个li</li>
    			<li>我是第8个li</li>
    			<li>我是第9个li</li>
    			<li>我是第10个li</li>
    		</ul>
    		
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				//用DOM对象
    //				var lis = document.getElementsByTagName("li");
    //				for(var i = 0;i<lis.length;i++){
    //					if(i%2==0){
    //						lis[i].style.backgroundColor = "pink";
    //					}else{
    //						lis[i].style.backgroundColor = "red";
    //					}
    //				}

    				//用jq对象+DOM对象
    				//lis:jq对象
    				//lis[i]:DOM对象，通过下标取出来了
    				var lis = $("li");
    				for(var i = 0;i<lis.length;i++){
    					if(i%2==0){
    						lis[i].style.backgroundColor = "pink";
    					}else{
    						lis[i].style.backgroundColor = "red";
    					}
    				}
    			});
    		</script>
    	</body>
    </html>

    $符号的实质

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    		<script type="text/javascript">
    			//$其实就是一个函数，以后用$的时候，记得小括号$();
    			console.log($);//function
    			//参数不同，功能就不同
    			//3中用法
    			//1、参数是一个function，入口函数
    			$(function(){});
    			//2、$(domobj)把dom对象转换成jquery对象
    			//比如入口函数，把document对象(DOM对象)转换成jquery对象，调用ready方法
    			$(document).ready(function(){});
    			//3、参数是一个字符串
    			$("div")  $("#btn")  $(".current")
    		</script>
    	</body>
    </html>

    jQuery的基本选择器

    jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。

    jQuery选择器有很多，基本兼容了css1到css3所有的选择器（css怎么写，jquery就怎么写），并且jQuery还添加了很多更加复杂的选择器。

    jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多方法获取到，所以我们平时真正能用到的只是少数的最常用的选择器。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<ul>
    			<li>1</li>
    			<li>2</li>
    			<li>3</li>
    			<li id="four">4</li>
    			<li>5</li>
    			<li class="green">6</li>
    			<li id="four" class="green">7</li>
    			<li>8</li>
    			<li>9</li>
    			<li>10</li>
    		</ul>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			//入口函数
    			$(function(){
    				//jquery如何设置样式
    				//css(name,value)
    				//name:样式名	value：样式值
    				
    				//id选择器
    //				$("#four").css("background-color","red");
    				//类选择器
    //				$(".green").css("background-color","green");
    				//元素选择器
    //				$("li").css("background-color","black");
    				//并集选择器
    //				$("#four,.green").css("background-color","green");
    				//交集选择器
    				$("#four.green").css("background-color","green");
    			});
    		</script>
    	</body>
    </html>

    jQuery的层级选择器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="father">
    			<div>11</div>
    			<div>22
    				<p>11</p>
    				<p>22</p>
    				<p>33</p>
    			</div>
    			<div>33</div>
    			<div>44</div>
    			<div>55</div>
    			<p>66</p>
    			<p>77</p>
    			<p>88</p>
    		</div>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			//子代选择器
    			$("#father>p").css("background-color","red");
    			//后代选择器
    			$("#father p").css("background-color","red");
    		</script>
    	</body>
    </html>

    mouseenter与mouseover的区别

    mouseover：鼠标经过事件（不论鼠标指针穿过被选元素或其子元素，都会触发mouseover事件）

    mouseout：鼠标离开事件（不论鼠标指针穿过被选元素或其子元素，都会触发mouseout事件）

    mouseenter：鼠标进入事件（只有在鼠标指针穿过被选元素时，才会触发mouseenter事件）

    mouseleave：鼠标离开事件（只有在鼠标指针穿过被选元素时，才会触发mouseleave事件）

    所以注册鼠标经过事件，通常用mouseenter事件

    过滤选择器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<ul>
    			<li>我是第1个li</li>
    			<li>我是第2个li</li>
    			<li>我是第3个li</li>
    			<li>我是第4个li</li>
    			<li>我是第5个li</li>
    			<li>我是第6个li</li>
    			<li>我是第7个li</li>
    			<li>我是第8个li</li>
    			<li>我是第9个li</li>
    			<li>我是第10个li</li>
    		</ul>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			//下标为偶数的li
    //			$("li:even").css("background-color","red");
    			//下标为奇数的li
    //			$("li:odd").css("background-color","green");
    			//第一个li
    //			$("li:first").css("fontSize","30px");
    			//最后一个li
    //			$("li:last").css("fontSize","30px");
    			//eq（等于下标为几的）
    //			$("li:eq(1)").css("fontSize","30px");
    			//lt（小于下标为几的）
    //			$("li:lt(3)").css("fontSize","30px");
    			//gt（大于下标为几的）
    			$("li:gt(3)").css("fontSize","30px");
    			//checked（被选中的）
    			$("input：checked").css("fontSize","30px");
    		</script>
    	</body>
    </html>

    筛选选择器（方法）

    名称 用法 描述
    children(selector) $(“ul”).children(“li”) 相当于$(“ul>li”),子类选择器
    find(selector) $(“ul”).find(“li”) 相当于$(“ul li”),后代选择器
    siblings(selector) $(“#first”).siblings(“li”) 查找兄弟节点，不包括自己本身
    parent() $(“#first”).parent() 查找父亲
    eq(index) $(“li”).eq(2) 相当于$(“li:eq(2)”),index从0开始
    next() $(“li”).next() 找下一个兄弟
    prev() $(“li”).prev() 找上一个兄弟

    下拉菜单案例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			.wrap{
    				float: left;
    			}
    			.wrap>ul>li{
    				background-color: red;
    				list-style: none;
    				float:left;
    				border: 1px solid black;
    			}
    			.wrap>ul>li>ul{
    				list-style: none;
    				background-color: blue;
    				border: 1px solid black;
    				padding: 0;
    				display: none;
    			}
    			.wrap>ul>li>ul>li{
    				border:1px solid black;
    				text-align: left;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="wrap">
    			<ul>
    				<li>
    					菜单一
    					<ul>
    						<li>菜单一1</li>
    						<li>菜单一2</li>
    						<li>菜单一3</li>
    						<li>菜单一4</li>
    					</ul>
    				</li>
    				<li>
    					菜单二
    					<ul>
    						<li>菜单二1</li>
    						<li>菜单二2</li>
    						<li>菜单二3</li>
    						<li>菜单二4</li>
    					</ul>
    				</li>
    				<li>
    					菜单三
    					<ul>
    						<li>菜单三1</li>
    						<li>菜单三2</li>
    						<li>菜单三3</li>
    						<li>菜单三4</li>
    					</ul>
    				</li>
    				<li>
    					菜单四
    					<ul>
    						<li>菜单四1</li>
    						<li>菜单四2</li>
    						<li>菜单四3</li>
    						<li>菜单四4</li>
    					</ul>
    				</li>
    			</ul>
    		</div>
    		
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				var $li = $(".wrap>ul>li");
    				//给li注册鼠标经过事件，让自己的ul显示出来
    				$li.mouseover(function(){
    					//找到所有的儿子，并且还得是ul
    					$(this).children("ul").show();
    				});
    				$li.mouseout(function(){
    					//找到所有的儿子，并且还得是ul
    					$(this).children("ul").hide();
    				});
    			});
    		</script>
    	</body>
    </html>

    突出展示案例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			body{
    				background-color: blue;
    			}
    			li{
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				list-style: none;
    				float:left;
    				opacity: 0.4;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="wrap">
    			<ul>
    				<li></li>
    				<li></li>
    				<li></li>
    				<li></li>
    			</ul>
    		</div>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			$(function() {
    				$(".wrap>ul>li").mouseenter(function() {
    					$(this).css("opacity", "1").siblings().css("opacity", 0.4);
    				});
    				$(".wrap").mouseleave(function() {
    					//让所有的li都变亮
    					$(this).find("li").css("opacity", 0.4);
    				});
    			});
    		</script>
    	</body>
    </html>

    手风琴案例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			.parentWrap{
    				list-style: none;
    				padding: 0;
    				margin: 0 auto;
    				width: 150px;
    			}
    			.menuGroup{
    				text-align: center;
    				background-color: red;
    			}
    			.groupTitle{
    				background-color: bisque;
    				display: block;
    				border-top: 1px solid burlywood;
    				cursor: pointer;
    			}
    			div{
    				height: 100px;
    				display: none;
    			}
    		</style>
    	</head>
    	<body>
    		<ul class="parentWrap">
    			<li class="menuGroup">
    				<span class="groupTitle">标题一</span>
    				<div>我是弹出来的div1</div>
    			</li>
    			<li class="menuGroup">
    				<span class="groupTitle">标题二</span>
    				<div>我是弹出来的div2</div>
    			</li>
    			<li class="menuGroup">
    				<span class="groupTitle">标题三</span>
    				<div>我是弹出来的div3</div>
    			</li>
    			<li class="menuGroup">
    				<span class="groupTitle">标题四</span>
    				<div>我是弹出来的div4</div>
    			</li>
    		</ul>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				//思路分析：
    				//1、给所有的span注册点击事件，让当前span的兄弟div显示出来
    				$(".groupTitle").click(function(){
    					//链式编程：在jQuery中，方法可以一直调用下去（jQuery的方法会返回一个jq对象）
    					//并不是一直能链式下去，后面会有不能的情况，后面说
    					$(this).next().show(200).parent().siblings().children("div").hide(200);
    				});
    			});
    		</script>
    	</body>
    </html>

    淘宝精品案例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			.wrapper{
    				position: absolute;
    				left: 500px;
    				top: 100px;
    			}
    			ul{
    				float: left;
    				list-style: none;
    				padding: 0;
    			}
    			/*img{
    				width:300px;
    				height: 205px;
    			}*/
    			#center div{
    				width:300px;
    				height: 205px;
    				background-color: blueviolet;
    				line-height: 205px;
    				text-align: center;
    			}
    			#left>li{
    				width: 50px;
    				height: 50px;
    				background-color: navajowhite;
    				line-height: 50px;
    				text-align: center;
    				border-top: 1px solid burlywood;
    			}
    			#left>li:nth-child(4){
    				border-bottom: 1px solid burlywood;
    			}
    			#center{
    				width:300px;
    				height: 205px;
    				overflow: hidden;
    			}
    			#right>li{
    				width: 50px;
    				height: 50px;
    				background-color: navajowhite;
    				line-height: 50px;
    				text-align: center;
    				border-top: 1px solid burlywood;
    			}
    			#right>li:nth-child(4){
    				border-bottom: 1px solid burlywood;
    			}
    			#left>li:hover,#right>li:hover{
    				cursor: pointer;
    				background-color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="wrapper">
    			<ul id="left">
    				<li>女靴</li>
    				<li>大衣</li>
    				<li>手链</li>
    				<li>袜子</li>
    			</ul>
    			<ul id="center">
    				<!--<li><img src="img/adver01.jpg"/></li>
    				<li><img src="img/adver02.jpg"/></li>
    				<li><img src="img/adver03.jpg"/></li>
    				<li><img src="img/adver04.jpg"/></li>
    				<li><img src="img/adver05.jpg"/></li>
    				<li><img src="img/adver06.jpg"/></li>
    				<li><img src="img/adver01.jpg"/></li>
    				<li><img src="img/adver02.jpg"/></li>-->
    				<li><div>女靴</div></li>
    				<li><div>大衣</div></li>
    				<li><div>手链</div></li>
    				<li><div>袜子</div></li>
    				<li><div>女包</div></li>
    				<li><div>围巾</div></li>
    				<li><div>帽子</div></li>
    				<li><div>风衣</div></li>
    			</ul>
    			<ul id="right">
    				<li>女包</li>
    				<li>围巾</li>
    				<li>帽子</li>
    				<li>风衣</li>
    			</ul>
    		</div>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				$("#left>li").mouseenter(function(){
    					var $idx = $(this).index();
    					$("#center>li:eq("+$idx+")").show().siblings().hide();
    				});
    				$("#right>li").mouseenter(function(){
    					var $idx = $(this).index();
    //					$("#center>li:eq("+($idx+4)+")").show().siblings().hide();
    					$("#center>li").eq($idx+4).show().siblings().hide();
    					
    					//注意：都是获取下标
    						$("#center>li").eq($idx) ：返回的是jq对象
    						$("#center>li").get($idx) ：返回的是js对象
    				});
    			});
    		</script>
    	</body>
    </html>

    index方法详解

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<ul>
    			<li><a href="#">1</a></li>
    			<li><a href="#">2</a></li>
    			<li><a href="#">3</a></li>
    			<li><a href="#">4</a></li>
    			<li><a href="#">5</a></li>
    			<li><a href="#">6</a></li>
    			<li><a href="#">7</a></li>
    			<li><a href="#">8</a></li>
    		</ul>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				//index()会返回当前元素在所有兄弟元素里面的索引
    				$("li").click(function(){
    					console.log($(this).index());
    				});
    			});
    		</script>
    	</body>
    </html>

    jQuery操作样式

    css操作
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<ul>
    			<li>张伟</li>
    			<li>snake</li>
    			<li>张大炮</li>
    			<li>律政先锋</li>
    		</ul>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				
    				//css(name,value)
    				//修改单个样式
    				//name：样式名   value：样式值
    //				$("li")
    //				.css("backgroundColor","pink")
    //				.css("color","red")
    //				.css("font-size","32px");//js中font-size这种有-的样式必须驼峰写法（fontSize）
    				//，jquery中虽然可以这么写,但是这里是字符串，而且底层还是帮我们转为了驼峰的
    				
    				//css(obj)：传一个对象进去
    				//修改多个样式
    //				$("li").css({
    //					backgroundColor:"pink",
    //					color:"red",
    //					fontSize:"32px"
    //				});

    				//获取样式
    				console.log($("li").css("fontSize"));
    				
    				//隐式迭代：
    					//设置样式的时候：会给jq内部的所有对象都设置上相同的值
    					//获取的时候：只会返回第一个元素对应的值。
    //						—为什么：因为隐式迭代设置时默认是从上至下设置一样的，获取时
    //								同样以为从上到下样式值都是一样的,所以干脆只取第一个值
    			});
    		</script>
    	</body>
    </html>
    class操作
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			.basic{
    				background-color: pink;
    				font-size: 32px;
    				color:red;
    			}
    			.bigger{
    				font-size:40px;
    			}
    		</style>
    	</head>
    	<body>
    		<input type="button" value="添加basic类" />
    		<input type="button" value="添加bigger类" />
    		<input type="button" value="移除bigger类" />
    		<input type="button" value="判断bigger类" />
    		<input type="button" value="切换类" />
    		<ul>
    			<li>1</li>
    			<li>2</li>
    			<li>3</li>
    			<li>4</li>
    		</ul>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				//添加一个类。不像js中的addClass直接覆盖class属性值
    				$("input").eq(0).click(function(){
    					$("li").addClass("basic");
    				});
    				$("input").eq(1).click(function(){
    					$("li").addClass("bigger");
    				});
    				
    				//移除一个类
    				$("input").eq(2).click(function(){
    					$("li").removeClass("bigger");
    				});
    				
    				//判断类
    				$("input").eq(3).click(function(){
    					console.log($("li").hasClass("bigger"));
    					
    				});
    				
    				//判断li有没有basic类，如果有，就移除他，如果没有，添加他
    //				$("input").eq(4).click(function(){
    //					if($("li").hasClass("basic")){
    //						$("li").removeClass("basic");
    //					}else{
    //						$("li").addClass("basic");
    //					}
    //				});
    				
    				//jquery帮我们封装了一个切换类的方法：toggleClass
    				$("input").eq(4).click(function(){
    					$("li").toggleClass("basic");
    				});
    			});
    		</script>
    	</body>
    </html>
    tab栏切换
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			.wrap{
    				margin: 0 auto;
    				padding: 0;
    				width: 405px;
    			}
    			ul{
    				list-style: none;
    				padding: 0;
    			}
    			ul:nth-child(1)>li{
    				width: 100px;
    				height: 30px;
    				background-color: antiquewhite;
    				border-left: 1px solid darkgray;
    				float: left;
    				line-height: 30px;
    				text-align: center;
    				cursor: pointer;
    			}
    			.s{
    				opacity:0.4;
    			}
    			ul:nth-child(1)>li:nth-child(4){
    				border-right: 1px solid darkgray;
    			}
    			ul:nth-child(2){
    				overflow: hidden;
    				width: 405px;
    				height:300px;
    			}
    			img{
    				width: 405px;
    				height:300px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="wrap">
    			<ul>
    				<li>第1个</li>
    				<li>第2个</li>
    				<li>第3个</li>
    				<li>第4个</li>
    			</ul>
    			<ul>
    				<li>
    					<img src="img/adver01.jpg">
    				</li>
    				<li>
    					<img src="img/adver02.jpg">
    				</li>
    				<li>
    					<img src="img/adver03.jpg">
    				</li>
    				<li>
    					<img src="img/adver04.jpg">
    				</li>
    			</ul>
    		</div>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				$("ul").eq(0).children("li").mouseenter(function(){
    					var $idx = $(this).index();
    					$(this).addClass("s").siblings().removeClass("s").parent().siblings("ul").children("li").eq($idx).show()
    					.siblings().hide();
    				});
    			});
    		</script>
    	</body>
    </html>

    jQuery操作属性

    样式：在style里面写的，用css来操作。

    属性：在标签里面写的，用attr方法操作。

    attr操作
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<img src="img/adver01.jpg" alt="图片" title="标题" />
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				//设置单个属性
    				//attr（name，value）
    				$("img").attr("alt","alt被修改了");
    				$("img").attr("title","标题被修改了");
    				
    				//设置多个属性，传个对象
    				$("img").attr({
    					alt:"alt",
    					title:"title",
    					//自定义属性也能设置
    					aa:"aa"
    				});
    				
    				//获取属性
    				console.log($("img").attr("title"));
    				
    			});
    		</script>
    	</body>
    </html>
    prop方法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<input type="button" value="选中" />
    		<input type="button" value="不选中" />
    		<input type="checkbox"/ id="ck">
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				//jquery1.6以后，对于像checked，selected，disabled这种值为布尔的特殊属性
    				//用attr方式获取设置他们，使用一次就失效
    //				$("input:eq(0)").click(function(){
    //					$("#ck").attr("checked",true);
    //				});
    //				$("input:eq(1)").click(function(){
    //					$("#ck").attr("checked",false);
    //				});
    				//所以对于布尔类型的属性，不要attr方法，应该用prop方法，prop用法和attr一样
    				$("input:eq(0)").click(function(){
    					$("#ck").prop("checked",true);
    				});
    				$("input:eq(1)").click(function(){
    					$("#ck").prop("checked",false);
    				});
    			});
    		</script>
    	</body>
    </html>

    jQuery动画

    三组基本动画
    show—hide动画
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			div{
    				width: 100px;
    				height: 100px;
    				background-color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<input type="button" value="显示" />
    		<input type="button" value="隐藏" />
    		<div></div>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				$("input").eq(0).click(function(){
    					//不传参数，没有动画效果
    //					$("div").show();
    					//show(speed)
    					//speed:动画的持续时间，可以是毫秒值，也可以是固定字符串
    					//fast：200ms   normal：400ms  slow：600ms
    //					$("div").show(1000);
    //					$("div").show("fast");

    //					show([speed],[callback]):还可以传回调函数，这都是可选的
    					$("div").show(1000,function(){
    						console.log("哈哈");
    					});
    					
    				});
    				$("input").eq(1).click(function(){
    					
    					//一样
    					$("div").hide();
    			});
    		</script>
    	</body>
    </html>
    滑入滑出动画
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			div{
    				width: 100px;
    				height: 100px;
    				background-color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<input type="button" value="滑入" />
    		<input type="button" value="滑出" />
    		<input type="button" value="切换" />
    		<div></div>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				//滑入：slideDown   滑出：slideUp    切换：slideToggle
    				//和show   hide都是一样的参数
    				$("input").eq(0).click(function(){
    					$("div").slideDown(1000);
    				});
    				$("input").eq(1).click(function(){
    					$("div").slideUp(1000);
    				});
    				$("input").eq(2).click(function(){
    					$("div").slideToggle(1000);
    				});
    			});
    		</script>
    	</body>
    </html>
    淡入淡出动画

    淡入：fadeIn

    淡出：fadeOut

    切换：fadeToggle

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			.wrap{
    				margin: 0 auto;
    				padding: 0;
    				width: 400px;
    				height: 350px;
    			}
    			ul{
    				list-style: none;
    				width: 100%;
    				height: 100%;
    				margin: 0;
    				padding: 0;
    				overflow: hidden;
    			}
    			img{
    				width: 400px;
    				height: 350px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="wrap">
    			<ul>
    				<li>
    					<img src="img/adver01.jpg"/>
    				</li>
    				<li>
    					<img src="img/adver02.jpg"/>
    				</li>
    				<li>
    					<img src="img/adver03.jpg"/>
    				</li>
    				<li>
    					<img src="img/adver04.jpg"/>
    				</li>
    				<li>
    					<img src="img/adver05.jpg"/>
    				</li>
    				<li>
    					<img src="img/adver06.jpg"/>
    				</li>
    			</ul>
    		</div>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			var index = 0;
    			setInterval(function(){
    				index++;
    				if(index==6){
    					index=0;
    				}
    				$("ul>li").eq(index).children().fadeIn(1000).parent().siblings()
    				.children().fadeOut(1000);
    				
    				
    			},5000);
    		</script>
    	</body>
    </html>
    自定义动画
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			div{
    				width: 200px;
    				height: 200px;
    				background-color: pink;
    				position:absolute;
    			}
    		</style>
    	</head>
    	<body>
    		<input type="button" value="开始" />
    		<input type="button" value="结束" />
    		<div></div>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				$("input").eq(0).click(function(){
    					//第一个参数：对象，里面可以传需要动画的样式
    					$("div").animate({left:800});
    					//第二个参数:speed 动画的执行时间
    					$("div").animate({left:800},2000);
    					//第三个参数：动画的执行效果
    							//swing:秋千  摇摆
    							//linear：线性  匀速
    							//不写默认swing
    					$("div").animate({left:800},2000,"swing");
    					//第四个参数：回调函数
    					$("div").animate({left:800},2000,"swing",function(){
    						console.log("hhh");
    					});
    				});
    			});
    		</script>
    	</body>
    </html>
    手风琴案例进阶版
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#box{
    				width: 1200px;
    				height: 500px;
    				padding: 0;
    				position: absolute;
    				top:100px;
    				left: 100px;
    			}
    			ul{
    				width: 100%;
    				height: 100%;
    				list-style: none;
    				margin: 0;
    				padding: 0;
    				float:left;
    			}
    			li{
    				width: 240px;
    				height: 100%;
    				float:left;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="box">
    			<ul>
    				<li></li>
    				<li></li>
    				<li></li>
    				<li></li>
    				<li></li>
    			</ul>
    		</div>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				var $li = $("#box li");
    				for(var i =0;i<$li.length;i++){
    					$li.eq(i).css("backgroundImage","url(img/adver0"+(i+1)+".jpg)");
    				}
    				//给所有的li注册鼠标经过事件
    				$li.mouseenter(function(){
    					$(this).animate({width:780}).siblings().animate({width:104})
    					.parent().mouseleave(function(){
    					$li.animate({width:240});
    				});
    				});
    				
    			});
    		</script>
    	</body>
    </html>
    停止动画
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			div{
    				width:400px;
    				height: 400px;
    				background-color: pink;
    				display: none;
    			}
    		</style>
    	</head>
    	<body>
    		<input type="button" value="开始" />
    		<input type="button" value="结束" />
    		<div></div>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				$("input").eq(0).click(function(){
    					$("div").slideDown(4000).slideUp(4000);
    				});
    				$("input").eq(1).click(function(){
    					//stop:停止当前正在执行的动画（注意，此时有两个动画排成了一个动画队列，就是说slideDown
    					//和slideUp两个动画，一前一后的排队执行，这
    					//个slideDown执行完毕后，再执行slideUp，当我们在slideDown还没结束
    					//stop了，就会结束slideDown动画直接去执行下一个slideUp，并不是结束所有的动画）
    //					$("div").stop();
    					//该方法有两个参数
    					//clearQueue：是否清除动画队列 true  false (清除队列后就没有动画了)
    					//jumpToEnd：是否跳转到当前动画的最终效果 true  false (直接跳当前所处的动画的最终的效果)
    					$("div").stop(true,true);
    					//一般stop这么用：.stop().animate()  含义是立即执行这个animate动画
    				});
    			});
    		</script>
    	</body>
    </html>
    音乐导航
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    				list-style: none;
    			}
    			.nav{
    				width:900px;
    				height: 60px;
    				background-color: black;
    				margin: 0 auto;
    			}
    			.nav li{
    				width: 100px;
    				height: 60px;
    				float: left;
    				position: relative;
    				overflow: hidden;
    			}
    			.nav a{
    				position: absolute;
    				width: 100%;
    				height: 100%;
    				font-size: 24px;
    				color: blue;
    				text-align: center;
    				line-height: 60px;
    				text-decoration: none;
    				z-index: 2;
    			}
    			.nav span{
    				position: absolute;
    				top: 60px;
    				background-color: yellow;
    				width: 100%;
    				height: 100%;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="nav">
    			<ul>
    				<li>
    					<a href="javascript:;">导航1</a>
    					<span></span>
    				</li>
    				<li>
    					<a href="javascript:;">导航2</a>
    					<span></span>
    				</li>
    				<li>
    					<a href="javascript:;">导航3</a>
    					<span></span>
    				</li>
    				<li>
    					<a href="javascript:;">导航4</a>
    					<span></span>
    				</li>
    				<li>
    					<a href="javascript:;">导航5</a>
    					<span></span>
    				</li>
    				<li>
    					<a href="javascript:;">导航6</a>
    					<span></span>
    				</li>
    				<li>
    					<a href="javascript:;">导航7</a>
    					<span></span>
    				</li>
    				<li>
    					<a href="javascript:;">导航8</a>
    					<span></span>
    				</li>
    				<li>
    					<a href="javascript:;">导航9</a>
    					<span></span>
    				</li>
    			</ul>
    			<!--音频标签-->
    			<div>
    				<audio src="mp3/1.ogg"></audio>
    				<audio src="mp3/2.ogg"></audio>
    				<audio src="mp3/3.ogg"></audio>
    				<audio src="mp3/4.ogg"></audio>
    				<audio src="mp3/5.ogg"></audio>
    				<audio src="mp3/6.ogg"></audio>
    				<audio src="mp3/7.ogg"></audio>
    				<audio src="mp3/8.ogg"></audio>
    				<audio src="mp3/9.ogg"></audio>
    			</div>
    		</div>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				$(".nav li").mouseenter(function(){
    					$(this).children("span").stop().animate({top:0});
    					var idx = $(this).index();
    					//让对应的音乐播放，音乐播放的方法是dom对象的。
    					$("audio").get(idx).load();
    					$("audio").get(idx).play();
    				}).mouseleave(function(){
    					$(this).children("span").stop().animate({top:60});
    				});
    			});
    		</script>
    	</body>
    </html>

    创建节点与添加节点

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    //创建节点
    $("<li></li>");

    append//添加到子元素的最后面

    $("div").append("<li>jjjjjj</li>");
    $("div").append($("li"));

    prepend//添加到子元素的最前面
    $("div").prepend($("li"));

    appendTo//添加到。。的子元素最后
    $("div").appendTo("#btn");//这里能直接写选择器
    prependTo

    after//添加到自己后面（兄弟元素）
    before//添加到自己前面（兄弟元素）

    清空节点与删除节点

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //可以清空一个元素的内容
    $("div").html("");//不推荐,会发生内存泄漏，清空内存不会清空事件只会清空内容
    $("div").empty();

    //remove（）删除自己
    $("div").remove();

    //clone（）克隆
    //不传参数默认false
    //false：深度复制(复制了内容)，不会复制事件
    //true:深度复制，会复制事件

    案列弹幕发送

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    				list-style: none;
    			}
    			.boxDom{
    				height: 755px;
    				width: 100%;
    				position: absolute;
    			}
    			.idDom{
    				position: absolute;
    				width: 100%;
    				height: 150px;
    				background-color: grey;
    				bottom: 0;
    				text-align: center;
    			}
    			.content{
    				margin-top:80px ;
    				display: inline-block;
    			}
    			.title{
    				display: inline-block;
    				color: ghostwhite;
    				font: bold 15px "微软雅黑";
    				float: left;
    				height: 25px;
    			}
    			.text{
    				padding: 1px;
    				float: left;
    			}
    			.btn{
    				background-color: red;
    				text-align: center;
    				width: 40px;
    				height: 25px;
    				float: left;
    			}
    			span{
    				position: absolute;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="boxDom" id="boxDom">
    			<div class="idDom" id="idDom">
    				<div class="content">
    					<p class="title">吐槽:</p>
    					<input type="text" id="text" class="text" />
    					<button class="btn" id="btn">发射</button>
    				</div>
    			</div>
    		</div>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				var colors = ["red","green","hotpink","pink","cyan","yellowgreen","purple","deepskyblue"];
    				$("#btn").click(function(){
    					var randomColor = parseInt(Math.random()*colors.length);
    					var randomY=parseInt(Math.random()*400);
    					$("<span></span>")//创建span
    					.text($("#text").val())//设置内容
    					.css("color",colors[randomColor])//设置字体颜色
    					.css("left",1500)//设置left值
    					.css("top",randomY)//设置top值
    					.animate({left:-500},5000,"linear",function(){
    						//到了终点需要删除
    						$(this).remove();
    					})//添加动画
    					.appendTo("#boxDom");
    					$("#text").val("");
    				});
    			});
    		</script>
    	</body>
    </html>

    复习

    js函数库，简称：js库：一个js文件，里面封装了很多的函数的相关的代码

    什么是jQuery？也是一个js函数库，是所有js库中的一种

    jQuery的好处:写的少，做得多，开源，免费，链式编程，隐式迭代

    jQuery对象和DOM对象的互转：jQuery对象转DOM对象：对象[0],或者对象.get(0);

    jQuery中顶级对象：jQuery或者是$

    jQuery中页面加载事件的写法：

    ​ $(window).load(function(){});页面中所有的内容全部加载完毕才执行

    ​ $(document).ready(function(){});

    ​ jQuery(function(){});

    ​ $(function(){});

    ​ jQuery这个单词都可以使用$来替换，或者说$也可以是jQuery来代替

    在jQuery中如何获取元素：选择器

    ​ id选择器

    ​ 标签选择器

    ​ 类选择器

    ​ 多条件选择器

    ​ $（”.类样式名字，标签名字，id值”）

    ​ 层级选择器

    ​ $（“选择器>选择器”）子代选择器 ；

    ​ $（“选择器 选择器”） 后代选择器

    ​ $（“选择器+选择器”） 相邻的后面第一个兄弟元素

    ​ $（“选择器~选择器”） 后面的所有的兄弟元素

    .val()；首先是针对表单标签，括号中啥也没有，表示的是获取value属性值，括号中写内容，设置元素的

    ​ value属性值

    .text();成对的标签可以使用这个属性，括号中啥也没有是获取标签中间文本内容，写内容表示是设置标签

    ​ 中间的内容

    .html();成对的标签可以设置或者是获取中间的html内容

    ​ 标签会解析

    .css();设置元素的样式，.css(“属性名字”,“值”)

    .show();设置元素显示，括号中可以写数字，表示的是毫秒

    .hide();设置元素隐藏，括号中可以写数字，表示的是毫秒

    .stop();停止当前在执行的动画

    链式编程

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    				list-style: none;
    			}
    		</style>
    	</head>
    	<body>
    		<input type="button" value="显示效果" id="btn" />
    		<p>人走茶凉，正常现象，人走茶没凉，世态炎凉</p>
    		<script src="js/jquery-1.12.4.js"></script>
    		<script type="text/javascript">
    			//在jQuery中，如果一个对象调用了一个方法，那么这个方法是设置的方式，一般调用
    			//后返回来的都是当前调用该方法的对象，具体的是不是这个对象，最好的方式，就是验证一下
    			
    			//页面加载事件
    			$(function(){
    				//点击按钮，设置p的内容，样式
    				$("#btn").click(function(){
    					//链式编程
    //					var txt = $("p").text("这是一个p");
    //					console.log(txt);//返回的还是$("p")，所以可以继续链式
    					$("p").text("这是一个p").css({"fontSize":"30px","color":"red",
    					"fontFamily":"全新硬笔行书简"}).mouseenter(function(){
    						$(this).css("background-color","blue");
    					}).mouseleave(function(){
    						$(this).css("backgroundColor","green")
    					}).click(function(){
    						alert("我被点了");
    					});
    				});
    			});
    		</script>
    	</body>
    </html>
    联系我
    扫一扫，添加JzhBetter
    • 微信扫一扫
    • qq扫一扫