jQuery 使用手册(一)

2kwm

2kwm

2016-02-19 13:55

下面是个简单易学的jQuery 使用手册(一)教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

jQuery 使用手册,大家可以耐心的看完,就基本上入门了。

一:核心部分
$(expr)
说明:该函数可以通过css选择器,Xpath或Html代码来匹配目标元素,所有的jQuery操作都以此为基础
参数:expr:字符串,一个查询表达式或一段html字符串
例子:
未执行jQuery前:

pone/p
div
ptwo/p
/div
pthree/p
a href="#" id="test" onClick="jq()" jQuery/a


jQuery代码及功能:

function jq(){
alert($("div p").html());
}

运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容

function jq(){
$("divpHello/p/div").appendTo("body");
}

运行:当点击id为test的元素时,向body中添加divpHello/p/div
$(elem)
说明:限制jQuery作用于一个特定的dom元素,这个函数也接受xml文档和windows对象
参数: elem:通过jQuery对象压缩的DOM元素
例子:
未执行jQuery前:

pone/p
div
ptwo/p
/divpthree/p
a href="#" id="test" onClick="jq()"jQuery/a

jQuery代码及功能:

function jq(){
alert($(document).find("div p").html());
}

运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容

function jq(){
$(document.body).background("black");
}

运行:当点击id为test的元素时,背景色变成黑色

$(elems)
说明:限制jQuery作用于一组特定的DOM元素
参数: elem:一组通过jQuery对象压缩的DOM元素
例子:
未执行jQuery前: 运行:当点击id为test的元素时,隐藏form1表单中的所有元素。
$(fn)
说明:$(document).ready()的一个速记方式,当文档全部载入时执行函数。可以有多个$(fn)当文档载入时,同时执行所有函数!
参数:fn (Function):当文档载入时执行的函数!
例子:

form id="form1"
input type="text" name="textfield"
input type="submit" name="Submit" value="提交"
/form
a href="#" id="test" onClick="jq()"jQuery/a

jQuery代码及功能:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)function jq(){
$(form1.elements ).hide();
}

 

$( function(){
$(document.body).background("black");
})

运行:当文档载入时背景变成黑色,相当于onLoad。
$(obj)
说明:复制一个jQuery对象,
参数:obj (jQuery): 要复制的jQuery对象
例子:
未执行jQuery前:

pone/p
div
ptwo/p
/div
pthree/p
a href="#" id="test" onClick="jq()"jQuery/a

jQuery代码及功能:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)function jq(){
var f = $("div");
alert($(f).find("p").html())
}

运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容。
each(fn)
说明:将函数作用于所有匹配的对象上
参数:fn (Function): 需要执行的函数
例子:
未执行jQuery前:

img src="1.jpg"/
img src="1.jpg"/
a href="#" id="test" onClick="jq()"jQuery/a

jQuery代码及功能:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)function jq(){
$("img").each(function(){
this.src = "2.jpg"; });
}

运行:当点击id为test的元素时,img标签的src都变成了2.jpg。
eq(pos)
说明:减少匹配对象到一个单独得dom元素
参数:pos (Number): 期望限制的索引,从0 开始
例子:
未执行jQuery前:

pThis is just a test./p
pSo is this/p
a href="#" id="test" onClick="jq()"jQuery/a

jQuery代码及功能:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)function jq(){
alert($("p").eq(1).html())
}

运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个p标签的内容

get() get(num)
说明:获取匹配元素,get(num)返回匹配元素中的某一个元素
参数:get (Number): 期望限制的索引,从0 开始
例子:
未执行jQuery前:

pThis is just a test./p
pSo is this/p
a href="#" id="test" onClick="jq()"jQuery/a

jQuery代码及功能:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)function jq(){
alert($("p").get(1).innerHTML);
}

运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个p标签的内容
注意get和eq的区别,eq返回的是jQuery对象,get返回的是所匹配的dom对象,所有取$("p").eq(1)对象的内容用jQuery方法html(),而取$("p").get(1)的内容用innerHTML

index(obj)
说明:返回对象索引
参数:obj (Object): 要查找的对象
例子:
未执行jQuery前:

div id="test1"/div
div id="test2"/div
a href="#" id="test" onClick="jq()"jQuery/a

jQuery代码及功能:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)function jq(){
alert($("div").index(document.getElementById('test1')));
alert($("div").index(document.getElementById('test2')));
}

运行:当点击id为test的元素时,两次弹出alert对话框分别显示0,1

size() Length
说明:当前匹配对象的数量,两者等价
例子:
未执行jQuery前:

img src="test1.jpg"/
img src="test2.jpg"/
a href="#" id="test" onClick="jq()"jQuery/a

jQuery代码及功能:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)function jq(){
alert($("img").length);
}

运行:当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象

展开更多 50%)
分享

猜你喜欢

jQuery 使用手册(一)

Web开发
jQuery 使用手册(一)

jQuery使用手册之一

Web开发
jQuery使用手册之一

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

JQuery autocomplete 使用手册

Web开发
JQuery autocomplete 使用手册

jQuery使用手册(七)

Web开发
jQuery使用手册(七)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jQuery 使用手册(五)

Web开发
jQuery 使用手册(五)

jQuery 使用手册(四)

Web开发
jQuery 使用手册(四)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

心痛麻痹了感觉つ眼泪模糊了视线つ - QQ伤感分组

心痛麻痹了感觉つ眼泪模糊了视线つ - QQ伤感分组

jquery 批量上传图片实现代码

jquery 批量上传图片实现代码
下拉加载更多内容 ↓