jQuery 使用手册(一)
作者:bea
一:核心部分$(expr)说明:该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础参数:expr:字符串,一个查询表达式或一段html字符串例子:未执行jQuery前: < p > one </ p > < div > < p > two </ p > </ div > < p > three </ p > <
一:核心部分$(expr)说明:该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础参数:expr:字符串,一个查询表达式或一段html字符串例子:未执行jQuery前:
<
p
>
one
</
p
>
<
div
>
<
p
>
two
</
p
>
</
div
> <
p
>
three
</
p
>
<
a
href
="#"
id
="test"
onClick
="jq()"
>
jQuery
</
a
>
jQuery代码及功能:
function
jq(){ alert($(
"
div > p
"
).html()); }
运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
function
jq(){ $(
"
<div><p>Hello</p></div>
"
).appendTo(
"
body
"
);}
运行:当点击id为test的元素时,向body中添加“<div><p>Hello</p></div>”$(elem)说明:限制jQuery作用于一个特定的dom元素,这个函数也接受xml文档和windows对象参数: elem:通过jQuery对象压缩的DOM元素例子:未执行jQuery前:
<
p
>
one
</
p
>
<
div
>
<
p
>
two
</
p
>
</
div
><
p
>
three
</
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前:
<
form
id
="form1"
>
<
input
type
="text"
name
="textfield"
>
<
input
type
="submit"
name
="Submit"
value
="提交"
>
</
form
>
<
a
href
="#"
id
="test"
onClick
="jq()"
>
jQuery
</
a
>
jQuery代码及功能:
function
jq(){ $(form1.elements ).hide(); }
运行:当点击id为test的元素时,隐藏form1表单中的所有元素。$(fn)说明:$(document).ready()的一个速记方式,当文档全部载入时执行函数。可以有多个$(fn)当文档载入时,同时执行所有函数!参数:fn (Function):当文档载入时执行的函数!例子:
$(
function
(){ $(document.body).background(
"
black
"
);})
运行:当文档载入时背景变成黑色,相当于onLoad。$(obj)说明:复制一个jQuery对象,参数:obj (jQuery): 要复制的jQuery对象例子:未执行jQuery前:
<
p
>
one
</
p
>
<
div
>
<
p
>
two
</
p
>
</
div
>
<
p
>
three
</
p
>
<
a
href
="#"
id
="test"
onClick
="jq()"
>
jQuery
</
a
>
jQuery代码及功能:
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代码及功能:
function
jq(){ $(
"
img
"
).each(
function
(){
this
.src
=
"
2.jpg
"
; });}
运行:当点击id为test的元素时,img标签的src都变成了2.jpg。eq(pos)说明:减少匹配对象到一个单独得dom元素参数:pos (Number): 期望限制的索引,从0 开始例子:未执行jQuery前:
<
p
>
This is just a test.
</
p
>
<
p
>
So is this
</
p
>
<
a
href
="#"
id
="test"
onClick
="jq()"
>
jQuery
</
a
>
jQuery代码及功能:
function
jq(){ alert($(
"
p
"
).eq(
1
).html())}
运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容get() get(num)说明:获取匹配元素,get(num)返回匹配元素中的某一个元素参数:get (Number): 期望限制的索引,从0 开始例子:未执行jQuery前:
<
p
>
This is just a test.
</
p
>
<
p
>
So is this
</
p
>
<
a
href
="#"
id
="test"
onClick
="jq()"
>
jQuery
</
a
>
jQuery代码及功能:
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)的内容用innerHTMLindex(obj)说明:返回对象索引参数:obj (Object): 要查找的对象例子:未执行jQuery前:
<
div
id
="test1"
></
div
>
<
div
id
="test2"
></
div
>
<
a
href
="#"
id
="test"
onClick
="jq()"
>
jQuery
</
a
>
jQuery代码及功能:
function
jq(){ alert($(
"
div
"
).index(document.getElementById('test1'))); alert($(
"
div
"
).index(document.getElementById('test2')));}
运行:当点击id为test的元素时,两次弹出alert对话框分别显示0,1size() Length说明:当前匹配对象的数量,两者等价例子:未执行jQuery前:
<
img
src
="test1.jpg"
/>
<
img
src
="test2.jpg"
/>
<
a
href
="#"
id
="test"
onClick
="jq()"
>
jQuery
</
a
>
jQuery代码及功能:
function
jq(){ alert($(
"
img
"
).length);}
运行:当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象
有用 | 无用
<
p
>
one
</
p
>
<
div
>
<
p
>
two
</
p
>
</
div
> <
p
>
three
</
p
>
<
a
href
="#"
id
="test"
onClick
="jq()"
>
jQuery
</
a
>
jQuery代码及功能:
function
jq(){ alert($(
"
div > p
"
).html()); }
运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
function
jq(){ $(
"
<div><p>Hello</p></div>
"
).appendTo(
"
body
"
);}
运行:当点击id为test的元素时,向body中添加“<div><p>Hello</p></div>”$(elem)说明:限制jQuery作用于一个特定的dom元素,这个函数也接受xml文档和windows对象参数: elem:通过jQuery对象压缩的DOM元素例子:未执行jQuery前:
<
p
>
one
</
p
>
<
div
>
<
p
>
two
</
p
>
</
div
><
p
>
three
</
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前:
<
form
id
="form1"
>
<
input
type
="text"
name
="textfield"
>
<
input
type
="submit"
name
="Submit"
value
="提交"
>
</
form
>
<
a
href
="#"
id
="test"
onClick
="jq()"
>
jQuery
</
a
>
jQuery代码及功能:
function
jq(){ $(form1.elements ).hide(); }
运行:当点击id为test的元素时,隐藏form1表单中的所有元素。$(fn)说明:$(document).ready()的一个速记方式,当文档全部载入时执行函数。可以有多个$(fn)当文档载入时,同时执行所有函数!参数:fn (Function):当文档载入时执行的函数!例子:
$(
function
(){ $(document.body).background(
"
black
"
);})
运行:当文档载入时背景变成黑色,相当于onLoad。$(obj)说明:复制一个jQuery对象,参数:obj (jQuery): 要复制的jQuery对象例子:未执行jQuery前:
<
p
>
one
</
p
>
<
div
>
<
p
>
two
</
p
>
</
div
>
<
p
>
three
</
p
>
<
a
href
="#"
id
="test"
onClick
="jq()"
>
jQuery
</
a
>
jQuery代码及功能:
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代码及功能:
function
jq(){ $(
"
img
"
).each(
function
(){
this
.src
=
"
2.jpg
"
; });}
运行:当点击id为test的元素时,img标签的src都变成了2.jpg。eq(pos)说明:减少匹配对象到一个单独得dom元素参数:pos (Number): 期望限制的索引,从0 开始例子:未执行jQuery前:
<
p
>
This is just a test.
</
p
>
<
p
>
So is this
</
p
>
<
a
href
="#"
id
="test"
onClick
="jq()"
>
jQuery
</
a
>
jQuery代码及功能:
function
jq(){ alert($(
"
p
"
).eq(
1
).html())}
运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容get() get(num)说明:获取匹配元素,get(num)返回匹配元素中的某一个元素参数:get (Number): 期望限制的索引,从0 开始例子:未执行jQuery前:
<
p
>
This is just a test.
</
p
>
<
p
>
So is this
</
p
>
<
a
href
="#"
id
="test"
onClick
="jq()"
>
jQuery
</
a
>
jQuery代码及功能:
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)的内容用innerHTMLindex(obj)说明:返回对象索引参数:obj (Object): 要查找的对象例子:未执行jQuery前:
<
div
id
="test1"
></
div
>
<
div
id
="test2"
></
div
>
<
a
href
="#"
id
="test"
onClick
="jq()"
>
jQuery
</
a
>
jQuery代码及功能:
function
jq(){ alert($(
"
div
"
).index(document.getElementById('test1'))); alert($(
"
div
"
).index(document.getElementById('test2')));}
运行:当点击id为test的元素时,两次弹出alert对话框分别显示0,1size() Length说明:当前匹配对象的数量,两者等价例子:未执行jQuery前:
<
img
src
="test1.jpg"
/>
<
img
src
="test2.jpg"
/>
<
a
href
="#"
id
="test"
onClick
="jq()"
>
jQuery
</
a
>
jQuery代码及功能:
function
jq(){ alert($(
"
img
"
).length);}
运行:当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- javascript的onchange事件与jQuery的change()方法比较
- 支持ie与FireFox的剪切板操作代码
- javaScript 简单验证代码(用户名,密码,邮箱)
- JS 连锁泡泡 v1.1
- 一个特殊的排序需求的javascript实现代码
- javascript parseInt 大改造
- 网页自动跳转代码收集
- JavaScript中Object和Function的关系小结
- 用Javascript 获取页面元素的位置的代码
- Javascript showModalDialog两个窗体之间传值
- Javascript 两个窗体之间传值实现代码
- Javascript 数组添加 shuffle 方法的实现代码
- Javascript 数组添加一个 indexOf 方法的实现代码
- jQuery 使用手册(七)
- jQuery 使用手册(六)
- jQuery 使用手册(五)
- jQuery 使用手册(四)
- jQuery 使用手册(三)
- jQuery 使用手册(二)