jQuery入门[2]-选择器

jQuery入门[1]-构造函数
jQuery入门[2]-选择器
jQuery入门[3]-事件
jQuery入门[4]-链式代码
jQuery入门[5]-AJAX
jQuery入门[6]-动画

jQuery之所以令人爱不释手,在于其强大的选择器表达式令DOM操作优雅而艺术。
jQuery的选择符支持id,tagName,css1-3 expressions,XPath,参见:http://docs.jquery.com/Selectors
DEMO:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<title>Selector</title>
    
<script src="../scripts/jquery-1.2.3.intellisense.js" type="text/javascript"></script>
</head>
<body>
    
<input value="1" /> + 
    
<input value="2" />
    
<input type="button" value="=" />
    
<label>&nbsp;</label>
    
<script type="text/javascript">
        $(
"input[type='button']").click(function(){
            
var i = 0;
            $(
"input[type='text']").each(function(){
                i 
+= parseInt($(this).val());
            });
            $(
'label').text(i);
        });
        $(
'input:lt(2)')
            .add(
'label')
            .css(
'border','none')
            .css(
'borderBottom','solid 1px navy')
            .css({
'width':'30px'});
    
</script>
</body>
</html>
运行效果如下:

代码分解:
$("input[type='button']")用于找到type属性为button的input元素(此为CSS表达式,IE7才开始支持,所以在IE6中通常用jQuery的这种表达式代替CSS代码设置样式)。click()函数为button添加click事件处理函数。
在button_click时,$("input[type='text']")找出所有输入框,each()函数遍历找出来的数组中的对象的值,相加后设到label中。
        $('input:lt(2)')
            .add('label')
两行代码意为:所有input中的前面两个(lt表示序号小于)再加上label对象合并成一个jQuery对象。
            .css('border','none')
            .css('borderBottom','solid 1px navy')
            .css({'width':'30px'});
以上三行代码都是针对之前的jQuery对象设置CSS样式,如果一次需要设置多个CSS值,可用另一种形式,如:
            .css({'border':'none','borderBottom':'solid 1px navy','width':'30px'});
css()函数如果只传一个字符串参数,则为取样式值,比如css('color')为取得当前jQuery对象的样式属性color的值。jQuery对象有多种这样的函数,比如,val('')为设value,val()为取value,text('text')为设innerText,text()为取得innerText,此外还有html(),用于操作innerHTML,而click(fn)/click(),change(fn)/change()……系统函数则为事件的设置处理函数与触发事件。
由于多数jQuery对象的方法仍返回当前jQuery,所以jQuery代码通常写成一串串的,如上面的
            .css('border','none')
            .css('borderBottom','solid 1px navy')
            .css({'width':'30px'});
,而不需要不断重复定位对象,这是jQuery的链式特点,后面文章还会有补充。

referrence:http://docs.jquery.com/Selectors

--未完代续--
posted @ 2008-03-05 14:39 Think 阅读(17469) 评论(20) 编辑 收藏

 回复 引用 查看   
#1楼2008-03-06 08:37 | 无忧浪子      
真是比较强呀.
 回复 引用 查看   
#2楼2008-08-19 16:08 | Myhsg      
好文,不得不顶啊
 回复 引用 查看   
#3楼2008-10-22 20:59 | 小灰      
楼主的代码我运行不了,改为如下可以运行:
$(function(){
$("input[@type='button']").click(function(){
var i = 0;
$("input[@type='text']").each(function(){
i += parseInt($(this).val());
});
$('label').html(i);
});
$('input:lt(2)')
.add('label')
.css('border','none')
.css('borderBottom','solid 1px navy')
.css({'width':'30px'});

});

 回复 引用 查看   
#4楼2008-10-22 21:00 | 小灰      
cnblogs验证码有问题了。总是提示验证码错误。登录后才能发表
 回复 引用 查看   
#5楼2008-11-19 10:34 | 鹏鹏_Lovely      
我怎么感觉这篇文章好像不是那么适合入门哦。呜呜呜……
 回复 引用 查看   
#6楼[楼主]2008-11-19 17:28 | Lyn      
@鹏鹏_Lovely
当然,先要对Javascript比较熟悉了

 回复 引用 查看   
#7楼2009-02-23 16:13 | virus      
@小灰
$("input[@type='button']").click(function(){
这个selector有问题吧,我的要改成
$("input[type='button']").click(function(){
也就是去掉@才正确,不知道为什么,我的配置是vs20008+jquery1.3.2
楼主说呢

 回复 引用 查看   
#8楼[楼主]2009-02-24 10:24 | THIN(K)      
--引用--------------------------------------------------
virus: @小灰
$(&quot;input[@type='button']&quot;).click(function(){
这个selector有问题吧,我的要改成
$(&quot;input[type='button']&quot;).click(function(){
也就是去掉@才正确,不知道为什么,我的配置是vs20008+jquery1.3.2
楼主说呢

--------------------------------------------------------
这是JQuery支持的Selector的问题,@是CSS风格的表达式,没有的是XPath式的,可能你的版本不支持@这种了

 回复 引用   
#9楼2009-06-26 10:35 | 这世界真惨
@THIN(K)
旧版的需要加@而新版的要去掉,具体哪个版本分割我也不清楚。。。反正1.3版本肯定要去掉的~~~我一开始就用1.3没用过以前的版本,所以不知道具体哪个版本开始可以去掉@的喽

 回复 引用   
#10楼2009-08-24 20:07 | 方法[未注册用户]
firefox 不行,IE行
 回复 引用 查看   
#11楼2009-09-11 11:23 | 禺遇      
为什么 ,我的运行总是 0 类?
 回复 引用   
#12楼2009-10-26 11:34 | zhanghjx[未注册用户]
请问这句话是什么意思
i += parseInt($(this).val());

 回复 引用   
#13楼2009-10-27 16:52 | hellouniverse[未注册用户]
看不到效果的把
<input value="1" /> + <input value="2" />
改成
<input type="text" value="1" /> + <input type="text" value="2" />就可以了。


 回复 引用 查看   
#14楼[楼主]2009-11-20 14:04 | Think      
引用zhanghjx:
请问这句话是什么意思
i += parseInt($(this).val());


$("input[type='text']").each(function(){
i += parseInt($(this).val());
});

each会把$("input[type='text']")获得数组中的每个对象放到后面的函数中执行一下,在each的函数里,this就是当前执行的对象。

整句话就是把每个input的value相加

 回复 引用 查看   
#15楼2009-12-15 11:42 | e路狂奔      
引用Think:
引用zhanghjx:
请问这句话是什么意思
i += parseInt($(this).val());


$("input[type='text']").each(function(){
i += parseInt($(this).val());
});

each会把$("input[type='text']")获得数组中的每个对象放到后面的函数中执行一下,在each的函数里,this就是当前执行的对象。

整句话就是把每个input的value相加


 回复 引用 查看   
#16楼2010-04-19 09:27 | THRONE      
看过了不得不顶
 回复 引用 查看   
#17楼2010-07-05 11:27 | 轩~雨~阁      
学习!
 回复 引用 查看   
#18楼2011-10-10 19:30 | Yueyu Zhao      
引用hellouniverse:
看不到效果的把
<input value="1" /> + <input value="2" />
改成
<input type="text" value="1" /> + <input type="text" value="2" />就可以了。


FF不行的就这样改下就好力

 回复 引用 查看   
#19楼2011-10-10 19:31 | Yueyu Zhao      
好文章,顶一下,正在努力学习jQuery!