jQuery总结

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对象：