锋利的JQery学习笔记.docx
- 文档编号:11745598
- 上传时间:2023-03-31
- 格式:DOCX
- 页数:40
- 大小:104.53KB
锋利的JQery学习笔记.docx
《锋利的JQery学习笔记.docx》由会员分享,可在线阅读,更多相关《锋利的JQery学习笔记.docx(40页珍藏版)》请在冰豆网上搜索。
锋利的JQery学习笔记
JQuery学习笔记
一、基础知识
1、JQuery库说明
JQuery-1.5.2.js——完整无压缩版本,用于测试、学习和开发
JQuery-1.5.2.min.js——经过JSMin等工具压缩后的版本,体积小,用于项目和产品
【注:
jQuery正确写法是j小写】
2、使用JQuery
只要将下载的JQuery库引入到页面JS脚本处即可,方法如下:
—在Head标签内引入JQuery-->
3、JQuery对象与DOM对象转换
JQuery对象是一个数组对象,可以使用两种方式转换为DOM对象
(1)var$cr=$(“#cr”);//JQueryobject
Varcr=$cr[0];//DOMobject;
(2)var$cr=$(“#cr“);varcr=$cr.get(0);
对于一个DOM对象,只需用$()将DOM对象包装起来,就可以转换为JQuery对象
Varcr=document.getElementById(“cr”);//DOMobject
Var$cr=$(cr);//JQueryobject
4、JQuery库与其他库的冲突解决
默认JQuery库用$作为自身的快捷方式,在先加载其他JS库时,可能出现$冲突,这时有以下几种解决方法:
(1)在任何时候都可以调用JQuery.noConflict() 函数来将变量$的控制权移交给其他JS库。
示例:
--prototype-->
--jQuery-->
JQuery.noConflict();//移动变量$控制权
(2)还可以使用JQuery.noConflict()方法自定义快捷方式,即Var新快捷方式=JQuery.noConflict();
(3)将变量$作为形参传递到JQuery中,在函数内部继续使用$快捷符号,示例如下:
--prototype-->
--jQuery-->
JQuery.noConflict();//移动变量$控制权
JQuery(function($){
$(“p”).click(function(){alet($(this).text());})
})
(4)将JQuery库在其他库之前导入,这时无需调用JQuery.noConfict()函数就可以交出$控制权限。
5、常用开发工具
(1)Dreamweaver:
可以通过安装扩展管理来实现JQuery代码的自动提示。
首先下载JQuery_API.mxp插件,然后在Dreamweaver中依次选择“命令”——“扩展管理”——“安装扩展”——“JQuery_API.mxp”命令后,就可以安装插件了。
【注意:
如果Dreamweaver没有扩展管理功能,说明是简化版本,可以在Http:
//中下载相应软件。
】
(2)Aptana:
功能强大、开源、专注于JS的AJAX开的IDE
(3)JQueryWTP和Spket插件:
可以使Eclipse支持JQuery自动提示
(4)VisualStudio2008:
安装KB958502/Release/ProjectReleases.aspx?
releaseId=1736补丁后,下载JQuery-1.5.2-vsdoc.js,将其与JQuery-1.5.2.js放在同一文件夹下,就可以实现JQuery自动代码提示了。
二、JQuery选择器
1、JQuery选择器简介
JQuery选择器完全继承了CSS风格,可以非常快捷的找出特定DOM元素,然后添加相应行为,而无需担心浏览器是否支持定一选择。
JQuery选择器获取的永远是对象,即使没有此元素也不会报错,因此当要用JQuery检查某个元素在网页是否存在时,要用长度或转换为DOM对象进行判断,示例如下:
If($(“#tt“)){…//这样是错误的}
应该这样:
if($(“#tt”).length>0){….}或者if($(“#tt”)[0]){…}
2、常用选择器
选择器
描述
返回
示例
#id
选择匹配ID的元素
单个元素
$(“test”) 取Id为test的元素
.class
选择给定类名的元素
集合元素
$(“.test”)取所有class为test的元素
Element
选择给定元素名的元素
集合元素
$(“P”)取所有
元素
*
匹配所有元素
集合元素
略
Selector1,selector2,
…,selectorN
将每个选择器匹配的元素合并后一起返回
集合元素
$(“div,span,p.myclass“)选择所有
标签的一组元素
3、层次选择器
选择器
描述
返回
示例
$(“ancestordescendant”)
选择ancestor元素里的所有descendant(后代)元素
集合元素
$(“divspan”) 选择div里的所有span元素
$(“parent>child”)
选择parent元素下的child元素
集合元素
$(“div>span”)取div下元素名是的子元素
$(“prev+next“)
或$(“prev”).next()
取prev元素后的next元素
集合元素
$(“.one+div”)或$(“.one”).next(“div”)取class为one的下一个div元素
$(“prev~siblings”)
或$(“prev”).nextAll();
取prev元素后的所有siblings元素
集合元素
$(“#two~div”)取id为two元素后面的所有div兄弟元素$(“prev”).nextAll(“div”)
$(“prev”).siblings()
取prev元素的所有同辈元素
集合元素
$(“#prev”).siblings(“div”)取所有与prev同辈的元素,无论前后位置
4、过滤选择器
基本选择器
描述
返回
示例
:
first
选择第一个元素
单个元素
$(“div:
first”)取所有div中第1个div元素
:
last
选择最后一个元素
单个元素
$(“div:
last”)所有div中最后一个div元素
:
not(selector)
去除与给定选择器匹配的元素
集合元素
$(“input:
not(.myclass)”)选取class不是myclass的input元素
:
even
取索引是偶数的元素
集合元素
$(“input:
even”)取索引是偶数的input元素
:
odd
选择索引是奇数的元素
集合元素
$(“input:
odd”)
:
eq(index)
取索引等于index的元素
单个元素
$(“input:
eq
(1)”)索引等于1的元素
:
gt(index)
取索引大于index的元素
索引都从0开始计算
集合元素
$(“input:
gt
(1)”)取索引大于1而不包括1的元素
:
lt(index)
取索引小于index的元素
集合元素
$(“input:
lt
(1)”)
:
header
取所有标题元素
集合元素
$(“:
header”)
:
animated
取当前正在执行动画的所有元素
集合元素
$(“div:
animated”)取正在执行动画的div元素
内容过滤
:
contains(text)
取内容为text的元素
集合元素
$(“div:
contains(‘我’)”)
:
empty
取不包含子元素或文本的空元素
集合元素
$(“div:
empty”)
:
has(selector)
取含有选择器所匹配的元素的元素
集合元素
$(“div:
has(p)”)取含有
元素的
:
parent
取含有子元素或文本元素
集合元素
$(“div:
parent”)注意与parent()方法的区别
可见过滤
:
hidden
取所有不可见元素
集合元素
$(“:
hidden”)包括hiden和none
:
visible
取所有可见元素
集合元素
$(“div:
visible”)
属性过滤器
描述
返回
示例
[attribute]
取有此属性的元素
集合元素
$(“div[id]”)取有id属性的元素
[attribute=value]
取属性值为value的元素
集合元素
$(“div[title=test]”)
[attribute!
=value]
取值不等于value的元素
集合元素
$(“div[title!
=test]”)
[attribute^=value]
取值以value开始的元素
集合元素
$(“div[title^=test]”)
[attribute$=value]
取值以value结束的元素
集合元素
略
[attribute*=value]
取值含有value的元素
集合元素
略
[slector1]
[selector2]…..
用属性选择器合并成一个复合属性选择器
集合元素
$(“div[id][title$=’test’]取有属性id且属性title以test结束的
子元素过滤
:
nth-child(index/even/odd
/equation)
取每个父元素下第index个子元素或奇偶元素,index从1开始
集合元素
注意与:
eq(index)的区别
很常用的过滤器:
nth-child(2n);取索引值是2的倍数的元素,n从0开始
:
first-chile
取父元素下第1个子元素
集合元素
注意与:
first的区别
:
last-child
取每个父元素的最后一个子元素
集合元素
注意与:
last的区别
:
only-child
如果某个元素是它父元素的中的惟一子元素,则匹配
集合元素
$(“ulli:
only-child”)选择
- 中是惟一子元素的
表单属性过滤
:
enabled
取所有可用元素
集合元素
$(“#form1:
enabled”)取id为form1的表单内的所有可用元素
:
disabled
取所有不可用元素
集合元素
略
:
checked
取所有被选中的元素
集合元素
$(“input:
checked”)
:
selected
取所有被选中的选项元素(下拉列表)
集合元素
$(“select:
selected”)
5、表单选择器
选择器
描述
返回
示例
:
input
所有的
集合元素
$(“:
input”)
:
text
取所有单行文本框
集合元素
$(“:
text”)
:
password
取所有密码框
集合元素
略
:
radio
取所有单选框
集合元素
略
:
checkbox
取所有多选框
集合元素
略
:
submit
取所有提交按钮
集合元素
:
image
取所有图像按钮
集合元素
:
reset
取所有按钮
集合元素
:
file
取所有上传域
集合元素
:
hidden
取所有不可见元素
集合元素
【注意:
选择器出现空格表示为后代选择器,与过滤选择器是不同的结果,例:
Var$t_a=$(‘.test:
hidden’);//表示选取class为”test”的元素里面的隐藏元素
而var$t_b=$(‘.test:
hidden’);//表示选中隐藏的class为”test”的元素】
三、DOM操作
1、查找节点和创建节点
(1)查找节点:
通过前面介绍的的选择器可以轻松查找节点,【例:
var$li=$(“ulli:
eq
(1)”);//取ul中的第2个节点】然后可以使用attr()方法来获取它的各种属性
(2)创建节点:
JQuery中可以通过$(HTML)来实现节点的创建。
例:
- 这是一个
复杂的组合
2、插入节点
方法
描述
示例
Append
向匹配元素内部追加节点
$(“p”).append(“hello”)
appendT0()
将匹配元素追加到指定元素中,实际是颠倒了上面的append()方法
$(“hello”).appendTo(“p”),结果
hello
Prepend()
向匹配元素关添加内容
$(“p”).prepend(“hello”);
prependTo()
上面prepend()方法的反操作
略
After()
在匹配元素后插入内容
$(“p”).after(“hello”),结果
hello
insertAfter()
将匹配元素插入到指定元素的后面,after()方法的颠倒操作
略
Before()
在匹配元素前插入内容
$(“p”).before(“hello”),结果
hello
insertBefore()
Before()的颠倒方法
略
3、删除节点
(1)remove()方法:
删除匹配元素及其所有后代节点,返回值是指向已删除节点的引用,可以在其他地方或以后使用这些元素
(2)empty()方法:
并不删除当前节点,而是清空所有后代节点。
4、复制节点和替换节点
(1)复制节点:
Clone(bool)方法可以复制当前节点,默认参数为False,可以不填写,指复制的新元素不具备原节点的任何行为,当为True时,新元素将同时具有被复制元素的所有行为,包括事件。
(2)替换节点:
ReplaceWith()与ReplaceAll()可以将所有匹配的元素都替换成指定的HTML或者DOM元素,这两个方法互为颠倒。
示例:
$(“p”).replaceWith(“你不喜欢什么?
”);
或$(“你不喜欢什么?
”).replaceAll(“p”);
5、包裹节点
(1)wrap()方法:
把每个匹配元素用指定标签包裹起来,每个匹配元素都包裹一次
示例如下:
$(“strong”).wrap(“”);//结果如果有2个元素,则为
aaa
bbb
(2)wrapAll()方法:
将所有匹配元素包裹在指定标签中,示例如下
$(“strong”).wrapAll(“”);//结果如果有2个元素,则为
aaa
bbb
(3)wrapInner()方法:
将每个匹配元素的子内容用指定标签包裹起来,示例
$(“strong”).wrapInner(“”);//结果如果有2个元素,则为
aaa
6、属性操作
(1)获取和设置属性:
attr()
Varp_txt=$para.attr(“title”);//获取Title属性值
$(“p”).attr({“title”:
”hello”,“name”:
“test”});//将一个“名/值”形式的对象设置为匹配元素的属性
【注意:
JQuery中很多方法都是同一个函数来实现获取和设置,如attr()、html()、text()、height()、width()、val()和css()等方法。
】
(2)删除属性:
removeAttr()例:
$(“p”).removeAttr(“title”);
7、样式操作
(1)获取设置样式:
attr()
获取样式示例:
varp_class=$(“p”).attr(“class”);//获取元素
的class
设置样式:
$(“p”).attr(“class”,”high”);//此处严格说只是替换了元素的样式
(2)追加样式:
addClass()
示例:
$(“p”).addClass(“high”);//即
元素会具有以前和现在两格样式
(3)移除样式:
removeClass(“样式1[样式2]…”)和removeClass()参数为空移除所有样式
(4)切换样式:
toggleClass()//样式存在则删除,不存在则添加
(5)判断样式是否存在:
hasClass()//实际是调用了is()方法,所以等价于is()
8、CSS-DOM操作
(1)设置和获取style对象的各种属性:
css()
查看某元素css属性的值:
varp_value=$(“p”).css(“color”);
改变元素样式:
$(“p”).css(“color”,“red”);
(2)获取和设置高度宽度:
height()和width()
示例:
$(“p”).heigth();$(“p”).height(100);
(3)获取元素在当前视窗的相对偏移:
offset()
示例:
varoffset=$(“p”).offset();
Varleft=offset.left;
Vartop=offset.top;
(4)position()方法:
用于获取元素相对于最近一个position样式属性设置为relative或absolute的祖父节点的相对偏移,同offset()一样,返回对象包括两个属性,即top和left。
(5)获取元素的滚动条距顶端和距左侧的距离:
scrollTop()和scrollLeft()
【注:
height()与css()方法的区别是,height()方法获取的高度是元素在页面中的实际高度,且不带单位;而css()获取到的高度与样式有关,可能为”auto“或“10px”之类】
【注意:
attr()与css(),attr()设置对象的class属性,而css()设置对象的style属性】
【注:
css()方法中如果属性有”-“号,如:
font-size,不加引号时必须用驼峰式写法(fontSize),如果带上了引号,两种写法都可以。
】
9、设置和获取HTML与文本和值
(1)设置和获取HTML:
html()类似于JS中的InnerHTML
设置示例:
$(“p”).html(“hello”);
获取示例:
$(“p”).html();
【注:
html()方法不能用于XML文档】
(2)设置和获取文本:
text()类似于JS中的InnerText
【注:
text()方法对HMTL和XML文档都有效,且支持所有浏览器】
(3)设置和获取值:
val()类似于JS中的Value
【注1:
val()方法不仅能设置和获取元素的值,还有一个用处就是能使select、checkbox、radio相应的选项被选中。
注2:
val()方法是从最后一个选项往前读取。
也可以使用attr()方法来实现同样功能】
示例:
$(“:
checkbox”).val([“check2”,“check3”]);
$(“#singleoption:
eq
(1)“).attr(“selected”,true);
10、遍历节点
(1)children():
获取匹配元素的所有子元素,不考虑任何后代元素
(2)next():
用于取得匹配元素后面紧邻的同辈元素
(3)prev():
用于取得匹配元素前面紧邻的同辈元素
(4)siblings():
用于取得匹配元素前后所有的同辈元素
(5)closest():
用来取得最近的匹配元素
【其他:
find()、filter()、nextAll()、prevAll()、parent()、parents()等】
四、JQuery中的事件和动画
1、加载DOM对象
$(document).ready(function(){//代码}
$().ready(function(){//代码}
$(function(){//代码}
三种方式是一样的。
【注:
使用ready()方法注册的事件,只要DOM加载完毕就会被执行,如果此时元素关联的文件未下载完毕(如较大的图片)则会报错,解决方法是使用JQuery的load()方法,可以在元素上绑定一个算处理函数。
例:
$(window).load(function(){});等价于window.onload()】
2、事件绑定
在文档装载完毕后,可以通过bind()方法来对匹配元素进行特定事件的绑定,语法为:
Bind(type[,data],fn);
参数说明:
第1个为事件类型,包括:
blur/focus/load/unload/click/mousedown/keypress/error
第2个为可选参数,作为event.data属性值传递给事件对象的额外数据对象
第3个是用来绑定处理函数的。
示例:
$(“#panel”).bind(“mouseover”,function(
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 锋利 JQery 学习 笔记
![提示](https://static.bdocx.com/images/bang_tan.gif)
copyright@ 2008-2022 冰点文档网站版权所有
经营许可证编号:鄂ICP备2022015515号-1