jquery使用及理解

最新推荐文章于 2023-03-22 18:43:58 发布

一只小林

最新推荐文章于 2023-03-22 18:43:58 发布

阅读量410

点赞数 3

文章标签： jquery javascript servlet

本文链接：https://blog.csdn.net/qq_54598736/article/details/126367950

版权

jquery是什么
jquery是一个封装的对dom进行操作的js库

下载jq
npm i jquery
w3c标准
样式必须放到头部<head></head>
script必须放在body标签结束标签前面
jq的事件委托
$('.nav').on('click','li',(event)=>{
1.先把所有的li的active类名删掉
$('.nav>li').each((index,item) =>{
   //item.classList.remove('active')//原生js
   $(item).removeClass('active')
})
2.给当前点击的li添加active类名
   //event.target.classList.add('active')//原生js
   $(event.target).addClass('active')
3. 面板控制-先把所有的都隐藏把对应的添加show类名
$('.box>section').each((index,item)=>{
   $(item).removeclass('show')
   if(index === $(this).index()){
       $(item).addclass('show')
   }
})

})
<button class="btn" data-state="1"></button>
<div id="box">
   <h1>今天周二</h1>
</div>
切换显示隐藏
$('#btn').on('click',function(){
   var state =$(this).attr('date-state')
   if(state === '1'){
       $('#box').fa()
       $(this).attr('data-state')
   }
})