jQuery精简入门进阶Word文件下载.docx
- 文档编号:16103347
- 上传时间:2022-11-20
- 格式:DOCX
- 页数:22
- 大小:31.45KB
jQuery精简入门进阶Word文件下载.docx
《jQuery精简入门进阶Word文件下载.docx》由会员分享,可在线阅读,更多相关《jQuery精简入门进阶Word文件下载.docx(22页珍藏版)》请在冰豆网上搜索。
a"
).click(function()
{
alert("
Hello
world!
"
);
});
script>
上边的效果是点击文档中所有a标签时将弹出对话框,$("
)是一个jQuery选择器,$本身表示一个jQuery类,所有$()是构造一个jQuery对象,click()是这个对象的方法,同理$(document)也是一个jQuery对象,ready(fn)是$(document)的方法,表示当document全部下载完毕时执行函数。
在进行下面内容之前我还要说明一点$("
p"
)和$("
#p"
)的区别,$("
)表示取所有p标签(<
p>
/p>
)的元素,$("
)表示取id为"
(<
span
id="
/span>
)的元素.
我将从以下几个内容来讲解jQuery的使用:
1:
核心部分
2:
DOM操作
3:
css操作
4:
javascript处理
5:
动态效果
6:
event事件
7:
ajax支持
8:
插件程序
一:
$(expr)
说明:
该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础
参数:
expr:
字符串,一个查询表达式或一段html字符串
例子:
未执行jQuery前:
one<
div>
<
two<
/div>
three<
a
href="
#"
id="
test"
onClick="
jq()"
jQuery<
/a>
jQuery代码及功能:
function
jq(){
alert($("
div
).html());
}
运行:
当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
jq(){
Hello<
).appendTo("
body"
当点击id为test的元素时,向body中添加“<
”
$(elem)
限制jQuery作用于一个特定的dom元素,这个函数也接受xml文档和windows对象
elem:
通过jQuery对象压缩的DOM元素
alert($(document).find("
$(document.body).background("
black"
当点击id为test的元素时,背景色变成黑色
$(elems)
限制jQuery作用于一组特定的DOM元素
一组通过jQuery对象压缩的DOM元素
form
form1"
input
text"
name="
textfield"
submit"
Submit"
value="
提交"
/form>
$(form1.elements
).hide();
当点击id为test的元素时,隐藏form1表单中的所有元素。
$(fn)
$(document).ready()的一个速记方式,当文档全部载入时执行函数。
可以有多个$(fn)当文档载入时,同时执行所有函数!
fn(Function):
当文档载入时执行的函数!
$(
function(){
})
当文档载入时背景变成黑色,相当于onLoad。
$(obj)
复制一个jQuery对象,
obj(jQuery):
要复制的jQuery对象
var
f
=
div"
alert($(f).find("
).html())
当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容。
each(fn)
将函数作用于所有匹配的对象上
需要执行的函数
img
src="
1.jpg"
/>
img"
).each(function(){
this.src
2.jpg"
;
当点击id为test的元素时,img标签的src都变成了2.jpg。
eq(pos)
减少匹配对象到一个单独得dom元素
pos(Number):
期望限制的索引,从0开始
This
is
just
test.<
So
this<
).eq
(1).html())
当点击id为test的元素时,alert对话框显示:
Soisthis,即第二个<
标签的内容
get()get(num)
获取匹配元素,get(num)返回匹配元素中的某一个元素
get(Number):
).get
(1).innerHTML);
注意get和eq的区别,eq返回的是jQuery对象,get返回的是所匹配的dom对象,所有取$("
).eq
(1)对象的内容用jQuery方法html(),而取$("
).get
(1)的内容用innerHTML
index(obj)
返回对象索引
obj(Object):
要查找的对象
test1"
test2"
).index(document.getElementById('
test1'
)));
test2'
当点击id为test的元素时,两次弹出alert对话框分别显示0,1
size()
Length
当前匹配对象的数量,两者等价
test1.jpg"
test2.jpg"
).length);
当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象
二:
属性
我们以<
imgid="
scr="
5.jpg"
为例,在原始的javascript里面可以用varo=document.getElementById('
a'
)取的id为a的节点对象,在用o.src来取得或修改该节点的scr属性,在jQuery里$("
#a"
)将得到jQuery对象[<
],然后可以用jQuery提供的很多方法来进行操作,如$("
).scr()将得到5.jpg,$("
).scr("
)将该对象src属性改为1,jpg。
下面我们来讲jQuery提供的众多jQuery方法,方便大家快速对DOM对象进行操作
herf()
herf(val)
对jQuery对象属性herf的操作。
未执行jQuery前
1.htm"
#test
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jQuery 精简 入门 进阶