锋利的jQuery第一章

浏览数：20 / 时间：2015年06月09日

以前总是感觉js,html,css,jquery这些东西太繁杂，看着都头晕，想着做后台，不用管这些东西，可是工作之中发现，很多前台后台结合的地方，比如通过ajax发送到后台，如果不懂得jQuery,感觉很被动，于是，我也不管那么多了，从现在开始学习jQuery了。

　　我喜欢看书本学习，以后博客将记录我学习的笔记：

1,window.reload()和$(document).ready()的区别：

2,有关菜单的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
 <script type="text/javascript" language="javascript" >
 
 $(document).ready(function(){  //等待所有dom绘制完成后就执行
 
 $(".level2").hide();    //加载时隐藏class="level2"
 
 $(".level1 > a").click(function(){    //选择class="level1"下的a
     $(this).addClass("current")        //给当前元素a添加一个样式
    .next().show()                        //下一个元素ul显示
    .parent().siblings().children("a").removeClass("current")
            //父元素li的同辈元素li的子元素a移除样式
    .next().hide();                        //a的下一个元素ul隐藏
    return false;
 }); 
 
 });
 </script>
<title>菜单的例子</title>
</head>
<body>

<div class="box">
    <ul class="menu">
        <li class="level1">
            <a href="#none">衬衫</a>
            <ul class="level2">
                <li><a href="#none">短袖衬衫</a></li>
                <li><a href="#none">长袖衬衫</a></li>
                <li><a href="#none">短袖T衫</a></li>
                <li><a href="#none">长袖T衫</a></li>
            </ul>
        </li>
        <li class="level1">
            <a href="#none">卫衣</a>
            <ul class="level2">
                <li><a href="#none">开襟卫衣</a></li>
                <li><a href="#none">套头卫衣</a></li>
                <li><a href="#none">运动卫衣</a></li>
                <li><a href="#none">童装卫衣</a></li>
            </ul>
        </li>
        <li class="level1">
            <a href="#none">裤子</a>
            <ul class="level2">
                <li><a href="#none">短裤</a></li>
                <li><a href="#none">休闲裤</a></li>
                <li><a href="#none">牛仔裤</a></li>
                <li><a href="#none">免烫卡其裤</a></li>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>

我实验了一下，选择level1下的a可以有两种方式：

(1)$(".level1 > a") (2)$(".level1 a")

3,jQuery对象和Dom对象的区别

(1)每一份Dom都可以表示为一棵树。如下图：

Dom对象可以使用Javascript的方法，不能使用jQuery的方法：

var domObj = document.getElementById("id");    //获取Dom对象
var ObjHTML = domObj.innerHTML;                //使用js的属性innerHTML

(2)jQuery对象是jQuery包装Dom对象以后产生的对象。

jQuery只可以使用jQuery的方法：

$("#foo").html();    //获取id为foo元素的html代码

(3)

jQuery对象转为Dom对象：

var $cr = $("#cr");    //jQuery对象
var cr = $cr[0];        //Dom对象

var cr = $cr.get(0);    //Dom对象

Dom对象转为jQuery对象：

var cr = document.getElementById("cr");    //Dom对象
var $cr = $(cr);                //jQuery对象

4，一个小例子：

<input type="checkbox" id="cr" /><label for="cr">我同意上面的制度</label>

 var $cr = $("#cr");    //取出来id=cr的对象
 $cr.click(function(){
     if($cr.is(":checked")){  //is(":checked")判断JQuery对象是否被选择中
        alert("谢谢您同意");
        }
    });

还可以这样写：

 var $cr = $("#cr");    //取出来id=cr的对象
 var cr = $cr[0];
 $cr.click(function(){
     if(cr.checked){  //js方法判断
        alert("谢谢您同意");
        }
    });