现在的位置: 首页 > 综合 > 正文

jQuery study note 2

2018年04月14日 ⁄ 综合 ⁄ 共 2470字 ⁄ 字号 评论关闭

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 省略吧,用这两个。

抱歉!评论已关闭.