初识JQuery

一、什么事JQuery
jQuery是一套Javascript脚本库.Javascript脚本库类似于.NET的类库, 这些类库中封装了一些工具方法或对象方法, 方便用户使用.

二、JQuery的特点
1.访问和操作DOM元素

2.控制页面样式

3.对页面事件进行处理

4.扩展新的jQuery插件

5.与Ajax技术完美结合

三、引入JQuery

1
四、JQuery的基本语法
弹出提示框：

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

工厂函数$( )：将DOM对象转化为jQuery对象

选择器 selector：获取需要操作的DOM 元素

方法action( )：jQuery中提供的方法，其中包括绑定事件处理的方法

六、使用JQuery操作页面元素
1.使用addClass( )方法为元素添加样式
语法：jQuery 对象.addClass([样式名]);
示例：$("#current").addClass(“current”);

2.使用css( )方法设置元素样式
语法：

css(“属性”,“属性值”) ;

css({“属性1”:“属性值1”,“属性2”:“属性值2”…}) ;

示例：

$(“li”).mouseover(function(){
$(this).css({“background”:“red”});
}). mouseout(function(){
$(this).css({“background”:“pink”});
})
1
2
3
4
5
3.使用show( )、hide( ) 方法设置元素的显示和隐藏
语法：

$(selector).show( );//显示

$(selector).hide( );//隐藏
1
2
3
示例：

$(".nav-top").show( );//显示
$(“p”).hide( );//隐藏
1
2
DOM模型：

DOM对象和jQuery对象：
一、DOM对象：
可以直接使用JavaScript获取的节点对象

var obja=document.getElementById(“title”);

var objb=obja.innerHTML;
1
2
3
二、JQuery对象：
使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法

$("#title").html( );
1
等同于

document.getElementById(“title”).innerHTML;