jQuery的一些认知

一、认识jQuery库与Jquery常用选择器

1、js和jQuery的关系？

js是网页开发语言，jQuery是基于js的一种框架，也是对js对象和函数的封装。
jquery选择器
$(this).hide() // 隐藏当前元素
$(“p”).hide() // 隐藏所有段落
$(".t").hide() //隐藏所有 class=“t” 的所有元素
$("#t").hide() //隐藏所有 id=“t” 的元素

2、创立者和时间，以及思想

jQuery是由美国人John Resig在2006年创建的。

设计思想：write less,do more (写更少，做更多)。

3、jQuery能做什么？

访问和操作DOM元素
控制页面样式
对页面事件进行处理
可以扩展新的jQuery插件
与Ajax技术结合。

注意：jQuery能做的，js也能做，但是jQuery能够提升开发效率！！！

4、jQuery的优点

体积少，少占内存
有着强大的选择器
出色的DOM封装
可靠的事件处理机制
对浏览器的兼容性
使用隐式迭代简化编程
丰富的插件支持

5、获取jQuery库

直接官网下载：http://jquery.com

6、引入jQuery库

7、$(document).ready()与window.onload类似，但也有区别

window.onload

$(document).ready()

执行时机

必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行

网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完

编写个数

同一页面不能同时编写多个

同一页面能同时编写多个

简化写法

无

$(function(){

//执行代码

}) ;

二、jQuery的基本使用

1、语法定义：

$(selector).action() ;

工厂函数$()：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

2、操作页面元素

使用addClass( )方法为元素添加样式

语法如下：
jQuery 对象.addClass([样式名]);
 
示例：
$("#current").addClass("current");  
 
注意：$(“”)指选择的jQuery对象，addClass是添加样式，里面是自己定义的样式！！！

使用css( )方法设置元素样式

//设置元素的样式：单个属性
css("属性","属性值") ;
 
//多个属性：
css({"属性1":"属性值1","属性2":"属性值2"...}) 
 
 
示例：
$(this).css({"background":"#c81623"});
//注释：选择的是当前元素，设置样式！

使用show( )、hide( ) 方法设置元素的显示和隐藏

//设置显示
$(selector).show( );
 
//设置隐藏
$(selector).hide( );
 
 
如下：
$("p").show( );
 
$("p").hide( );

3、jQuery代码的风格

$(document).ready()=jQuery(document).ready();
 
$(function(){...})=jQuery (function(){...})；
 
注意：在jQuery中，$就代表jQuery

4、链式操作和隐式操作

链式操作：对一个对象进行多重操作，并将操作结果返回给该对象。

$("h2").css("background-color","#ccffff").next().css("display","block");
 
//注释：给h2设置样式，给h2的下一个同胞元素添加样式。

隐式操作：

 $(document).ready(function() {
        $("li").css({"font-weight":"bold","color":"red"});
    });
 
//注释：给li添加样式

5、DOM模型

浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构！

DOM对象：直接使用JavaScript获取的节点对象。

var objDOM=document.getElementById("title"); 
 
var objHTML=objDOM.innerHTML;  

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

$("#title").html( );
 
等同于
 
document.getElementById("title").innerHTML;

注意：DOM对象和jQuery对象分别拥有一套独立的方法，不能混用！

DOM对象转jQuery对象：

//DOM对象
var txtName =document.getElementById("txtName"); 
 
//jQuery对象
var $txtName =$(txtName); 
 
//注意：jQuery对象命名一般约定以$开头，在事件中经常使用$(this)，this是触发该事件的对象，也就是指当前对象

jQuery对象转DOM对象：

// jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
 
//jQuery对象
var $txtName =$ ("#txtName"); 
 
//DOM对象
var txtName =$txtName[0]; 
 
 
//通过get(index)方法得到相应的DOM对象
 
//JQuery对象
var $txtName =$("#txtName"); 
 
//DOM对象
var txtName =$txtName.get(0);