JQuery简介

JQuery简介

• ■jQuery由美国人John Resig于2006年创建
• ■jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
• ■它的设计思想是write less,do more

认识JQuery

JQuery的用途

1. 访问和操作DOM元素

使用Ouery可以很方便地获取和修改页面中的指定元素.无论是删除、移动还是复制某元素，jOuery都提供了一整套方便。快捷的方法。既减少了代码的编写，又大大提高了用户对页面的体验度如添加删除商品。留言、个人信息等。

2. 控制页面样式

通过引入jQuery.程序开发人员可以很便捷地控制页面的CSS文件。浏览器对页面文件的兼容性，直以来 都是
页面开发者最为头痛的事情，而使用jQuery操作页面的样 式可以很好地兼容各种浏览器。最典型的有微博、博客、邮箱等的换肤功能。
引入jQuery后，可以使页面的表现层与功能开发分离，开发者更多地专注于程序的逻辑与功效:页面设计者侧重于页面的优化与用户体验。通过事件绑定机制，可以很轻松地实现两者的结合。

3. 对页面事件的处理

引入jQuery后，可以使页面的表现层与功能开发分离，开发者更多地专注于程序的逻辑与功效:页面设计者侧重于页面的优化与用户体验。通过事件绑定机制，可以很轻松地实现两者的结合。图5.5所示的”去哪儿”网的搜索模块的交互效果，就应用了jQuery对鼠标事件的处理。

1. 方便地使用jQuery插件

引|入jQuery后，可以使用大量的jQuery插件来完善页面的功能和效果.如jQuery∪l 插件库、Form插件，Validate
插件等。这些插件的使用极大地丰富了页面的展示效果，使原来使用JavaScript 代码实现起来非常困难的功能通过jQuey
插件可轻松地实现。

5. 与Ajax技术的完美结合

利用Ajax异步读取服务器数据的方法，极大地方便了程序的开发，增强了页面交互，提升了用户体验;而引入jQuery后，不仅完善了原有的功能，还减少了代码的书写，通过其内部对象或函数，加上几行代码就可以实现复杂的功能。

JQuery能做什么？

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

JQuery的优势

■体积小，压缩后只有100KB左右
■强大的选择器
■出色的DOM封装
■可靠的事件处理机制
■出色的浏览器兼容性
■使用隐式迭代简化编程
■丰富的插件支持

使用jQuery弹出提示框

< script>

$(document).ready(function() {

alert("我欲奔赴沙场征战jQuery,势必攻克之! ");});
//为页面加载事件绑定方法
</script>

$(document).ready()

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

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

jQuery语法结构

语法：$(selector).action() ;

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

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

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

jQuery操作页面元素-

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

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

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

addClass( )方法

语法jQuery对象.addClass([样式名]);

css( )方法

语法 设置一个CSS属性：css(“属性”,“属性值”) ;

同时设置多个CSS属性：css({“属性1”:“属性值1”,“属性2”:"属性值2…}) ;

设置元素的显示和隐藏

语法： 显示：$(selector).show();隐藏：$(selector).hide( );

DOM模型

DOM对象和jQuery对象

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

语法： var objDOM=document.getElementByld(“title”);

var objHTML =objDOM.innerHTML;

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

语法：
$("#title").html( );

等同于

document.getElementByld(“title”).innerHTML;

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

DOM对象转jQuery对象

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

语法：
DOM对象： var txtName =document.getElementByld(“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对象

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

总结