jQuery功能增强与优化

发表时间: 2023-12-06 10:57

功能函数前缀

$.trim(sString);

等同于jQuery.trim(sString);

解决window.onload函数的冲突

ready()方法很好地解决了上述问题

简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。

通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

$(document).ready(function(){$("table.datalist tr:nth-child(odd)").addClass("altrow");});

上述代码简化为

$(function(){$("table.datalist tr:nth-child(odd)").addClass("altrow");});

使用window.onload = function{ //... }

<html><head><title>$选择器</title><script language="javascript" src="jquery.min.js"></script><script language="javascript">window.onload = function(){    var oElements = $("h2 a"); //选择匹配元素    for(var i=0;i<oElements.length;i++)    oElements[i].innerHTML = i.toString();}</script></head><body><h2><a href="#">正文</a>内容</h2><h2>正文<a href="#">内容</a></h2></body></html>

使用$(function(){ //...})语句

<html><head><title>$选择器</title><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function(){    var oElements = $("h2 a"); //选择匹配元素    for(var i=0;i<oElements.length;i++)    oElements[i].innerHTML = i.toString();}); //为了可读性,单独列一行</script></head><body><h2><a href="#">正文</a>内容</h2><h2>正文<a href="#">内容</a></h2></body></html>

以上两个结果是相同的;

jQuery加载与普通加载区别

方法 window.onload $(document).ready()

执行时机必须等待网页中的所有内容加载完毕后网页中的所有DOM结构绘制完毕后就执行,

(包括图片才能执行) 可能DOM元素关联的东西并没有加载完

编写个数不能同时编写多个(后者会"覆盖"前者) 能同时编写多个

简化写法无 $()

jquery加载事件是对"DOMContentLoaded"的封装(而非onload)

<html><head><title>新建网页</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="jquery-1.4.4.js"></script><script type="text/javascript">    //jquery加载事件是对"DOMContentLoaded"的封装(而非onload)    document.addEventListener('DOMContentLoaded',function(){    alert('okok I see you');})</script></head><body><h2>加载事件原理</h2><img src="./08.php" alt="" /><!--图片4s后显示--></body></html>

创建DOM元素

var oNewP = $("<p>这是一个感人肺腑的故事</p>");

以上代码等同于

var oNewP = document.createElement("p");var oText = document.createTextNode("这是一个感人肺腑的故事");oNewP.appendChild(oText);

jQuery还提供DOM元素中的insertAfter()方法

<html><head><title>创建DOM元素</title><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function(){ //ready()函数    var oNewP = $("<p>这是一个感人肺腑的故事</p>"); //创建DOM元素    oNewP.insertAfter("#myTarget"); //jQuery内置的insertAfter()方法});</script></head><body><p id="myTarget">插入到这行文字之后</p><p>也就是插入到这行文字之前，但这行没有id，也可能不存在</p></body></html>

扩展函数

jQuery.fn.extend(object) object采用json方式

详细案例见：实例|实现复选框的全选、反选和不选

jQuery.fn.funName = function([params]){ //匿名函数也可传入参数

//扩展方法语句

}

<script language="javascript" src="jquery.min.js"></script><script language="javascript">$.fn.disable = function(){//扩展jQuery，表单元素统一disablereturn this.each(function(){ //this指jQuery对象if(typeof this.disabled != "undefined") this.disabled = true;});}$.fn.enable = function(){//扩展jQuery，表单元素统一enablereturn this.each(function(){if(typeof this.disabled != "undefined") this.disabled = false;});}//以上两个扩展函数disable()和enable()使用方法function SwapInput(oName,oButton){if(oButton.value == "Disable"){//如果按钮的值为Disable，则调用disable()方法$("input[name="+oName+"]").disable();oButton.value = "Enable";}else{//如果按钮的值为Eable，则调用enable()方法$("input[name="+oName+"]").enable();oButton.value = "Disable"; //然后设置按钮的值为Disable}}</script>//使用方法<input type="button" name="btnSwap" id="btnSwap" value="Disable" class="btn" onclick="SwapInput('hobby',this)"><br><input type="checkbox" name="hobby" id="book" value="book"><label for="book">看书</label><input type="checkbox" name="hobby" id="net" value="net"><label for="net">上网</label><input type="checkbox" name="hobby" id="sleep" value="sleep"><label for="sleep">睡觉</label></p>

注意：在jQuery中除了扩展机制(fn)this指jQuery对象之外, 其他的this均指DOM对象

解决"$"的冲突

尽管jQuery库已经非常强大, 但有些时候需要使用其他类库框架, 因为其他框架或库中可能也使用了"$", 从而发生冲突。

jQuery提供了noConflict();

使用方法:jQuery.noConflict();

conflict：冲突

以上代码便可以使"$"按照其他javascript框架的方式运算。这时在jQuery中便不能再使用"$",而必须使用"jQuery";

例如: $("div p")必须写成jQuery("div p");

var jq = $.noConflict();jq(function(){    jq('[name=username]').attr('value','123');});

实例: 加载进度条编写

<!DOCTYPE html><html><head><meta charset="utf-8"><title>进度条演示</title><style>#box{width:300px;height:40px;margin:250px auto;color:red;font-size:16px;text-align: center;line-height: 40px;}</style><script type="text/javascript" src="jquery-3.1.0.min.js"></script><script type="text/javascript">    var timer = 0;    var value = 0;    $(function(){        progressFun();    })    function progressFun(){        value++;        $("#progressId")[0].value = value;        $("#tip").text("伙计莫急，小编正在快马加鞭赶来，还有" + (100 - value) + "%")        console.log(value);        if(value >= 100){        		clearTimeout(timer)        $("#tip").text("加载完毕, 小编累坏了!");        		return false;        }        timer = setTimeout("progressFun()", 100);    }</script></head><body><div id="box"><p id="tip"></p><progress value="0" max="100" id="progressId"></progress></div></body></html>

jQuery功能增强与优化

热门阅读

推荐阅读