JQuery从基础到使用进阶

简介

JQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。是目前最受欢迎的JavaScript库,核心理念是“writeless,do more”。

特点

跨浏览器的动态选择

DOM寻访与更改

事件

CSS操作

特效与动画

思路及常用方法

基础概述

1.$()

是jQuery中最基本的符号,可以将其理解为jQuery的包装器。根据参数的不同,可以实现不同的功能

(1)function(){},页面直接装载完执行

是$(document).ready(function(){  });的简写

(2)CSS选择器,返回JQuery对象

例:$(“#txtBook”)

(3)DOM对象,返回JQuery对象

对JQuery对象执行各种JQuery方法,以获取数据,定义事件,执行操作

(4)Html文本,创建JQuery对象,可视为DOM元素插入到Html代码中。

例:var test=$(“

这是一个新段落!

”); test.insertAfter(“#p1”);

2.选择器

选择到某个或某些指定的标记对象

(1)基本选择器

类似于CSS中的选择器,元素名称、id值、class名称、逗号隔开多项选择、空格隔开混合使用的规则在   JQuery的选择器中同样适用。

(2)表单选择器

匹配某些表单对象,类似":button"的使用方式。

(3)属性选择其

根据属性值的不同来选择不同的标记对象

(4)表单对象属性选择器

选择属性值为":checked"、":selected"、":disabled"、"enabled"的相应表单对象

除了以上JQuery中常用的选择器外,还有位置、内容等其他选择器,具体使用细则可以通过查阅API函数手册进行学习。

3.跨浏览器

JQuery对各浏览器运行方法时做了很好的封装,屏蔽了很多浏览器的差异,但总是还会碰到一些不兼容的地方,可通过判断浏览器的类型及版本号来针对不同的浏览器做出调整。

(1)判断浏览器的类型

$.browser.msie==true,$.browser.opera,$.browser.safari,$.browser.mozilla

(2)判断浏览器的版本号

例如:$.browser.version.indexOf("8")

4.插件机制

JQuery提供可扩展的插件机制,用户可编写属于自己的插件,方便应用

$.fn.myplugin=function(){};

总结

对JQuery有了一些认识及练习之后,对于今后的学习还是要借助与JQuery的API帮助文档 

http://api.jquery.com/

http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html (中文版本)

另外,我们还要去了解那些好用的插件,以及JQuery的一些优化问题,以提高我们的应用能力,在此,仅推荐两篇文章:

jQuery性能优化的28个建议

15 个最新的 jQuery插件

好的框架是为了更好的应用,这里仅仅是个开端,希望能在经来的学习使用中深入更多。

文章导航