【JavaScript】初识jQuery

相关概念：

jQuery是JavaScript的程序库之一，它是JavaScript对象和实用函数的封装。

jQuery只是JavaScript的程序库，相当于JavaScript技术的一个子集。

jQuery的优势

jQuery的主旨是write less，do more （以更少的代码，实现更多的功能）。总体来说，jQuery主要有以下优势：
1、轻量级。
2、强大的选择器。
3、出色的DOM封装。
4、可靠的事件处理机制。
5、出色的浏览器兼容。
6、隐形迭代。
7、丰富的插件支持。

以上，纯属凑字数

jQuery执行事件与window执行事件

//jQuert执行事件

    $(document).ready(function(){
    //javascript代码
})

//window执行事件
    window.onload = function(){
    //javascript代码
}

window.onload与$(document).ready()的对比
	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片、Flash、视频等）才能执行	网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、Flash、视频等）并没有加载完
编写个数	同一页面下不能同时编写多个	同一页面能同时编写多个
简化写法	无	$(function(){})

jQuery语法结构

语法：$(selector).cation();
1.工厂函数$()
在jQuery中，"$"美元符号等价于jQuery，即$()=jQuery()。$()的作用是将DOM对象转化为jQuery对象，只有将DOM对象转化为jQuery对象后，才能使用jQuery的方法。

2.选择器selector
jQuery支持css 1.0到css 3.0规则中几乎所有的选择器，如标签选择器、类选择器、ID选择器和后代选择器等。使用jQuery选择器和$()工厂函数可以非常方便地获取需要操作的DOM元素。

3.方法action()

一些常用方法
addClass()	向被选元素添加一个或多个样式，语法：jQuery对象.addClass([样式名]),样式名可以是一个，也可以是多个，多个的时候用空格隔开，需要注意的是，添加的样式为类样式时，不需要带有类的符号“.”
css()	为匹配的元素添加css样式。语法：css(“属性”,”属性值”)
next()	获得所匹配元素集合中每个元素其后紧邻的同辈元素。

DOM对象和jQuery对象

概念？DOM中存在许多的节点，有些DOM节点还包含其他类型的节点。
DOM的节点分类：
    1、元素节点：即<p>、<h1>、<ul>、<strong>等标签元素。相当于高楼大厦的砖块。
    2、文本节点：既<p>这是一个p标签</p>当前的文本信息。网页的内容由文本信息提供
    3、属性节点：既<img src = "" alt = "" />中的src和alt。利用属性节点可以对包含在元素里的内容做出准确的描述。

DOM对象

在JavaScript中，可以使用getElementsByTagName()或者getElementById()来获取元素节点，通过该方式得到的DOM元素就是DOM对象，DOM对象可以使用JavaScript中的方法。

//示例
var objDOM = getElementById("id");  //获得DOM对象
var objHTML= objDOM.innerHTML;  //使用JavaScript中的innerHTML属性

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法。

//示例
$("#title").html();  //获取id为title元素内的html代码

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

转换前约定变量风格：
    1、如果获取的对象是jQuery对象，那么在变量前加上$。示例：
        var $variable = jQuery对象;
    2、如果获取的对象是DOM对象，则定义如下：
        var variable = DOM对象;

1、jQuery对象转换成DOM对象

jQuery提供了两种方法将一个jQuery对象转换成DOM对象，既[index]和get(index)。
    （1）jQeury对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象。
    示例：
        var $txtName = $("#txtName"); //jQuery对象
        var txtName =$txtName[0];     //DOM对象
     （2）通过get(index)方法得到相应的DOM对象。
     示例：
         var $txtName = $("#txtName"); //jQuery对象
         var txtName =$txtName.get(0); //DOM对象

DOM对象转换成jQuery对象

对于一个DOM对象，只需要用$()函数将DOM对象包装起来，就可以获得一个jQuery对象。
示例：
var txtName = document.getElementById("txtName");  //DOM对象
var $txtName = $(txtName);  //jQuery对象

注意：DOM对象只能使用DOM中的方法，jQuery也只能使用jQuery中的方法。

完