当前位置：首页 → 问答吧 → jquery 选择器问题求助

jquery 选择器问题求助

时间：2009-05-04

来源：互联网

$('#box1','#box2').css('display', 'block');
上面这样写与下面这样写区别在哪里?
$('#box2').css('display','block');
$('#box1').css('display','block');

------------------------------------------------------------------------------------------------------------------------------------------------------------------------
在学习<jquery in action>(jquery 实战)中遇到问题
看不懂
$('div',$(this).parents('div:first')).css('display',checked ? 'block':'none');
这一句，请大家指教!谢谢了

复制代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bamboo Asian Grille - Online Order Form</title>
<link rel="stylesheet" type="text/css" href="bamboo.css">
<script type="text/javascript"
src="../../scripts/jquery-1.2.1.js"></script>
<script type="text/javascript">
$(function(){
$('fieldset div div').hide();
$(':checkbox').click(function(){
var checked = this.checked;
$('div',$(this).parents('div:first'))
.css('display',checked ? 'block':'none');
$('input[type=text]',$(this).parents('div:first'))
.attr('disabled',!checked)
.css('color',checked ? 'black' : '#f0f0f0')
.val(1)
.change()
.each(function(){ if (checked) this.focus(); });
});
$('span[price] input[type=text]').change(function(){
$('~ span:first',this).text(
$(this).val() *
$(this).parents("span[price]:first").attr('price')
);
});
$('span[price] input[type=text]').change();
});
</script>
</head>
<body>
<h1>Bamboo Asian Grille</h1>
<h2>Online Order Menu</h2>
<fieldset>
<legend>Appetizers</legend>
<div>
<label>
<input type="checkbox" name="appetizers"
value="imperial"/>
Fried Imperial rolls (2)
</label>
<span price="3">
<input type="text" name="imperial.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="imperial.option"
value="pork" checked="checked"/>
Pork
</label>
<label>
<input type="radio" name="imperial.option"
value="vegetarian"/>
Vegetarian
</label>
</div>
</div>
<div>
<label>
<input type="checkbox" name="appetizers" value="spring"/>
Spring rolls (2)
</label>
<span price="4">
<input type="text" name="spring.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="spring.option" value="pork"
checked="checked"/>
Pork
</label>
<label>
<input type="radio" name="spring.option"
value="shrimp"/>
Pork and Shrimp
</label>
<label>
<input type="radio" name="spring.option"
value="vegetarian"/>
Vegetarian
</label>
</div>
</div>
<div>
<label>
<input type="checkbox" name="appetizers" value="vnrolls"/>
Vietnamese rolls (4)
</label>
<span price="5">
<input type="text" name="vnrolls.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="vnrolls.option" value="pork"
checked="checked"/>
Pork
</label>
<label>
<input type="radio" name="vnrolls.option"
value="shrimp"/>
Pork and Shrimp
</label>
<input type="radio" name="vnrolls.option"
value="vegetarian"/>
<label>Vegetarian</label>
</div>
</div>
<div>
<label>
<input type="checkbox" name="appetizers" value="rangoon"/>
Crab rangoon (8)
</label>
<span price="6">
<input type="text" name="rangoon.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="rangoon.option"
value="sweet checked="checked"/>
Sweet-and-sour sauce
</label>
<label>
<input type="radio" name="rangoon.option" value="hot"/>
Hot mustard
</label>
<label>
<input type="radio" name="rangoon.option" value="both"/>
Both
</label>
</div>
</div>
<div>
<label>
<input type="checkbox" name="appetizers"
value="stickers"/>
Pot stickers (6)
</label>
<span price="5">
<input type="text" name="stickers.quantity"
disabled="disabled" value="1"/>
$<span></span>
</span>
<div>
<label>
<input type="radio" name="stickers.option"
value="pork" checked="checked"/>
Pork
</label>
<label>
<input type="radio" name="stickers.option"
value="vegetarian"/>
Vegetarian
</label>
</div>
</div>
<div></div>
</fieldset>
</body>
</html>

作者: cutstring 发布时间: 2009-05-04

$('#box1','#box2').css('display', 'block');

这个表示在#box2中寻找#box1，属于没事找事型的。除了降低执行效率没有好处。因为整个页面ID应该是唯一的。

$('div',$(this).parents('div:first')).css('display',checked ? 'block':'none');
等价于
if(checked == true){
$('div',$(this).parents('div:first')).css('display', 'block');
}else{
$('div',$(this).parents('div:first')).css('display', 'none');
}

作者: shawphy 发布时间: 2009-05-04

$('#box1','#box2').css('display', 'block');
就是找#box1，这个#box1必须包含在#box2，等同于
$('#box2 #box1').css('display', 'block');
即#box2里的#box1。如果没有特殊原因，一般直接这样写：$('#box1').css('display', 'block');

$('#box1, #box2').css('display', 'block'); //中间的引号去掉
等同于
$('#box2').css('display','block');
$('#box1').css('display','block');

$('div',$(this).parents('div:first')).css('display',checked ? 'block':'none');
找div，这个div必须是$(this)的父元素（即$(':checkbox')的父元素），且只取匹配到的第一个父元素。然后判断$(':checkbox')是否选定，选定就显示这个div，否则不显示。

作者: keakon 发布时间: 2009-05-05

明白了，谢谢两位解答!

作者: cutstring 发布时间: 2009-05-05

jquery 选择器问题求助

热门阅读

热门下载