锋利的JQery学习笔记Word文件下载.docx
- 文档编号:5032860
- 上传时间:2023-05-04
- 格式:DOCX
- 页数:40
- 大小:104.53KB
锋利的JQery学习笔记Word文件下载.docx
《锋利的JQery学习笔记Word文件下载.docx》由会员分享,可在线阅读,更多相关《锋利的JQery学习笔记Word文件下载.docx(40页珍藏版)》请在冰点文库上搜索。
(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”)取所有<
p>
元素
*
匹配所有元素
略
Selector1,selector2,
…,selectorN
将每个选择器匹配的元素合并后一起返回
$(“div,span,p.myclass“)选择所有<
div>
<
span>
和拥有class为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
取索引是偶数的元素
even”)取索引是偶数的input元素
odd
选择索引是奇数的元素
odd”)
eq(index)
取索引等于index的元素
$(“input:
eq
(1)”)索引等于1的元素
gt(index)
取索引大于index的元素
索引都从0开始计算
gt
(1)”)取索引大于1而不包括1的元素
lt(index)
取索引小于index的元素
lt
(1)”)
header
取所有标题元素
$(“:
header”)
animated
取当前正在执行动画的所有元素
animated”)取正在执行动画的div元素
内容过滤
contains(text)
取内容为text的元素
contains(‘我’)”)
empty
取不包含子元素或文本的空元素
empty”)
has(selector)
取含有选择器所匹配的元素的元素
has(p)”)取含有<
元素的<
parent
取含有子元素或文本元素
parent”)注意与parent()方法的区别
可见过滤
hidden
取所有不可见元素
hidden”)包括hiden和none
visible
取所有可见元素
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”)选择<
ul>
中是惟一子元素的<
li>
表单属性过滤
enabled
取所有可用元素
$(“#form1:
enabled”)取id为form1的表单内的所有可用元素
disabled
取所有不可用元素
checked
取所有被选中的元素
checked”)
selected
取所有被选中的选项元素(下拉列表)
$(“select:
selected”)
5、表单选择器
input
所有的<
input>
textarea>
select>
和<
button>
input”)
text
取所有单行文本框
text”)
password
取所有密码框
radio
取所有单选框
checkbox
取所有多选框
submit
取所有提交按钮
image
取所有图像按钮
reset
取所有按钮
file
取所有上传域
选择器出现空格表示为后代选择器,与过滤选择器是不同的结果,例:
Var$t_a=$(‘.test:
hidden’);
//表示选取class为”test”的元素里面的隐藏元素
而var$t_b=$(‘.test:
//表示选中隐藏的class为”test”的元素】
三、DOM操作
1、查找节点和创建节点
(1)查找节点:
通过前面介绍的的选择器可以轻松查找节点,【例:
var$li=$(“ulli:
eq
(1)”);
//取ul中的第2个节点】然后可以使用attr()方法来获取它的各种属性
(2)创建节点:
JQuery中可以通过$(HTML)来实现节点的创建。
例:
em>
这是<
/em>
b>
一个<
/b>
ahref="
#"
>
复杂的组合<
/a>
/li>
2、插入节点
方法
Append
向匹配元素内部追加节点
$(“p”).append(“<
hello<
”)
appendT0()
将匹配元素追加到指定元素中,实际是颠倒了上面的append()方法
$(“<
”).appendTo(“p”),结果
/p>
Prepend()
向匹配元素关添加内容
$(“p”).prepend(“<
”);
prependTo()
上面prepend()方法的反操作
After()
在匹配元素后插入内容
$(“p”).after(“<
”),结果
insertAfter()
将匹配元素插入到指定元素的后面,after()方法的颠倒操作
Before()
在匹配元素前插入内容
$(“p”).before(“<
insertBefore()
Before()的颠倒方法
3、删除节点
(1)remove()方法:
删除匹配元素及其所有后代节点,返回值是指向已删除节点的引用,可以在其他地方或以后使用这些元素
(2)empty()方法:
并不删除当前节点,而是清空所有后代节点。
4、复制节点和替换节点
(1)复制节点:
Clone(bool)方法可以复制当前节点,默认参数为False,可以不填写,指复制的新元素不具备原节点的任何行为,当为True时,新元素将同时具有被复制元素的所有行为,包括事件。
(2)替换节点:
ReplaceWith()与ReplaceAll()可以将所有匹配的元素都替换成指定的HTML或者DOM元素,这两个方法互为颠倒。
$(“p”).replaceWith(“<
strong>
你不喜欢什么?
/strong>
或$(“<
”).replaceAll(“p”);
5、包裹节点
(1)wrap()方法:
把每个匹配元素用指定标签包裹起来,每个匹配元素都包裹一次
示例如下:
$(“strong”).wrap(“<
//结果如果有2个<
元素,则为
aaa<
bbb<
(2)wrapAll()方法:
将所有匹配元素包裹在指定标签中,示例如下
$(“strong”).wrapAll(“<
(3)wrapInner()方法:
将每个匹配元素的子内容用指定标签包裹起来,示例
$(“strong”).wrapInner(“<
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 学习 笔记