Jquery学习笔记

第一天
jQuery介绍
Jquery是一个js框架（其实就是一个js.文件），他的特点是使用选择器查找到要操作的节点，选择器就是jquery借鉴css选择器的语法而创建的一种查找操作的节点的语法格式，比如$(‘#id’);，并且将这些节点封装成jquery对象，这是为了针对多个节点的同一个操作而生成的工具，或者是多个节点的不同操作但是实现的功能是以一样的时候使用。封装的目的是为了更好的兼容不同的浏览器之间的差异，同时也会简化代码。

jQuery是一个js框架(其实就是一个.js文件),它的特点是
使用选择器查找要操作的节点,并且将这些节点封装成一个
jQuery对象。封装的目的是为了更好地兼容不同的浏览器
之间的差异，同时也会简化代码。
注：
选择器是jQuery借鉴css选择器的语法而创建的一种
查找要操作的节点的语法格式。比如  $('#id');

2、jQuery基础
(1)jQuery编程的基本步骤
step1,引入jQuery.js文件
step2, 使用选择器查找要操作的节点
step3,调用jQuery对象的属性或者方法来操作
相应的节点。
(2)jQuery对象与dom对象之间的转换
1)dom对象 --- > jQuery对象
$(dom对象);
2)jQuery对象 ---- > dom对象
第一种方式:   $obj.get(0);
第二种方式:   $obj.get()[0];
(3) jQuery与prototype如何同时使用？
因为jQuery与prototype都使用$函数，需要使用
var $a = jQuery.noConflict()将$函数改名为"$a"。

3、jQuery选择器   selector
1)、基本选择器   selector/a1.html
#id
.class
element
selector1,selector2..selectorn
*
2)、层次选择器 selector/a2.html
select1 select2
select1>select2
select1+select2
select1~select2
3)、过滤选择器 
(1)基本过滤选择器 selector/ a3.html
:first
:last
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
(2)内容过滤选择器  selector/ a4.html
:contains(text)
:empty   没有子节点，或者内容为空的节点。
:has(selector)
:parent  跟empty相反,即有子节点，或者内容不为空的节点。
(3)可见性过滤选择器 selector/ a5.html
:hidden
:visible
(4)属性过滤选择器 selector/ a6.html
[attribute]
[attribute=value]
[attribute!=value]
(5)子元素过滤选择器 selector/ a7.html
:nth-child(index/even/odd)
(6)表单对象属性过滤选择器 selector/ a8.html
:enabled
:disabled
:checked
:selected
4)、表单选择器
:input
:text    
:pasword
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden

4、dom操作
1)、查询  dom / d1.html
利用选择器找到要操作的节点之后，访问节点的
html内容、text内容、节点的值以及节点的属性值。
除此之外，还可以修改这些值。
a, html() : 相当于innerHTML
b, text(): 相当于innerText
c, val():
d, attr():
2)、创建   dom / d2.html
$(html);
3)、插入节点
append():向每个匹配的元素内部追加内容
prepend():向每个匹配的元素内部前置内容
after():在每个匹配的元素之后插入内容
before():在每个匹配的元素之前插入内容
4)、删除节点 dom / d3.html
remove()
remove(selector)
empty():清空节点

5)、复制节点  dom / d6.html
clone():
clone(true):使复制的节点也具有行为
6)、属性操作  dom / d7.html
读取：attr('');
设置： attr('','')
或者一次设置多个 attr({"":"","":""});
删除：removeAttr('')
7)、样式操作  dom / d8.html
获取和设置: attr("class",""), attr("style","");
追加:addClass('')
移除:removeClass('')
或者removeClass('s1 s2')
或者removeClass()//会删除所有样式
切换样式：toggleClass
是否有某个样式 hasClass('')
读取css('')
设置css('','')或者css({'':'','':''})//设置多个样式
8)、遍历节点 dom / d9.html
children()/children(selector):
只考虑子元素，不考虑其它后代元素。
next(selector): 上一个兄弟
prev(selector):
siblings(selector):其它兄弟
parent():父节点
find(selector): 从当前节点开始，查找所有后代。
5、如何将js代码与html分开(将数据与行为分离) dom/ d4,d5.html
//window.onload : 当整个页面加载完毕，会产生
//load事件，就会执行绑订的函数。
window.onload = function () {
var obj = document.getElementById("d1");
obj.onclick = function () {
obj.innerHTML = "hello java";
};
};
在使用jQuery时，可以使用如下的代码来实现
js与html的分离:
$(function(){
//js代码: 这些js代码会在整个页面加载完毕之后
//执行。
});
第二天
1、事件处理机制   event
1)、事件绑订  event/e1.html
bind(type,fn)
2)、绑订方式的简写形式
click(function(){
});
3)、合成事件  event/e2.html   e3.html
hover(enter,leave) : 模拟光标悬停事件
toggle(fn1,fn2...)：模拟鼠标连续单击事件
4)、事件冒泡
(1)获得事件对象  event/e4.html e5.html e6.html
click(function(e){
});
(2)停止冒泡   event / e7.html
event.stopPropagation()
(3)停止默认行为  event / e8.html
event.preventDefault()
5)、事件对象的属性  event/e6.html
event.type
event.target:返回事件源(是dom对象)
event.pageX/pageY

6)、模拟操作  event / e9.html
trigger('click')

2、动画   animate
1)、show(), hide()    a1.html
作用：通过同时改变元素的宽度与高度来实现
显示和隐藏的效果。
语法:
show(速度,callback);
速度:  'slow','normal','fast' / 800(毫秒)
callback: 在动画执行完毕之后，会执行这个函数
2)、fadeIn() fadeOut():  animate / a2.html
作用， 通过改变元素的不透明度来实现
语法: slideUp(速度,callback);
显示和隐藏的效果。
3)、slideUp() slideDown() :  amimate/a1.html
作用：通过改变元素的高度来实现
显示和隐藏的效果。
语法: slideUp(速度,callback);
4)、自定义动画 animate(params,speed,callback) a3.html
语法:
params:是一个js对象，描述了动画执行
结束时元素的样式，比如:
{'top':'600px','left':'200px'}
speed:  毫秒
callback: 在动画执行完毕之后，会执行这个函数
3、类数组的操作  array /a1.html
jQuery选择器返回的是一个jQuery对象(该
对象可能包括了多个dom节点),如果要对这些
dom节点分别做不同的处理，就需要去遍历，
需要调用jQuery对象提供的一些方法或者属性，
称之为类数组的操作。
1)each(fn(i)):循环遍历每一个元素,
this代表被迭代的dom对象，$(this)代表
被迭代的jQuery对象。
2)eq(index)：返回index+1位置处的jQuery对象
3)index(obj)：返回下标，其中obj可以是dom对象
或者jQuery对象。
4)length属性：dom对象的个数
5)get()：返回dom对象组成的数组
6)get(index)：返回index+1个dom对象。

练习1：点击某一行，该行加亮，同时，单选框被选中。
练习2：完成移动多选框：
1)点击 "-->",将左边下拉列表中用户选中的选项移动
到右边。如果用户没有选择任何选项，则提示
用户“必须选择至少一个 选项"。
2)点击"<--",跟"-->“正好相反。
3)点击"-->>"，将左边下拉列表中的用户全部移动
到右边。
4)点击"<<--",跟"-->>"正好相反。


第三天
1、jQuery对ajax编程的支持
(1)load方法:
作用：是将服务器返回的数据直接添加到符合要求的
节点之上，相当于obj.innerHTML = 返回的数据。
语法:
$obj.load(请求地址,[请求参数]);
其中，请求参数可以有两种形式:
第一种：请求字符串，比如 "username=zs",或者
“username=zs&age=22"。
第二种：javascript对象，比如
{'username':'zs'}，或者{'username':'zs','age':22}
load方法如果没有请求参数，会发送get请求，如果有
请求参数，会发送post请求。

(2)$.get方法
作用：向服务器发送get请求
语法:   $.get(url,[data],[callback],[type]):
url:请求地址
data:请求参数,可以是请求字符串或者是js对象。
callback: 是一个回调函数，用于处理服务器
返回的数据，其格式 function(data,statusText),
data是服务器返回的数据，statusText是服务器
处理的状态。
type:服务器返回的数据类型:
text : 文本字符串
html : html内容
xml: 返回dom兼容的xml对象
json: json字符串
script: javascript脚本
$.post()格式同上。
(3)$.ajax方法
作用：可以设置不同的参数，控制ajax对象向服务器
发请求。
语法:
$.ajax(options):
其中，options是一个形如
{key1:value1,key2,value2...}的js对象，
用于指定发送请求的选项。
选项参数如下：
url(string):请求地址
type(string):GET/POST
data(object/string):请求参数，可以是请求字符串或者js对象
dataType(string) :服务器返回的数据类型
success(function):请求成功后调用的回调函数，有两个参数：
function(data,textStatus),其中，
data是服务器返回的数据，
textStatus 描述状态的字符串。
error(function):请求失败时调用的函数，有三个参数
function(xhr,textStatus,errorThrown),
xhr: ajax对象，即XMLHttpRequest对象。
textStatus和errorThrown，jQuery保证
其中的一个参数可以获得异常的描述。
async: true(缺省)/false

练习1：商品热卖
练习2：自动完成
step1,服务器端代码
服务器依据关键字，返回一个类似于以下的字符串:
小米,小米2,小说,小米官网
step2,客户端代码
1) 对文本输入框绑订keyup事件处理代码:
比如  $('#key').keyup(fn);
2)在fn函数中：
a1,分解服务器返回的字符串，获得一个个选项，
将这些选项添加到文本输入框的下面。
a2,每一个选项绑订click事件(将用户
点击选中的选项复制到文本输入框)
a3,每一个选项绑订mouseenter事件(加亮对应的选项)处理代码。
注意：keyup事件在某些浏览器中，在切换中文输入法时，会有
bug,需要我们自己解决，如果发现有这个问题，需要使用如下
代码：
var eventname = 'input';
if(navigator.userAgent.indexOf('MSIE')!=-1){
eventname = 'propertychange';
}
$('#key').bind(eventname,fn);