jquery选择器疑问

winzond 2018-06-07 11:02:22
<!DOCTYPE html>
<html>
<head>
<title>DVD Ambassador — Disc Locator</title>
<link rel="stylesheet" type="text/css" href="dvds.css">
<script type="text/javascript" src="../../scripts/jquery-1.4.js"></script>
<script type="text/javascript">
var filterCount = 0;

$(function() {

$('#addFilterButton').click(function(){
var filterItem = $('<div>')
.addClass('filterItem')
.appendTo('#filterPane')
.data('suffix','.' + (filterCount++));
$('div.template.filterChooser')
.children().clone().appendTo(filterItem)
.trigger('adjustName');
});

$('select.filterChooser').live('change',function(){
var filterType = $(':selected',this).attr('data-filter-type');
var filterItem = $(this).closest('.filterItem');
$('.qualifier',filterItem).remove();
$('div.template.'+filterType)
.children().clone().addClass('qualifier')
.appendTo(filterItem)
.trigger('adjustName');
$('option[value=""]',this).remove();
});

$('button.filterRemover').live('click',function(){
$(this).closest('div.filterItem').remove();
});

$('.filterItem [name]').live('adjustName',function(){
var suffix = $(this).closest('.filterItem').data('suffix');
if (/(\w)+\.(\d)+$/.test($(this).attr('name'))) return;
$(this).attr('name',$(this).attr('name')+suffix);
});

$('#addFilterButton').click();

$('#filtersForm').submit(function(){
$('#resultsPane').load('applyFilters',$('#filtersForm').serializeArray());
return false;
});

/* bonus exercise code -- uncomment to enable
$('input.numeric').live('keypress',function(event){
if (event.which < 48 || event.which > 57) return false;
});
*/

});

</script>
</head>

<body>
<div id="pageContent">

<h1>DVD Ambassador</h1>
<h2>Disc Locator</h2>

<form id="filtersForm" action="/fetchFilteredResults" method="post">

<fieldset id="filtersPane">
<legend>Filters</legend>
<div id="filterPane"></div>
<div class="buttonBar">
<button type="button" id="addFilterButton">Add Filter</button>
<button type="submit" id="applyFilterButton">Apply Filters</button>
</div>
</fieldset>

<div id="resultsPane"><span class="none">No results displayed</span></div>

</form>

</div>

<!-- hidden templates -->
<div id="templates">

<div class="template filterChooser">
<button type="button" class="filterRemover" title="Remove this filter">X</button>

<select name="filter" class="filterChooser" title="Select a property to filter">
<option value="" data-filter-type="" selected="selected">-- choose a filter --</option>
<option value="title" data-filter-type="stringMatch">DVD Title</option>
<option value="category" data-filter-type="stringMatch">Category</option>
<option value="binder" data-filter-type="numberRange">Binder</option>
<option value="release" data-filter-type="dateRange">Release Date</option>
<option value="viewed" data-filter-type="boolean">Viewed?</option>
</select>
</div>

<div class="template stringMatch">
<select name="stringMatchType">
<option value="*">contains</option>
<option value="^">starts with</option>
<option value="$">ends with</option>
<option value="=">is exactly</option>
</select>
<input type="text" name="term"/>
</div>

<div class="template numberRange">
<input type="text" name="numberRange1" class="numeric"/> <span>through</span>
<input type="text" name="numberRange2" class="numeric"/>
</div>

<div class="template dateRange">
<input type="text" name="dateRange1" class="dateValue"/> <span>through</span>
<input type="text" name="dateRange2" class="dateValue"/>
</div>

<div class="template boolean">
<input type="radio" name="booleanFilter" value="true" checked="checked"/> <span>Yes</span>
<input type="radio" name="booleanFilter" value="false"/> <span>No</span>
</div>

</div>

</body>
</html>

http://www.bibeault.org/jqia2/chapter4/dvds/dvds.html,第25行$('.qualifier',filterItem).remove();这个选择器我理解应该是选择所有class=qualifier的元素加filterItem元素的合集,但是事实是(不考虑filterItem),只选择了当前$("div.filterItem")下的$(".qualifier"),并没有选择所有$(".qualifier"),其它$("div.filterItem")下的$(".qualifier")没有被选中,请教一下,是什么原因?
...全文
220 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
winzond 2018-06-07
  • 打赏
  • 举报
回复
引用 4 楼 ambit_tsai 的回复:
接口:$( selector [, context ] ) 第二位表示上下文,简单讲,就是从context中查找
明白了,本例中就相当于$(this+' option[value=""]',如果需要选择合集,应该写成1楼那样$(this+',option[value=""]'),真是差之毫厘离之千里啊
wcwtitxu 2018-06-07
  • 打赏
  • 举报
回复
$('.qualifier',filterItem) 等于 $(filterItem).find('.qualifier') 是在 filterItem 下面查找 .qualifier
ambit_tsai-微信 2018-06-07
  • 打赏
  • 举报
回复
接口:$( selector [, context ] ) 第二位表示上下文,简单讲,就是从context中查找
winzond 2018-06-07
  • 打赏
  • 举报
回复
还有第30行
$('option[value=""]',this).remove();
,似乎“,”前的选择器被限定为“,"后的元素的后代了,这个事情不应该啊,教程不是这样教的
htcyrylcmj0415 2018-06-07
  • 打赏
  • 举报
回复

          $('.qualifier,'+filterItem).remove();//我觉得应该是这样,不知对不对
winzond 2018-06-07
  • 打赏
  • 举报
回复
引用 1 楼 htcyrylcmj0415 的回复:

          $('.qualifier,'+filterItem).remove();//我觉得应该是这样,不知对不对
确定没有“+”的,上面有链接,你进去试试,成功的了,没有错的,再查看源代码,确实没有“+”
wcwtitxu 2018-06-07
  • 打赏
  • 举报
回复
引用 6 楼 winzond 的回复:
[quote=引用 4 楼 ambit_tsai 的回复:] 接口:$( selector [, context ] ) 第二位表示上下文,简单讲,就是从context中查找
明白了,本例中就相当于$(this+' option[value=""]',如果需要选择合集,应该写成1楼那样$(this+',option[value=""]'),真是差之毫厘离之千里啊[/quote] 只当 filterItem 是选择器(string)时才能这样 $('.qualifier,'+filterItem) 要用 $('.qualifier').add(filterItem)
jQuery本质上就是用javascript代码写成的各种方法的集合。但是javascript本身不是已经提供了各种各样的方法和功能了吗?为什么还要再另外写一个库出来呢?原因其实很好猜,那肯定是我们要写的这个库比javascript提供的原生方法更好用了,对吧?恩,到这里我们似乎得到了一个基本需求:写一个比原生javascript提供的方法集更好用的库。这个需求的关键在于“更好用”三个字。怎么才是“更好用”呢? 我们知道一个原则:结构、表现、行为相分离。javascript是负责其中的“行为”的。谁的行为?网页元素的行为。什么样的行为?变化。也就是说,javascript是负责使网页元素发生变化的,对不对?那么要使网页元素发生变化要怎么做呢?很简单,只需要通过两步: 确定要让哪一个网页元素发生变化。 确定要使这个元素发生什么样的变化。 从上面两个步骤我们可以总结出javascript工作的基本流程: 选取目标元素 操作目标元素实现功能(使目标元素发生变化) 根据这个基本流程,对于上面“更好用”的疑问,我们就有了一个初步的比较具体的答案了:“更好用”指的是“更好的元素选择器”和“更好的功能方法集”。好了,到了这里,我们的需求就更加清晰了: ———————————————— 版权声明:本文为CSDN博主「IAmFineAndYou」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/software0017/article/details/80317348

87,885

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧