码迷,mamicode.com
首页 > Web开发 > 详细

jQuery总结

时间:2016-06-24 20:29:51      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:

jQuery

l  什么是jQuery?

jQuery是一个快速、小巧、功能丰富的Javascript库。使用jQuery可以使我们很简单的实现前端页面中常见的动态效果,而且使用jQuery写出来的代码兼容各种常见的浏览器,大大降低和简化了前端开发的工作。

 

 

 

 

 

l  下载并使用jQuery

要使用这个库必须要先下载库文件,然后在页面中使用script标签引入。

先下载:下载一个压缩的文件。

 

引入并使用:JQ中一般都使用$来操作

 

 

 

 

 

l  使用jQuery实现一个功能的流程

在使用jQuery来实现一些功能时,基本的使用流程是一样的:

 

① 使用jQuery提供的选择器选择想要操作的DOM元素

② 调用jQuery提供的一套方法来实现各种功能

 

比如以下例子:点击隐藏再点击显示。。

 

 

 

 

选择器

兼容所有CSS的选择器,CSS中的选择器JQUERY都支持,而且还提供了更多功能。

l  基本选择器

id选择器

 

 

class选择器

 

 

 

l  筛选器

:first:第一个

:last:最后一个

:eq(n):第n个

:even:偶数个

:odd:奇数个

 

 

 

 

 

l  页面载入之后执行

一般JS必须要HTML标签都加载完之后才能正常执行,比如给一个按钮绑定事件,那么首先就先让这个按钮加载到页面中之后才能绑定,所以一般JS代码要写在HTML标签的最后,等所有的HTML标签加载完之后再执行JS代码,这样就不行出错了。

 

但是,如果就想要把JS写在HTML前面也可以。JQ中提供了一种语法:

 

 

如果JS非要写在前面必须写在这里面:【等HTML加载完之后再执行】

 

 

 

 

 

l  多库共库

jquery中都是使用$来操作的。有时我们一个页面中可能除了JQ之外还会引入很多其他的类库,这时就有可能多个类库都使用$就冲突了!

解决办法:

在引入jquery之后马上执行以下方法,放弃$使用,以后再使用jq就使用jQuery:

 

 

这样如果引入其他库,其他库中的$不会影响。

 

扩展:如果觉得jQuery太长可以自己起个别名:

 

 

 

 

 

 

 

 

l  标签属性操作

 

使用prop和attr来操作属性。

这种函数的特点:即可以设置值也可以获取值:【一个参数是获取值,两个参数是设置值】

$(“:checkbox”).prop(‘checked’);       -->  获取所有复选框的checked属性值

$(“:checkbox”).prop(‘checked’, true);   -->  设置所有复选框的checked属性值

 

示例:全选功能

 

 

prop和attr的区别:

prop用来操作HTML中固有的属性。

attr用来操作我们自己添加的属性。

比如:

 

当操作data时必须用attr

 

 

 

 

 

l  表单选择器

:input:所有input框

:text:所有文本框

:radio:所有单选框

:checked:所有被选中的

:selected:所有下拉框被选中的

 

点击删除按钮时删除所有选中的行

 

 

文档处理

l  获取和设置值

 

 

l  内部添加

点击时在Table中添加一行

 

新行设置一个背景色

注意:使用JQUERY中的方法时,必须操作的东西是一个jquery对象!!可以使用$()转化一个数据为jqeury对象:

 

jQuery总结

标签:

原文地址:http://www.cnblogs.com/hellohell/p/5615270.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!