jQuery核心教程-优快云博客

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 =$ (“ 我是一个 span 元素”);

作用:设置或返回所选元素的 html 内容,跟 innerHTML 属性相同
动态创建元素$(selector).html(“ 我是一个 span 元素”)
获取html内容$(selector).html();

2.添加元素

append() 在元素的最后一个子元素后面追加元素 $(selector).append($ node),在 $(selector)中追加$ 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(){$ .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方法触发事件,触发浏览器行为$ (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 : 键盘按键代码