首页 > 技术文章 > jquery再学习(1)

shangxiaofei 2015-03-02 11:10 原文

一:jquery对象和js的dom对象相互转化

html代码

1 <ul>
2     <li class="sxf" name="dd">第一</li>
3     <li class="sxf" name="dd">第二</li>
4     <li class="sxf" name="dd">第三</li>
5     <li class="sxf" name="dd">第四</li>
6 </ul>
7 <input type="button" value="测试" onclick="test();">
View Code

js代码

 1 function test(){
 2     //jquery对象(类数组)
 3     var $li=$(".sxf");
 4     alert($li.length);//4
 5     //jquery-->dom对象(下标从0开始)
 6     var li=$li[0];
 7     alert(li.innerHTML);//第一
 8     //jquery-->dom对象(下标从0开始)
 9     var lid=$li.get(1);
10     alert(lid.innerHTML);//第二
11     
12     //dom对象(数组)
13     var dli=document.getElementsByName("dd");
14     alert(dli.length);//4
15     //dom--->jquery对象(下标从0开始)
16     var $ld=$(dli[2]);
17     alert($ld.html());//第三
18     //dom--->jquery对象 (默认情况把数组中第一个元素转化成jquery对象)
19     var $ads=$(dli);
20     alert($ads.html());//第一
21     
22 }
View Code

 二:jquery的readay事件和window的load事件区别

$(document).readay(function(){ //所有执行代码});

$(function(){//所有执行代码});

window.onload=function(){//所有执行代码};

---->页面加载渲染顺序
    (1)解析html结构
    (2)加载外部脚本和样式表文件
    (3)解析并执行脚本代码
    (4)构造html dom模型
    (5)加载图片等外部文件
    (6)页面加载完毕
--->juqery的reday事件会在(4)构造html dom模型完成后被激活
--->load事件会在(5)加载图片等外部文件完成后被激活。
--->reday事件在一个页面内可以写多个。都能执行
--->load事件在一个页面内只可以写一个。如果写多个,执行最后一个,前边的失效。

推荐阅读