第一章认识jQuery

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

　　jQuery是一个优秀的JavaScript库，它凭借简洁地语法和跨平台的兼容性，极大地简化了开发人员遍历HTML文档，操作DOM，处理事件，执行动画和开发Ajax操作。

　　jQuery优势：1.轻量级。2.强大的选择器。3.出色的DOM操作的封装。4.可靠的事件处理机制。5.完善的Ajax。6.不污染顶级变量。7.出色的浏览器兼容性。8.链式操作方式。9.隐式迭代。10.行为层与结构层分离。11.丰富的插件支持。12.完善的文档。13.开源。

（1）编写简单的jQuery代码:

　　注：$ 就是jQuery的简写形式。

    <!-- 引入 jQuery -->
    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {     //等待DOM元素加载完毕.（可能DOM元素关联的文件没有加载完）
            alert("Hello World!");          //弹出一个框
        });

　　　　 $(document).ready(function () {     //可以同时编写多个
            alert("Hello again!");
        });

        $(function () {                     //简写形式
            alert("Hello jQuery!");
        });
    </script>

　　（2）jQuery的代码风格

　　注：链式操作。1、对同一个对象不超过3次操作的，可以写成一行。

　　　　 2、对于同一个对象操作较多的，建议每行写一个操作。

　　　　 3、对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当的缩进。

　　　　 4、对于多个对象的较多操作，可以结合2,3条。

　　　　添加必要的注释。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-4-3</title>
<style type="text/css">
#menu { 
    width:300px; 
}
.has_children{
    background : #555;
    color :#fff;
    cursor:pointer;
}
.highlight{
    color : #fff;
    background : green;
}
div{
    padding:0;
}
div a{
    background : #888;
    display : none;
    float:left;
    width:300px;
}
</style>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
    $(".has_children").click(function(){
        $(this).addClass("highlight")            //为当前元素增加highlight类
            .children("a").show().end()            //将子节点的a元素显示出来并重新定位到上次操作的元素
        .siblings().removeClass("highlight")        //获取元素的兄弟元素，并去掉他们的highlight类
            .children("a").hide();                //将兄弟元素下的a元素隐藏
    });
});
</script>
</head>
<body>
<div id="menu">
    <div class="has_children">
        <span>第1章-认识jQuery</span>
        <a>1.1-JavaScript和JavaScript库</a>
        <a>1.2-加入jQuery</a>
        <a>1.3-编写简单jQuery代码</a>
        <a>1.4-jQuery对象和DOM对象</a>
        <a>1.5-解决jQuery和其它库的冲突</a>
        <a>1.6-jQuery开发工具和插件</a>
        <a>1.7-小结</a>
    </div>
    <div class="has_children">
        <span>第2章-jQuery选择器</span>
        <a>2.1-jQuery选择器是什么</a>
        <a>2.2-jQuery选择器的优势</a>
        <a>2.3-jQuery选择器</a>
        <a>2.4-应用jQuery改写示例</a>
        <a>2.5-选择器中的一些注意事项</a>
        <a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
        <a>2.7-还有其它选择器么？</a>
        <a>2.8-小结</a>
    </div>
    <div class="has_children">
        <span>第3章-jQuery中的DOM操作</span>
        <a>3.1-DOM操作的分类</a>
        <a>3.2-jQuery中的DOM操作</a>
        <a>3.3-案例研究——某网站超链接和图片提示效果</a>
        <a>3.4-小结</a>
    </div>
</div>
</body>
</html>

　　（3）DOM对象与jQuery对象

　　DOM(Document Object Model,文档对象模型)，每一个DOM都可以表示成一棵树。JavaScript中的getElementById或者getElementByTagName来获取元素节点，这样的DOM元素就是DOM对象。

　　jQuery对象是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，可以使用jQuery中的方法，但不能使用DOM对象的方法。

　　注：jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂。

<!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>
    <title>1-4</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- 引入 jQuery -->
    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //等待dom元素加载完毕.
        $(document).ready(function () {
            var domObj = document.getElementsByTagName("h3")[0];    // Dom对象
            var $jQueryObj = $(domObj);          //jQuery对象
            alert("DOM对象：" + domObj.innerHTML);   
            alert("jQuery对象：" + $jQueryObj.html());
        });
    </script>
</head>
<body>
    <h3>例子</h3>
    <p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
    <ul>
        <li>苹果</li>
        <li>橘子</li>
        <li>菠萝</li>
    </ul>
</body>
</html>

　　DOM对象与jQuery对象可以相互转换，案例如下：

　　1.DOM对象方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>1-6-2</title>
    <!-- 引入 jQuery -->
    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //等待dom元素加载完毕.
        $(document).ready(function () {
            var $cr = $("#cr");         //jQuery对象
            var cr = $cr.get(0);        //DOM对象获取 2种方式 $cr[0] 或者 $cr.get(0)
            $cr.click(function () {
                if (cr.checked) {        //DOM方式判断
                    alert("感谢你的支持!你可以继续操作!");
                }
            })
        });
    </script>
</head>
<body>
    <input type="checkbox" id="cr" />
    <label for="cr">我已经阅读了上面制度.</label>
</body>
</html>

　　2.jQuery对象方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>1-6-1</title>
    <!-- 引入 jQuery -->
    <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //等待dom元素加载完毕.
        $(document).ready(function () {
　　　　　　  var cr = document.getElementById("cr");     //DOM对象
            var $cr = $(cr);         //jQuery对象
            $cr.click(function () {
                if ($cr.is(":checked")) { //jQuery方式判断
                    alert("感谢你的支持!你可以继续操作！");
                }
            })
        });
    </script>
</head>
<body>
    <input type="checkbox" id="cr" />
    <label for="cr">我已经阅读了上面制度.</label>
</body>
</html>