1 输入成本,一直是程序员最大的芥蒂,至少我是。所以,把$,或者jQuery换下来,用自己喜欢的名字代替。如下:
(function(){ var j = jQuery.noConflict(); j('body').css('background', 'red'); })();
之所以采用匿名函数来执行代码,就是不想对一个项目中其他人,比如html上的$使用操作污染。
2 若要对dom中一个元素集进行相同的操作,那么就是用j().each(function(){}); 或者j.each()。
3 对于元素集选择,jQuery选择器使用document 顺序返回对象,而非选择器写法顺序返回对象。例如:
(function(){ j('h3, h2, h1, body').get(0).nodeName; //返回 BODY })();
4 在笔记1中提到 j('a').eq(0);
,其实等价于 j('a:eq(0)');
5
强大的j().is();,只是,对于判断某个元素是否有某个class,已经有hasClass(),不知道到当初是如何设计这个重复功能的?!
6
定义自己的选择器。除了jQuery提供的:hidden等外,我们可以定义自己的:
(function(){ var j = jQuery.noConflict(); j.expr[':'].yf_flag = function(e){ return j(e).attr('yf_flag') === 'oy'; } j(':yf_flag').length; })();
只要页面中有自定义的html element 属性(有时候太有用了)。当然,也可即用即定义:
(function(){ var j = jQuery.noConflict(); j(':yf_flag').filter(function(){return j(e).attr('yf_flag') === 'oy';}).length; })();
7
选择器。
A 过滤器。元素集顺序。
• :first• :last
• :even• :odd
• :eq(index) • :gt(index)
• :lt(index)
B DOM关系。
• ancestor descendant• parent > child• prev + next
• prev ~ siblings
• :nth-child(selector) • :first-child• :last-child
• :only-child • :empty
• :has(selector)
• :parent
C 当id 、class作为选择器使用时,如果命名含有以下字符,需要做特殊处理,即 j('.\\*'); ,j('#\\*'); 。
•#•;
•& •,•.
•+ •*
•~ •'•:
•" •!
•^ •$•[
•] •(
•) •=•>
•| •/
例如,有一段html:
<div id="#footer>cp|logo"></div> <div class=".main:middle[left]"></div>
则使用如下写法获取该元素对象:
(function(){ var j=jQuery.noConflict(); j('#\\#footer\\>cp\\|logo'); j('.\\.main\\:middle\\[left\\]'); })();
D 有趣有用的【堆叠选择器】(自己乱叫的),加入有一段html代码,要做操作但是不能改变其结构,可不能给该元素添加任何属性了,咋办,举例:
<script src="http://www.xoyo.com/sitefoot/ztbai/" type="text/javascript"></script>
要选中它,就这么做:
(function(){ var j = jQuery.noConflict(); j('script[src $= "ztbai/"]'); })();
对应的还有开始标记 j('e[proName ^= "str"]');
。 !=不含有。这算是正则运算符的简单运用。如上面提到的,可以自己定义过滤器,那就可以定义一个正则过滤器:
<!DOCTYPE html> <html> <body> <div id="123"></div> <div id="oneTwoThree"></div> <div id="0"></div> <div id="zero"></body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function(){ var j = jQuery.noConflict(); jQuery.expr[':'].regex = function(e, index, match) { var match_params = match[3].split(','), valid_labels = /^(data|css):/, attr = { method: match_params[0].match(valid_labels) ? match_params[0].split(':')[0] : 'attr', property: match_params.shift().replace(valid_labels,'') }, regex_flags = 'ig', regex = new RegExp(match_params.join('').replace(/^\s+|\s+$/g,''), regex_flags); return regex.test(j(e)[attr.method](attr.property)); } alert(j('div:regex(id,[0-9])').length); alert(j('div:regex(id, Two)').length); })(); </script> </body> </html>
复杂了复杂了。
8
!0,真,!1 就是假。所以,把true、false 省略吧,用这两个。