jQuery入门
基本概念：jQuery是一个快速，小型且功能丰富的JavaScript库。借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。
个人理解：jQuery是js的一个库，本质就是封装好的js函数，可以和javascript一起使用，使用jQuery可以简化开发
1、加载方式：
传统的dom编程的方式
<script>
window.onload=function(){
alert("页面加载成功");
}
</script>
jquery 的方式
<script src="lib/jquery-1.8.0.js"></script>
<script>
$(function(){// '$' 可以换成 'jQuery'
alert("页面加载成功,jquery");
});
</script>
二者的区别：
1) window.onload 的方式,在页面完全加载成功(比如图片,框架集中的网页等)以后触发，而jquery的 $() 事件,是在页加载完以后就触发,不用等图片等相关资源加载完，也就是说,jquery的 $() 事件比较早。
2) window.onload,不可以迭加, 如果有多个,最后只会执行最后一个,而jquery的可以迭加
2、jquery中的遍历
1)$.map(array, fn(value,index){})array 是一个数组, fn 是一个函数 $.map 的作用就是对数组 array中的每个元素,调用 fn这个函数进行处理, 处理完以后,会返回一个新的数组
2)$.each(array, fn(index,value){})array 是一个数组, fn 是一个函数 $.each 的作用就是对数组 array 中的每个元素,调用 fn这个函数进行处理, 没有返回值
3、jquery对象和dom对象
dom 对象
就是传统的javascript中通过 dom api得到的对象
//获取dom对象
var dom1 = document.getElementById("h11");
console.log(dom1.innerText);
jquery 对象
通过jquery选择器,或用jquery包装普通的dom对象得到
//获取jquery对象
var jquery1 = $("#h11");
console.log(jquery1.text());
二者之间的转换：
1）dom对象转成jquery对象
//dom对象转成jquery对象
var jquery2 = $(dom1);
console.log(jquery2.html());
2）query对象,变成dom对象
//query对象,变成dom对象
var dom2 = jquery1.get(0);
//或者var dom2 = jquery1[0];
console.log(dom2.innerHTML);
附: 关于this
JavaScript this 关键词指的是它所属的对象。
在方法中，this 指的是所有者对象。
单独的情况下，this 指的是全局对象。
在函数中，this 指的是全局对象。
在函数中，严格模式下，this 是 undefined。
在事件中，this 指的是接收事件的元素。
4、jquery 选择器
基本 层级 定位 内容 可见性 属性 子元素 表单 表单属性
1）基本 5 个
(1) #id
(2) element
(3) class
(4) *
(5) selector1,selector12 , ...
2）层级 4 个
(1) ancestor descendant
(2) parent > child
(3) prev + next
(4) prev ~ siblings
(1)ancestor descendant
选中ancestor里面的所有 descendant 元素,不管多少层级
(2)parent > child
只选择直接子级
(3)prev + next
匹配的是prev后面的所有 next元素
(4)prev ~ siblings
选中prev的所有兄弟元素
3）定位
(1) :first //匹配找到的第一个元素
(2) :last //匹配找到的第一个元素
(3) :not(选择器) //反选(选取不符合某一组选择器的元素)
(4) :odd //奇数（下标从0开始算）
(5) :even //偶数（下标从0开始算）
(6) :eq //等于（下标从0开始算）
(7) :gt //大于（下标从0开始算）
(8) :lt //小于（下标从0开始算）
注：:gt和:lt可以一起使用
$("tr:gt(0):lt(2)").css("background","gold"); //选中的是第二,三 行
(9) :header //匹配如 h1, h2, h3之类的标题元素
(10) :animated //匹配正在做动画的元素
4）内容 4 个
(1) :contains
包含某文本元素
(2) :empty
匹配所有空元素
(3) :has(选择器)
包含某个子元素
(4) :parent
匹配含有子元素或者文本的元素, (找做父亲的元素)
5）可见性
(1) :hidden
匹配所有不可见元素 (display:none) ,包括隐含控件 (type = hidden)
(2) :visible
和上例相反
`
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test09</title>
<script src="lib/jquery-1.8.0.js"></script>
</head>
<body>
<table>
<tr>
<td style="display: none;">桃子</td><td>苹果</td>
</tr>
</table>
<button onclick="$('td:hidden').show()">显示</button><button onclick="$('td:visible').hide()">隐藏</button>
//show() jquery显示方法
//hide() jquery隐藏方法
</body>
</html>
`
6）属性 7 个
(1) [attribute=value] 匹配某个属性是某个值的元素
(2) [attribute!=value] 和上例相反
(3) [attribute$=value] 选择属性值以value结尾的
(4) [attribute^=value] 匹配以属性值 以value 开头的,正好和 $相反
(5) [attribute*=value] 匹配以属性值包含value的
(6) [selector1][selector2][selectorN] 复合的多条件属性选择器
(7) [attribute] 匹配含有这个属性的元素
7）子元素
(1) :first-child 匹配其父元素下的第一个子元素
(2) :last-child 匹配其父元素下的最后一个子元素
(3) :nth-child 匹配其父元素下的第n个子元素（(n=1,2,3,4...)）或奇偶元素
注：此选择器下标从1开始，上述:even和:odd从0开始）
:nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)
(4) :only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配 (独生子)
8）表单 11 个
(1):input 匹配所有 input, textarea, select 和 button 元素 请密切注意,它匹配 textarea,select,button
$(":input")
(2):checkbox 匹配所有复选框
$(":checkbox") = $("input[type=checkbox]")
(3):button 匹配所有按钮，但不匹配 input type="submit
$(":button")
(4):file 文件选择框
$(":file")
(5):image 所有图片
$(":image")
(6):radio 所有单选按钮
$(":radio")
(7):reset 所有重置按钮
$(":reset")
(8):password 所有密码框
$(":password")
(9):submit 所有的提交按钮
$(":submit")
(10):text 所有文本框
$(":text")
9）表单属性 4个
(1) :enabled //选中有enabled属性的元素（enabled表示任何已启用的元素。如果元素可以被激活（例如被选择、单击、输入文本等），或者能够获得焦点，那么它就是启用的。）
(2) :checked //选中有checked属性的元素（checked表示在页面加载时应该预先选定 input 元素）
(3) :disabled //选中有disabled属性的元素（disabled表示元素不可变、不能聚焦或与表单一同提交
(4) :selected //选中有selected属性的元素（selected表示在页面加载时应预先选择一个选项。预先选择的选项将首先显示在下拉列表中）
5、jquery常用方法
1）节点遍历
(1) next() //选择下一个元素
(2) nextAll() //选择当元素后的所有元素
(3) siblings() //选择所有兄弟元素
2）jquery的dom节点操作
(1) 内部插入元素
append() //从后面插入
prepend() //从前面插入
appendTo() //从后面插入到元素中
prependTo() //从前面插入到元素中
注：append()和appendTo()的区别：a.append(b)是在a中插入b；a.appendTo(b)是a插入到b中去。prepend和prependTo同理
(2) 外部插入元素
before() //插入到当前元素的前面
after() //插入到当前元素的后面
这两个方法,都是添加的 "兄弟"
(3) 移除
remove()
从dom中删除所匹配的元素,但这个方法不会把匹配的元素从jquery对象中删除,这样我们将来还可以使用这些对象,但这些元素对应的数据和事件会丢失
empty()
清空元素中的子节点
detach()
从dom节点中删除匹配元素,但不会把元素从jquery对象中删除,以后还可以用,而且它绑定的数据和事件不会丢失
3）jquery中的属性操作
attr(key,value) //给某个属性传值
attr(key) //取某个属性的值
attr(properties) //给某个属性传一组值
remveAttr(key) //移除某个属性值
4）jquery中的css操作
.css(k,v) //一个个的设置css样式
.addClass(class名称); //添加一组样式
.removeClass(class名称); //移除样式
.toggleClass(class名称); //切换样式
注：removeClass() 如果传入样式名,则移除样式名对应的样式,如果不传入,则移除所有的 class 样式
5）query对文本/值的操作
//给表单元素的value 的取值或传值
val()
val(v)
//给 div ,span,td,a, li,p 之类的元素取值或传值
html()
html(v)
//给 div ,span,td,a, li,p 之类的元素取值或传值,取值的时候,不取html元素,只取文本
text()
text(v)
注：text(v)、html(v)会将 标签中的'文本和标签' 替换成 v
6）动态效果
show() 显示（可选择的参数 speed，easing，callback）
hide() 隐藏（可选择的参数 speed，easing，callback）
toggle() 显示/隐藏（可选择的参数 speed，callback，switch）
注：show()、hide()、toggle() 沿对角线消失或出现
fadeIn() 淡入（可选择的参数 speed，callback）
fadeOut() 淡出（可选择的参数 speed，callback）
slideUp() 滑动向上隐藏（可选择的参数 speed，callback）
slideDown() 滑动向下出现（可选择的参数 speed，callback）
传递的参数：
speed 显示效果的速度(可以是毫秒值、"slow"、"fast")
easing 在动画的不同点上元素的速度("swing"--开头/结尾移动慢，中间移动快、"linear"--匀速移动；默认是"swing")
callback 回调 （方法调用之后，要执行的函数）
switch 取值true 即 toggle(true) 表示只会显示元素，等同于show()；取值false 即 toggle(false) 表示只会隐藏元素，等同于hide()
牛刀小试：
案例：现在有一个数组,有十条数据 var userList= [{id:10,userName:"admin",password:"123",note:"管理员",photo:"a.jpg"},{....},{}]
要求
1）用jquery把这个数组,构造出一个表格,显示出 id, userName 两列
2）隔行变色
3）鼠标滑过行高亮
4）鼠标滑过人的信息的时候, 在鼠标边上,显示这个人的头象,和其他信息(密码,备注)
本文案例及源代码：
链接：https://pan.baidu.com/s/14Ppk6verYinQBVNXv-cxvg?pwd=5u4e
提取码：5u4e