第一天接触jQuery

空闲之余看了看jQuery,感觉跟IOS还是多少有那么些差别,不多说分享下我学习的东西.

---

    使用工具:Dreamweaver

     环境:window7

      jquery:1.9.1

---

        从图中代码可以看出

$("div").html("-------");

这句代码改变了页面内容.它和DOM中的

.innerHTML

是一样的功能.也就是说DOM能做的事jQuery也都能做.

        所以,jQuery可以说是DOM的一种封装,使开发人员更为方便的编码.但jQuery又不同于DOM.

        jQuery对象与DOM对象是不一样的

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

我们要获取页面上这个id为imooc的p元素，然后给这个文本节点增加一段文字：“您好！通过慕课网学习jQuery才是最佳的途径”，并且让文字颜色变成红色。

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

var p = document.getElementById('IDName');

p.innerHTML = '您好！通过XX学习jQuery才是最佳的途径';

p.style.color = 'red';

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

Query的处理：

var $p = $('#IDName');

$p.html('您好！通过XX学习jQuery才是最佳的途径').css('color','red');

通过$('#IDName')方法会得到一个$p的jQuery对象，$p是一个类数组对象。这个对象里面包含了DOM对象的信息，然后封装了很多操作方法，调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。

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

通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。

通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。

jQuery对象与DOM对象的相互转换

1.jQuery转换为DOM

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让开发者更直接方便的使用。

2.DOM转换为jQuery

var div = document.getElementsByTagName('div'); //dom对象

var $div = $(div); //jQuery对象

var $first = $div.first(); //找到第一个div元素

$first.css('color', 'red'); //给第一个元素设置颜色

通过getElementsByTagName获取到所有div节点的元素，结果是一个dom合集对象，不过这个对象是一个数组合集。通过$(div)方法转化成jQuery对象，通过调用jQuery对象中的first与css方法查找第一个元素并且改变其颜色。

jQuery常见选择权:

1.ID选择器

        $( "#id" )

2.类选择器

         $( ".class" )

3.层级选择器