JQuery初级

JQuery初级

概念

js的函数库
一种前端框架
类似与java的jar包
1
2
3

作用

简化js代码,提高前端开发效率
1

本质

他人写好的JS文件
1

使用步骤

1,引入JQuery文件
2,编写代码
1
2

引入Jquery文件

方式1,将JQuery文件下载到本地,在引入本地的JQuery文件

方式2,通过src属性引入JQuery所在的网络地址

代码

JQuery核心函数

作用1:创建标签

​ 语法:$(“html标签”)

​ 如:$(“

德玛西亚

”)

作用2:将DOM对象转换为JQuery对象

​ 语法:$(dom对象)

作用3:入口函数

​ 语法:

​ $(function(){

​ })

作用4:寻找标签

​ 语法:$(“选择器”)

选择器

基本选择器

​ id选择器

​ class选择器

​ 标签选择器

​ 统配选择器

伪类选择器

​ 基本选择器:伪类{

​ }

复合选择器

selector1 selector2 选择所有selector1 匹配的元素 里面 的匹配selector2的元素

selector1 > selector2 选择匹配selector1元素的 子标签中 匹配selector2的元素

selector1,selector2 选择所有匹配selector1 和 selector2的元素（并集）

selector1 + selector2 匹配所有 紧接 在 selector1 元素后的 selector2元素

selector1 ~ selector2匹配所有在 selector1 元素后的 selector2元素

属性选择器

属性选择器

​ 选择器[属性名]

​ 选择器[属性名=属性值]

JQuery选择器筛选

第一个:first

最后一个:last

偶数:even

奇数:odd

指定下标的:eq(下标)

前面的:lt(下标)

后面的:gt(下标)

属性=属性值

属性!=属性值

选择器筛选语法 说明

$("selector: first ") 匹配selector选择的元素集合中的第一个

$("selector: last ") 匹配selector选择的元素集合中的最后一个

$("selector: odd ") 匹配selector选择的元素集合中索引为奇数的元素(1,3,5,7,…)

$("selector: even ") 匹配selector选择的元素集合中索引为偶数的元素(0,2,4,6,…)

$("selector: eq(index) ") 匹配selector选择的元素集合中索引为index的 元素

$("selector: lt(index) ") 匹配selector选择的元素集合中索引小于index 的元素

$("selector: gt(index) ") 匹配selector选择的元素集合中索引大于index 的元素

$("selector [attrName=attrValue] ") 匹配selector选择的元素集合中attrName属性 值为attrValue的元素 $("selector [attrName!=attrValue] "

JQuery操作内容

text()

html()

没有参数就是获取内容

有参数就是设置内容

JQuery操作属性

普通属性

attr()

特殊属性

​ value

​ val()

​ class

​ 添加

​ addClass(“添加的class属性值”)

​ 删除

​ removeClass(“删除class属性值”)

​ 查看

​ attr(“class”)

class属性

语法: addClass():添加

removeClass():删除

toggleClass():原标签没有就是添加,原标签有就是删除

attr(“class”):获取class的属性值