【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.选择器selectorjQuery支持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中的方法。

完