1.入口函数
- jQuery入口函数
$(document).ready(function(){ }); - $(function(){ });
- 与js入口函数的区别
1.书写个数的不同:可以有多个入口函数,js只能有一个.
2.执行时机不同:js是所有的文件资源加载完成后才开始执行,jQuery是文档加载完成后就开始执行.
2. jQuery对象和DOM对象的相互转换
1.DOM转换jQuery
var $btn1 = $(btn);//此时就把DOM对象btn转换成了jQuery对象
2.jQuery转换DOM
var btn1 = $btn[0];
var btn2 = $btn.get(0);
3.jQuery选择器
1.基本选择器
- #id选择器
- .类选择器
- Element标签选择器
2.层级选择器
- 空格 后代选择器
- > 子代选择器
3.基本过滤选择器
- :eq(index) 选择匹配到的元素中索引号为index的一个元素
- :odd 索引号为奇数的所有元素
- :even 索引号为偶数的所有元素
4.筛选选择器
- find(selector) 查找指定元素的所有后代元素
$(“#j_wrap”).find(“li”).css(“color”,”red”); - children() 查找指定元素的直接子元素(亲儿子元素)
- siblings() 查找所有兄弟元素(不包括自己)
- parent()查找父元素
- eq(index)
4.节点操作
1.创建元素
$()动态创建元素
var spanNode= s p a n N o d e = (“ 我是一个 span 元素”);
作用:设置或返回所选元素的 html 内容,跟 innerHTML 属性相同
- 动态创建元素$(selector).html(“ 我是一个 span 元素”)
- 获取html内容$(selector).html();
2.添加元素
- append() 在元素的最后一个子元素后面追加元素 (selector).append( ( s e l e c t o r ) . a p p e n d ( node),在 (selector)中追加 ( s e l e c t o r ) 中 追 加 node;
- appendTo()
- prepend()
- after()
before()
3.删除元素
$(selector).empty();清空指定元素的所有子元素
- $(selector).html(“”);
$(selector).remove();
4.复制元素
$(selector).clone();
5.样式操作
1.设置样式属性
- 设置单个样式:
$(selector).css(“color”,”red”); - 设置多个样式:
$(selector).css({“color”:”red”,”font-size”:”20px”});
2.获取样式属性
$(selector).css(“font-size”);
3.类操作
- 添加类样式addclass
- 移除类样式removeClass
- 判断有没有类样式hasClass
- 切换类样式toggleClass
6.ajax操作
一层方法
$.ajax()
二层方法
$.load()
$.get()
$.post()
三层方法
$.getScript()
$.getJSON()
load()方法
载入HTML文档
$(selector).load(URL,data,callback)
get()
从指定的资源请求数据
$.get(URL,data,callback,type)
(“button”).click(function(){
(“button”).click(function(){
.get(“demo_test.asp”,function(data,status){
alert(“Data:”+data+”\nStatus”+status);
});
});
post()
向指定的资源提交要处理的数据 $.post(URL,data,callback); data:连同请求发送的数据
$.ajax()
ajax参数:
options:ajax请求设置,所有选项都是可选的
async:默认true,异步.如需发送同步请求,需设置为false
beforeSend(XHR):发送请求前可修改XMLHttpRequest对象
cache:默认true,
complete(XHR,TS):请求完成后调回函数(请求成功或失败之后均调用)
contentType:发送信息至服务器时内容编码类型
context:设置ajax相关回调函数的上下文
data:发送到服务器的数据
dataFilter:给ajax返回的原始数据进行预处理的函数
dataType:预期服务器返回的数据类型
error:请求失败时调用此函数
global:是否触发全局ajax事件
success:请求成功后的回调函数
timeout:设置请求超时时间
type:默认值get,put和delete也可以使用
url:当前页地址
username:用于响应http访问认证请求的用户名
回调函数
beforeSend()
error()
dataFilter()
success()
complete()
7.event操作
事件绑定(4种)
1.$(“li”).click(fn); 没有事件委托,不会出现事件层叠
2.bind();没有事件委托,不会出现事件层叠 $(“li”).bind(“click”,fn);
3.父元素.delegate(选择器,事件类型,函数);必须使用父元素调用,全部都是事件委托 $(“ul”).delegate(“li”,”click”,fn)
4.on(事件,选择器,data,函数);可以事件委托,也可以不委托,data是传递内容用的,只能传递json
事件解绑(3种)
1.unbind()
2.undelegated()
3.off()
事件触发(3种)
1.简单事件触发
(selector).click();//触发click事件2.trigger方法触发事件,触发浏览器行为
(
s
e
l
e
c
t
o
r
)
.
c
l
i
c
k
(
)
;
/
/
触
发
c
l
i
c
k
事
件
2.
t
r
i
g
g
e
r
方
法
触
发
事
件
,
触
发
浏
览
器
行
为
(selector).trigger(“click”);
3.triggerHandler 触发 事件响应方法,不触发浏览器行为 比如:文本框获得焦点的默认行为 $(selector).triggerHandler(“focus”);
jQuery事件对象介绍
event.data : 传递给事件处理程序的额外数据
event.currentTarget : 等同于this,当前DOM对象
event.pageX : 鼠标相对于文档左边边缘的位置
event.target : 触发事件源,不一定===this
event.stopPropagation() : 阻止事件冒泡
event.preventDefault() : 阻止默认行为
event.type : 事件类型,click,dbclick
event.which : 鼠标的按键类型,左1,中2,右3
event.keyCode : 键盘按键代码