jQuery入门

一、3W1H

1.What?是什么？

1.1、JavaScript库：封装了很多JS代码
1.2、JavaScript库：jQuery(90%)、Ext JS
1.3、官方地址：http://jquery.com/

2、Why?为什么要学习？

2.1、查看官方jQueryLOGO：write less，do more
2.2、为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件

3、Where?哪些情况下用？

3.1、中大型网站开发
3.2、一些前端框架的基础，比如EasyUI

4、How?怎么用？

4.1、工具：HBuilder

4.2、使用jQuery步骤

1.下载jQuery库
下载版本：
开发版本：jquery-3.3.1.js
生产版本：jquery-3.3.1.min.js
2.引入：将js文件复制到项目中
3.使用

二、jQuery选择器

1.基本选择器

1.1常用选择器以及使用方法：

ID选择器：#ID

// 1)、id选择器：将div标签里面id为sa的span标签的背景设为黄色。
	                $("#sa").css({"background":"yellow"});
	                
//类选择器：.class

// 2)、类选择器：将div标签里面class的值为sb的文本框标签的背景设为黄色。
					$(".sb").css({"background":"yellow"});

//元素选择器:element

// 3)、标签选择器：将div里面input标签的背景设为黄色。
					$("input").css({"background":"yellow"});

//通配符：*


// 4)、*选择器：将整个页面所有标签的背景设为绿色。
					$("*").css({"background":"green"});




// 5)、,选择器：将id为sa的div里面所有input、span标签的背景设为黄色。
					$("input,span").css({"background":"yellow"});

多个选择器(并集)：selector1，selector2
多个选择器(交集)：selector1selector2

2.层次选择器

查找所有元素，查询子元素

$(function(){
				// 1)、空格选择器：将div标签里面的所有input元素背景设为绿色。
				$("div input").css({"background":"green"});
				
				// 2)、>选择器：将div里面的input子元素背景设为绿色。
				$("div>input").css({"background":"green"});
				
				// 3)、+选择器：将紧跟在div元素后面的第一个input元素背景设为绿色。
				$("div+input").css({"background":"green"});
				
				// 4)、~选择器：将div元素之后的所有与div元素同辈的input元素背景设为绿色。
				$("div~input").css({"background":"green"});
			});
			

3.过滤选择器

参考jQuery文档
获取第一个元素:first

// 1)、:first选择器：将ul里面的第一个li背景设为绿色。
			$("ul li:first").css({"background":"green"});


//最后一个元素:last


// 2)、:last选择器：将ul里面的最后一个li背景设为蓝色。
			$("ul li:last").css({"background":"blue"});


//获取奇数元素:even


// 3)、:even选择器：将ul里面下标为偶数的li背景设为绿色。
			$("ul li:even").css({"background":"green"});


//获取偶数元素:odd


// 4)、:odd选择器：将ul里面下标为奇数的li背景设为红色。
			$("ul li:odd").css({"background":"red"});

//:lt选择器（小于）


// 5)、:lt选择器：将ul里面下标小于3的li元素的背景设为绿色。
			$("ul li:lt(3)").css({"background":"green"});

//:gt选择器（大于）


// 6)、:gt选择器：将ul里面下标大于3的li元素背景设为绿色。
			$("ul li:gt(3)").css({"background":"green"});
//:eq选择器


// 7)、:eq选择器：将table表格里面的第二行的背景设为黄色。
			$("#mytable tr").eq(1).css({"background":"yellow"});

//获取某一范围元素（:gt大于）（:lt小于）	

4.表单选择器

参考jQuery文档
获取选择单选框的值
获取选择多选框的值
获取选择下拉值