• jQuery开发中容易忽视的错误


    1、引用jQuery库文件的<script>标签,必须放在引用自定义脚本文件的<script>标签之前,否则,就会发生找不到对象;最好在<head>元素中,把引入样式表的<link />放在<script>标签前面;有时候其他的javascript库也会用$符号,为了不冲突,可以使用.noConflict()方法把控制权交给别的库.
        <script src="prototype.js" type="text/javascript" />
        <script src="jquery.js" type="text/javascript" />
        <script type="text/javascript">
            jQuery.noConflict();
        </script>
        <script src="myjs.js" type="text/javascript"/>
        在使用jquery方法时,必须使用jquery代替$来调用。

    2、基本选择符:标签名,${"p"};ID选择符,${"#idname"};类选择符,${".classname"}。

    3、css选择符,举个例子来说
        $(document).ready(function(){
            $("#aSelect > li").addClass("aClass");
            $("#aSelect li:not(.aClass)").addClass("otherClass");
        });
        上面第二行中的>就是元素组合符,查找ID为aSelect的元素的子元素(>)中所有的列表项。这个子元素,不包含孙元素。
        上面第三行中的aSelect li,表示查找ID为aSelect的元素的所有下级列表项,包含孙元素。

    4、属性选择符:$("img[alt]")就是选择所有带有alt属性的图像元素;另外,属性选择符允许以类似正则表达式的语法来标识字符串的开始(^)和结尾($),而且,也可以使用(*)表示位于字符串中任意位置的值,适用(!)来表示相反的值。
        e.g.:
        $(document).ready(function(){
            $("a[href^=mailto:]").addClass("mailto");

            $("a[href$=.pdf]").addClass("pdflink");
            $("a[href^=http][href*=henry]").addClass("henrylink");

        });

    5、自定义选择符,语法与css中的伪类选择符语法相同,以一个冒号开头,比如,我们要从某个集合里面选择第一项,可以使用下面的代码:
        $("a[href^=http]:eq(0)")...        
        $("div:first-child")...
        另外两个比较常用的自定义选择符是:odd和:even,分别对应选择奇数行和偶数行。
        $("table tr:odd").addClass("odd");
        $("table tr:even").addClass("even");
        猜猜看:$("td:contains(a)").css("color","red");这会有什么效果?

    6、基于表单的选择符,简单列举一下吧,有心人通过练习会明白的。
        :text    :checkbox    :radio    :image    :submit    :reset    :password    
        :file    :input    :button    :enabled    :disabled    :checked    :selected
        这些选择符可以链式使用,比如$(':radio:checked'),$(':text:enabled')等等。

    7、.find()和.filter()的相同点和区别,他们都是遍历元素,区别就是find是对子集操作,filter是对自身集合元素操作。比如
            var $find=$("div").find(".name"); 是对class为name的div内的元素操作,
            var filter=$("div").filter(".name");是对所有class为name的div进行操作。

    8、.next()下一个同辈元素;.nextAll()下面所有的同辈元素;
        .prev()上一个同辈元素;.prevAll()上面所有的同辈元素;
        .siblings()所有的同辈元素;.andself()包含自己;
        .parent()父元素;.children()子元素;
        .end()恢复最近依次破坏性对匹配元素集合的操作,返回到之前的匹配元素集合状态,返回匹配元素集合。

    9、jQuery为标准的DOM事件都提供了相应的简写事件方法:
        .blur    .change    .click    .dbclick    .error    .focus    .keydown    .keypress    .keyup    .load    .select    .scroll
        .mousedown    .mouseover    .mouseout    .mousemove    .mouseup    .resize    .submit    .unload

    10、复合事件
        .toggle(fun1,fun2,fun3...)参数都是函数,第一次点击执行fun1,第二次点击执行fun2,依次类推,执行完以后,重新回到fun1开始。
        .hover(fun1,fun2),当鼠标移动到一个匹配元素上面时(over),会触发指定的第一个函数。当鼠标移出这个元素时(out),会触发指定的第二个函数。

    11、尽管解释起来很难,但是想象起来却很容易,div里面的一个元素被点击了,但是我们只想执行div的点击事件:(感兴趣的去了解事件捕获和事件冒泡)
        $(document).ready(function(){
            $("#divId").click(function(event){
                if(event.target==this){
                    这里是事件执行代码...
                }
            });
        });
        另外还有直接阻止事件冒泡的方法.stopPropagation()

       $(document).ready(function(){
            $("#divId .button").click(function(event){
                    这里是事件执行代码...
                    event.stopPropagation();
            });
        });
        在这里我要说的是,上面两个例子,分别对应的是事件捕获和事件冒泡,不是一回事。


    12、移除事件处理程序,直接看代码,很直观
        $(function(){
            $("#largeDiv").click(function(event){
                事件处理代码
            });
            $("#largeDiv-firstChild").click(function(){
                $("#largeDiv").unbind("click");
            });
        });
        但是如果click里面的代码,有一部分要执行,有一部分不执行怎么办呢,.unbind()只能全部移除,其实,是可以解决的,给事件起个别名就好了

        $(function(){
            $("#largeDiv").bind('click.first',function(event){
                第一个事件处理代码
            });
            $("#largeDiv").bind('click.second',function(event){
                第二个事件处理代码
            });
            $("#largeDiv-firstChild").click(function(){
                $("#largeDiv").unbind("click.first");
            });
        });


    13、类似.bind(),.one()只执行一次,还有.trigger('click')是模仿用户点击的事件,.trigger()方法提供了一组与bind方法相同的简写,但是结果不一样,只是触发操作而不是绑定行为:$("#divname").click();

    14、.show()    .hide()    .fadeIn()    .fadeOut()可以用不同的形式来实现展示和隐藏效果。具体自己研究吧,比较简单。

  • 相关阅读:
    Jenkins获取运行job的用户名(在构建历史中展示构建人)
    Android -tool工具UIautomatorviewer提示“不能让屏幕黑屏”
    转: 谈谈关于内存的一些心得体会
    IP地址,子网掩码划分(转)
    重定向子进程控制台程序的输入输出
    正则表达式(1)
    Log4Net使用指南(转)
    使用wireshark抓本机之间的包(转)
    VirtualBox开发环境的搭建详解(转)
    SxsTrace工具使用方法(转)
  • 原文地址:https://www.cnblogs.com/xiaochao12345/p/3891848.html
Copyright © 2020-2023  润新知