JQuery简介
- ■jQuery由美国人John Resig于2006年创建
- ■jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装
- ■它的设计思想是write less,do more
认识JQuery
JQuery的用途
- 访问和操作DOM元素
使用Ouery可以很方便地获取和修改页面中的指定元素.无论是删除、移动还是复制某元素,jOuery都提供了一整套方便。快捷的方法。既减少了代码的编写,又大大提高了用户对页面的体验度如添加删除商品。留言、个人信息等。
- 控制页面样式
通过引入jQuery.程序开发人员可以很便捷地控制页面的CSS文件。浏览器对页面文件的兼容性,直以来 都是
页面开发者最为头痛的事情,而使用jQuery操作页面的样 式可以很好地兼容各种浏览器。最典型的有微博、博客、邮箱等的换肤功能。
引入jQuery后,可以使页面的表现层与功能开发分离,开发者更多地专注于程序的逻辑与功效:页面设计者侧重于页面的优化与用户体验。通过事件绑定机制,可以很轻松地实现两者的结合。
- 对页面事件的处理
引入jQuery后,可以使页面的表现层与功能开发分离,开发者更多地专注于程序的逻辑与功效:页面设计者侧重于页面的优化与用户体验。通过事件绑定机制,可以很轻松地实现两者的结合。图5.5所示的”去哪儿”网的搜索模块的交互效果,就应用了jQuery对鼠标事件的处理。
- 方便地使用jQuery插件
引|入jQuery后,可以使用大量的jQuery插件来完善页面的功能和效果.如jQuery∪l 插件库、Form插件,Validate
插件等。这些插件的使用极大地丰富了页面的展示效果,使原来使用JavaScript 代码实现起来非常困难的功能通过jQuey
插件可轻松地实现。
- 与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…}) ;
设置元素的显示和隐藏
语法: 显示: ( s e l e c t o r ) . s h o w ( ) ; 隐 藏 : (selector).show( ); 隐藏: (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 t x t N a m e = txtName = txtName=(txtName);
注意:
jQuery对象命名- -般约定以 开 头 在 事 件 中 经 常 使 用 开头 在事件中经常使用 开头在事件中经常使用(this), this是触发该事件的对象
jQuery对象转DOM对象
■jQuery对象是一 个类似数组的对象,可以通过[index]的方法得到相应的DOM对象
语法:
jQuery对象:var t x t N a m e = txtName = txtName= ("#txtName";
DOM对象:var txtName=$txtName[0];
通过get(index)方法得到相应的DOM对象jQuery对象
语法:
jQuery对象:var t x t N a m e = txtName = txtName=("#txtName");
DOM对象:var txtName =$txtName.get(0);