Javascript Tips

另一篇博客，记录jQuery的操作：jQuery Tips；

 

2. appendChild(newChild)，例：oParentNode.appendChild(newElement)；

4. 检测jquery是否加载

window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}

6. document.forms[""] 得到当前document的某个form，document.forms得到的是当天document中所有form的集合，详见W3school；

7. JS注释

单行：
// document.getElementById("");

多行：

/*
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
*/

 

8. XML中的冒号需要转义，例如，z:row要写成z\\:row才能进行查找，例如：

　　　　$(xData.responseXML).find('z\\:row').each(function(){});

9. 要查看ajax返回的数据，直接使用xml属性即可，例如：alert(xData.responseXML.xml);

11. JavaScript中可以直接将一个函数(function)赋给一个变量;

//先创建一个函数
function retrieveWebsite(resultpanel) {
    var clientContext;

    clientContext = SP.ClientContext.get_current();
    this.oWebsite = clientContext.get_web();
    clientContext.load(this.oWebsite);

    clientContext.executeQueryAsync(
        Function.createDelegate(this, successHandler),
        Function.createDelegate(this, errorHandler)
    );

    function successHandler(sernder, args) {
        resultpanel.innerHTML = "Web site title: " + this.oWebsite.get_title();
    }

    function errorHandler(sender, args) {
        resultpanel.innerHTML = "Request failed: " + args.get_message();//arguments[1]
    }
}

//在另外一个JS文件中需要用到这个函数时，可以直接将函数赋给变量，
var func = window[funcName];
//然后进行调用
func($("#" + this.parentElement.id + " .result-panel")[0]);

12. 实现类似博客园中的在页面显示代码块的功能：

HTML:

<a href="#" class="code-link">View code</a><br />
<div class="code-content"></div>

CSS:

.code-content
{
    display : none;
    font-family : Consolas;
    top : -3px;
    clear : both;
    border-color : #e5e5e5;
    border-width : 1px;
    border-style : solid;
    position : relative;
    padding : 5px;
    margin : 10px;
}

Javascript:

$("a.code-link").click(function () {
    $("#" + this.parentElement.id + " .code-content").toggle();

    if ($("#" + this.parentElement.id + " .code-content").is(":visible")) {
        var funcName;
        var funcText;

        funcName = this.parentElement.id.replace("Container", "");
        funcText = window[funcName].toString();
        funcText = $("<div></div>").text(funcText).html();
        alert(funcText);
        funcText = funcText.replace(/\r\n/g, "<br/>");
        funcText = funcText.replace(/ /g, "&nbsp;");
        alert(funcText);
        $("#" + this.parentElement.id + " .code-content").html(funcText)
    }
});

13. 正则表达式中的斜杠标识了表达式的前后位置：

语法：

var patt = new RegExp(pattern,modifiers);

or more simply:

var patt = /pattern/modifiers;

14. 在HTML中，单引号被转义为' 双引号为"

15. appendChild是HTML DOM的方法，append是jQuery方法，append可以确保每次添加的元素都放在末尾；

16. 使用以下代码判断变量是否为null

以下是正确的用法：
var exp = null;
if (!exp && typeof(exp)!="undefined" && exp!=0)
{
    alert("is null");
}　
尽管如此，我们在DOM应用中，一般只需要用 (!exp) 来判断就可以了，因为 DOM 应用中，可能返回 null，可能返回 undefined，如果具体判断 null 还是 undefined 会使程序过于复杂

17. setInterval对应clearInterval，setTimeout对应clearTimeout；

var timer;
$('#result').text('waiting…');
  var promise = process();
promise.done(function() {
  $('#result').html('done.');
});
promise.progress(function(parameters) {
  $('#result').html($('#result').html() + '.');
    $("#result2").html($("#result2").html() + parameters + ' ');
    document.body.style.backgroundColor=document.body.style.backgroundColor=="yellow"?"pink":"yellow";
});
 
function process() {
  var deferred = $.Deferred();
 
  timer = setInterval(function(parameters) {
    deferred.notify(parameters);
  }, 1000, 'ABC');
   
  setTimeout(function() {
     clearInterval(timer);
     deferred.resolve();
  }, 10000);
   
  return deferred.promise();
}

View Code