JQUERY知识点.docx
《JQUERY知识点.docx》由会员分享,可在线阅读,更多相关《JQUERY知识点.docx(17页珍藏版)》请在冰豆网上搜索。
![JQUERY知识点.docx](https://file1.bdocx.com/fileroot1/2022-12/31/2eb8d378-d70f-4597-9c50-3133a8594e38/2eb8d378-d70f-4597-9c50-3133a8594e381.gif)
JQUERY知识点
基于属性的选择器
在HTML中,几乎所有元素都具有属性,比如:
1.
2.
上面两个HMTL元素中包含了九个属性。
利用jQuery,我们可以根据元素的属性和属性值来对元素进行选择。
一起看看以下例子中的选择器:
3.$(document).ready(function(){
4.
5. lick(function(){
6.
7. alert("You'vejustselectedanimagewhosewidthis600px");
8.
9. });
10.
11. lick(function(){
12.
13. alert("You'vejustselectedanimagewhosewidthisnot600px");
14.
15. });
16.
17. ocus(function(){
18.
19. alert("Thisinputhasanamewhichendswith'email'.");
20.
21. });
22.
23.});
基于属性的选择器
在HTML中,几乎所有元素都具有属性,比如:
1.
2.
上面两个HMTL元素中包含了九个属性。
利用jQuery,我们可以根据元素的属性和属性值来对元素进行选择。
一起看看以下例子中的选择器:
3.$(document).ready(function(){
4.
5. lick(function(){
6.
7. alert("You'vejustselectedanimagewhosewidthis600px");
8.
9. });
10.
11. lick(function(){
12.
13. alert("You'vejustselectedanimagewhosewidthisnot600px");
14.
15. });
16.
17. ocus(function(){
18.
19. alert("Thisinputhasanamewhichendswith'email'.");
20.
21. });
22.
23.});
Widget组件选择器
除了插件的选择器之前,还有一些基于元素某些属性或位置的选择器。
下面让我们看看这些更为重要的选择器:
1.$(document).ready(function(){
2.
3. how();
4.
5.ss("color","orange");
6.
7. ocus(function(){
8.
9. alert("Thisisapassword!
");
10.
11. });
12.
13.ss("color","green");
14.
15.over(function(){
16.
17. alert("Thischeckboxisworking.");
18.
19. });
20.
21. });
对树进行选择和转换
选择
就想树一样,网站结构中叶存在子与父。
在jQuery中,我们可以利用这一结构。
假设我们拥有相同的html,但是现在我们想要选择名为“main”的div中的p元素,但是不想对任何有关p元素的东西造成变化。
我们有三种可能的方案,如下:
1.$("#wrapper").children('#main').children('p').css("color","orange");
2.$("#wrapper").children().children('p').css("color","orange");
3.$("#main").children('p').css("color","orange");
利用children方法可以选择树中位于其他元素下的某个元素。
如果我们传递给它一个选择器,该方法将仅选择我们需要的元素,如果不是这样,父元素的所有子元素都将被选中。
让我们看看第一个和第二个选择器直接的区别。
唯一的不同之处在于:
第二个选择器中我们什么也没有指定,所有每一个子元素都会被选中。
此处的关键在于:
在上图中wrapper这个div元素下除main之外并没有其他子元素,所以我们得到的结果是一样的。
添加元素
现在我们在树中添加元素。
这个元素可以是段落、div元素、表格等等,假设我们想要添加一个列表,如下:
4.
5.
6.
- Dog
7.
8.
- Cat
9.
10.
- Frog
11.
12.
只是一些字符串,所以我们可以在JavaScript代码中这样写:
13.var list= "
\n" 14.
15. + "
- Dog
\n" 16.
17. + "
- Cat
\n" 18.
19. + "
- Frog
\n" 20.
21. "
";
现在我们要在html中某个地方添加字符串。
比如,在之前我们选择的p元素之后。
最后我们可以输入完整的代码,如下所示:
22.$(document).ready(function(){
23.
24. var list= "
\n" 25.
26. + "
- Dog
\n" 27.
28. + "
- Cat
\n" 29.
30. + "
- Frog
\n" 31.
32. "
";
33.
34.$("#wrapper").children('#main').append(list);
35.
36.});
字面上我们将字符串附加到HTML中的
,结果是这个列表显示在p元素之后。
移除元素
移除元素并不难,当我们谈到对树进行转换时,在这一过程一定会涉及元素的移除。
下面我们来移除之前选择的那个段落(注意我们可以再次使用选择器)。
1.$("#wrapper").children('#main').children('p').remove();
2.
在这一代码中,位于选中元素之中的所有元素都将被移除,所以必须十分小心。
如果div下有一个列表,当我们移除该div时,div和列表都会被移除。
表面之下
jQuery类似只露出一角的冰山,在水面之下还有更多内容。
这一小结中,我们将向你展示某些表面之下的内容。
绑定(Bind)
绑定是一种方法,利用它,我们可以将一个事件(鼠标点击、悬置等等)与一个方法连接起来。
这有点类似:
当用户单击此处时,调用该方法。
听起来很熟悉,对吗没错,我们经常这样做。
看看以下示例:
3.$(document).ready(function(){
4.
5. $("#id").click(function(){
6.
7. alert("Thatclickwasamazing!
");
8.
9. });
10.
11.});
上文中click()方法在以下代码相对于wrapper:
12.$(document).ready(function(){
13.
14. $('#id').bind('click', function (){
15.
16. alert("Thatclickwasamazing!
");
17.
18. });
19.
20.});
此外,使用unbind()方法可以解除事件与元素的连接。
定义你自己的jQuery方法
目前我们看到了一些方法,如click、bind、hover等等,但是我们如何定义自己的方法如何使用$(’selector’).mymethod()这样的语句调用这些方法以下代码提供了这些问题的解决方案。
定义一个方法,显示一个元素的值。
1.lertVal();
回调(callback)是常用的解决方案
使用回调,我们可以在其他方法完成时执行某个方法。
你可以将回调方法看做对别人说:
但你做完时,给我电话,因为我要做我的那份工作。
不过现在的问题是:
如何使用回调
2.$(document).ready(function(){
3.
4. myCallBack= function(){
5.
6. alert("I'macallbackalert.");
7.
8. }
9.
10.et('',myCallBack);
11.
12.});
注意:
如果该函数包含参数,我们必须使用以下方式:
13.$(document).ready(function(){
14.
15. $.get('',function(){
16.
17. myCallBack(param1,param2);
18.
19. });
20.
21.});
jQuery中为我们提供了很多有用的方法和属性,文章总结了一些常用的函数和方法。
个人认为在开发中会比较常用的,在实际的开发中我们可能会用到其他的方法和属性,文中只是个人认为新手初学jQuery时,必须掌握的一些方法。
51CTO推荐专题:
入门到精通jQuery开发手册
jQuery事件处理
ready(fn)
代码:
$(document).ready(function(){
.
});
作用:
它可以极大地提高web应用程序的响应速度。
通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而%的JavaScript函数都需要在那一刻执行。
bind(type,[data],fn)
代码:
$("p").bind("click",function(){
alert($(this).text());
});
作用:
为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。
起到事件监听的作用。
toggle(fn,fn)
代码:
$("td").toggle(
function(){
$(this).addClass("selected");
},
function(){
$(this).removeClass("selected");
}
);
作用:
每次点击时切换要调用的函数。
如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。
挺有趣的一个函数,在动态实现某些功能的时候可能会用到。
(像click(),focus(),keydown()这样的事件这里就不提了,那些都是开发中比较常用到的。
)
jQuery外观效果
addClass(class)和removeClass(class)
代码:
$(".stripetr").mouseover(function(){
$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
});
也可以写成:
$(".stripetr").mouseover(function(){$(this).addClass("over")});
$(".stripetr").mouseout(function(){$(this).removeClass("over")});
作用:
为指定的元素添加或移除样式,从而实现动态的样式效果,上面的实例中实现鼠标移动双色表格的代码
css(name,value)
代码:
$("p").css("color","red");
作用:
很简单,就是在匹配的元素中,设置一个样式属性的值。
这个个人感觉和上面的addClass(class)有点类似。
slide(),hide(),fadeIn(),fadeout(),slideUp(),slideDown()
代码:
$("#btnShow").bind("click",function(event){$("#divMsg").show()});
$("#btnHide").bind("click",function(evnet){$("#divMsg").hide()});
作用:
jQuery中提供的比较常用的几个动态效果的函数。
还可以添加参数:
show(speed,[callback])以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。
animate(params[,duration[,easing[,callback]]])
作用:
制作动画效果用到的函数,功能非常的强大,可以连续使用此函数。
查找筛选
map(callback)
HTML代码:
Values:
%22/
$("p").append($("input").map(function(){
return$(this).val();
}).get().join(","));
结果:
[John,password,%3C/p>]
作用:
将一组元素转换成其他数组(不论是否是元素数组)你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。
这都可以用'$.map()'来方便的建立。
find(expr)
HTML代码:
Hello,howareyou
jQuery代码:
$("p").find("span")
结果:
[Hello]
作用:
搜索所有与指定表达式匹配的元素。
这个函数是找出正在处理的元素的后代元素的好方法。
文档处理
attr(key,value)
HTML代码:
![]()
![]()
jQuery代码:
$("img").attr("src","");
作用:
取得或设置匹配元素的属性值。
通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。
如果元素没有相应属性,则返回undefined。
在控制HTML标记上是必备的工具。
html()/html(val)
HTML代码:
jQuery代码:
$("div").html();
结果:
Hello
作用:
取得或设置匹配元素的html内容,同类型的方法还有text()和val()。
前者是取得所有匹配元素的内容。
,后者是获得匹配元素的当前值。
三者有相似的地方常用在内容的操作上。
wrap(html)
HTML代码:
TestParagraph.
jQuery代码:
$("p").wrap("
TestParagraph.
1.