1、认识jQuery
什么是jQuery?
jQuery是一个前端库，也是一个方法库。
jQuery的优势是什么？
- 优质的选择器和筛选器；
- 好用的隐式迭代；
- 强大的链式编程。
2、使用jQuery
<body>
<!--外部引入jquery.js文件-->
<script src="./jquery/jquery.js"></script>
</body>
3、jQuery选择器
- jquery有两种方法获取元素
// 通过 jQuery()获取页面中的元素
const ele = jQuery('')
// 通过 $()获取页面中的元素
const ele = $('')
- 通过类名获取元素
const l1 = jQuery('.cls')
const l2 = $('.cls')
- 通过id名获取元素
const l1 = jQuery('#cls')
const l2 = $('#cls')
- 通过标签名获取元素
const l3 = jQuery('div')//获取div标签
const l4 = $('p')//获取p标签
- 通过选择器获取元素
const oLi1 = $('ul>li') //获取ul子元素中的li标签
注意：
一些特殊的选择器：
- 第一个元素
$('li:first') // 找到所有 li 中的第一个
- 最后一个元素
$('li:last') // 找到所有 li 中的最后一个
- 指定下标的元素
$('li:eq(3)') // 找到所有 li 中索引为 3 的那个
- 所有下标为奇数的元素
$('li:odd') // 找到所有 li 中索引为 奇数 的
- 所有下标为偶数的元素
$('li:even') // 找到所有 li 中索引为 偶数 的
4、jQuery筛选器
什么是筛选器？
筛选器就是在选择器选择到一组元素以后对元素再次进行筛选。
一些筛选器
- 所有元素中的第一个
$('li').first()
- 所有元素中的最后一个
$('li').last()
- 某一个元素的下一个兄弟元素
$('li:eq(2)').next() //下标为2的元素的下一个兄弟标签
- 某一个元素后面所有的兄弟元素
$('li:eq(3)').nextAll() //下标为3的元素后面所有的兄弟标签
- 某一个元素的上一个兄弟元素
$('li:eq(1)').prev() //下标为1的元素的前一个兄弟标签
- 某一个元素前面所有的兄弟元素
$('li:eq(3)').prevAll()//下标为3的元素前面所有的兄弟标签
- 某一个元素的父元素
$('li:eq(1)').parent() //ul
- 某一个元素的所有祖宗元素，直到 html
$('li:eq(3)').parents() //ul,body等
- 一组元素中的某一个
$('div').find('.box')//div所有后代元素中类名为box的元素
5、jQuery属性操作
- 给元素添加固有属性
prop(‘id’)
// 给 div 元素添加一个 id 属性，值是 box
$('div').prop('id', 'box')
// 获取 div 的 id 属性
console.log($('div').prop('id'))
注意：
1、prop 方法只能添加元素自己本身就有的属性
2、如果是添加的自定义属性，不会显示在标签上，但是可以使用
- 给元素添加自定义属性
attr(‘index’, 1)
// 给 div 添加一个 index 属性，值为111
$('div').attr('index', 111)
// 获取 div 的 index 属性
console.log($('div').attr('index'))
- 移除元素属性
removeProp(‘id’) //移除固有属性
removeAttr(‘index’)//移除自定义属性
// 移除元素固有属性
$('div').removeProp('id')
// 移除元素自定义属性
$('div').removeAttr('index')
- 操作元素类名
hasClass(‘box’) 判断有没有box类名
addClass(‘box2’) 添加类名
removeClass(‘box’) 移除类名
toggleClass(‘box3’) 有就移除，没有就添加
// 判断某一个元素有没有某一个 class
$('div').hasClass('box') // true 表示有，false 表示没有
// 给元素添加一个类名
$('div').addClass('box2') // 给 div 元素添加一个 box2 类名
// 移除元素的类名
$('div').removeClass('box') // 移除 div 的 box 类名
// 切换元素类名
$('div').toggleClass('box3') // 如果元素本身有这个类名就移除，本身没有就添加
- 操作元素的内容
html(‘hello world’) 可加标签
text(‘hello world’) 标签不生效
val(‘admin’) 对于input框而言
// 给元素的 innerHTML 赋值
$('div').html('<span>hello world</span>')
// 获取元素的 innerHTML
$('div').html()
// 给元素的 innerText 赋值
$('div').text('hello world')
// 获取元素的 innerText
$('div').text()
// 给元素的 value 赋值
$('input').val('admin')
// 获取元素的 value 值
$('input').val()
- 获取下标
index()
$('button').on('click',function(){
console.log($(this)); // 当前点击元素
console.log($(this).index()); // 当前点击元素的下标
})
6、jQuery操作样式
- css()
css(‘background’,‘red’) 两个参数为添加属性
css(‘backgroundColor’) 一个参数为获取属性值
//给元素加样式
$('ul').css('background','red'); //添加属性
console.log($('ul').css('backgroundColor'));//获取属性
经典案例
jquery改变图片透明度
// 改变图片透明度
$('div>img').on('mouseover',function(){
$(this).css('opacity','1').siblings().css('opacity','0.4')
})
效果图
jquery实现选项卡功能
// 京东商品页面实现
$('ul>li').on('mouseover',function(){
//滑过的li变色，其余不变色
$(this).addClass('l1').siblings().removeClass('l1');
$('.div_right>img').eq($(this).index()).addClass('show').siblings().removeClass('show');
})
效果图
