初识JQuery

JQuery的优点？

容易上手、强大的选择器、解决浏览器的兼容、完善的事件机制、出色的Ajax封装、丰富的UI。

环境搭建？官方网址

jQuery是一个JavaScript脚本库，不需要特别的安装。

只需要我们在页面 <head> 标签内中，通过 script 标签引入 jQuery 库即可。

验证是否搭建成功？

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <title>环境搭建</title>
</head> 
<body>
    <script type="text/javascript"> alert($) </script>
</body>
</html>

alert 弹出以下信息，说明环境已经搭建成功了。

JQuery对象与DOM对象？

JQuery对象与DOM对象是不一样的。

区分：

通过一个简单的例子，简单区分下JQuery对象与DOM对象:

<p id="test"></p>

要求：获取页面上id为test的p元素，然后给这个文本节点增加一段文字：“测试！测试！”，并且让文字颜色变成红色。

普通处理，通过标准JavaScript处理：

var p = document.getElementById('test');
p.innerHTML = '测试！测试！';
p.style.color='red';

通过原生DOM模型提供document.getElementById("test")方法获取的DOM元素就是一个DOM对象，再通过innerHTML与style属性处理文本与颜色。

JQuery的处理：

var $p=$('#test');
$p.html('测试！测试！').css('color', 'red');

通过$('#test')方法会得到一个$p的jQuery对象，$p是一个类数组对象。

这个对象里面包含了DOM对象的信息，然后封装了很多操作方法，调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。

结论：

通过标准的JavaScript操作DOM与jQuyer操作DOM的对比，我们不难发现：

通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。
通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。

示例代码：

<!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为test1的元素p
            var p = document.getElementById('test1');
            // 将元素p在html中内容改变
            p.innerHTML = 'P1：测试！测试！';
            // 将元素p的内容颜色改为粉色
            p.style.color = '#FF1493';    
        }
    </script>
    
    <!-- 使用jQuery语法 -->
    <script type="text/javascript">
        $(document).ready(function() {
            /**
             * 通过jQuery语法获取id为test2的元素获得一个jQuery对象
             * 调用该对象的html()方法进行更改内容
             * 调用该对象的css()方法进行更改颜色样式
             */   
            var $p = $('#test2');
            $p.html('P2：测试！测试！').css('color','red');
        });
    </script>
    
</head>

<body>
    <p id="test1"></p>
    <p id="test2"></p>
</body>

</html>

效果预览：

JQuery对象转化成DOM对象？

jQuery库本质上还是JavaScript代码。

它只是对JavaScript语言进行包装处理，为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。

我们使用jQuery的同时也能混合JavaScript原生代码一起使用。

在很多场景中，我们需要jQuery与DOM能够相互的转换，它们都是可以操作的DOM元素，jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。

如何JQuery对象转化成DOM对象？

利用数组下标的方式读取到JQuery中的DOM对象。

HTML代码：

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript代码：

var $div = $('div') //JQuery对象
var div = $div[0]  //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

用jQuery找到所有的div元素（3个），因为jQuery对象也是一个数组结构，可以通过数组下标索引找到第一个div元素，通过返回的div对象，调用它的style属性修改第一个div元素的颜色。

这里需要注意的一点是，数组的索引是从0开始的，也就是第一个元素下标是0。

通过jQuery自带的get()方法？

JQuery对象自身提高一个.get()方法允许我们直接访问JQuery对象中相关的DOM节点，get方法中提供一个元素的索引：

var $div = $('div') //JQuery对象
var div = $div.get(0)  //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

若查看源码，就能看到，get方法就是利用的第一种方式处理的，只是包装成一个get让开发者更直接方便的使用。

示例源码：

<!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>元素一</div>
    <div>元素二</div>
    <div>元素三</div>
    
    <script type="text/javascript">
        var $div = $('div'); //jQuery对象
        var div = $div.get(0); //通过get方法，转化成DOM对象
        div.style.color = 'red'; //操作dom对象的属性
    </script>
    
</body>

</html>

效果预览：

DOM对象转化成JQuery对象？

相比较jQuery转化成DOM，开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法，通过传递不同的参数而产生不同的作用。

如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象。

通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了。

HTML代码：

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript代码：

var  div = document.getElementByTagName('div'); //dom对象
var $div = $(div); //JQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

通过getElementsByTagName获取到所有div节点的元素，结果是一个dom合集对象，不过这个对象是一个数组合集(3个div元素)。

通过$(div)方法转化成jQuery对象，通过调用jQuery对象中的first与css方法查找第一个元素并且改变其颜色。

示例源码：

<!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>元素一</div>
        <div>元素二</div>
        <div>元素三</div>
        <script type="text/javascript">
        var div = document.getElementsByTagName('div');
        //dom对象
        //将dom节点div转化为$div的jquery对象
        var $div = $(div);
        var $first = $div.first();
        //找到第一个div元素
        $first.css('color', 'red');
        //给第一个元素设置颜色
        </script>
    </body>
</html>

效果预览：

posted @ 2017-05-18 16:06 Lucky锦阅读(118) 评论(0) 收藏举报

刷新页面返回顶部

Lucky锦

学习=What/How/Why