JQuery使用及基础原理解析相关笔记（一）
1.jquery
◆很强大，但是很臃肿，需要自己封装一个jquery，要用到jqery中哪些方法，就把原来jquery中的方法拿出来。
◆jquery有两大特点：链式编程、隐式迭代（遍历）。
2.原生js的入口函数与jquery的入口函数
◆原生js的入口函数：
window.onload = function () {}是页面文档和页面资源都加载完毕之后开始执行函数里面的代码，
document.onready =function () {}是页面文档加载完毕之后开始执行函数里面的代码(但是这个原生的js的入口函数是jquery脚本库扩展出来的事件，只有在引入了jquery脚本库的时候才能够使用document.onready，没有引入脚本库的时候document对象是没有这个事件的)，document.onready 比 window.onload要快一点，因为图片资源还没有显示，document.onready里的代码就执行了，window.onload是页面所有资源都加载完毕才执行的，window对象没有onready。
◆jquery的入口函数：
$(document).ready(function () {});
$(function () {});
$(window).ready(function () {});$(window).load(function () {});这种方式和
window.οnlοad=function(){}一样，都是页面文档和页面资源都加载完毕之后开始执行函数里面的代码。
★
JQuery的入口函数与原生js的入口函数
3.Query与$的区别：其实它们是一样的，都是一个函数名，并且它们完全相等，jQuery===$。
JQuery与$的区别（其实他们是一样的）
4.jQuery中的dom对象与原生js中的dom对象的区别
◆jQuery的dom对象是对js的dom对象的封装
◆jQuery无论是通过什么方式获取的dom对象都是伪数组，伪数组中装的成员就是原生js的dom对象。
◆不光是将原生js的dom对象封装到数组中，并且还给这个数组增加了很多功能方法，也就是给原来的js的dom对象穿上了一层带有功能的皮肤，虽然原生的js的dom对象也可以自己封装这些功能方法，但是兼容性没有jQuery的那么好。
★模拟jQuery对象操作css样式的功能方法
Object.prototype.css = function (json) {
var cssArr = [];
for (var key in json) {
cssArr.push(key + ":" + json[key]);
}
this.style.cssText = cssArr.join(";");
}
box.css({width: "200px", height: "200px", "background-color": "#f00"});★jquery与js操作样式的方式
jquery与js操作样式的方式
◆jQuery中的Dom对象与js中的Dom对象的区别和联系
jQuery中的Dom对象与js中的Dom对象的区别和联系
5.原生的js的dom对象可以和jQuery的dom对象相互转换
◆js的dom对象转换为jQuery的dom对象：$(js的dom对象)或jQuery(js的dom对象)。
◆jQuery的dom对象转换为js的dom对象：jQuery的dom对象[index]或jQuery的dom对象.get(index)，就可以获取jQuery的dom对象的伪数组中的一个dom对象，但是如果get方法中不写索引就可以获取jQuery的dom对象的伪数组中的所有的dom对象，jQuery的dom对象.get()获取一个正常的原生js的dom对象的数组，不再是伪装数组。
◆
jQuery的dom对象与js的dom对象之间相互转换
6.jQuery中的伪数组是怎么实现的，清空原本数组中的原型（所有功能方法），添加自己新增的功能方法，添加索引为字符串的成员context
jQuery对象是这样的伪数组
7.简单使用jQuery：隔行变色、页面开关灯
◆隔行变色
使用jQuery进行隔行变色
- 使用jQuery进行隔行变色
- 使用jQuery进行隔行变色
- 使用jQuery进行隔行变色
- 使用jQuery进行隔行变色
- 使用jQuery进行隔行变色
- 使用jQuery进行隔行变色
- 使用jQuery进行隔行变色
- 使用jQuery进行隔行变色
- 使用jQuery进行隔行变色
- 使用jQuery进行隔行变色
◆页面开关灯
使用jQuery进行页面开关灯
8.jQuery的基本选择器：
◆无论什么选择器，返回的都是封装着原生的dom对象的伪数组。
◆$(id选择器)，$(element选择器)，$(class选择器)，$(*通配符选择器)，$(选择器1，选择器2，选择器3，选择器4)....$(css选择器)，其实在css中使用的选择器，都可以放到$()中作为选择器
$("li")
$(".li")
$("*")
$("li,.li,#li,*")
基本选择器
9.jQuery的层级选择器：
◆$(祖 子)后代选择器，$(父>子)子代选择器，$(前+紧接着的后)后兄弟选择器，$(前~所有的后)后同辈选择器，其实在css中使用的选择器，都可以放到$()中作为选择器
$("ul li")
$("ul>li")
$("#prv+ol")
$("#prv~li")
层级选择器
10.jQuery的基本过滤选择器
◆在基本选择器的基础上进行过滤操作：如$("li:first");，找到所有li后直接找到第一个li。
:first过滤第一个、
:not(selector)过滤不包含selector的、
:even过滤索引为偶数的、
:odd过滤索引为奇数的、
:eq(index)过滤索引等于index的、
:gt(index)过滤索引大于index的、
:last过滤最后一个、
:lt(index)过滤索引小于index的、
:header过滤h1-h6、
:animated过滤正在执行动画的、
:focus过滤已经获取焦点。11.jQuery的筛选选择器
◆ 筛选过滤选择器操作：如$("li").eq(0);和$("li:even").eq(0);，前者表示找到所有li后过滤第一个li，后者表示找到所有索引为偶数的li后过滤第一个。
// eq(index | -index) //等于索引的元素
// first() //第一个元素
// last() //最后一个元素
// hasClass(class) //是否包含类
// filter(expr | obj | ele | fn)
// is(expr | obj | ele | fn)
// map(callback)
// has(expr | ele)
// not(expr | ele | fn) 是否不包含
// slice(start, [end]) ◆筛选查找选择器操作：如$("li").eq(0).next();或者$("li:first").next();，都是找到第一个li然后在此基础上查找下一个。
// children([expr]) //找子代
// closest(e | o | e)1.7 *
// find(e | o | e)//从jquery对象的后代中查找必须制定参数，如果不指定获取不到元素
// next([expr])//下一个
// nextall([expr])//下面的全部
// nextUntil([e | e][, f])
// offsetParent() //带有定位的父节点
// parent([expr]) //父节点
// parents([expr])
// parentsUntil([e | e][, f])
// prev([expr]) //上一个
// prevall([expr]) //上面的全部
// prevUntil([e | e][, f])
// siblings([expr]) //所有兄弟 除了自己
12.使用JQuery的选择器来DIY动画效果：下拉菜单、隔行变色、高亮显示戏曲牌、手风琴折叠面板、服饰广告
◆下拉菜单
使用jQuery的选择器制作下拉菜单
◆隔行变色
使用jQuery的选择器制作-隔行变色
- 使用jQuery的选择器制作-隔行变色
- 使用jQuery的选择器制作-隔行变色
- 使用jQuery的选择器制作-隔行变色
- 使用jQuery的选择器制作-隔行变色
- 使用jQuery的选择器制作-隔行变色
◆高亮显示戏曲牌
使用jQuery的选择器制作-高亮显示戏曲牌
◆手风琴折叠面板
使用jQuery的选择器制作-手风琴折叠面板
◆服饰广告
使用jQuery的选择器制作-淘宝精品服饰广告
