jquery笔记
javascript涉及到的相关技术点：
dom操作
document.getElementById()
document.getElementsByTagName();
事件操作
dom二级事件操作
主流浏览器
addEventListener()
removeEventListener()
IE浏览器
attachEvent()
detachEvent()
事件对象
① 主流 事件处理函数的第一个形参 divnode.onclick = function(evt){}
② IE 全局变量window.event
事件对象阻止事件流产生
主流 evt.stopPropagation()
IE evt.cancelBubble = true;
事件对象阻止浏览器默认动作
主流 evt.preventDefault()
IE evt.returnValue = false;
ajax使用
创建对象/onreadystatechange/open()/send()
jquery已经对上述等等许多内容做了封装
使用jquery的时候可以明显减少js代码的编写量，浏览器兼容问题也给做了相应的处理
例如使用jquery：
$.get(url,function(msg){}); //触发ajax请求
$('#apple'); //获得元素节点
$('div') //获得元素节点
-------------------------------------------------------------------------------
1. 什么是jquery
其是对javascript封装的一个框架包
简化对javascript的操作
javascript代码：dom获得页面节点对象、ajax操作、事件操作、事件对象
jquery代码：无需考虑浏览器兼容问题、代码非常少
2. 宗旨和特点
宗旨：写得代码很少，实现很多的功能
特点：
① 语法简练、语义易懂、学习快速、丰富文档。
② jQuery 是一个轻量级的脚本，其代码非常小巧
③ jQuery 支持 CSS1~CSS3 定义的属性和选择器
④ jQuery 是跨浏览器的，它支持的浏览器包括 IE 6.0+、FF 1.5+、Safari 2.0+和 Opera 9.0+。
⑤ 能将 JavaScript (行为)脚本与 HTML (结构)源代码完全分离，便于后期编辑和维护。
插件丰富，除了 jQuery 自身带有的一些特效外，可以通过插件实现更多功能
3. 出现的年代
jQuery 是继 Prototype 之后又一个优秀的 JavaScript 框架，由 John Resig 于 2006 年初创建， 目前最新版本为 1.11.3，官方地址为：http://jquery.com/，中文地址为 http://jquery.org.cn/。
jquery版本：
1.0.0 1.0.1 1.0.2 1.1.0 1.1.1 1.1.2 1.2.x 1.2.6 1.3.x 1.4.x 1.5.x 1.6.x 1.7.x
1.8.x 1.9.x 1.10.x 1.11.x
2.x.x (对IE6/7/8支持不好)
4. 其他相关的javascript框架包
Prototype、YUI、Extjs、bindows、JSVM(国内)、mootools、jQuery
Prototype：与面向对象的原型继承关键字prototype一致，该框架的特点是功能扩展比较容易。
YUI: yahoo user interface 雅虎用户接口，该框架可以实现各种页面布局效果。
通过标签切换到对应的内容是YUI实现效果之一
Extjs: 是目前js框架包里边最为时尚、前沿的。通过该框架包可以实现许多非常绚丽的效果。
该框架可以实现效果之一：页面不同区域进行拖拽效果。
该框架由于实现的效果非常“绚丽”、导致其“实用”价值相对略低。
jQuery：javascript+query
使用前期，jquery侧重快速找到页面上各种节点。
后期jquery丰富了事件操作、ajax操作、动画效果、DOM操作等等。
5. 简单使用
新建网页
开始学习jquery
-------------------------------------------------------------------------
三. 选择器
在页面上获得各种元素节点对象而使用的条件就是选择器。
document.getElementById()
document.getElementsByTagName();
document.getElementsByName();
1. 基本选择器
$(‘#id属性值’) ----------->document.getElementById()
$(‘tag标签名称’)----------->document.getElementsByTagName();
$(‘.class属性值’) class属性值选择器
$(‘*’) 通配符选择器
$(‘s1,s2,s3’)联合选择器
5种基本选择器的使用：
新建网页
基本选择器(灵感来之css样式选择器)
-------------------------------------------------------------------------------------
2. 层次选择器
2.1 $(s1 s2) [父子]
派生选择器：在s1内部获得全部的s2节点(不考虑层次)
$(“div span”); 在div内部获得span节点
2.2 $(s1 > s2) [父子]
直接子元素选择器: 在s1内部获得子元素节点s2
$(‘div > span’); //在div内部获得子元素span节点
2.3 $(s1 + s2) [兄弟]
直接兄弟选择器：在s1后边获得紧紧挨着的第一个兄弟关系的s2节点
$(‘div + span’) //在div后边获得紧紧挨着的第一个兄弟关系的span节点
2.4 $(s1 ~ s2) [兄弟]
后续全部兄弟关系节点选择器：在s1后边获得全部兄弟关系的s2节点
$(‘div ~ span) //获得div后边全部兄弟关系的span节点
层次选择器的具体使用：
新建网页
层次选择器
刘备
阿斗
关羽
吕布
貂蝉
董卓
周瑜
黄盖
孙权
------------------------------------------------------------------------------------------
3. 并且(过滤)选择器
3.1 :first
用法: $(”tr:first”) ; 单个元素的组成的集合
匹配找到的第一个元素
3.2 :last
匹配找到的最后一个元素
3.3 :not(selector)
去除所有与给定选择器匹配的元素
3.4 :even
匹配所有索引值为偶数的元素，从 0 开始计数
3.5 :odd
匹配所有索引值为奇数的元素，从 0 开始计数
3.6 :eq(index)
匹配一个给定索引值的元素，从 0 开始计数
3.7 :gt(index)
匹配所有大于给定索引值的元素，从 0 开始计数
3.8 :lt(index)
匹配所有小于给定索引值的元素，从 0 开始计数
3.9 :header
匹配如 h1, h2, h3之类的标题元素
----------------------------------------------------
3.1 基本用法
并且选择器的基本使用：
新建网页
并且选择器
- 刘备
- 关羽
- 张飞
- 赵云
- 孙权
- 小乔
- 周瑜
- 黄盖
- 大乔
-------------------------------------------------------------
3.2 复杂用法
注意：
① 并且选择器可以单独使用
② 各种选择器都可以构造“并且”关系
③ 并且关系的选择器可以使用多个，每个选择器使用前，已经获得节点的下标要“归位”(归零)
④ 多个并且关系的选择器，没有前后顺序要求，但是要避免产生“歧义”
新建网页
并且选择器1
并且选择器2
并且选择器3
并且选择器4
- 刘备
- 关羽
- 张飞
- 赵云
- 孙权
- 小乔
- 周瑜
- 黄盖
- 大乔
-------------------------------------------------------------------
4. 内容过滤选择器
4.1 :contains(内容)
包含内容选择器，获得的节点内部必须包含指定的内容
$(‘div:contains(beijing)’)
I like beijing //标签不构成影响
xiaoming like shanghai
4.2 :empty
获得空元素(内部没有任何元素/文本(空) )节点对象
$(‘div:empty’)
I like beijing
hello
![]()
4.3 :has(选择器)
节点内部必须包含指定选择器对应的元素
$(‘div:has(#apple)’)
4.4 :parent
寻找的节点必须作为父元素节点存在
$(‘div:parent’)
sun
内容过滤选择器的具体使用：
新建网页
内容过滤选择器
I like beijing
xiaoming like shanghai
sun
hello
--------------------------------------------------------------------------
5. 表单域选中选择器
复选框、单选按钮、下拉列表
$(:checked)复选框、单选按钮 选中选择器
$(:selected) 下拉列表 选中选择器
获得复选框、单选按钮、下拉列表的选中元素节点：
新建网页
表单域选中选择器
爱好：
篮球
足球
排球
棒球
性别：
男
女
保密
城市：
---------------------------------------------------------------------
总结：
1. 各种选择器
a) 基本选择器 $(#id) $(.class) $(tag) $(*) $(s1,s2,s3)
b) 层次选择器
$(s1 s2)
$(s1 > s2)
$(s1 + s2)
$(s1 ~ s2)
c) 并且选择器
:first :last
:gt(n) :lt(n) :eq(n)
:even :odd
$(s1s2s3) :[并且]节点要符合s1/s2/s3全部的条件
$(s1,s2,s3):[联合] 节点符合s1、s2、s3其中一个条件即可
d) 内容过滤选择器
:contains(txt)
:empty
:has(selector)
:parent
e) 表单域选中选择器
：checked
：selected
----------------------------------------------------------------------------------
四. 属性操作
itnode.属性名称
itnode.属性名称= 值;
itnode.getAttribute(属性名称);
itnode.setAttribute(属性名称，值);
jquery方式操作属性(attribute)：
$().attr(属性名称); //获得属性信息值
$().attr(属性名称，值); //设置属性的信息
$().removeAttr(属性名称); //删除属性
$().attr(json对象); //同时为多个属性设置信息值，json对象的键值对就是名称和值
$().attr(属性名称，fn); //通过fn函数执行的return返回值对属性进行赋值
属性值的获取和设置操作：
新建网页
属性操作
--------------------------------------------------------------------------------------------
五. 快捷操作
1. class属性值操作
$().attr(‘class’,值);
$().attr(‘class’);
$().removeAttr(‘class属性’); //删除class的属性
class具体快捷操作方法：
$().addClass(class属性值); //给class属性追加信息值
$().removeClass(class属性值); //删除class属性中的某个信息值
$().toggleClass(class属性值); //开关效果，信息值有就删除，没有就添加
class属性值的“追加”和“删除”操作：
新建网页
class属性快捷操作
Today we are studying jQuery
--------------------------------------------------------------------------
2. 标签包含内容操作
helloworld
javascript操作：
dvnode.innerHTML; 获得div包含的信息
dvnode.innerHTML = XXX； 设置div包含的内容
(innerHTML不是w3c标准技术，许多浏览器对其有支持而已)
jquery操作：
$().html(); //获得节点包含的信息
$().html(信息); //设置节点包含的内容
$().text(); //获得节点包含的“文本字符串信息”内容
$().text(信息); //设置节点包含的内容(有html标签就把“><”符号变为符号实体)
html()和text()方法的使用：
新建网页
标签包含内容操作
Today we are studying jQuery
-----------------------------------------------------------------------------------
3. css样式操作
$().css(name，value); //设置
$().css(name); //获取
$().css(json对象); //同时修改多个css样式
3.1 css()样式操作特点：
① 样式获取，jquery可以获取 行内、内部、外部的样式。
dom方式只能获得行内样式
② 获取复合属性样式 需要拆分为"具体样式"才可以操作
(有的浏览器是可以获得复合属性信息的，例如chrome)
例如： background 需要拆分为 background-color background-image 等进行操作
border： border-left-style border-left-width border-left-color 等
margin： margin-left margin-top 等
③ 样式的设置，会被设置为“行内样式”
有则修改，无则添加
(复合属性样式可以直接进行设置操作)
获取div的各个样式信息：
给div设置一些css样式信息：
通过一个json对象批量修改样式信息：
新建网页
css样式操作
Today we are studying jQuery
---------------------------------------------------------------------------------
4. value属性值快捷操作
$().attr(‘value’);
$().attr(‘value’,信息值);
快捷操作：
$().val(); //获得value属性值
$().val(信息值); //设置value属性的值
该val()方法在 复选框、单选按钮、下拉列表 的使用有凸出表现。
4.1 复选框操作
① 获得被选中复选框的value属性值
② 设置默认情况下哪个复选框被选中
获取被选中复选框value值的逻辑：
通过val()方法可以非常方便地设置哪个复选框选中：
新建网页
复选框操作
爱好：
篮球
足球
排球
棒球
-----------------------------------------------------------------------------------
4.2 下拉列表操作
下拉列表获得选中项目value值，和 设置默认选中项目操作：
新建网页
下拉列表操作
曾经旅游过的城市：
-------------------------------------------------------------------------------
4.3 单选按钮操作
获得选中项目的value值 和 设置默认选中项目操作：
新建网页
单选按钮操作
性别：
男
女
保密
-------------------------------------------------------------------------------
5. 复选框操作
全选、反选、全不选
$().attr(‘checked’,true); //设置复选框选中
$().attr(‘checked’,false); //取消复选框选中
$().attr(‘checked’); //判断复选框选中情况，返回布尔值
复选框全选、全不选、反选的实现逻辑：
新建网页
复选框操作
爱好：
篮球
足球
排球
棒球
----------------------------------------------------------------------------------
总结:
1. 属性操作
$().attr(name)
$().attr(name,value)
$().removeAttr(name)
$().attr(json对象);
$().attr(name,fn)
自定义属性 和 w3c规定的 都可以操作
2. 快捷操作
a) class属性值快捷操作
addClass() //给class属性“追加”信息值
removeClass() //给class属性“删除”信息值
toggleClass() //开关效果
b) 标签包含内容
html()
text()
c) val() value属性快捷操作
val() ----- attr(‘value’)
val(内容)----- attr(‘value’,值);
复选框、单选框、下拉列表.val([元素值，元素值，元素值])
d) 复选框选中、不选中
复选框.attr(‘checked’,true/false)
复选框.attr(‘checked’)
------------------------------------------------------------------------------
一．昨天内容回顾
1. 各种选择器使用
a) 基本 $(#id) $(.class) $(标签名称) $(*) $(s1,s2,s3)
b) 层次
$(s1 s2) $(s1 > s2)
$(s1 + s2) $(s1 ~ s2)
c) 并且
:first :last
:eq(n) :gt(n) :lt(n)
:odd :even
普通选择器也可以构成并且关系
$(s1s2s3s4) 获得的节点要同时满足s1/s2/s3/s4四个条件
在没有歧义的情况下各个并且选择器没有前后顺序要求
d) 内容过滤
:contains(text) :empty
:has(selector) :parent
e) 表单域选中
复选框、单选按钮 :checked
下拉列表option标签 :selected
2. 属性操作
$().attr(name)
$().attr(name,value)
$().attr(json对象)
$().removeAttr(name)
$().attr(name,function)
3. 快捷操作
a) class属性
addClass() removeClass() toggleClass()
b) 标签包含内容
html([text]) text([txt])
c) css样式操作
$().css(name) $().css(name,value) $().css(json对象)
d) val()方法
对value属性操作
$().val()
$().val(text)
$(复选框/下拉列表/单选按钮).val([数组])
$(下拉列表).val(); //获得选中下拉列表项目的value值
e) 复选框选中设置
$().attr(‘checked’,true/false); $().attr(‘checked’)
------------------------------------------------------------------
二．作业
1. 使用“并且选择器”实现下图效果：
新建网页
表格隔行换色
序号
名称
价格
数量
1
apple
6100
13
2
nokia
2300
15
3
htc
2500
28
4
heimei
3100
15
5
samsung
4600
41
------------------------------------------------------------------------
2. 制作图片放大、缩小效果(图片等比例缩放效果)
新建网页
图片放大缩小
-------------------------------------------------------------------
三. $符号的由来
$(‘div’) $(‘.apple’) $(‘*’) $(’#id属性值‘)等等。
选择器使用的过程就是函数调用过程。
$符号就是一个函数，函数名称为”$”符号而已。也可以使用“jQuery”符号。
$符号 就是一个函数，同时其也是一个全局变量，除此之外还可以使用jQuery符号，它们互为别名。
---------------------------------------------------------------------------------------
四. jquery对象 与 dom对象关系
jquery对象：$(‘li’) $(‘.apple’) $(‘#one’)
等选择器使用返回的信息就是对象，
称为jquery对象
dom对象： document.getElementById()
document.getElementsByTagName();
1. 互调对方的成员
jquery对象 和 dom对象 不能随便调用对方的成员：
2. jquery对象封装dom对象
dom对象 就是jquery对象 的数组组成部分。
jquery对象 对 document.getElementById()方法的封装：
3. jquery对象 和 dom对象 的转化
3.1 jquery对象--》dom对象
$()[下标]
jquery对象变为dom对象之后可以调用dom对象的成员：
3.2 dom对象--》jquery对象
$(dom对象)
dom对象变为jquery对象才可以调用对方方法：
新建网页
图片放大缩小
This is Tuesday
-----------------------------------------------------------------------
五. jQuery框架对象分析
jQuery框架对象类型：jquery对象 和 $对象
① jquery对象(普通对象)：就是各种选择器创建出来的对象 $(div)$(.class) $(#id)
② $对象就是”函数对象” $.get()
1. jquery对象
$(‘#apple’)------> 24行 new jQuery.fn.init()
以上jquery对象 可以调用许多成员 css() attr() addClass() html() text()等等
问题：
jquery对象 可调用的各种成员 是从哪来的？
答：
jquery对象可以调用的成员共分为三类：init()、fn()、fn.extend()
其中fn.extend()复制继承占多数。
普通的jquery对象调用成员的90%以上都是jQuery.fn.extend()复制继承过来的。
jQuery.fn.init通过原型继承jQuery.fn
jQuery.fn本身有extend复制继承，可以为自己丰富许多成员：
2. $对象
$对象 也可以成为 jQuery对象。
$对象-------------->函数对象
该$对象可以调用的成员都是extend复制继承过来的
$.get() $.post() $.ajax()
$对象 的全部成员都是通过extend()复制继承过来的：
新建网页
图片放大缩小
This is Tuesday
- 哈尔滨
- 长春
- 沈阳
新建网页
图片放大缩小
This is Tuesday
- 哈尔滨
- 长春
- 沈阳
------------------------------------------------------------------------------------
六. 遍历方法
each()遍历方法：
$.each(数组/对象,function处理); //$对象 调用的
$(选择器).each(function处理); //jquery对象 调用的
each()方法对数组和对象的遍历：
each()方法对jquery对象的遍历 及内部this关键字的使用：
新建网页
each遍历方法
- 石家庄
- 济南
- 郑州
- 西安
----------------------------------------------------------------------------------------------
总结：
1. $符号的由来
2. jquery对象 和 dom对象的关系
dom对象 是 jquery对象 的数组组成部分
jquery对象------->dom对象: $()[下标]
dom对象------->jquery对象: $(dom对象)
3. jQuery框架对象分析
a) jquery对象成员的来源分析：
new jQuery.fn.init()
可以调用的成员分为三类： jQuery.fn.init()、jQuery.fn()、 jQuery.fn.extend()
b) $对象
$对象(jQuery符号对象)的成员都是extend()复制继承过来的
4. each()
------------------------------------------------------------------------------------------------
七. 加载事件
javascript的加载事件：
window.onload = function(){}
1. jquery加载事件实现
① $(document).ready(function处理);
$(document)是把document的dom对象变为jquery对象
② $().ready(function处理);
$()也是创建jquery对象，不过内部没有dom对象的组成部分
③ $(function处理); 对第一种加载的封装而已
jquery加载事件的三种体现：
新建网页
jquery加载事件实现
-----------------------------------------------------------------------
2. jquery加载事件与传统加载事件的区别
2.1 设置个数
在同一个请求里边，jquery加载事件的可以设置多个，而传统方式只能设置一个
传统方式加载事件是给onload事件属性赋值，多次赋值，后者会覆盖前者。
jquery方式加载事件是把每个加载事件都存入一个数组里边并成为数组的元素，
执行的时候就遍历该数组执行每个元素即可，因此其可以设置多个加载事件。
新建网页
----------------------------------------------------------
2.2 执行时机不一样
传统方式加载事件，是全部内容(文字、图片、样式)在浏览器显示完毕再给执行加载事件。
广告图片小叉隐藏图片实现（在加载事件里边给图片的小叉设置onclick事件）
用户名输入框有点击隐藏灰色的文字(在加载事件里边给输入框设置onclick事件，隐藏灰色文字)
jquery方式加载事件，只要全部内容(文字、图片、样式)在内存里边对应的DOM树结构绘制完毕就给执行，有可能对应的内容在浏览器里边还没有显示。
新建网页
加载事件的执行时机
新建网页
加载事件的执行时机
----------------------------------------------------------------------
3. jquery加载事件原理
jquery加载事件是对DOMContentLoaded的封装(非onload)
jquery加载事件的原理实现：
新建网页
加载事件的执行时机
------------------------------------------------------------------------
八. 普通(简单)事件操作
① dom1级事件设置
itnode.onclick = function(){}
itnode.onclick = 函数;
② dom2级事件设置
itnode.addEventListener(类型，处理，事件流);
itnode.removeEventListener(类型，处理，事件流);
node.attachEvent();
node.detachEvent();
③ jquery事件设置
$().事件类型(事件处理函数fn); //设置事件
$().事件类型(); //触发事件执行
事件类型：click、keyup、keydown、mouseover、mouseout、blur、focus等等
例如：
$(form).submit()可以使得表单进行提交。
$(‘div’).click(function(){事件触发过程this});
新建网页
简单事件操作
Today is sunshine
新建网页
简单事件操作
Today is sunshine
-------------------------------------------------------------------
九. jquery对文档的操作
通过jquery方式实现页面各种节点的追加、删除、复制、替换等操作
1. 节点追加
1.1 父子关系追加
1.1 append(content)
主动 向每个匹配的元素内部后置追加内容
1.3 prepend(content)
向每个匹配的元素内部前置追加内容
1.2 appendTo(content)
被动 把所有匹配的元素后置追加到另一个、指定的元素元素集合中
1.4 prependTo(content)
把所有匹配的元素前置追加到另一个、指定的元素集合中
新建网页
节点追加(父子)
- 刘备
- 张飞
- 赵云
- 关羽
- 孙权
- 周瑜
- 孙尚香
---------------------------------------------------------------------
1.2 兄弟关系追加
2.1 after(content)
主动 在每个匹配的元素之后插入内容
2.2 before(content)
在每个匹配的元素之前插入内容
2.3 insertAfter(content)
被动 把所有匹配的元素插入到另一个、指定的元素集合的后面
2.4 insertBefore(content)
把所有匹配的元素插入到另一个、指定的元素集合的前面
兄弟关系节点追加的具体使用：
新建网页
节点追加(兄弟)
- 刘备
- 张飞
- 赵云
- 关羽
- 孙权
- 周瑜
- 孙尚香
-----------------------------------------------------------------------------------------
2. 节点替换
$().replaceWith(); 被动替换
$().replaceAll(); 主动替换
具体使用(新旧节点都可以去替换)：
新建网页
节点替换
- 刘备
- 张飞
- 赵云
- 关羽
- 孙权
- 周瑜
- 孙尚香
---------------------------------------------------------------------------
3. 节点删除
$(父节点).empty(); //父节点清空子节点
$(匹配节点).remove(); //删除指定的节点
新建网页
节点删除
- 刘备
- 张飞
- 赵云
- 关羽
- 孙权
- 周瑜
- 孙尚香
----------------------------------------------------------------------------------
4. 复制节点
$().clone(true) //节点 和 其身上的事件都给复制
$().clone(false) //只给复制 节点 本身(包括节点内部信息)
给多个li的项目设置mouseover和mouseout事件，事件方法本身有遍历机制：
节点复制clone(true)，节点本身和其事件都给复制：
新建网页
节点复制
- 刘备
- 张飞
- 赵云
- 关羽
- 孙权
- 周瑜
- 孙尚香
----------------------------------------------------------------------
十. 属性选择器使用
1. [attribute]用法:$("div[id]");
定义：匹配包含给定属性的元素,判断拥有某个属性的元素
2. [attribute=value]用法:$("input[name=newletter]").
定义：匹配给定的属性是某个特定值的元素，判断某个元素的属性值相等
3. [attribute!=value]用法:$("input[name!='newletter']").
定义：匹配给定的属性是不包含某个特定值的元素，判断某个元素的属性值不等
4. [attribute^=value]用法:$("input[name^='news']")
定义：匹配给定的属性是以某些值开始的元素，判断某个属性值以value为开始值
5. [attribute$=value]用法:$("input[name$='letter']")
定义：匹配给定的属性是以某些值开始的元素，判断某个属性值以value为结尾值
6. [attribute*=value]用法:$("input[name*='man']")
定义：匹配给定的属性是以包含某些值的元素，判断某个属性值包含value
7. [selector1][selector2][selectorN]用法:$("input[id][name$='man']")
定义：复合属性选择器，需要同时满足多个条件时使用，多个属性值去交集
新建网页
属性选择器
---------------------------------------------------------------------------------------------------
总结：
1. 加载事件使用
$(document).ready(function)
$().ready(function);
$(function)
与传统加载事件不同：
① 设置个数
② 执行时机
jquery加载事件原理：其是对DOMContentLoaded的封装。
2. 简单事件设置
$().事件类型(function事件处理函数)
$().事件类型();
3. 文档操作
a) 节点追加
父子：append() prepend() appendTo() prependTo()
兄弟：after() before() insertAfter() insertBefore()
b) 替换和删除
替换： replaceWith()被动 replaceAll()主动
删除： empty() remove()
c) 复制
被复制节点.clone(true/false)
4. 属性选择器使用
[name] [name=value]
[name^=value] [name$=value] [name*=value]
[name!=value]
---------------------------------------------------------------------
一．昨天内容回顾
1. $符号由来
$(‘li’) $(‘#apple’)
$符号就是一个全局的函数名称，同时还可以使用jQuery符号
2. jquery对象 和 dom对象 的关系
dom对象 是 jquery对象的数组组成部分
jquery对象---->dom对象： $()[下标]
dom对象---->jquery对象： $(dom对象)
3. jquery对象 的成员来源
jquery对象->addClass()/html()/text()/css()/attr()等等许多成员可调用
jquery对象调用的成员共分3种类型：
① jQuery.fn.init()
② jQuery.fn()
③ jQuery.fn.extend()
4. each()遍历方法
$.each(数组,funciton(k下标变量,v值变量){})
$.each(对象，function(k成员名称,v成员值){})
$(选择器).each(function(k dom对象的序号下标,v 分别依次代表每个dom对象){
this分别依次代表每个dom对象
$(this) 把this的dom对象变为jquery对象
})
5. 加载事件使用及与传统加载事件不同
三种体现形式：
$(document).ready(function);
$().ready(function);
$(function);
与传统加载事件不同：
① 设置个数
② 执行时机
6. 简单事件操作
事件类型：click/dblclick/focus/blue/mouseover/mouseout/keyup/keydown
$(选择器).事件类型(function);//设置事件
$(选择器).事件类型(); //触发事件执行
7. 文档操作
a) 追加
父子关系：append() prepend() appendTo() prependTo()
兄弟关系：after() before() insertAfter() insertBefore()
b) 替换
replaceWith()被动 replaceAll()主动
c) 删除
empty() remove()
d) 复制
clone(true/false)
8. 属性选择器
[name] [name=value] [name^=value] [name$=value]
[name!=value] ([name][name!=value])
--------------------------------------------------------------------------------
二．作业
1. 利用文档节点操作实现如下效果：
新建网页
---------------------------------------------------------------------------
三．事件绑定
1. 事件绑定
jquery事件的简单操作：
$().事件类型(function事件处理);
$().事件类型();
1.1 jquery事件绑定
$().bind(事件类型，function事件处理);
$().bind(类型1 类型2 类型3，事件处理); //给许多不同类型的事件绑定同一个处理
$().bind(json对象); //同时绑定多个不同类型的事件
(事件类型：click mouseover mouseout focus blur 等等)
事件处理：有名函数、匿名函数
新建网页
事件绑定
today is rain
新建网页
事件绑定
today is rain
新建网页
事件绑定
today is rain
---------------------------------------------------------------------------
1.2 取消事件绑定
之前取消事件：
dvnode.onclick = null; //dom1级事件取消
dvnode.removeEventListener(类型，(有名)处理，事件流); //dom2级事件取消
jquery方式取消事件绑定：
① $().unbind(); //取消全部事件(无视事件类型、无视处理函数类型)
② $().unbind(事件类型); //取消指定类型的全部事件(无视处理函数类型)
③ $().unbind(事件类型，有名(事件)处理函数); //取消指定类型事件的指定处理
注意：第③种取消事件绑定，事件处理必须是有名函数。
在加载事件里边给div节点进行各种事件的绑定：
三种方式实现取消事件绑定操作：
新建网页
事件取消绑定
today is rain
----------------------------------------------------------------------------------------
2. 事件对象、阻止浏览器默认动作、阻止事件冒泡
$().bind(‘click’,function(evt){ });
$().click(function(evt){});
$().bind(‘mouseover’,f1);
function f1(evt){}
事件对象：就使用红色的evt即可，在jquery框架内部有做浏览器兼容处理。
以上红色的evt对主流的事件对象 和 IE的事件对象有封装。
阻止浏览器默认动作、阻止事件冒泡：
dom2级浏览器默认动作阻止：
事件对象.preventDefault(); 主流浏览器
事件对象.returnValue = false; IE浏览器
dom2级事件冒泡阻止：
事件对象.stopPropagation(); 主流浏览器
事件对象.cancelBubule = true; IE浏览器
在jquery里边：
$().bind(‘click’,function(evt){
evt.preventDefault();
evt.stopPropagation();
});
preventDefault()方法是jquery的方法，名字与js底层代码的名字一致而已。
并且其有做浏览器兼容处理
stopPropagation()方法是jquery的方法，名字与js底层代码的名字一致。
其有做浏览器兼容处理
-------------------------------------------------------------------------------
四. 动画效果
1. 基本动画
该动画效果的本质是 宽度、高度、透明度、display 在变化。
show(speed, [callback])
显示隐藏的匹配元素
hide(speed, [callback])
隐藏显示的元素
toggle()
切换元素的可见状态
toggle(switch)
根据switch参数切换元素的可见状态
（ture为可见，false为隐藏）。
toggle(speed, ?[callback])
以优雅的动画切换所有匹配的元素可见状态
新建网页
today is rain
------------------------------------------------------------------
2. 垂直动画
效果的本质： 高度、display 在变化
slideDown(speed, [callback])
显示元素
slideUp(speed, [callback])
隐藏元素
slideToggle(speed, [callback])
切换所有匹配元素的可见性
新建网页
垂直动画效果
today is rain
-------------------------------------------------------------------
3. 颜色渐变动画
fadeIn(speed, [callback])
不透明度的变化来实现所有匹配元素的淡入效果 (显示)
fadeOut(speed, [callback])
通过不透明度的变化来实现所有匹配元素的淡出效果 (隐藏)
fadeTo(speed, opacity, [callback])
把所有匹配元素的透明度以渐进方式调整到指定的不透明度
fadeToggle(speed,? [callback])
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
新建网页
颜色渐变动画效果
today is rain
新建网页
动画效果联合
today is rain
新建网页
颜色渐变动画效果
today is rain
--------------------------------------------------------------------------
五．jquery封装的ajax
具体操作：
$.get(url [,data] [,function(msg){}回调函数] [, dataType]);
data:给服务器传递的数据，请求字符串 、json对象 都可以设置
funtion(msg){}：回调函数，ajax请求完成后调用该函数，可以在此函数完成ajax的后续处理，msg泛指从服务器传递回来的信息
dataType：服务器返回数据类型，html、text、xml、json
$.post(url [,data] [,fn回调函数] [, dataType]);
该方法与$.get()方法使用完全一致，不同的是其为post方式请求
给服务器传递数据的时候，不需要设置header头
(以上两种ajax请求是异步的，如果需要设置同步请求，就换其他方法)
$.ajax({ //json对象
url:请求地址,
[data]:给服务器传递的数据(请求字符串/json对象)
[dataType]:默认字符串返回信息，数据从服务器返回格式html、text、xml、json
[type]:[get]/post请求方式
[success]:function(msg){} ajax成功请求后的回调函数，可以做后续处理使用
msg泛指服务器返回来的信息
async:[true]异步/false同步，
cache:[true]缓存/false不缓存,
})
$.get()的ajax的各种使用(封装层次稍高，可设置参数较少)：
相对底层的ajax方法使用$.ajax(json对象)
新建网页
Ajax请求
today is rain
----------------------------------------------------------------------
总结:
1. 事件绑定
bind(类型，处理函数);
bind(类型1 类型2 类型3,处理函数);
bind(json对象);
取消绑定
$().unbind()
$().unbind(类型);
$().unbind(类型，有名函数处理)
2. 动画效果
基本：show(速度,function) hide(速度,function)
垂直：slideDown() slideUp()
颜色渐变： fadeIn() fadeOut() fadeTo()
3. ajax使用
$.get(url,data,funciton,dataType)
$.post(url,data,funciton,dataType)
$.ajax({
url:
data:
dataType:
type:
success:
})
-------------------------------------------------------------------
六. 地区三级联动
技术点：jquery + ajax + xml/json
1. 省份的获取和显示
通过“ajax+jquery”获得xml信息从中解析出省份信息并显示：
新建网页
地区三级联动
省份：
城市：
地区：