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选择器
-
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);