jQuery 功能扩展_IT分享知识网

大家好，欢迎来到IT知识分享网。

功能函数前缀

$.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，表单元素统一disable return this.each(function(){ //this指jQuery对象 if(typeof this.disabled != "undefined") this.disabled = true; }); } $.fn.enable = function(){ //扩展jQuery，表单元素统一enable return 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对象

解决”#34;的冲突

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

jQuery提供了noConflict();

使用方法:jQuery.noConflict();

conflict：冲突

以上代码便可以使”#34;按照其他javascript框架的方式运算。这时在jQuery中便不能再使用”#34;,而必须使用”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>

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/109019.html

jQuery 功能扩展

相关推荐

发表回复