JQuery

Posted 2020-11-10 桥前石头

一、什么是JQuery

Jquery是一个javascript函数库。

Jquery是轻量级，不影响网页加载速度。

Jquery的功能有：

。html元素选取

。HTML元素操作

。CSS操作

。HTML事件函数

。javascript特效和动画

。HTML DOM遍历和修改

。AJAX

。Utilities

二、JQuery内容

1、选择器

2、筛选器

3、样式操作

4、文本操作

5、属性操作

6、文档操作

7、事件

8、动画效果

9、插件

10、each、data、AJAX

官方文档地址：http://jquery.cuishifeng.cn/

三、JQuery对象

Jquery对象就是jquery包装DOM对象后产生的对象。Jquery对象是jquery独有的。DOM对象是DOM独有的。

Jquery对象的基本语法：

var $d1ELe=$(‘#d1‘).html();

相当于：

var dELe=document.getElementById(‘d1‘).innerHTML;

Jquery转为DOM的方法：

$(‘#d1‘)[0].innerHTML;

　　

四、基础语法

$(selector).action()

　　

五、查找标签

1.选择器

id选择器：

$(‘#d1‘)

标签选择器：

$(‘div‘)

Class选择器：

$(".nav")

配合使用：

$("div.left-nav")

所有元素选择器：

$("*")

组合选择器：

$("div,.left-nav,ul,li,a")

层级选择器：

$("x y");// x的所有后代y（子子孙孙）

$("x > y");// x的所有儿子y（儿子）

$("x + y")// 找到所有紧挨在x后面的y

$("x ~ y")// x之后所有的兄弟y

基本选择器：

:first // 第一个

:last // 最后一个

:eq(index)// 索引等于index的那个元素

:even // 匹配所有索引值为偶数的元素，从 0 开始计数

:odd // 匹配所有索引值为奇数的元素，从 0 开始计数

:gt(index)// 匹配所有大于给定索引值的元素

:lt(index)// 匹配所有小于给定索引值的元素

:not(元素选择器)// 移除所有满足not条件的标签

:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

属性选择器：

$("input[type=‘checkbox‘]");// 取到checkbox类型的input标签

$("input[type!=‘text‘]");// 取到类型不是text的input标签

表单常用筛选器;

:text

:password

:file

:radio

:checkbox

:submit

:reset

:button

表单对象属性：

:enabled

:disabled

:checked

:selected

筛选器

下一个：

$("#id").next()

$("#id").nextAll()

$("#id").nextUntil("#i2")

上一个;

$("#id").prev()

$("#id").prevAll()

$("#id").prevUntil("#i2")

父元素：

$("#id").parent()

$("#id").parents()  // 查找当前元素的所有的父辈元素

$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

子元素和兄弟元素：

$("#id").children();// 儿子们

$("#id").siblings();// 兄弟们

查找元素：

$("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法

补充：（用法：$("#id").first()）

.first()// 获取匹配的第一个元素

.last()// 获取匹配的最后一个元素

.not()// 从匹配元素的集合中删除与指定表达式匹配的元素

.has()// 保留包含特定后代的元素，去掉那些不含有指定后代的元素。

六、操作标签

样式操作

样式类：

addClass();// 添加指定的CSS类名。

removeClass();// 移除指定的CSS类名。

hasClass();// 判断样式存不存在

toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。