jQuery能做什么
访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合
jQuery的优势
体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持
jQuery基本语法
使用jQuery弹出提示框
<script>
$(document).ready(function() {
alert("我欲奔赴沙场征战jQuery，势必攻克之！");
});
</script>
$(document).ready()与window.onload类似，但也有区别
window.onload $(document).ready()
执行时机 必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行 网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
编写个数 同一页面不能同时编写多个 同一页面能同时编写多个
简化写法 无 $(function(){
//执行代码
})?;
jQuery语法结构
工厂函数$()：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法
jQuery操作页面元素
使用addClass( )方法为元素添加样式
使用css( )方法设置元素样式
使用show( )、hide( ) 方法设置元素的显示和隐藏
css( )方法
css("属性","属性值") ;
css({"属性1":"属性值1","属性2":"属性值2"...}) ;
设置元素的显示和隐藏
$(selector).show( );
$(selector).hide( );
$(".nav-top").show( );
$("p").hide( );
“$”等同于“ jQuery ”
$(document).ready()=jQuery(document).ready()
$(function(){...})=jQuery (function(){...})
链式操作
对一个对象进行多重操作，并将操作结果返回给该对象
$("h2").css("background-color","#ccffff").next().css("display","block");
隐式迭代
$(document).ready(function() {
$("li").css({"font-weight":"bold","color":"red"});
});
DOM模型
浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构
DOM对象和jQuery对象
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"); DOM对象
var $txtName =$(txtName); jQuery对象
jQuery对象命名一般约定以$开头
在事件中经常使用$(this)，this是触发该事件的对象
jQuery对象转DOM对象
jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
var $txtName =$ ("#txtName"); jQuery对象
var txtName =$txtName[0]; DOM对象
通过get(index)方法得到相应的DOM对象
var $txtName =$("#txtName");
var txtName =$txtName.get(0);