jQuery

一、jQuery简介

1. 特点


	1. 兼容所有浏览器
	
	2. 丰富的DOM选择器
	
	3. 链式表达式
	
	4. Ajax操作支持



2. 语法

	1. jQuery语法
	
	$(选择器).action(操作)
	
	2. 与JS对比

	JS：

		var pEle = document.getElementsByTagName('p')[0]
		
		pEle.style.color = 'red'
		
	jQuery：

		$('p').css('color', 'green')

二、选择器与筛选器

1. 基本选择器

	1. 标签选择器
	
		$('span')
	
	2. 类选择器
	
		$('.c1')
	
	3. id选择器
	
		$('#id')
	
	4. 组合选择器
	
		$('#d1, span');
	
	5. 配合使用
	
		$('div.c1')    // 找到有c1 class类的div标签
	

2. 层级选择器

	1. 后代选择器
	
		$('x y');
	
	2. 儿子选择器
	
	
		$('x > y')
	
	3. 毗邻选择器
	
		$('x + y')
	
	4. 兄弟选择器
	
		$('x ~ y')
	

3. 属性选择器

	1. 找到含有‘username’属性的标签
	
		$('[username]')
	
	2. 找到含有username属性，且值为‘byx’的标签
	
		$('[username="byx"]')
	
	3. 找到在span标签下，username=byx的标签
	
		$('span[username="byx"]')
	
	
4. 基本筛选器

	1. 找第一个(:first)
	
		$('ul li:first')
	
	2. 找最后一个（:last)
	
		$('ul li:last')
	
	3. 匹配索引等于index的那个元素
	
		$('ul li:eq(2)')
	
	4. 匹配索引为偶数的元素，从0开始计数
	
		$('ul li:even')
	
	5. 匹配索引为奇数的元素，从0开始计数
	
		$('ul li:odd')
	
	6. 匹配所有大于给定索引值的元素
	
		$('ul li:gt(3)')
	
	7. 匹配所有小于给定索引值的元素
	
		$('ul li:lt(3)')
	
	8. 移除所有满足not条件的标签
	
		$('div span:not('.c1')')
	
	9. 选取所有包含一个或多个标签在内的标签（从后代元素中找）

		$('div:has('.c1')')
	

5. 表单筛选器

	1. 找到所有的checkbox
	
		$(":checkbox")
	
	2. 找到可用的input标签
	
		<form>
		  <input name="email" disabled="disabled" />
		  <input name="id" />
		</form>
		
		$("input:enabled")  // 找到可用的input标签
	
	
	3. 找到被选中的option
	
		<select id="s1">
		  <option value="beijing">北京市</option>
		  <option value="shanghai">上海市</option>
		  <option selected value="guangzhou">广州市</option>
		  <option value="shenzhen">深圳市</option>
		</select>
		
		$(":selected")  // 找到所有被选中的option
	
	
	4. 注意，在使用checked查找时，会将selected找到，这是一个bug。
	

6. 筛选器方法

	1. 下一个元素
	
		$spanEle.next()
		$spanEle.nextAll()
		$spanEle.nextUntil('#d2')
	
	
	2. 上一个元素
	
		$spanEle.prev()
		$spanEle.prevAll()
		$spanEle.prevUntil('#d2')
	
	
	3. 父亲元素
	
		$("#id").parent()
		$("#id").parent().parent()
		$("#id").parents()  // 查找当前元素的所有的父辈元素
		$("#id").parentsUntil('html') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
	
	
	4. 儿子和兄弟元素
	
		$("#id").children();// 儿子们
		$("#id").siblings();// 兄弟们
	
	
	5. 查找div内部的span
	
		$('div').find('span')
	
	
	6. 补充

		.first() // 获取匹配的第一个元素
		.last() // 获取匹配的最后一个元素
		.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
		.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
		.eq() // 索引值等于指定值的元素

三、jQuery操作标签

1. CSS样式操作

	1. 添加指定的CSS类名
	
		$('div').addclass（'bg_red'）
	
	2. 移除指定的CSS类名
	
		$('div').removeClass（'bg_red'）
	
	3. 判断是否有指定类名
	
		$('div').hasClass（'bg_red'）
	
	4. 切换CSS类名，如果有就移除，没有就添加
	
		$('div').toggleClass（'bg_red'）
	
	5. 设置CSS属性
	
		$('p').css('color', 'red')
	
	P.S:
	
		JS
			.style.color
			
		jQuery
			.css('color', 'red')
				
	P.P.S
	
		搭骨架用HTML，调样式用CSS，加动态效果用JS，让三种语言各司其职。
	

2. 位置操作

	1. 获取匹配元素在当前窗口的相对偏移或设置元素位置
	
		offset（）
	
	2. 获取匹配元素相对父元素的偏移
	
		position（）
	
	3. 获取匹配元素相对滚动条顶部的偏移，括号内可以传数字进行移动
	
		$(window).scrollTop（）
	
	4. 获取匹配元素相对滚动条左侧的偏移，括号内可以传数字进行移动
	
		$(window).scrollLeft（）
	

3. 尺寸

	1. 文本高
	
		$('p').height（）
	
	2. 文本宽
	
		$('p').width（）
	
	3. 文本+padding高
	
		$('p').innerHeight（）
	
	4. 文本+padding宽
	
		$('p').innerWidth（）
	
	5. 文本+padding+边框高
	
		$('p').outerHeight
	
	6. 文本+padding+边框宽

		$('p').outerweight
	

4. 文本操作

	1. 获取标签内部文本值，可以在括号内传参数设置值。
	
		$('div').text()
	
	2. 获取标签内部的HTML代码，可以在括号内传参数设置值。
	
		$('div').html()
	
	3. 获取标签内用户输入的值，可以在括号内加参数设置值。

		$('div').val()

	
	P.S
	
		JS
			
			innerText()
			innerHtml()
			value
	

5. 属性操作

	1. 用于id等或自定义属性：
	
		1. 查找第一个匹配到的属性名称
		
			$('p').attr('id')
		
		2. 为匹配到的属性设置一个属性值
		
			$('p').attr('id', 'byx')
		
		3. 为匹配到的属性设置多个值
		
			$('p').attr({'id': 'byx', 'password': '123'})
		
		4. 移除属性
		
			$('p').removeAttr('id')
		
	
	2. 用于checkbox和radio，可以动态识别选择。
	
		1. 获取属性，识别标签是否被选中，返回布尔值。
		
			$('input').first().prop('checked')
		
		2. 修改属性
		
			$('input').first().prop('checked'，false)
		
		3. 移除属性
	
			$('input').first().removeProp('id')
	
	
6. 文档处理

	1. 添加到指定元素内部的后面
	
		$(A).append(B)// 把B追加到A
		$(A).appendTo(B)// 把A追加到B
	
	
	2. 添加到指定元素内部的前面
	
		$(A).prepend(B)// 把B前置到A
		$(A).prependTo(B)// 把A前置到B
	
	
	3. 添加到指定元素外部的后面
	
		$(A).after(B)// 把B放到A的后面
		$(A).insertAfter(B)// 把A放到B的后面
	
	
	4. 添加到指定元素外部的前面
	
		$(A).before(B)// 把B放到A的前面
		$(A).insertBefore(B)// 把A放到B的前面
	
	
	5. 移除和清空元素
	
		remove()// 从DOM中删除所有匹配的元素。
		empty()// 删除匹配的元素集合中所有的子节点。
	
	
	6. 替换
	
		replaceWith()
		replaceAll()
	
	
	7. 克隆

		clone()// 参数
		
		默认不克隆事件，除非在括号中添加True。

四、jQuery事件

1. 常用事件

	click(function(){...})
	hover(function(){...})
	blur(function(){...})
	focus(function(){...})
	change(function(){...})
	keyup(function(){...})


2. jQuery绑定事件的语法

	1. 方式一
	
		$(选择器).事件名(
			function() {
		        // 事件代码
		})
	
	
	2. 方式二

		$(选择器).on('事件名'，function() {
		        // 事件代码
		})
	

	P.S
	
		JS
		
		XXXEle.on+事件名 = function() {
		        // 事件代码
		｝
	

3. 移除事件

	$(选择器).off('事件名'，function() {
	        // 事件代码
	})


4. 阻止后续事件

	1. 方式一
		
		事件代码后加上return false
		
	2. 方式二
	
		事件代码后加上e.preventDefault();
		

5. 事件冒泡

	1. 定义
	
		子标签事件触发后，会继续触发父标签事件
	
	2. 控制事件冒泡
	
		e.stopPropagation
	
		<!DOCTYPE html>
		<html lang="en">
		<head>
		    <meta charset="UTF-8">
		    <title>阻止事件冒泡</title>
		</head>
		<body>
		<div>
		    <p>
		        <span>点我</span>
		    </p>
		</div>
		<script src="jquery-3.3.1.min.js"></script>
		<script>
		    $("span").click(function (e) {
		        alert("span");
		        e.stopPropagation();
		    });
		
		    $("p").click(function () {
		        alert("p");
		    });
		    $("div").click(function () {
		        alert("div");
		    })
		</script>
		</body>
		</html>
	
	
6. 事件委托

	1. 定义
	
		将特定的事件，委托给标签内部指定的元素（标签既可以是提前写的，也可以是后期动态创建的）
	
	2. 示例
	
		只要是body内的button按钮，都具有alert事件
	
		$('body').on('click', 'button', function() {
		        alert(123)
		})



7. 示例

	1. hover事件示例
	
		<!DOCTYPE html>
		<html lang="en">
		<head>
		    <meta charset="UTF-8">
		    <title>Title</title>
		</head>
		<body>
		<p>苍茫的天涯是我的哎，绵绵的青山脚下一片海！</p>
		
		<script src="jQuery-3.3.1.js">
		</script>
		<script>
		    $('p').hover(
		        function () {
		            alert('来啦，老弟')
		        },
		        function () {
		            alert('慢走哦～')
		        }
		    )
		</script>
		</body>
		</html>
	
	
	2. 实时监听input输入值变化示例
	
		<!DOCTYPE html>
		<html lang="en">
		<head>
		  <meta charset="UTF-8">
		  <meta http-equiv="x-ua-compatible" content="IE=edge">
		  <meta name="viewport" content="width=device-width, initial-scale=1">
		  <title>实时监听input输入值变化</title>
		</head>
		<body>
		<input type="text" id="i1">
		
		<script src="jquery-3.2.1.min.js"></script>
		<script>
		  /*
		  * oninput是HTML5的标准事件
		  * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化，
		  * 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发
		  * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代
		  * 使用jQuery库的话直接使用on同时绑定这两个事件即可。
		  * */
		  $("#i1").on("input propertychange", function () {
		    alert($(this).val());
		  })
		</script>
		</body>
		</html>

五、jQuery动画效果

1. 展示与隐藏

	1. 5秒展开图片到原本大小
	
		$('div').show(5000)
	
	2. 5秒缩小图片
	
		$('div').hide(5000)


2. 滑动

	1. 3秒向上卷起图片
	
		$('div').slideUp(3000)
	
	2. 3秒向下展开图片
	
		$('div').slideDown(3000)
	


3. 淡入淡出
	
	1. 4秒图片淡出
	
		$('div').fadeout(4000)
	
	2. 4秒图片淡入
	
		$('div').fadein(4000)
	
	3. 4秒图片淡出到透明度为0.4
	
		$('div').fadeto(4000, 0.4)
	

4. 示例：点赞效果

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	  <meta charset="UTF-8">
	  <meta http-equiv="x-ua-compatible" content="IE=edge">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <title>点赞动画示例</title>
	  <style>
	    div {
	      position: relative;
	      display: inline-block;
	    }
	    div>i {
	      display: inline-block;
	      color: red;
	      position: absolute;
	      right: -16px;
	      top: -5px;
	      opacity: 1;
	    }
	  </style>
	</head>
	<body>
	
	<div id="d1">点赞</div>
	<script src="jquery-3.2.1.min.js"></script>
	<script>
	  $("#d1").on("click", function () {
	    var newI = document.createElement("i");
	    newI.innerText = "+1";
	    $(this).append(newI);
	    $(this).children("i").animate({
	      opacity: 0
	    }, 1000)
	  })
	</script>
	</body>
	</html>

六、jQuery补充知识点

1. each

	1. 作用
	
		遍历一个jQuery对象，为每个匹配元素执行一个函数，常用来代替for循环。
	
	2. 用法一
	
		创建3个p标签，内部1到3
		
		$.each($('p'), function(index, obj) {
		        console.log(index, obj, this)
		})
		
		输出
		
		0    <p>1</p>    <p>1</p>
		1    <p>2</p>    <p>2</p>
		2    <p>3</p>    <p>3</p>
	
	
	3. 用法二
	
		$('p').each(function(index, obj) {
			console.log(index, obj)
		})
		        
		输出
		        
		0    <p>1</p>    <p>1</p>
		1    <p>2</p>    <p>2</p>
		2    <p>3</p>    <p>3</p>
	
	
	4. 终止循环
	
		return false;


2. .data()

	1. 作用
	
		在标签存储信息，并无法在前端查看到。取值时，键不存在也不会报错
	
	2. 存值
	
		$('p').data('username', 'byx')
	
	3. 取值
	
		$('p').first().data('username')
	
	4. 删除值
	
		$('p').removeData('username')