一、使用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() // 索引值等于指定值的元素