jQuery基础概念

一.jQuery概念

jQuery是前端的一个代码库
封装并提供很多JavaScript的功能,可以直接使用

网站网址:
官方网站 : https://jquery.com/
中文网站 : http://jquery.cuishifeng.cn/

特点 :
1, 方法快捷的 选择器 和 筛选器
2, 优质的隐式迭代
3, 强大的链式编程

使用jQuery,必须加载jQuery的外部js文件
jQuery.js / jQuery.min.js (推荐使用)
jQuery给我们提供了两个外部的接口,可以通过两个接口,来操作jQuery程序,调用jQuery的功能和程序

二.jQuery选择器

1. jQuery之选择器
   所谓的选择器,就是获取标签对象的方式 / 获取DOM元素的方式

   可以匹配你能想到的所有的方式方法 — 语法必须正确

   jQuery中,获取的标签对象 / DOM 元素
   一定是一个伪数组形式
   有专门的jQuery语法可以循环遍历

   JavaScript的语法不能操作 jQuery 获取到的标签对象
   jQuery 的语法,也不能操作,JavaScript获取到的标签对象

   获取到的结果 , 是完全不同的数据形式
   但是可以相互转化

   jQuery获取到的标签对象,转化为 JavaScript可以操作的类型
   jQuery标签对象[索引下标]

   JavaScript获取的标签对象,转化为jQuery的类型
   $(JavaScript标签对象)
   例：
   JavaScript的获取方式
   const oDiv1 = document.getElementById(‘d1’);
   console.log(oDiv1);

   jQuery的方式
   console.log( $(’#d1’) );

   相互转化
   jQuery—>JavaScript
   console.log( $(’#d1’)[0] )

   JavaScript—>jQuery
   console.log( $(oDiv1) )

1.根据属性：标签[属性名]
2.根据属性值精确查找标签：标签[属性名=属性值]
3.根据属性值开始值查找标签：标签[属性名^=开始值]
4.根据属性值结束值查找标签：标签[属性名$=结束值]
5.属性值是词列表（多个词组合 每两个词之间用空格链接）：标签[属性名~=词列表中的一个词]
6.属性带有连字符(-):标签[属性名|=连字符前面的值]
7.属性包含某些值：标签[属性名*=包含的值]

三.jQuery筛选器

jQuery的筛选器
所谓的筛选器 是 在 选择器 获取标签对象的基础上 再来进行筛选
作用 : 便于链式编程

1 , 匹配标签伪数组中的第一个标签对象
jQuery标签对象.first()
console.log( $(‘ul>li’).first() );

2 , 匹配标签伪数组中的最后一个标签对象
jQuery标签对象.last()
console.log( $(‘ul>li’).last() );

3 , 匹配标签伪数组中的标签对象的下标 — 只能输入数字
jQuery标签对象.eq()
下标是0 是 第一个标签
console.log( $(‘ul>li’).eq(0) );

下标是3 是 第四个标签
console.log( $(‘ul>li’).eq(3) );

当前索引下标的范围是 0 - 5
超出范围获去到的是空数组
console.log( $(‘ul>li’).eq(300) );

$(‘ul>li’).eq(2) 所有li中的,下标是2,实际是第三个标签
$(‘ul>li’).eq(2).prev() 当前这个标签的上一个兄弟标签
console.log( $(‘ul>li’).eq(2).prev() )

获取当前标签的所有上面的兄弟 – 是从最近的标签开始获取
console.log( $(‘ul>li’).eq(2).prevAll() )

$(‘ul>li’).eq(2) 所有li中的,下标是2,实际是第三个标签
$(‘ul>li’).eq(2).prev() 当前这个标签的下一个兄弟标签
console.log( $(‘ul>li’).eq(2).next() )

获取当前标签的所有下面的兄弟 – 是从最近的标签开始获取
console.log( $(‘ul>li’).eq(2).nextAll() )

$(‘ul>li’).eq(2) 所有li中的,下标是2,实际是第三个标签
$(‘ul>li’).eq(2).siblings() 当前这个标签的所有兄弟标签 – 不管上下
console.log( $(‘ul>li’).eq(2).siblings() )

$(‘ul>li’).eq(2) 所有li中的,下标是2,实际是第三个标签
$(‘ul>li’).eq(2).parent() 当前这个标签的直接父级
console.log( $(‘ul>li’).eq(2).parent() )

$(‘ul>li’).eq(2) 所有li中的,下标是2,实际是第三个标签
$(‘ul>li’).eq(2).parents() 当前这个标签的所有父级
最后一个一定是 html 倒数第二个一定是 body
console.log( $(‘ul>li’).eq(2).parents() )

获取ul中所有的li标签(1) --> 筛选下标是2的标签(2) --> 获取这个标签的所有父级(3)
当前操作是步骤3, 步骤3.end() 效果 返回 上一步也就是 步骤2 操作的标签对象
支持多次 .end() 操作 也就是 逐步返回上一层操作的对象
console.log( $(‘ul>li’).eq(2).parents().end().end() )

匹配指定条件的标签 .find()
console.log($(‘ul’).find(‘li’))

console.log($(‘ul’).find(‘li:first’))

console.log($(‘ul’).find(’#li3’))

console.log($(‘ul’).find(’.li2’))

console.log($(‘ul’).find(’[name=“li4”]’))

选择器和筛选器,是为了方便链式编程

在 JavaScript 中 对 ul 和 所有li 和 某个li 进行编程,要获取不同的标签对象

jQuery中可以使用链式编程来实现

例如
$(‘ul’).找到所有的li().操作().找某个li().操作.end()返回找到ul.操作ul.找某个li()…

获取一个标签对象,可以通过链式编程,找到所有的标签,进行操作

所有的jQuery大神,都是一行代码搞定所有操作

通过 选择器 和 筛选器的集合,我们回去到页面中所有的标签对象

三.jQuery属性操作

jQuery之标签的属性操作

方法1 : prop() 方法
方法2 : attr() 方法

区别1 : 定义自定义属性,prop() 方法不会体现在标签上
定义自定义属性,attr() 方法会体现在标签上
针对的是自定义标签属性
例如id class 等标签本身就具有的数据,都会显示在标签上的
虽然显示上有区别,但是都可以设定属性,都可以执行属性

区别2 : 获取某些属性时 prop() 也不怎么好用

区别3 : 删除标签属性时, removeProp() 已经不推荐使用

总结 : 尽量多使用 attr

语法格式
标签对象.prop(‘属性’) / 标签对象.attr(‘属性’)
获取标签指定属性的属性值
标签对象.prop(‘属性’ , 属性值) / 标签对象.attr(‘属性’ , 属性值)
设定标签指定属性的属性值
标签对象.prop(‘自定义属性’ , 属性值) / 标签对象.attr(‘自定义属性’ , 属性值)
设定标签自定义属性的属性值

获取属性
console.log( $(‘div’).prop(‘id’) );
console.log( $(‘div’).attr(‘id’) );

设定属性
console.log( $(‘div’).prop(‘id’ , ‘div1’) );
console.log( $(‘div’).attr(‘id’ , ‘div1’) );

设定自定义属性
console.log( $(‘div’).prop(‘index’ , ‘div4’) );
console.log( $(‘div’).prop(‘index’));

$('div').prop('abc' , 123);

console.log( $('div').attr('index' , 'div4') );
 $('div').attr('def' , 456);

删除属性
removeProp(‘属性’) removeAttr(‘属性’)
在jQuery3.0+版本中, removeProp() 不推荐使用
推荐使用 removeAttr(‘属性’)

 console.log($('div').attr('name'))
 console.log($('div').prop('name'))

五.jQuery隐式迭代

jQuery的隐式迭代
所谓的 jQuery的隐式迭代 就是 程序会自动的给所有的标签对象,执行操作

给所有的div,都添加上idnex属性

如果是JavaScript,要 setAttribute(‘index’ , 属性值)
并且要循环遍历,对每个标签都操作

jQuery的隐式迭代,也就是循环遍历操作

获取多有的div标签,jQuery会自动对标签数组中的所有内容,都执行操作
$(‘div’).attr(‘index’,1);