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() // 索引值等于指定值的元素
原文地址:https://www.cnblogs.com/st-st/p/9805802.html