jQuery - 安装以及jQuery对象与DOM对象

jQuery - 安装

进入官方网站获取最新的版本 http://jquery.com/download/ ，这里需要注意 jQuery 分 2 个系列版本 1.x 与 2.x，主要的区别在于 2.x 不再兼容 IE6、7、8浏览器，这样做的目的是为了兼容移动端开发。由于减少了一些代码，使得该版本比 jQuery 1.x 更小、更快。
如果开发者比较在意老版本 IE 用户，只能使用 jQuery 1.9 及之前的版本了。我们这本课程为了兼容性问题，使用的是 1.9 版本。jQuery 每一个系列版本分为：压缩版(compressed) 与开发版(development)，我们在开发过程中使用开发版（开发版本便于代码修改及调试），项目上线发布使用压缩版（因为压缩版本体积更小，效率更快）。

jQuery是一个JavaScript脚本库，不需要特别的安装，只需要我们在页面 head 标签内中，通过 script 标签引入 jQuery 库即可。

第一个简单的jQuery程序

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>第一个简单的jQuery程序</title>
    <style type="text/css">
        div{text-align:center;}
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript">
            $(document).ready(function() {
                $("div").html("hello world!");
            });
    </script>
</head>
<body>
    <div></div>
</body>
</html>

jQuery对象与DOM对象

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.11.3.js"></script>
    <!-- 使用JS原生语法 -->
    <script type="text/javascript">
        window.onload = function(){
            // 通过原生JS语法获取id为obj1的DOM对象元素p
            var p = document.getElementById('obj1');
            // 将元素p在html中内容改变
            p.innerHTML = 'hello';
            // 将元素p的内容颜色改为红色
            p.style.color = 'orange';  
        }
    </script>
    
    <!-- 使用jQuery语法 -->
    <script type="text/javascript">
        $(document).ready(function() {
            /**
             * 通过jQuery语法获取id为obj2的元素获得一个jQuery对象
             * 调用该对象的html()方法进行更改内容
             * 调用该对象的css()方法进行更改颜色样式
             */   
            var $p = $('#obj2');
            $p.html('hi').css('color','orange');
        });
    </script>
    
</head>

<body>
    <p id="obj1"></p>
    <p id="obj2"></p>
</body>
</html>

jQuery对象转化成DOM对象

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
    <div>元素A</div>
    <div>元素B</div>
    <script type="text/javascript">
        var $div = $('div'); //html中3个div为一个$div的jQuery对象
        var divA = $div[0]; //通过数组方法转化成DOM对象
        var divB = $div.get(1) //通过get方法，转化成DOM对象
        divA.style.color = 'orange'; //操作dom对象的属性
        divB.style.color = '#e2e2e2'; //操作dom对象的属性
    </script>
</body>
</html>

DOM对象转化成jQuery对象

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<div>元素A</div>
<div>元素B</div>
    <script type="text/javascript">
            var div = document.getElementsByTagName('div'); //dom对象
            var $div = $(div); //jQuery对象
            var $divA = $div.first(); //找到第一个div元素
            var $divB = $("div:eq(1)"); //找到第一个div元素
            $divA.css('color','#e2e2e2'); //给第一个元素设置颜色
            $divB.css('color','orange'); //给第二个元素设置颜色
    </script>
</body>
</html>

jQuery - 安装以及jQuery对象与DOM对象

猜你喜欢