初识jQuery

• 获取jQuery

进入jQuery官网：http://jquery.com

• jQuery库文件

jQuery库分开发版和发布版

1. jquery-1.版本号.js（开发版）
2. jquery-1.版本号.min.js（发布版）

在页面中引入jQuery

<script src="js/jquery-1.8.3.js" type="text/javascript"></script>

想要加载第三方的js文件，建议将其写在head元素里

jQuery也是标准的JavaScript，jQuery的代码也要放在script块里 

• jQuery基本语法

使用jQuery弹出提示框

<script>
    $(document).ready(function() {
        alert("我欲奔赴沙场征战jQuery，势必攻克之！");
    });
</script>

• $(document).ready()

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

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

•  DOM模型

浏览器可以把HTML文档显示成可视图形

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

 

把这些节点对象按照一定顺序绘制到浏览器窗口中

以对象描述文档的方式就是DOM（文档对象模型）

节点对象就被称为DOM对象

• 节点类型

元素节点：文档中的所有元素

<h2>……</h2> 

文本节点：元素节点内的文本内容

<p>你最喜欢的食品是？ </p>      

属性节点：在开始元素上直接设置的信息。

<p title="提示">……</p>      

• DOM对象和jQuery对象

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

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

jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法，可使用jQuery提供的$(“”)将DOM对象转换成jQuery对象。

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

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

• jQuery语法结构

语法

$(selector).action() ; 

1. 工厂函数$()：将DOM对象转化为jQuery对象
2. 选择器 selector：获取需要操作的DOM 元素
3. 方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法，根据实际情况调用相应的方法名，这里的action()并不是一个方法名，只是告诉你使用jQuery对象可以调用jQuery对象的相应方法。

//示例
$("#current").addClass("current");      

• jQuery代码风格

“$”等同于“ jQuery ”

$(document).ready()=jQuery(document).ready()
$(function(){...})=jQuery (function(){...})      

操作连缀书写

$("h2").css("background-color","#CCFFFF").next().css("display","block");

语法	说      明
css("属性","属性值")	为元素设置CSS样式的值
addClass()	为元素添加类样式
next()	获得元素其后紧邻的同辈元素

•  DOM对象转jQuery对象

使用$()函数进行转化：$(DOM对象)

var txtName =document.getElementById("txtName"); //DOM对象
var $txtName =$(txtName);   //jQuery对象

注意：

1. jQuery对象命名一般约定以$开头
2. 在事件中经常使用$(this)，this是触发该事件的对象

//第一种写法：先得到DOM，第二步再将DOM对象转换为jQuery对象
var obj = document.getElementById("uname");
$(obj).click(function(){
});

//第二种
$("#uname").click(function(){
});

//<input type="button" id="uname" />

$(obj)//不带双引号，不查找，仅转换
$("#uname")//带双引号，先查找，再转换

• jQuery对象转DOM对象

 jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象

var $txtName =$ ("#txtName");      //jQuery对象
var txtName =$txtName[0];            //DOM对象

通过get(index)方法得到相应的DOM对象

var $txtName =$("#txtName");        //jQuery对象
var txtName =$txtName.get(0);       //DOM对象

• 总结

1. jQuery的基本语法结构是   $(selector).action() ;
2. 常用选择器：  ID选择器、标签选择器、类选择器
3. 设置样式的方法： css() 、addClass()
4. DOM对象和jQuery对象可以相互转化