zoukankan      html  css  js  c++  java
  • JQuery Tips

    另一篇文章 JavaScript Tips

    1. 获取span标签的值需要用text();

    2. datepicker控件的‘setDate’属性可用于设置默认值;

    3. 使用parseFloat转换时,如果字符串超出float的限制(无限的),将会返回Infinite或者-Infinite,此时可以用isFinite来进行判断,详情请参考此文章

    4. 如果在dialog中有server控件,需要将此dialog加到页面的form对象下,否则,server控件的事件不会被触发;具体操作如下:

        When you create the dialog, you need to move it a bit for ASP.Net, like this:

          $(".class").dialog({//options}).parent().appendTo("form");

        By default the .dialog() moves the content to just before </body> which most importantly is outsidethe <form></form>, so elements within it won't be included in the POST (or GET) to the server. If you manually move it like I have above, it'll resolve this issue.

    5. 可使用html()给HTML标签添加内容,可使用append()与prepend()为当前元素添加子元素,append()是添加到最后一个子元素的位置(last child),prepend()添加到第一个子元素的位置(first child);

    6. JavaScript中的字符串拼接,直接用+=,不要使用concat,因为使用concat需要创建另一个变量去接收合并后的字符串;

    7. JSON.stringify()用来将json对象转为string;

    8. $.parseJSON()用来将json对象转为javascript对象(即所有的key都变为属性);

    9. jQuery.each(array/object, callback)与$(selector).each()不同,当对于array进行操作时,只能使用jQuery.each(array, callback);

    The $.each() function is not the same as $(selector).each(), which is used to iterate, exclusively, over a jQuery object. The $.each() function can be used to iterate over any collection, whether it is an object or an array. 

    11. JS Array的操作方法pop()和shift()将会分别移除Array的最后一个和第一个元素(对Array本身进行操作,不需要存储到其它元素中),返回值为被移除的那个元素;

    12. JS Array的操作方法slice(start index, end index)和splice(index, length, values)可以对数组进行截取和拼接操作,slice()需要将操作结果保存到一个新的数组中,而splice是对自身的操作;

    13. JS Array对象可以直接alert出来,结果显示为以逗号分隔到字符串;

    14. $.getScript(url, [callback])通过GET请求载入一个javascript文件,并可在js文件成功载入后调用一个函数;

    15. jQuery选择器有以下几种模糊匹配(通配符):

    属性值以某字符串开始:selector[attrName^="value"];
    属性值以某字符串结束:selector[attrName$="value"];
    属性值包含某字符串:selector[attrName*="value"];

    16. $.("#")得到的对象是jQuery对象,不能直接使用HTML DOM对象的方法,比如document.getElementbyId("").innerHTML="XXX"可以工作,$("#").innerHTML就不可以;比如File API是HTML 5 DOM对象的方法,所以 $("#").files 不能得到任何数据;

    17. $("#")[0] 就可以将一个jQuery对象转换成 DOM对象,$(element)就可以将一个DOM对象转换为jQuery对象;

    18. $.each(function(){});中的return true/return false操作只是用来跳出当前循环(相当于C#中的break),不能用于返回true或false值,$.each(function(){})是回调函数,返回的也是一个集合,所以在each内部不能直接return出一个值(此处与C#不同),因此想要拿到$.each()中的值时,只能按照以下写法来做:

    function test(){
      var success = false;
      $(..).each(function () { 
         if (..) { 
             success = true;
             return false; //跳出循环,相当于C#中的break
         } 
      });
       return success ; 
    } 

    19. 从jQuery 1.7开始,应该使用.on()方法替代.live(), .bind(), .delegate()方法, .on()可以为现有的,以及将要动态添加的元素附加事件,但是有时候为将要添加的源于附加事件时,即使使用.on()也可能不起作用,比如: $(".jstree-icon").on(“click”,function(){...}); 这时可以更改一下写法,使用以下方式:

    //jstree is the id of parent element, all nodes including that which will be generated later have a class name jstree-icon
                    $("#jstree").on("click",".jstree-icon",function(){
                        
                    });

    20. insertBefore(newChild,existingChild),例:oParentNode.insertBefore(newNode,oParent.childNodes[0]);

    21. children()方法只能查找当前元素的下一级子元素中的内容,但find()方法可以查找当前元素的所有子元素中的内容;

    22. jquery.data()方法是为了HTML5 dataset属性设置的,用于获取或设置HTML5中自定义的属性(data-*)值,可以参考此文章,但是,jQuery是通用的,即在非HTML5页面仍然可以使用.data(*)来获取对象的data-*属性,此处有以下几点需要注意:

    (1) .data(key,value) 和 .data(key)中的 key值是 大小写敏感的;

    (2) 如果是用 .data(key, value) 动态生成的data-*属性,则key值区分大小写;

    (3) 如果是直接写在html结构中的,例如:<tr data-childNodes="A"></tr>,由于html在生成页面时会将所有标签、属性变为小写,则在获取值时,应该使用全小写的格式,例如:.data("childnodes");

    (4) 其实就是看生成后的HTML页面中,data-*属性是大写还是小写,由于动态添加的data-*属性是在 html生成之后,所以保留了本身的大小写,直接写在HTML结构中的data-*属性是在HTML生成之前写的,所以都会自动转为小写格式;

    23. 与trigger()相比,triggerHandler()方法不会触发事件的默认行为(也就是说并不会真正地触发这个事件),只会执行事件的内容;

    24. jQuery中有三种判断checkbox选中与否的方法:详见此页

    .attr(‘checked’):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
    .prop(‘checked’): //16+:true/false
    .is(‘:checked’):    //所有版本:true/false//别忘记冒号哦

    25. jQuery中对于true/false类型的属性,建议使用prop,而非attr;

    26. jQuery的toggleClass()方法可以添加多个class作为参数,但是,这里面是有一个隐藏的操作:如果element一开始就含有类A,那么使用 $(element).toggleClass("A B") 时,第一次操作会移除类A,添加类B,第二次操作时就会添加类A,移除类B;

    <div class="col-xs-12 article-wrapper"></div>
    
    //-------------------JS--------------------------
    $(".article-wrapper").toggleClass("bloc col-xs-12 col-xs-4"); //第一次操作,会移除col-xs-12,添加bloc 和 col-xs-4;第二次操作,会移除 bloc 和 col-xs-4,添加 col-xs-12;由于 artible-wrapper类 用于绑定,所以不会被移除;

    27. $.each(function(index, item){});中的index是从0开始;

    28. 向ajax的回调函数中添加额外的参数时,可以使用如下方法,这同时也是一个jQuery调用SharePoint Web Service的例子:

    //call web service to get Person objects
        function callPersonWebService(userId, itemId){
            var soapEnv =  "<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'><soap:Body><Person xmlns='http://XXX.ColXXXX'><username>"+userId+"</username></Person></soap:Body></soap:Envelope>";  
        
                $.ajax({  
                    url: url_webService, 
                    type: "POST",  
                    dataType: "xml",  
                    data: soapEnv,  
                    complete: function(jqXHR, textStatus){processPersonResult(jqXHR, textStatus, itemId)},  
                    contentType: "text/xml;charset="utf-8""
                });    
        }
        
        //get Person object and pass it to updateFISContact function
        function processPersonResult(xData, status,itemId) { 
            var result = xData.responseXML;
                
            try {  
                if (status == "success" && result){  
                        var $responseXMLObj = $(result);
                        updatedItemArr.push($responseXMLObj); //push all Person object to an array
                        $("#objectsFromWebService").text("Objects from web service: "+updatedItemArr.length);
                        updateFISContact($responseXMLObj, itemId);
                }    
            }  
            catch(e) {  
                alert(e);  
            }  
        }  

    29. ajax中,data指的是发送到服务器端的数据;dataType属性指示了客户端接收到的数据类型contentType指示了发送到服务器端到数据类型如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:

    "xml": 返回 XML 文档,可用 jQuery 处理。
    "html": 返回纯文本 HTML 信息;包含 script 元素。
    "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。
    "json": 返回 JSON 数据 。
    "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

    30. ajax的调用是异步的,如果想要在其它方法中使用ajax的返回值,则不能简单地进行赋值或者return给其它方法,需要在success函数或者done函数中进行后续操作;

    常见的错误写法如下:

    function checkUniqueRoleAssignment(restURI) {
        var result = false;
        $.ajax({
            url: restURI,
            type: "GET",
            headers: { "Accept": "application/json;odata=verbose" },
            success: function (data) {
                if (data.d) {
                    result = data.d.HasUniqueRoleAssignments; //true or false
                }
            },
            error: function (xhr) {
                //do nothing
            }
        });
        return result;
    }

    此种写法导致的结果是,每次都会返回false,因为在ajax尚未返回 data 时,return result 已被执行了;

    正确的写法为:

    function checkUniqueRoleAssignment(restURI) {
        return $.ajax({
                    url: restURI,
                    type: "GET",
                    headers: { "Accept": "application/json;odata=verbose" }
                });
    }
    
    //调用时
    checkUniqueRoleAssignment(uniquepermissionURI).done(function(data){if (data.d) {
                var result = data.d.HasUniqueRoleAssignments; //true or false
    
                //to do next
            }
    });

    31. 

  • 相关阅读:
    c#之添加window服务(定时任务)
    dotnet core 之 CORS使用示例
    CORS讲解
    vim的多文件编辑和多窗口功能
    vim操作常用命令总结
    vmware的三种网络模式讲解
    vmware下的linux没有网络问题解决思路
    asp.net core 系列之允许跨域访问2之测试跨域(Enable Cross-Origin Requests:CORS)
    asp.net core 系列之允许跨域访问-1(Enable Cross-Origin Requests:CORS)
    asp.net core 系列之允许跨域访问(Enable Cross-Origin Requests:CORS)
  • 原文地址:https://www.cnblogs.com/qijiage/p/3191767.html
Copyright © 2011-2022 走看看