基于属性的选择器
在HTML中,几乎所有元素都具有属性,比如:
1.
2.
上面两个HMTL元素中包含了九个属性。利用jQuery,我们可以根据元素的属性和属性值来对元素进行选择。一起看看以下例子中的选择器:
3.$(document).ready(function(){
4.
5. //Alltheimageswhosewidthis600px
6.
7. $("img[width=600]").click(function(){
8.
9. alert("You'vejustselectedanimagewhosewidthis600px");
10.
11. });
12.
13. //Alltheimageshavingawidthdifferentto600px
14.
15. $("img[width!=600]").click(function(){
16.
17. alert("You'vejustselectedanimagewhosewidthisnot600px");
18.
19. });
20.
21. //Alltheinputswhosenameendswith'email'
22.
23. $("input[name$='email']").focus(function(){
24.
25. alert("Thisinputhasanamewhichendswith'email'.");
26.
27. });
28.
29.});
基于属性的选择器
在HTML中,几乎所有元素都具有属性,比如:
1.
2.
上面两个HMTL元素中包含了九个属性。利用jQuery,我们可以根据元素的属性和属性值来对元素进行选择。一起看看以下例子中的选择器:
3.$(document).ready(function(){
4.
5. //Alltheimageswhosewidthis600px
6.
7. $("img[width=600]").click(function(){
8.
9. alert("You'vejustselectedanimagewhosewidthis600px");
10.
11. });
12.
13. //Alltheimageshavingawidthdifferentto600px
14.
15. $("img[width!=600]").click(function(){
16.
17. alert("You'vejustselectedanimagewhosewidthisnot600px");
18.
19. });
20.
21. //Alltheinputswhosenameendswith'email'
22.
23. $("input[name$='email']").focus(function(){
24.
25. alert("Thisinputhasanamewhichendswith'email'.");
26.
27. });
28.
29.});
Widget组件选择器
除了插件的选择器之前,还有一些基于元素某些属性或位置的选择器。下面让我们看看这些更为重要的选择器:
1.$(document).ready(function(){
2.
3. //Allthehiddenimagesareshown
4.
5. $("img:hidden").show();
6.
7.//Thefirstpisgoingtobeorange
8.
9. $("p:first").css("color","orange");
10.
11. //Inputwithtypepassword
12.
13. //thisis$("input[type='password']")
14.
15. $("input:password").focus(function(){
16.
17. alert("Thisisapassword!");
18.
19. });
20.
21.//Divswithparagraph
22.
23. $("div:has(p)").css("color","green");
24.
25.//Wecanalsocombinethem.with()
26.
27. //Allnotdisabledcheckboxes
28.
29. $("input:checkbox(:not(:disabled))").hover(function(){
30.
31. alert("Thischeckboxisworking.");
32.
33. });
34.
对树进行选择和转换
选择
就想树一样,网站结构中叶存在子与父。在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.
7.
8.
9.
10.
11.
12.
只是一些字符串,所以我们可以在JavaScript代码中这样写:
13.var list= "
14.
15. + "
16.
17. + "
18.
19. + "
20.
21. "
现在我们要在html中某个地方添加字符串。比如,在之前我们选择的p元素之后。
最后我们可以输入完整的代码,如下所示:
22.$(document).ready(function(){
23.
24. var list= "
25.
26. + "
27.
28. + "
29.
30. + "
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.//ThenamewillbealertVal
2.jQuery.fn.alertVal= function(){
3.
4. var element=$(this[0]); //That'sourelement
5.
6. if (element.val())
7.
8. alert(element.val()); //That'sourelement'svalue
9.
10.};
11.//Thisisthewaywecanuseit
12.$("selector").alertVal();
回调(callback)是常用的解决方案
使用回调,我们可以在其他方法完成时执行某个方法。你可以将回调方法看做对别人说:但你做完时,给我电话,因为我要做我的那份工作。不过现在的问题是:如何使用回调?
13.$(document).ready(function(){
14.
15.myCallBack= function(){
16.
17. alert("I'macallbackalert.");
18.
19. }
20.
21.//WhenthegetfinishesthenmyCallBackisexecuted
22.
23. $.get('myhtmlpage.html',myCallBack);
24.
25.});
注意:如果该函数包含参数,我们必须使用以下方式:
26.$(document).ready(function(){
27.
28. $.get('myhtmlpage.html',function(){
29.
30. myCallBack(param1,param2);
31.
32. });
33.
34.});
?jQuery中为我们提供了很多有用的方法和属性,文章总结了一些常用的函数和方法。个人认为在开发中会比较常用的,在实际的开发中我们可能会用到其他的方法和属性,文中只是个人认为新手初学jQuery时,必须掌握的一些方法。
?51CTO推荐专题:入门到精通 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(
?作用:每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。挺有趣的一个函数,在动态实现某些功能的时候可能会用到。(像click(),focus(),keydown()这样的事件这里就不提了,那些都是开发中比较常用到的。)
?jQuery外观效果
?addClass(class)和removeClass(class)
?代码:
?也可以写成:
?作用:为指定的元素添加或移除样式,从而实现动态的样式效果,上面的实例中实现鼠标移动双色表格的代码
?css(name,value)
?代码:
?作用:很简单,就是在匹配的元素中,设置一个样式属性的值。这个个人感觉和上面的addClass(class)有点类似。
?slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()
?代码:
?作用:jQuery中提供的比较常用的几个动态效果的函数。还可以添加参数:show(speed,[callback])以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。
?animate(params[,duration[,easing[,callback]]])
?作用:制作动画效果用到的函数,功能非常的强大,可以连续使用此函数。
?查找筛选
?map(callback)
?HTML 代码:
?jQuery 代码:
?结果:
?作用:将一组元素转换成其他数组(不论是否是元素数组)你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。
?
find(expr)
?HTML 代码:
?
作用:搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
?
文档处理
?
HTML 代码:
?
jQuery 代码:
?
作用:取得或设置匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。在控制HTML 标记上是必备的工具。
?
html()/html(val)
?HTML 代码:
?jQuery 代码:
?$("div").html();
?结果:
?Hello
?作用:取得或设置匹配元素的html内容,同类型的方法还有text()和val()。前者是取得所有匹配元素的内容。,后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上。
?作用:把所有匹配的元素用其他元素的结构化标记包裹起来。这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。可以灵活的修改我们的DOM。
?
?empty()
?HTML 代码:
?jQuery 代码:
?$("p").empty();
?结果:
?作用:删除匹配的元素集合中所有的子节点。
?Ajax处理
?load(url,[data],[callback])
?url (String) : 待装入 HTML 网页网址。
?data (Map) : (可选) 发送至服务器的 key/value 数据。
?callback (Callback) : (可选) 载入成功时回调函数。
?代码:
?
作用:载入远程 HTML 文件代码并插入至 DOM 中。这也是Jquery操作Ajax最常用最有效的方法。
?
serialize()
?HTML 代码:
?Results:
?jQuery 代码:
?作用:序列化表格内容为字符串。用于 Ajax 请求。?工具
?jQuery.each(obj,callback)
?代码:
?作用:通用例遍方法,可用于例遍对象和数组。
?jQuery.makeArray(obj)
?HTML 代码:
< DIV>Fourth
< /DIV>
?
jQuery 代码:
var arr =
jQuery.makeArray(document.getElementsByTagName("div"));
?结果:
?Fourth
?Third
?Second
?First
?作用:将类数组对象转换为数组对象。使我们可以在数组和对象之间灵活的转换。
?jQuery.trim(str)
?作用:这个大家应该很熟悉,就是去掉字符串起始和结尾的空格。
?小结:在实际的开发中我们可能会用到其他的方法和属性,以上只是个人认为新手初学jQuery时,必须掌握的一些方法。仅供大家学习的参考。有什么不对的高手指教。
?5种方法教你用jQuery重写表单验证(1)
?https://www.doczj.com/doc/754292961.html, 2010-05-27 09:11 qibaiyilang 百度空间我要评论(0)
这里给大家介绍使用jQuery的load()方法、$.get()、$.post()、$.ajax()和表单插件(Form Plugin)5种方法分别重写“表单验证”的实例,并且进一步说明中文乱码的问题。
前面我们曾介绍过使用jQuery技巧来提高代码质量,因为jQuery非常容易上手并使用简单。重写表单验证是程序员们经常做的事情,使用jQuery我们有五种方法可以选择,同时也能够解决乱码的问题。
首先,对编码知识进行简要的说明,请务必理解后再看下面的代码。发送中文字符请求时,如果使用get方式,运行正常;而使用post方法则会出现乱码。这是由于异步对象XMLHttpRequest在处理返回的responseText的时候,是按UTF-8编码进行解码的。
如果你原来的网页编码是gb2312的话,当然会发生编码的冲突了;如果你原来的网页编码是utf-8,那么就不会出现中文乱码的问题了。
出现了中文乱码该怎么办呢?通常的解决办法是用escape()对发送的数据进行编码,然后在返回的responseText上再用unescape()进行解码。然而在JavaScript编程中通常不推荐使用escape()和unescape(),而推荐使用encodeURI()和decodeURI()。请看下面的“表单验证实例”,或许对你学习编码知识有一定的帮助。
第一、jQuery的load(url,[data],[callback])方法
语法说明:url为异步请求的地址,data用来向服务器传送请求数据,为可选参数。一旦data参数启用,整个请求过程将以post的方式进行,否则默认为get方式。如果希望在get方式下也传递数据,可以在url地址后面用类似“dataname1=data1&dataName2=data2”的方法。
callback为Ajax加载成功后运行的回调函数。另外使用load()方法返回的数据,不再需要考虑是文本还是XML,jQuery都会自动进行处理。好了,下面马上使用load()方法实现“自动表单验证”实例。首先是,html框架,5个例子都是一样的,如下:
1.