111

一、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')