jQueryday02笔记.docx
《jQueryday02笔记.docx》由会员分享，可在线阅读，更多相关《jQueryday02笔记.docx（15页珍藏版）》请在冰点文库上搜索。
jQueryday02笔记
1jQuery回顾
●基本：
jQuery（""），$（""）
size（）/length
●选择器
基本#id、div、.class、*、1，2，3
层次空>+~
基础过滤:
first:
last:
not:
even:
odd
内容:
constains:
empty:
has（）:
parent
可见:
hidden:
visible
属性：
[属性][属性=值][属性!
=值][属性^=值][属性$=值][属性*=值][属性=值][属性=值]
子元素：
nth-child/first-child/last-child/only-child
表单:
input/:
text:
password:
file:
checkbox:
radio:
button:
reset:
submit:
image
表单属性：
disabledenabled/selectedchecked
总体格式$（"xxxx:
xxx"）
●属性
attr（key,value）{json}
removeAttr（name）
addClass/removeClass/toggleClass
text（）/html（）/val（）
css（）name|key,value|{json}
●文档
内部：
append（）后，prepend（）前
外部：
before（）after（）
替换：
replaceAll（）
删除：
empty（）
2筛选
大体格式：
$（"xxx"）.xxx（）
2.1过滤
//1.1eq（）等于
varv1=$（"tr"）.eq（5）.html（）;
//alert（v1）;
//1.2first（）第一个
varv2=$（"tr"）.first（）.html（）;
//alert（v2）;
//1.3last（）最后一个
varv3=$（"tr"）.last（）.html（）;
//alert（v3）;
//1.4hasClass（）是否使用样式
//varv4=$（"input[name='username']"）.hasClass（"textClass"）;
varv4=$（"input[name='password']"）.hasClass（"textClass"）;
//alert（v4）;
//1.5filter（）过滤
varv5=$（"tr"）.filter（"[id]"）.size（）;
//alert（v5）;
//1.6is判断
varv6=$（"input[name='hobby'][value='2']"）.is（":
checked"）;
//alert（v6）;
//1.7has有
varv7=$（"tr"）.has（"td"）.size（）;
//alert（v7）;
//1.8not删除指定的内容
varv8=$（"tr"）.not（$（"tr[id]"））.size（）;
//alert（v8）;
//1.9slice获得范围的内容,类似subString,可以截取数组
varv9=$（"tr"）.slice（1,2）.html（）;
alert（v9）;
2.2查询
//1.1children（）表示匹配元素的每一个元素的所有子元素
varv1=$（"tr"）.children（）.size（）;
//alert（v1）;
//1.2closest（）从自己开始查询父元素
varv2=$（"input[name='username']"）.closest（"tr"）.html（）;
//alert（v2）;
//1.3parent（）所有匹配的唯一父类
varv3=$（"input"）.parent（）;
//alert（v3）;
//1.4parents（）
varv4=$（"input"）.parents（"table"）;
//alert（v4）;
/*closest和parents的主要区别是：
1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；
2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；
3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。
*/
//1.5find在当前元素查询子元素
varv5=$（"#tr1"）.find（"input"）.attr（"name"）;
//alert（v5）;
//1.6next下一个兄弟
varv6=$（"#tr2"）.next（）.html（）;
//alert（v6）;
//1.7next所有兄弟，到最后停止
varv7=$（"#tr2"）.nextAll（）.size（）;
//alert（v7）;
//1.8nextUntil所有兄弟，到指定位置停止
varv8=$（"#tr2"）.nextUntil（"#tr6"）.size（）;
//alert（v8）;
//1.9offsetParent（）获得第一个定位父类
//*position设为relative或者absolute
//1.10parents（）
varv10=$（"input"）.parentsUntil（"table"）;
//alert（v10）;
//1.11prev（）前面的兄弟
varv11=$（"#tr2"）.prev（）.html（）;
//alert（v11）;
//1.12prevAll（）前面所有兄弟
varv12=$（"#tr6"）.prevAll（）.size（）;
//alert（v12）;
//1.13prevUntil前面所有兄弟,到指定位置停
varv13=$（"#tr6"）.prevUntil（"#tr1"）.size（）;
//alert（v13）;
//1.14siblings所有兄弟
varv14=$（"#tr6"）.siblings（）.size（）;
//alert（v14）;
2.3串联
//1.1add将多个结果连接一起
varv1=$（"#tr1"）.add（"#tr2"）.size（）;
//alert（v1）;
//1.2andSelf（）将自己添加数组
varv2=$（"#tr1"）.find（"td"）.andSelf（）.size（）;
alert（v2）;
//1.3contents（）获得所有的子标签，获得对象
//*text（）获得标签体文本内容。
3事件
3.1页面加载
●以后操作，大部分都应该在页面加载正常之后执行。
●ready方法
$（document）.ready（function（）{.....}）;
jQuery（document）.ready（function（）{.....}）;
●简化版
$（function（）{...}）;
jQuery（function（）{....}）;
jQuery（function（$）{函数体都可以使用$，不用考虑冲突的问题。
}）;
3.2常见事件
●JavaScript中的事件为onxxx，例如：
onclick
●在jQuery使用xxx，没有on，例如：
click
3.3事件处理
●on1.7提供新功能，用于取代之后使用功能（.bind（）,.delegate（）,和.live（））
例如：
$（"input"）.on（"click",function（）{...}）;
off与on对应，进行事件解绑。
●bind用于事件绑定。
绑定时间长期有效。
unbind解绑
●one给对象绑定一次事件。
●trigger（）触发绑定时间
●triggerHandler只触发jQuery绑定，不执行浏览器默认（）
事件冒泡：
当点击c，才执行，一并将B和A的事件。
3.4事件委托
live:
给指定对象添加事件。
如果给div绑定事件，当前页面之后添加所有div都具有该事件。
die：
取消live进行绑定。
delegate给当前对象指定子对象设置事件。
undelegate取消
3.5事件切换
hover：
是两个事件mouseover、mouseout结合。
鼠标移进和移出。
toggle：
在多个函数之间click切换。
4效果
4.1基本（显示/隐藏）
常见用法：
$（...）.show（）
$（...）.hide（）
$（...）.show（1000,function（）{执行完成之后执行}）
4.2滑动
slideDown从上往下
slideUp从下往上
slideToggle
4.3淡入淡出
fadeIn淡入（透明--实体）
fadeIn淡入（实体--透明）
fadeTo设置指定透明度
fadeToggle切换
5ajax
5.1介绍
1.$.ajax最底层的方法，需要更多设置，进行更具体使用。
但操作繁琐。
2.提供3完成ajax操作
load（）任何jQuery对象都可以发送请求url，可以设置请求参数data，请求完成之后将执行回调fn
注意：
不能设置请求方式。
采用默认设置。
如果有data使用post
如果没有data使用get
回调函数：
data:
返回内容
textStatus:
代表请求状态的，其值可能为:
succuss,error,notmodify,timeout4种）
XMLHttpRequest对象（手动发送核心对象）
$.get（）处理get请求
$.post（）处理post请求。
url,[data],[callback],[type]
url：
请求路径
data：
请求参数，使用键值对方式，及使用json数据。
例如：
{"username":
"jack","password":
"1234"}
callback:
回调函数，响应完成之后将执行的。
回调函数参数获得响应内容的。
type：
返回内容格式，xml,html,script,json,text,_default。
3.$.getScript（）/$.getJSON（）使用这两个方式可以对程序优化、获得指定数据等。
$.getScript（）通过HTTPGET请求载入并执行一个JavaScript文件。
在程序运行之后，需要特定js时，在进行相应加载。
$.getJSON（）通过HTTPGET请求载入JSON数据
5.2跨域操作
请求路径格式：
协议:
//域名:
端口/路径
协议、域名、端口任何一个不一致，表示属于不同的域，默认情况JavaScript不支持跨域操作。
访问方：
数据方：
发送json，指定数据
升级会员 