我正在尝试使用通配符来获取id以"jander"开头的所有元素的id.我试过了$('#jander*')
,$('#jander%')
但它不起作用..
我知道我可以使用元素类来解决它,但也可以使用通配符?
<script type="text/javascript">
var prueba = [];
$('#jander').each(function () {
prueba.push($(this).attr('id'));
});
alert(prueba);
});
</script>
<div id="jander1"></div>
<div id="jander2"></div>
Run Code Online (Sandbox Code Playgroud) 我只是浏览Sizzle的源代码,我遇到了这行代码:
array = Array.prototype.slice.call( array, 0 );
Run Code Online (Sandbox Code Playgroud)
我查看了函数是什么,但我得出的结论是,它只返回从索引0开始的数组的所有元素,并将整体放入数组中,即它根本不会做任何事情.
那么这行代码的用途是什么?我错过了什么?
编辑:这是来自https://github.com/jquery/sizzle/blob/master/sizzle.js#L863的第863行.
作为jQuery代码(https://coderwall.com/p/7uchvg)的一个例子,我读到表达式的$('#foo a');
行为如下:
找到
a
页面中的每一个,然后a
在里面过滤#foo
.
它看起来效率不高.
那是对的吗?如果是的话,我们应该如何以更好的方式做到这一点?
好吧马鞍牛仔,因为这将是一个漫长的.我早上花了一些旧的代码,我不知道最佳实践和优化.为了避免乘坐主观道路,我会发布一些例子,希望能够轻松回答问题.我将尽量使示例非常简单,以便于回答并减少出错的可能性.开始了:
我理解,当访问选择器时,通常认为将选择器分配给变量而不是多次进行相同的调用会更好 - 例如.
$('div#apples').hide();
$('div#apples').show();
Run Code Online (Sandbox Code Playgroud)
与
var oranges = $('div#oranges');
oranges.show();
oranges.hide();
Run Code Online (Sandbox Code Playgroud)
引用jQuery时是否适用同样的规则$(this)
?防爆.一个简单的脚本,可以使表中的某些数据可单击并自定义链接.
$('tr td').each( function() {
var colNum = $(this).index();
var rowNum = $(this).parent().index();
$(this).wrap('<a href="example.com/hello.html?column=' + colNum + '&row=' + rowNum +'">');
})
Run Code Online (Sandbox Code Playgroud)
与
$('tr td').each( function() {
var self = $(this);
var colNum = self.index()
var rowNum = self.parent().index()
self.wrap('<a href="example.com/hello.html?column=' + colNum + '&row=' + rowNum +'">');
});
Run Code Online (Sandbox Code Playgroud)
this
vs$(this)
好的,下一个是我长期以来一直想知道的东西,但我似乎无法找到任何相关信息.请原谅我的无知.什么时候调用vanilla js this
而不是jQuery包装是有意义的$(this)
?这是我的理解 -
$('button').click(function() { …
Run Code Online (Sandbox Code Playgroud) 显然,正如我在评论另一个答案时发现的那样,jQuery(而不是它的底层选择器引擎Sizzle)允许你将参数引用到:not()
选择器和:has()
选择器.即:
$('div:not("span")')
$('span:has("span")')
Run Code Online (Sandbox Code Playgroud)
在Selectors标准中,引号始终代表字符串,而不是选择器或关键字,因此引用参数:not()
始终无效.这在选择器4中不会改变.
您还可以通过添加不受支持的CSS选择:nth-last-child(1)
器来查看它是非标准语法,例如导致选择器完全失败:
$('div:not("span"):nth-last-child(1)')
$('span:has("span"):nth-last-child(1)')
Run Code Online (Sandbox Code Playgroud)
在这里允许报价是否有任何理由,技术或其他方面?想到的唯一可能性是:
一致性:contains()
允许引用和不引用的参数,如旧的选择器规范中所示.除了:contains()
接受字符串/关键字,而不是选择器...
与自定义伪使用的实现保持一致$.expr[':']
,始终允许引用和不引用的参数.
一致性和易用性移植到他们的方法同行.not()
和.has()
(只是删除或拆分外报价和改变冒号期?).
但我找不到任何支持或反对它们的消息来源.实际上,引用选择器参数本身的能力也没有在任何地方记录,引用和引用参数之间似乎没有任何区别:
$('div:not(span)')
$('span:has(span)')
Run Code Online (Sandbox Code Playgroud) 我无法相信这有多难找到,但即使在Google开发者文档中我也找不到它.我需要能够动态,只有 JavaScript插入adsense.我也查看了StackOverflow,其他一些人已经问过这个但没有回复.希望这将是一个更好的解释,并会得到一些回复.
基本上,用户插入我的脚本,让我们调用它my.js
(不能说它当前具体是什么.)my.js
加载,并且在my.js
他们的页面上显示某些嵌入式媒体然后我需要以某种方式附加生成的HTML:
<script type="text/javascript"><!--
google_ad_client = "ca-pub-xxx";
/* my.js example Ad */
google_ad_slot = "yyy";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
Run Code Online (Sandbox Code Playgroud)
在特定<div>
(或其他)元素内.有任何想法吗?
PS没有像jQuery这样的库,我不能在页面上插入HTML,除非它是通过JavaScript而且必须插入到一个特定的<div>
名字中(如果有帮助,我将使用Sizzle作为我的JS库)
有没有人有经验/洞察力:解耦jquery/sizzle?
这是为了普遍的兴趣,但这是触发我的问题的场景:
..i已经在项目中有jquery.想试试http://ecsstender.org/,这需要Sizzle选择器引擎.我真的不想包括Sizzle的第二个副本 - 它已经是jquery的一部分..
似乎是一个好主意.虽然我猜它可能会影响性能,但我希望看到基准测试与jQuery生产版本的比较.
有谁知道这是否已经完成?(github fork?)或者有没有理由反对这种方法?.
从jquery.com下载的最新jquery 1.4.2也附带了Sizzle.js.
我可以从Sizzle.js中获取的方式和利益是多少?
Sizzle.js是一个独立的库吗?
为什么它包含在jquery库中?
/*!
* jQuery JavaScript Library v1.4.2
* http://jquery.com/
*
* Copyright 2010, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* Includes Sizzle.js
* http://sizzlejs.com/
* Copyright 2010, The Dojo Foundation
* Released under the MIT, BSD, and GPL Licenses.
*
* Date: Sat Feb 13 22:33:48 2010 -0500
*/
Run Code Online (Sandbox Code Playgroud)
虽然这是在sizzle.js网站上提到的
完全独立(没有库依赖)
我编写了很多jQuery插件,并且我一直使用自定义jQuery选择器,:focusable
并:closeto
提供常用的过滤器.
例如:focusable看起来像这样
jQuery.extend(jQuery.expr[':'], {
focusable: function (el, index, selector) {
return $(el).is('a, button, :input[type!=hidden], [tabindex]');
};
});
Run Code Online (Sandbox Code Playgroud)
并像任何其他选择器一样使用:
$(':focusable').css('color', 'red'); // color all focusable elements red
Run Code Online (Sandbox Code Playgroud)
我注意到没有一个可用的jQuery选择器可以导航回祖先.我认为这是因为它们的设计遵循了向下钻取的基本CSS选择器规则.
以此示例:找到具有焦点的输入的标签:
$('input:focus').closest('.form-group').find('.label');
Run Code Online (Sandbox Code Playgroud)
我需要用于插件的等效类型的复杂选择器,因此将这样的选择器作为单个字符串提供是有用的(因此它们可以作为插件的选项提供).
例如:
$('input:focus < .form-group .label');
Run Code Online (Sandbox Code Playgroud)
要么
$('input:focus:closest(.form-group) .label');
Run Code Online (Sandbox Code Playgroud)
注:请假设更复杂的操作和祖先导航的需要(我知道这个特殊的例子是可以做到的has
,但这并不能帮助).
例如它还需要支持这个:
options.selector = ':closest(".form-group") .label';
$('input').click(function(){
var label = $(this).find(options.selector);
});
Run Code Online (Sandbox Code Playgroud)
是否可以扩展jQuery选择器来扩展搜索行为(而不仅仅是添加更多的布尔过滤器)?如何扩展自定义搜索行为?
看起来一个完整的自定义选择器(比如<
)就不像在jQuery的Sizzle解析器中添加伪选择器那么容易.我目前正在查看这个Sizzle文档,但我发现jQuery版本不一致.(例如Sizzle.selectors.order
,运行时不存在属性).
作为参考,jQuery的商店Sizzle
在其jQuery.find
性能和Sizzle.selectors
它的jQuery.expr
属性.
到目前为止我添加了这个:
jQuery.expr.match.closest …
Run Code Online (Sandbox Code Playgroud) 我有这个:
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
然后我用jQuery选择它:$('ul').find('li');
或者$('ul li');
我怎么能从这两个jQuery选择器获得,例如只有第二个li或第三个,并且单独留下第一个和第四个?
我认为它可能适用于:
$('myselector').get(indexNumber); // however, it won't work.
Run Code Online (Sandbox Code Playgroud)
对这个问题的任何想法?谢谢.
sizzle ×10
jquery ×8
javascript ×6
adsense ×1
api ×1
arrays ×1
css ×1
indexing ×1
performance ×1
xhtml ×1