网站首页 > 编程文章正文

jQuery 功能扩展（jquery的功能）

zazugpt 2024-09-10 23:37:18 编程文章 22 ℃ 0 评论

功能函数前缀

$.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>

上一篇： jquery是干什么的--乐字节前端（jqueryui是干什么的）
下一篇：如何加载jquery（如何加载字体）

网站首页 > 编程文章正文

jQuery 功能扩展（jquery的功能）

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎你发表评论:

网站首页 > 编程文章 正文

jQuery 功能扩展（jquery的功能）

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

取消回复欢迎 你 发表评论:

网站首页 > 编程文章正文

取消回复欢迎你发表评论: