初识jQuery

最新推荐文章于 2022-07-13 17:19:06 发布

发臭的靈魂

最新推荐文章于 2022-07-13 17:19:06 发布

阅读量145

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_38256266/article/details/118767430

版权

前端专栏收录该内容

63 篇文章 18 订阅

订阅专栏

初识jQuery

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');
})

效果图

在这里插入图片描述

发臭的靈魂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识jQuery

初识jQuery1、认识jQuery2、使用jQuery3、jQuery选择器4、jQuery筛选器5、jQuery属性操作6、jQuery操作样式1、认识jQuery什么是jQuery?jQuery是一个前端库，也是一个方法库。jQuery的优势是什么？优质的选择器和筛选器；好用的隐式迭代；强大的链式编程。2、使用jQuery<body>  <script src="./jquery/jquery.
复制链接

扫一扫