您的位置：首页 > Web前端 > JQuery

jquery 的onload、ready、js对象成转换jquery节点

2015-01-21 21:47 435 查看 
1.jquery的onload
onload 事件会在页面或图像加载完成后立即发生。<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hello_jquery</title>
<meta name="author" content="Administrator" />
<style type="text/css">
.bg {
background: #f00;
color:#fff;
}
</style>
<!-- Date: 2013-01-15 -->
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
// window.onload = function() {
// alert("abc");
// }
// /*
// * 第二方法会将第一个覆盖
// */
// window.onload = function() {
// alert("bcd");
// }

/**
* JQuery对加载事件了做了特殊的处理，使得两个方法都会被加载
*/
$(function(){
alert("abc");
});

$(function() {
alert("bcd");
})
</script>
</head>
<body>
<div id="hello">
<ul>
<li>aaaaaaaaaaaaa</li>
<li>vbbbbbbbbbbbb</li>
<li class="abc">ccccccccccccc</li>
<li>ddddddddddddd</li>
<li>eeeeeeeeeeeee</li>
</ul>
</div>
</body>
</html>


2.对于jquery的ready函数


/*$(document).ready(function(){
alert("hello jquery");
});*/
//经常使用下面的方式来替代上面的操作
$(function(){
alert("hello query");
});
3.把js对象转换成jquery的节点以此来对相应的节点进行操作
<pre name="code" class="html">
<script type="text/javascript">
$(function(){
//目前是一个javascript的对象，对于该对象而言，无法使用jquery的方法
var hello = document.getElementById("hello");
//是js的对象，不能使用jquery的方法
// hello.css("color","#f00");
//使用$(xx)就可以把xx这个节点封装为jquery的节点
$(hello).css("color","#f00");
//每一个jquery节点都是一个数组，只要取出数组中的值，这个值就是js的节点，就只能用js的方法
//当转换为js节点之后，就无法使用jquery的方法，如果要使用jquery的方法在通过$()进行封装就可以了
($("li.abc")[0]).innerHTML = "abccdd";
var lis = $("#hello ul li");
for(var i=0;i<lis.length;i++) {
//目前的li是js的节点
var li = lis[i];
// li.innerHTML = "["+(i+1)+"]"+li.innerHTML;
//$(li)就变成了JQuery节点
//xx.html()读取内容，xx.html("abc")：把节点的内容完成替换
$(li).html((i+1)+"."+$(li).html());
}
});
</script>


4.jquery学习http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航