jQuery基础一

一、使用jQuery的原因：

简单、开发效率高、不用浏览器的差异化

jQuery是前端的一个类库（插件）

 

二、使用方式

1.下载：建议生产环境使用压缩版的jQuery

2.导入：

① script导入本地的文件

② 使用CDN

3.按照jQuery的语法使用即可，注意要先导入再使用

 

三、jQuery的内容

$ 是 jQuery的别名，属于同一个对象

只有jQuery对象才能调用jQuery方法，DOM对象只能调用DOM方法

1.查找标签

2.操作标签

 

四、查找标签

查找后的结果是一个数组，需要通过索引取值

 

1.基本选择器(CSS的选择器一样)

//id选择器
$('#i1')

//标签选择器
$('h2')

//class选择器
$('.c1')

// 通用选择器
$('*')

// 组合选择器
$('.c1,h2')

 

2.层级选择器(CSS的选择器一样)

// 后代选择器
$('form input');

//儿子选择器
$('label>input');

//毗邻选择器
$('label+input');

//弟弟选择器
$('p2~li');

3.基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签（过滤同样的标签）
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

4.属性选择器

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

5.表单筛选器

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

表单对象属性

:enabled
:disabled
:checked
:selected

五、筛选器方法

//下一个元素
$("#id").next()                      //往下找一个
$("#id").nextAll()                  //往下找全部
$("#id").nextUntil("#i2")        //到id为i2的停止，不包括i2

//上一个元素
$("#id").prev()                       //往上找一个
$("#id").prevAll()                   //往上找全部
$("#id").prevUntil("#i2")        //往上找到id为i2停止，不包含i2

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

//儿子和兄弟元素
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

//查找（从后代去找）
$("div").find("p")

相当于$("div p")

//筛选（筛选当前标签）
$("div").filter(".c1")

相当于 $("div.c1")

其他：

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素