24
CreateanAccount!
25
30
Message
31
一些应该熟记于心的jQuery函数和技巧
高级选择器(selector)
在jQuery中,我们可以使用各种各样的选择器,这使得选择器的使用变得非常精确。51CTO也曾经和读者分享过jQuery选择器深入分析:避免不必要的调用,下面我们来一步一步地讲解这些选择器并看看在其他语境中如何使用这些选择器。
基于属性的选择器
在HTML中,几乎所有元素都具有属性,比如:
1
2
上面两个HMTL元素中包含了九个属性。利用jQuery,我们可以根据元素的属性和属性值来对元素进行选择。一起看看以下例子中的选择器:
3$(document).ready(function(){
4 //All the images whose width i s600px
$("img[width=600]").click(function(){
5 alert("You'vejustselectedanimagewhosewidthis600px");
6 });
7 //Alltheimageshavingawidthdifferentto600px
8 $("img[width!=600]").click(function(){
9 alert("You'vejustselectedanimagewhosewidthisnot600px");
10 });
11 //All the inputs whose name ends with'email'
12 $("input[name$='email']").focus(function(){
13 alert("Thisinputhasanamewhichendswith'email'.");
14 });
15});
在官方文档中,我们可以看到许多选择器与上例中的选择器非常类似。但关键点是一样的,属性和属性值。
多重选择器
如果你开放的是一个较为大型的网站,选择器的使用会变得困难。有时为了让代码变得更为简单,最好将它们分割为两个或三个选择器。实际上这是非常简单和基础的知识,不过非常有用,我们应该把这些知识熟记于心。
16$(document).ready(function(){
17 //Alltheimageswhosewidthis600pxORheightis400px
18 $("mon[width=600],mon[height=400]").click(function(){
19 alert("Selectedanimagewhosewidthis600pxORheightis400px");
20 });
21 //Allpelementswithclassorange_text,divsandimages.
22 $("p.orange_text,div,img").hover(function(){
23 alert("Selectedapelementwithclassorange_text,adivORanimage.");
24 });
25//Wecanalsocombinetheattributesselectors
26 //Allthejpgimageswithanaltattribute(thealt'svaluedoesn'tmatter)
27 $("img[alt][src$='.jpg']").click(function(){
28 alert("Youselectedajpgimagewiththealtattribute.");
29 });
30});
Widget组件选择器
除了插件的选择器之前,还有一些基于元素某些属性或位置的选择器。下面让我们看看这些更为重要的选择器:
1$(document).ready(function(){
2 //All the hidden images are shown
3 $("img:hidden").show();
4//The first pis going to be orange
5 $("p:first").css("color","orange");
6 //Input with type password
7 //thisis$("input[type='password']")
8 $("input:password").focus(function(){
9 alert("This is a password!");
10 });
11//Divswithparagraph
12 $("div:has(p)").css("color","green");
13//Wecanalsocombinethem.with()
14 //Allnotdisabledcheckboxes
15 $("input:checkbox(:not(:disabled))").hover(function(){
16 alert("Thischeckboxisworking.");
17 });
18 });
如上例所示,可供使用的选择器是多种多样的,并且它们之前不是互相独立的,所以我们可以将这些选择器组合起来进行使用,如上例中的选择器。
理解网站的结构
网络的结构可能看起来非常复杂,但事实上并非如此,如果我们想要使用某些选择器以及作用于网络结构之上的方法。我们可以将网站视为一个颠倒的树,树根在顶部,而其他元素从根部延伸出来。查看下面的代码,试着想象一棵树,树根是body标签。
19
20
...21
22
23
24
25
30
Message
31
32
33
36
37
以上示例代码的树形图如下:
很简单,是不是?从现在开始我们可以将html或xhtml看做一棵树,不过我们想做的是程序员,这些植物学的理论有什么用处?答案就在下一个要点之中。
对树进行选择和转换
选择
就想树一样,网站结构中叶存在子与父。在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元素、表格等等,假设我们想要添加一个列表,如下:
5
6
7
8
只是一些字符串,所以我们可以在JavaScript代码中这样写:
9var list= "
10 + "
11 + "
12 + "
13 "
现在我们要在html中某个地方添加字符串。比如,在之前我们选择的p元素之后。
最后我们可以输入完整的代码,如下所示:
14$(document).ready(function(){
15 var list= "
16 + "
17 + "
18 + "
19 "
20
21$("#wrapper").children('#main').append(list);
字面上我们将字符串附加到HTML中的
,结果是这个列表显示在p元素之后。移除元素
移除元素并不难,当我们谈到对树进行转换时,在这一过程一定会涉及元素的移除。下面我们来移除之前选择的那个段落(注意我们可以再次使用选择器)。
23$("#wrapper").children('#main').children('p').remove();
在这一代码中,位于选中元素之中的所有元素都将被移除,所以必须十分小心。如果div下有一个列表,当我们移除该div时,div和列表都会被移除。
表面之下
jQuery类似只露出一角的冰山,在水面之下还有更多内容。这一小结中,我们将向你展示某些表面之下的内容。
绑定(Bind)
绑定是一种方法,利用它,我们可以将一个事件(鼠标点击、悬置等等)与一个方法连接起来。这有点类似:当用户单击此处时,调用该方法。听起来很熟悉,对吗?没错,我们经常这样做。看看以下示例:
24$(document).ready(function(){
25 $("#id").click(function(){
26 alert("Thatclickwasamazing!");
27 });
28});
上文中click()方法在以下代码相对于wrapper:
29$(document).ready(function(){
30 $('#id').bind('click', function (){
31 alert("Thatclickwasamazing!");
32 });
33});
此外,使用unbind()方法可以解除事件与元素的连接。
定义你自己的jQuery方法
目前我们看到了一些方法,如click、bind、hover等等,但是我们如何定义自己的方法?如何使用$(?selector?).m ymethod()这样的语句调用这些方法?以下代码提供了这些问题的解决方案。定义一个方法,显示一个元素的值。
1//ThenamewillbealertVal
2jQuery.fn.alertVal= function(){
3 var element=$(this[0]); //That'sourelement
4 if (element.val())
5 alert(element.val()); //That'sourelement'svalue
6};
7//Thisisthewaywecanuseit
8$("selector").alertVal();
回调(callback)是常用的解决方案
使用回调,我们可以在其他方法完成时执行某个方法。你可以将回调方法看做对别人说:但你做完时,给我电话,因为我要做我的那份工作。不过现在的问题是:如何使用回调?
9$(document).ready(function(){
10 myCallBack= function(){
11 alert("I'macallbackalert.");
12 }
13//WhenthegetfinishesthenmyCallBackisexecuted
14 $.get('myhtmlpage.html',myCallBack);
15});
注意:如果该函数包含参数,我们必须使用以下方式:
16$(document).ready(function(){
17 $.get('myhtmlpage.html',function(){
18 myCallBack(param1,param2);
19 });
20});
结论
本文只是介绍一些技巧,能够让你更好的理解有关jQuery的知识。当然,还有许多技巧比本文所讲的内容更为高级,但你可以将本文看做一名优秀的jQuery开发者迈出的第一步。
jQuery另类视角:动态扩展对象
大家都知道Javascript是动态语言,它对动态的支持是与身俱来的,jQuery作为Javascript 最为流行的框架之一,同样有着这样的特性。文章将从个人的角度出发,研究jQuery的开发者是如何设计出access函数,并让它去支持动态扩展对象。
51CTO推荐专题:jQuery从入门到精通
例如:有一个employee对象:
1function employee(){
2 this.e_id = 0;
3 this.e_name = "";
4}
现在需要为它动态的新增"age"属性和"toString()"方法:
5var empObj = new employee();
6empObj["age"] = 20;
7empObj["toString"] = function() { return this.e_id.toString() + this.e_name; };
一行简单的代码就承担了这项工作,这是Javascript内置支持的,不过往往我们需要在这基础上支持一定程度的扩展,所以会将这一行简单的代码抽成一个方法:8function dym_setprop(obj, key, value) {
9 if (obj && key) {
10 obj[key] = value;
11 }
12}
看到这里,我们先让思路做个跳转,跳到C#中的employee对象,如下:
在面向对象的编程中,对外使用的都是属性(Get/Set),那么想想如何将这种方式签入到Javascript中,现在让我们跳回dym_setprop函数内,既在dym_setprop方法中不能使用obj[key]=value的直接赋值方式,而要支持Set。
13function dym_setprop(obj, key, value, fn) {
14 if (obj && key) {
15 fn(obj, key, value);
16 }
17}
参数fn,在dym_setprop中不直接操作任何对象,使用函数fn来代替相应的操作代码,则在这里除了支持Set外,还有其他很大的自由空间。让我们继续深入dym_setprop方法,现在我们把关注点放在参数value上,大家都清楚value可以是值类型,也可以是函数,对于值类型来说,不用考虑其他东西直接赋值就可以了,对于函数来说就没有这么简单,它支持两种操作:
1、直接将函数赋给新扩展的属性;
2、将函数执行的返回值赋给新扩展的属性。
18function dym_setprop(obj, key, value, fn, exec, pass) {
19 if (obj && key) {
20 var temp = value;
21 if (exec) {
22temp = value.call(obj, key, fn(obj, key));
23 }
24 fn(obj, key, temp, pass);
25 }
26}
在这段代码中参数exec充当了上面两种操作选择的角色,参数pass是一个额外的执行参数。除此之外,大家也许会对fn有些疑惑,因为上面有两个地方使用了,区别只有参数个数不同,fn到底代表什么?!再次想下C#中的属性,它是有Get/Set的,那么在这里fn(obj,key)就相当与Get,而fn(obj,key,temp,pass)就相当与Set。例如:看下面的代码,对于fn的定义与使用,
27employee.AccessProp = function(obj, key, value) {
28 if (value) {
29 obj[key] = value;
30 }
31 else {
32 return obj[key];
33 }
34}
35dym_setprop(empObj, "age", function(key, value) { return value + 10; }, employee.AccessProp, true);
看了这么多,也许大家觉得郁闷,简单的动态扩展对象程序为什么要以这种方式来编写,有种没事找事的感觉,其实不然,如果你只想做动态扩展对象,那么我建议你别采用上述dym_setprop的思路,但是如果你想从更加抽象的角度上思考,将dym_setprop内的程序作为一个流程执行的模板,那么这是一个不错的方式,因为dym_setprop内部不承担任何具体代码(obj[key]=value或obj[key])的执行,它都通过函数fn来代替,这样对于具体执行来说有完全自由的空间。理解完上述的思路后,让我们进入本文的核心,jQuery是如何实现动态扩展对象的?access函数,
36function access( elems, key, value, exec, fn, pass ) {
37 var length = elems.length;
38 // Setting many attributes
39 if ( typeof key === "object" ) {
40 for ( var k in key ) {
41access( elems, k, key[k], exec, fn, value );
42 }
43 return elems;
44 }
45 // Setting one attribute
46 if ( value !== undefined ) {
47 // Optionally, function values get executed if exec is true
48 exec = !pass && exec && jQuery.isFunction(value);
49 for ( var i = 0; i 50fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass ); 51 } 52 return elems; 53 } 54 // Getting an attribute 55 return length ? fn( elems[0], key ) : null; 56} 仔细看完access函数的代码,你一定发现它和dym_setprop的相试度很高,它只是多了一段代码: 57if ( typeof key === "object" ) { 58 for ( var k in key ) { 59 access( elems, k, key[k], exec, fn, value ); 60 } 61 return elems; 62} 很容易看出它其实就是用来支持object对象的动态扩展属性。具体的执行流程通过下图来展示: 到这里已经写完了,本文试着从自己的角度上去猜测jQuery的开发者是如何设计出access函数的,让它去支持动态扩展对象,并且说明了access的执行流程。其实对于我的这种猜测不一定正确,不过不妨碍我对于jQuery的研究。 学习jQuery必须知道的几种常用方法 jQuery事件处理 ready(fn) 代码: $(document).ready(function(){ // Your code here... }); 作用:它可以极大地提高web应用程序的响应速度。通过使用这个方法,可以在DOM 载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的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) 代码: $(".stripe tr").mouseover(function(){ $(this).addClass("over");}).mouseout(function(){ $(this).removeClass("over");}) }); 也可以写成: $(".stripe tr").mouseover(function() { $(this).addClass("over") }); $(".stripe tr").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: https://www.doczj.com/doc/f43883102.html,/%22/< /A> < FORM> jQuery 代码: < /FORM> $("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") ); 结果: [ John, password, < A href="https://www.doczj.com/doc/f43883102.html,/%3C/p">https://www.doczj.com/doc/f43883102.html,/%3C/p< /A> ] 作用:将一组元素转换成其他数组(不论是否是元素数组)你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。 find(expr) HTML 代码: < SPAN>Hello< /SPAN>, how are you? jQuery 代码: $("p").find("span") 结果: [ < SPAN>Hello< /SPAN> ] 作用:搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 文档处理 attr(key,value) HTML 代码: < IMG>< IMG> jQuery 代码: $("img").attr("src","test.jpg"); 作用:取得或设置匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回undefined 。在控制HTML标记上是必备的工具。 html()/html(val) HTML 代码: < DIV> Hello < /DIV> jQuery 代码: $("div").html(); 结果: Hello 作用:取得或设置匹配元素的html内容,同类型的方法还有text()和val()。前者是取得所有匹配元素的内容。,后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上。 wrap(html) HTML 代码: Test Paragraph. jQuery 代码: $("p").wrap(" < DIV class=wrap>< /DIV>"); 结果:< DIV class=wrap> Test Paragraph.
作用:把所有匹配的元素用其他元素的结构化标记包裹起来。这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。可以灵活的修改我们的DOM。
empty()
HTML 代码:
Hello,Person,
and person< /A>
jQuery 代码:
$("p").empty();
结果:
作用:删除匹配的元素集合中所有的子节点。
Ajax处理
load(url,[data],[callback])
url (String) : 待装入HTML 网页网址。
data (Map) : (可选) 发送至服务器的key/value 数据。
callback (Callback) : (可选) 载入成功时回调函数。
代码:
$("#feeds").load("feeds.aspx", {limit: 25}, function(){
alert("The last 25 entries in the feed have been
loaded");
});
作用:载入远程HTML 文件代码并插入至DOM 中。这也是Jquery操作Ajax最常用最有效的方法。
serialize()
HTML 代码:
Results:
< FORM>
< SELECT name=single> < OPTION selected>Single< /OPTION>
< OPTION>Single2< /OPTION> < /SELECT>
< SELECT multiple name=multiple> < OPTION selected>Multiple<
/OPTION>
< OPTION>Multiple2< /OPTION> < OPTION selected>Multiple3< /OPTION> < /SELECT>
< INPUT value=check1 type=checkbox name=check> check1
< INPUT value=check2 type=checkbox name=check
checked="checked"/> check2
< INPUT value=radio1 type=radio name=radio
checked="checked"/> radio1
< INPUT value=radio2 type=radio name=radio> radio2
< /FORM>
jQuery 代码:
$("#results").append( "< TT>" + $("form").serialize() +
"< /TT>" );
作用:序列化表格内容为字符串。用于Ajax 请求。
工具
jQuery.each(obj,callback)
代码:
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});//遍历数组
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );//遍历对象
});
作用:通用例遍方法,可用于例遍对象和数组。
jQuery.makeArray(obj)
HTML 代码:
First
< DIV>Second< /DIV>Third< /DIV> < DIV>Fourth< /DIV>
jQuery 代码:
var arr = jQuery.makeArray(
document.getElementsByTagName("div"));
结果:
Fourth
Third
Second
First
作用:将类数组对象转换为数组对象。使我们可以在数组和对象之间灵活的转换。
jQuery.trim(str)
作用:这个大家应该很熟悉,就是去掉字符串起始和结尾的空格。
实用简单的jQuery插件教程
1、jQuery插件教程引言
开发jQuery插件是一个高级的话题对于jQuery初学者。这个月,我一直在加强学习jQuery。尽管我学习如何把javascript代码和html文档分开。当我看到我自己的javascipt文件时,我并不满意。它太脏乱,所以我决定更近一步-学习如何开发jQuery插件来整理javascript文件。
这个插件是基于我以前的教程-Navigation List menu + jQuery Animate Effect Tutorial 。上次,我写编写的脚本都把代码放到document.ready段落中,就像下面的代码。
1$(document).ready(function() {
3$('ul#menu li:even').addClass('even');
5$('ul#menu li a').mouseover(function() {
7 $(this).animate( { paddingLeft:"20px" }, { queue:false, duration:500 }); 9}).mouseout(function() {
11 $(this).animate( { paddingLeft:"0" }, { queue:true, duration:500 }); 13}).click(function() {
15 $(this).animate( { fontSize:"20px" }, { queue:false, duration:500 }); 16});
18});
但是现在我想把代码写成类似如下格式:
1$(document).ready(function() {
3 $(#menu).animateMenu({
4 padding:20
5 })
7});
这样的格式看起来更简练,而且这些脚本可以在另一个工程重用。
2、插件结构
jQuery 官方网站在Plugins/Authoring页面提供了非常详细的说明。但是我发现它非常难以理解。
不过没关系,为了使编写插件更容易,使用下面的小段用来开发插件将是一个非常好的结构。
1//为了避免冲突,你需要一个匿名函数来包装你的函数
2(function($){
4 //给jQuery附加一个新的方法
5 $.fn.extend({
7 //这儿就是你要开发插件的名子
8 pluginname: function() {
10 //迭代当前匹配元素集合
11 return this.each(function() {
13 //插入自己的代码
15 });
16 }
17 });
19//传递jQuery参数到函数中,
20//因此我们能使用任何有效的javascipt变量名来替换“$“符号。但是我们将坚持使用 $ (我喜欢美元符号:)
2、带有可选项的插件
如果你看了第一步的介绍,"padding"值对于这个插件是用户配置的。他有利于一些设置,所以用户能改变设置根据他们自己的需要。请确定你为每一个变量指定了默认值。现在,如下的代码:
1(function($){
3 $.fn.extend({
5 //pass the options variable to the function
6 pluginname: function(options) {
9 //Set the default values, use comma to separate the settings, example:
10 var defaults = {
11 padding: 20,
12 mouseOverColor : '#000000',
13 mouseOutColor : '#ffffff'
14 }
16 var options = $.extend(defaults, options);
18 return this.each(function() {
19 var o = options;
21 //code to be inserted here
22 //you can access the value like this
23 alert(o.padding);
25 });
26 }
27 });
29})(jQuery);
3、动态菜单插件
现在你学习了插件的结构。紧接着是我基于以前教程的开发的插件。插件它允许4个配置:
1)、animatePadding : 给animate 效果设置”padding“值
2)、defaultPadding : 给padding设置默认的值
3)、evenColor :设置偶数行事件的颜色
4)、oddColor : 设置奇数行事件的颜色
1(function($){
2 $.fn.extend({
3 //plugin name - animatemenu
4 animateMenu: function(options) {
6 //Settings list and the default values
7 var defaults = {
8 animatePadding: 60,
9 defaultPadding: 10,
10 evenColor: '#ccc',
原文地址:js和jquery获取父级元素、子级元素、兄弟元素的方法作者:草根gis 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 原生的JS获取ID为test的元素下的子元素。可以用: var a = docuemnt.getElementById("test").getElementsByTagName_r("div"); 这样是没有问题的 此时a.length=2; 但是如果我们换另一种方法 var b =document.getElementByIdx_x("test").childNodes; 此时b.length 在IE浏览器中没问题,其依旧等于2,但是在FF浏览器中则会使4,是因为FF把换行也当做一个元素了。 所以,在此,我们就要做处理了,需遍历这些元素,把元素类型为空格而且是文本都删除。 functiondel_ff(elem){ varelem_child = elem.childNodes; for(vari=0; i< p=""> if(elem_child[i].nodeName == "#text" && !/s/.test(elem_child.nodeValue)) {elem.removeChild(elem_child)
} } } 上述函数遍历子元素,当元素里面有节点类型是文本并且文本类型节点的节点值是空的。就把他删除。 nodeNames可以得到一个节点的节点类型,/s/是非空字符在JS里的正则表达式。前面加!,则表示是空字符 test() 方法用于检测一个字符串是否匹配某个模式.语法是:RegExpObject.test(string) 如果字符串string 中含有与RegExpObject 匹配的文本,则返回true,否则返回false。 nodeValue表示得到这个节点里的值。 removeChild则是删除元素的子元素。 之后,在调用子,父,兄,这些属性之前,调用上面的函数把空格清理一下就可以了 下面介绍JQUERY的父,子,兄弟节点查找方法 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素
1.以下关于jQuery的描述错误的是()。(选一项) A、jQuery 是一个 JavaScript 函数库 B、jQuery 极大地简化了 JavaScript 编程 C、jQuery 的宗旨是“write less,do more” D、jQuery的核心功能不是根据选择器查找HTML元素,然后对这些元素执行相应的操作 2.在jQuery中,下列关于文档就绪函数的写法错误的是()。(选一项) A、$(document).ready(function() { }); B、$(function() { }); C、$(document)(function() { }); D、$().ready(function() { }); 3.以下()选项不能够正确地得到这个标签:(选一项) A、$("#btnGo") B、$(".btnGo") C、$(".btn") D、$("input[type='button']") 4.在HTML页面中有如下结构的代码:
jQuery常用方法中文解析 jQuery设计思想 【目录】 一、选择网页元素 二、改变结果集 三、链式操作 四、元素的操作:取值和赋值 五、元素的操作:移动 六、元素的操作:复制、删除和创建 七、工具方法 八、事件操作 九、特殊效果 一、选择网页元素 jQuery的基本设计和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。这是它区别于其他函数库的根本特点。使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。选择表达式可以是CSS选择器: $(document) //选择整个文档对象 $('#myId') //选择ID为myId的网页元素 $('div.myClass') // 选择class为myClass的div元素 $('input[name=first]') // 选择name属性等于first的input元素 也可以是jQuery特有的表达式: $('a:first') //选择网页中第一个a元素 $('tr:odd') //选择表格的奇数行 $('#myForm :input') // 选择表单中的input元素 $('div:visible') //选择可见的div元素 $('div:gt(2)') // 选择所有的div元素,除了前三个 $('div:animated') // 选择当前处于动画状态的div元素
二、改变结果集 如果选中多个元素,jQuery提供过滤器,可以缩小结果集: $('div').has('p'); // 选择包含p元素的div元素 $('div').not('.myClass'); //选择class不等于myClass的div元素 $('div').filter('.myClass'); //选择class等于myClass的div元素 $('div').first(); //选择第1个div元素 $('div').eq(5); //选择第6个div元素 有时候,我们需要从结果集出发,移动到附近的相关元素,jQuery也提供了在DOM树上的移动方法: $('div').next('p'); //选择div元素后面的第一个p元素 $('div').parent(); //选择div元素的父元素 $('div').closest('form'); //选择离div最近的那个form父元素 $('div').children(); //选择div的所有子元素 $('div').siblings(); //选择div的同级元素 三、链式操作 选中网页元素以后,就可以对它进行某种操作。jQuery允许将所有操作连接在一起,以链条的形式写出来,比如: $('div').find('h3').eq(2).html('Hello'); 分解开来,就是下面这样: $('div') //找到div元素 .find('h3') //选择其中的h3元素 .eq(2) //选择第3个h3元素 .html('Hello'); //将它的内容改为Hello 这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。jQuery还提供了.end()方法,使得结果集可以后退一步: $('div').find('h3').eq(2).html('Hello').end() //退回到选中所有的h3元素的那一步.eq(0) //选中第一个h3元素.html('World'); //将它的内容改为World
jQuery常用功能大全 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery 对象(集合对象),不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如:$(document.getElementByIdx_x("msg"))则为jquery对象,可以使用jquery的方法。 由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。 如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。 以下几种写法都是正确的: $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0).innerHTML; 3、如何获取jQuery集合的某一项 对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery 对象,而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个
jQuery入门[1]-构造函数 https://www.doczj.com/doc/f43883102.html,/archive/2008/03/05/1091816.html jQuery优点 ?体积小(v1.2.3 15kb) ?丰富的DOM选择器(CSS1-3 + XPath) ?跨浏览器(IE6,FF,Safari,Opera) ?链式代码 ?强大的事件、样式支持 ?强大的AJAX功能 ?易于扩展,插件丰富 jQuery的构造函数接收四种类型的参数: jQuery(expression,context) jQuery(html) jQuery(elements) jQuery(fn) 第一种根据表达式(ID,DOM元素名,CSS表达式,XPath表达式)找出文档中的元素,并组装成一个jQuery对象返回。 DEMO: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.doczj.com/doc/f43883102.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">