jquery $.expr[':'] 用法体会
2014-06-03 23:38
176 查看
今天在看$.widget 源码时发现有这样一行代码:
$.expr[ ":" ][ fullName ] = function( elem ) { return !!$.data( elem, name ); };
读到这些代码有些迷茫,于查百度发现有一个用法
// Add this code anywhere you want (after jQuery has been loaded). // Edit it to add your own expressions. jQuery.extend(jQuery.expr[':'], { /////////////////////////////////////////////////////////// // form elements that are submitable based on these criteria // element is not disabled // element has a selected or checked attribute // element is a textarea // element is an input of type text or hidden // // @usage: $(':submitable') // @usage: $('#myForm :submitable') submitable: function(a) { return !a.disabled&&(a.selected||a.checked||(a.nodeName.toUpperCase()=='TEXTAREA')||(a.nodeName.toUpperCase()=='INPUT'&&(a.type=='text'||a.type=='hidden'||a.type=='password'))); }, /////////////////////////////////////////////////////////// // elements that have a type attribute not equal to hidden // use if you want to select all input elements that are not hidden // @usage: $('input:nothidden') nothidden: function(a) { return a.type&&a.type!='hidden'; } })
能过些代码,体会到了代码作用,其实就是一个伪类选择器,记录一下,留作备忘。
另外可参阅:http://answers.oreilly.com/topic/1055-creating-a-custom-filter-selector-with-jquery/
If you need a reusable filter to target specific elements based on their characteristics, you can extend jQuery’s selector expressions under the
jQuery.expr[':']object;
this is an alias for
Sizzle.selectors.filters. Each new filter expression is defined as a property of this object, like so:
jQuery.expr[':'].newFilter = function(elem, index, match){ return true; // Return true/false like you would on the filter() method };
The function will be run on all elements in the current collection and needs to return true (to keep the element in the collection) or false (to remove the element from the collection). Three bits of information are passed to this function: the element in question, the index of this element among the entire collection, and a match array returned from a regular expression match that contains important information for the more complex expressions.For example, you might want to target all elements that have a certain property. This filter matches all elements that are displayed inline: jQuery.expr[':'].inline = function(elem) { return jQuery(elem).css('display') === 'inline'; };
Now that we have created a custom selector, we can use it in any selector expression:
// E.g. #1 jQuery('div a:inline').css('color', 'red'); // E.g. #2 jQuery('span').filter(':not(:inline)').css('color', 'blue')
jQuery’s custom selectors ([code]:radio,
:hidden, etc.) are created in this way.As mentioned, the third parameter passed to your filter function is an array returned from a regular expression match that jQuery performs on the selector string. This match is especially useful if you want to create a filter expression that accepts parameters. Let’s say that we want to create a selector that queries for data held by jQuery: jQuery('span').data('something', 123);
// We want to be able to do this:
jQuery('*:data(something,123)'); [/code]
The purpose of the selector would be to select all elements that have had data attached to them via jQuery’s [code]data()method—it specifically targets elements with a datakey of
something, equal to the number 123.The proposed filter (
:data) could be created as follows: jQuery.expr[':'].data = function(elem, index, m) {
// Remove ":data(" and the trailing ")" from
// the match, as these parts aren't needed:
m[0] = m[0].replace(/:data\(|\)$/g, '');
var regex = new RegExp('([\'"]?)((?:\\\\\\1|.)+?)\\1(,|$)', 'g'),
// Retrieve data key:
key = regex.exec( m[0] )[2],
// Retrieve data value to test against:
val = regex.exec( m[0] );
if (val) {
val = val[2];
}
// If a value was passed then we test for it, otherwise
// we test that the value evaluates to true:
return val ? jQuery(elem).data(key) == val : !!jQuery(elem).data(key);
}; [/code]The reason for such a complex regular expression is that we want to make it as flexible as possible. The new selector can be used in a number of different ways:
// As we originally mused (above): jQuery('div:data("something",123)'); // Check if 'something' is a "truthy" value jQuery('div:data(something)'); // With or without (inner) quotes: jQuery('div:data(something, "something else")');Now we have a totally new way of querying data held by jQuery on an element.If you ever want to add more than one new selector at the same time, it’s best to use jQuery’s
extend()method:
jQuery.extend(jQuery.expr[':'], { newFilter1 : function(elem, index, match){ // Return true or false. }, newFilter2 : function(elem, index, match){ // Return true or false. }, newFilter3 : function(elem, index, match){ // Return true or false. } });
转自:blog.163.com/jinwei_zhiyuan/blog/static/11582265201312114147797
相关文章推荐
- jquery $.expr[':'] 用法体会
- Jquery 获取指定 table下 所有 type='text' 的 input
- Oracle 中'union'、'N'关键字用法
- jquery $(window).resize(function() { $('span').text(x+=1); });
- 'VB 中将信息写入到XML中,并从后台用ajax+jquery 取出信息
- Shell中的 "" 与 '' 的用法
- ASP中双引号"";单引号'';连接字符&号的用法
- jQuery中 Math.random()的用法方法>>产生任意随机整数
- pb中关于转义符'~'的用法
- jQuery 选择器 API 强大到''堡''
- JQuery EsayUI ComboBox 在chrome 报 An invalid form control with name='' is not focusable.
- jquery extenstion ddaccordion's attributes
- Jquery的attr("onclick",function{alert('123')})无效果
- jQuery select option 选中项取值--FLY's SKY-峰窝
- pb中关于转义符'~'的用法
- 总结一下SQL语句中引号(')、quotedstr()、('')、format()在SQL语句中的用法
- 模仿jquery选择器 $('#id') $('.className')
- js(jquery)出错: 'null' 为空或不是对象
- from表单序列化&JQuery源代码中两个小扣好的意义&StringUtils的用法
- jquery.get的参数中文自动编码与header(\'Content-type: text/html; charset=gbk\');乱码问题