jQuery总结

Posted 2020-07-29

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