jQuery常用API
1.jQuery 基础选择器
1.2 jQuery 层级选择器
1.3 隐式迭代
遍历内部DOM元素（伪数组形式存储）的过程叫做隐式迭代
简单理解：给匹配到的所有元素进行循环便利，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便调用。
1.4 jQuery筛选选择器
1.5 jQuery 筛选方法
<script type="text/javascript">
//注意 都是方法 带括号
$(function(){
//1.兄弟元素siblings 除了自身元素之外的所有兄弟
$('ol .item').siblings('li').css('color','red');
//2.第n个元素
//（1）可以利用选择器的方式选择
$('ul li:eq(2)').css('color','blue');
//(2)可以利用选择方法的方式选择
$('ul li').eq(2).css('color','blue');
})
</script>
新浪下拉菜单 案例
<script type="text/javascript"> $(function(){ //鼠标经过 $('.nav>li').mouseover(function(){ //$(this) jQuery 当前元素 this不要加引号 $(this).children('ul').show(); }); //鼠标离开 $('.nav>li').mouseout(function(){ $(this).children('ul').hide(); }) }) </script>
1.6 jQuery 排他思想
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script type="text/javascript">
$(function(){
//隐式迭代 给所有的按钮都绑定了点击事件
$('button').click(function(){
//当前元素变化背景颜色
$(this).css('background','pink');
//其余兄弟去掉背景颜色 隐式迭代
$(this).siblings('button').css('background','');
})
})
</script>
淘宝精品服饰 案例（侧边tab）
<script type="text/javascript"> $(function(){ $('#left>li').mouseover(function(){ //得到当前li的索引号 var index = $(this).index(); $(this).css('border-color','pink'); $('#content div').eq(index).show(); $(this).siblings('li').css('border-color',''); $('#content div').eq(index).siblings('div').hide(); }); }) </script>
2. jQuery 样式操作
2.1 操作css方法
（1）参数只写属性名，则返回属性值
$('div').css('width');
（2）参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$('div').css('width','200px');
（3） 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
$('div').css({width:200px,color:'white',font-size:20px,backgroundColor:'red'});
2.2 设置类样式方法
<script type="text/javascript"> $(function(){ //1.添加类 addClass() $('div').click(function(){ $(this).addClass('current'); }); //2.删除类 removeClass() $('div').click(function(){ $(this).removeClass('current'); }); //3、切换类 toggleClass() $('div').click(function(){ $(this).toggleClass('current'); }); }) </script>
tab栏切换 案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{ padding: 0; margin: 0; } li{ list-style: none; } .tab{ width: 500px; margin: 100px; } .tabTop{ border: 1px solid #ccc; background-color: #eef0ee; height: 30px; } .tabTop ul li{ float: left; padding: 0 10px; line-height: 30px; cursor: pointer; } .current{ background: #f00; color: #fff; } .item{ display: none; } </style> </head> <body> <div class="tab"> <div class="tabTop"> <ul class="tabUl"> <li class="current">商品介绍</li> <li>商品介绍</li> <li>商品介绍</li> <li>商品介绍</li> <li>商品介绍</li> </ul> </div> <div class="tabCon"> <div class="item" style="display: block;">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> </div> <script type="text/javascript"> $(function(){ $('.tabUl li').click(function(){ //链式编程 $(this).addClass('current').siblings().removeClass('current'); var index = $(this).index(); $('.tabCon .item').eq(index).show().siblings().hide(); }) }) </script> </body> </html>
2.3 类操作与className区别
原生JS中className 会覆盖元素原来里面的类名。
jQuery 里面类操作知识对指定类进行操作，不影响原先的类名。addClass相当于追加类名 不影响以前的类名
3.jQuery 效果
//1.事件切换hover 鼠标经过和离开的复合写法 $('.nav>li').hover(function(){ $(this).children('ul').slideDown(); },function(){ $(this).children('ul').slideUp(); }) //2.事件切换 hover 如果只写一个函数 那么鼠标经过和移开都会触发这个函数 $('.nav>li').hover(function(){ //slideToggle 滑动切换 $(this).children('ul').slideToggle(); })
3.4 动画队列及其停止排队方法
（1）动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
（2）停止排队stop()
//stop方法必须写到动画的前面 $(this).children('ul').stop().slideToggle();
3.5 淡入淡出效果
修改透明度
//修改透明度 fadeTo() 这个速度和透明度要必须写 $("button").eq(2).fadeTo(1000,0.5);
鼠标移上去图片高亮显示 案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> body{ background-color: #000; } /**清除浮动**/ .clearfix{*zoom:1;}/*IE6 7专门清除浮动*/ .clearfix:after { clear:both; content:"."; display:block; height:0; visibility:hidden; } *{ padding: 0; margin: 0; } .wrap{ width: 640px; border: 1px solid #fff; padding-bottom: 10px; margin: 100px auto; } .wrap ul li{ list-style: none; float: left; width: 200px; padding: 10px 0 0 10px; } .wrap img{ width: 200px; display: block; border: 0; } </style> <script type="text/javascript"> $(function(){ //鼠标进入的时候，其他li标签透明度0.5 $('.wrap li').hover(function(){ $(this).siblings().stop().fadeTo(400,0.4); },function(){ //鼠标离开，其他li透明度改为1 $(this).siblings().stop().fadeTo(400,1); }) }) </script> </head> <body> <div class="wrap"> <ul class="clearfix"> <li><a href="#"><img src="img/2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/3.jpg" alt="" /></a></li> <li><a href="#"><img src="img/4.jpg" alt="" /></a></li> <li><a href="#"><img src="img/5.jpg" alt="" /></a></li> <li><a href="#"><img src="img/6.jpg" alt="" /></a></li> <li><a href="#"><img src="img/7.jpg" alt="" /></a></li> </ul> </div> </body> </html>
3.6 自定义动画 animate
（1）语法
animate(params,[speed],[easing],[fn])
（2）参数
· params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性
则需要采取驼峰命名法borderLeft。其余参数都可以省略。
<script type="text/javascript"> $(function(){ $('button').click(function(){ $('div').animate({ left:500, top:300, opacity:.4, },500); }) }) </script>
王者荣耀手风琴效果 案例
<script type="text/javascript"> $(function(){ //鼠标经过li 有两步操作 $('.king li').mouseenter(function(){ //1.当前li 宽度变为224px，同时里面的小图片淡出，大图片淡入 $(this).stop().animate({ width:224 },200).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn(); //2.其余兄弟li宽度变为69px 小图片淡入，大图片淡出 $(this).siblings('li').stop().animate({ width:69 },400).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut(); }) }) </script> <div class="king"> <ul> <li><a href=""><img src="" alt="" class="small" /><img src="" alt="" class="big" /></a></li> <li><a href=""><img src="" alt="" class="small" /><img src="" alt="" class="big" /></a></li> <li><a href=""><img src="" alt="" class="small" /><img src="" alt="" class="big" /></a></li> <li><a href=""><img src="" alt="" class="small" /><img src="" alt="" class="big" /></a></li> <li><a href=""><img src="" alt="" class="small" /><img src="" alt="" class="big" /></a></li> <li><a href=""><img src="" alt="" class="small" /><img src="" alt="" class="big" /></a></li> <li><a href=""><img src="" alt="" class="small" /><img src="" alt="" class="big" /></a></li> </ul> </div>
5.jQuery 属性操作
5.1 设置或获取元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href
$(function(){ //element.prop("属性名") 获取属性值 $("a").prop("href"); //设置属性 $("a").prop("title","这里是百度"); })
5.2 设置或获取元素自定义属性值 attr()
//元素的自定义属性 通过attr() $('div').attr('index');
5.3 数据缓存 data()
data()方法可以在指定元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。
//3.数据缓存data() 这个里面的数据是存放在元素的内存里面 $("span").data("uname","andy"); //这个方法获取data-index h5自定义属性 ① 不用写data- 而且返回的是数字型 console.log($("div").data("index"));
购物车全选按钮实现 案例
$(function(){ //1.全选 全不选 功能模块 //就是把全选按钮(checkall)的状态赋值给三个小的按钮(j-checkbox)就可以了 $(".checkall").change(function(){ $(".j-checkbox,.checkall").prop("checked",$(this).prop("checked")); }); //2.如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。 if($(".j-checkbox:checked").length === $(".j-checkbox").length){ $(".checkall").prop("checked",true); }else{ $(".checkall").prop("checked",false); } })
6. jQuery 内容文本值
（1）普通元素内容html()(相当于原生innerHTML)
（2）普通元素文本内容text() (相当于原生innerText)
（3）表单的值val()(相当于原生value)
浙公网安备 33010602011771号