本文介绍了jQuery库的使用，包括加载方式、选择器的运用和过滤、CSS属性操作如读写和类名操作，详细阐述了淡入淡出、显示隐藏等特殊效果及animate动画，同时探讨了链式调用的应用，通过实例讲解jQuery在实际项目中的应用。
jquery
一、jquery加载
-
引入jquery的方法
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> -
引入后使用容易错的地方
不能直接在jquery引入标签中写js代码，要重新开一个script标签，然后在写js代码 -
ready方法–加载
-
问题的引入：
将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题 -
完整写法
$(document).ready(function(){ ...... }) -
简写
$(function(){ ...... })
-
-
ready与window.onload的比较
- ready的加载速度比window.onload快
- 快的原因:
- window.onload是等标签加载完后再渲染后再执行
- ready是等标签加载完后就运行
二、选择器
1. 选择器的使用
- 可以使用length属性来判断是否选中，
- 在写样式的使用遇到带"-“的可以写成驼峰式也可以写成带”-"的
实例:样式中怎么写这里就怎么写 $(document) //选择整个文档对象 $("#myId") // 选择id为myId的元素 $(".myClass") // 选择class为myClass的元素 $("li") // 选择所有的li元素 $("#ul1 li span") // 选择id为ul1元素下的所有li元素下的span $("input[name=first]") // 选择name属性等于first的input元素
效果:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> // 使用ready $(function(){ var $div = $('#div1'); $div.css({ "color":"red" }); // 多个div var $div2 = $('.box'); $div2.css({ "color":"green" }); var $li = $('.list li'); // 带"-"的样式属性可以写成驼峰式也可以直接写成带"-"的 $li.css({ "color":"red", "background-color":"blue" }); }); </script> </head> <body> <div id="div1">这是一个div元素</div> <div class="box">这是第二个div元素</div> <div class="box">这是第三个div元素</div> <!-- ul.list>li{$}*8 --> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body> </html>
2. 选择集的过滤
-
修饰过滤
$('#ul1 li:first') //选择id为ul1元素下的第一个li $('#ul1 li:odd') //选择id为ul1元素下的li的奇数行 $('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li $('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li $('#myForm :input') // 选择表单中的input元素 $('div:visible') //选择可见的div元素 -
函数过滤
$('div').has('p') // 选择含有p元素的div元素 $('div').not('.myClass') // 选择class不等于myClass的div元素 $('div').filter('.myClass') // 选择class等于myClass的div元素 $('div').eq(5) // 选择第6个元素 $('div').first(); //选择第1个div元素实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择集过滤</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ /* var $div = $('div'); $div.css({ 'backgroundColor':'gold', }); */ // 上面的只用一次的话可以这样写 $('div').css({"backgroundColor":'gold'}); // 选择div中带有p标签的 $('div').has('p').css({"fontSize":"30px"}); // 选择第几个 eq(x) 从0 开始 $('div').eq(4).css({"textIndent":"20px"}); }); </script> </head> <body> <!-- p标签默认有行高 --> <div>1</div> <div><p>2</p></div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </body> </html>效果
-
选择集的转移
$('div').prev('p'); //选择div元素前面的第一个p元素 $('div').next('p'); //选择div元素后面的第一个p元素 $('div').closest('form'); //选择离div最近的那个form父元素 $('div').parent(); //选择div的父元素 $('div').children(); //选择div的所有子元素 $('div').siblings(); //选择div的同级元素 $('div').find('.myClass'); //选择div内的class等于myClass的元素实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择集过滤</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ // 第五个div的前一个 .prev() : 是前一个 .prevAll() 同辈前面所有 $('div').eq(4).prev().css({"color":"red"}); // 第五个div中的下一个 next() : 是下一个 $('div').eq(4).next().css({"color":"red"}); // find(x) : 找div中有 x 类的 $('div').find('.tip').css({"fontSize":"30px"}); // 除了我之外的同级元素 // $('div').sibings(); }); </script> </head> <body> <!-- p标签默认有行高 --> <div>1</div> <div><p>2</p></div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div><span>8</span><span class="tip">9</span></div> </body> </html>效果：
-
判断选择器是否选中
用length<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>判断选择器是否选中</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ $div = $('#div1'); alert($div.length); // 判断是否选中 1 // 没有选中元素，jquery是不会报错的 程序正常运行 $div2 = $('#div2'); alert($div2.length); // 判断是否选中 0 // 通过length属性判断是否选中了元素 // if ($div2.length>0) }); </script> </head> <body> <div id="div1"></div> </body> </html>
三、css属性操作
1. 读写css属性
- 读取的方法：
例:$("#box").css(“fontSize”) - 写的方法：
$("#box").css(“fontSize”)=“30px” - 使用原生js无法读取行间没有定义的css属性值，读出来为空
- 实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css方法</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> // 设置行间样式 $(function(){ var $div = $('#box'); // 读去属性 css var sTr = $div.css('fontSize'); alert(sTr); // 原生js无法读取行间没有定义的css属性值 var oDiv = document.getElementById("box"); alert(oDiv.style.fontSize); // 空字符串 // 写属性值 $div.css({ "fontSize":"30px", "backgroundColor":"pink", "color":"red" }); // 一个的话可以用下面的 $div.css("height","30px"); // $div.css('color') = 'blue'; }); </script> </head> <body> <div id="box">div元素</div> </body> </html>
2.样式类名操作
-
获取：var $div = $(’.box’);
-
添加类样式
在原来的基础上添加 big 的样式名 $div.addClass('big'); -
删除类样式
移出原有的red类样式 $div.removeClass('red'); -
重复切换类样式
重复切换anotherClass类样式，即有就加上没有就去掉 $div.toggleClass("anotherClass") -
绑定click事件添加或删除样式
-
添加和删除样式的方法一
$('#btn').click(function(){ // 判断是否有col01这个类属性 有返回true if ($('.box').hasClass('col01')){ $('.box').removeClass('col01'); } else{ // 添加样式 $(".box").addClass('col01'); } }); -
方法二 使用toggleClass
$('#btn').click(function(){ // 属性中没有这个类属性就加上，有就去掉 $('.box').toggleClass('col01'); });
-
3. 获取元素的索引值和当前元素
- 用.index()获取元素的索引值
- 使用实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取元素索引值</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ var $li = $('.list li'); // 获取8个li alert($li.length); // 8 // 索引值从0开始的 // 获取索引值 .index() alert($li.eq(3).index()); // 3 // filter : li中class是myli的 alert($li.filter('.myli').index()); //4 }); </script> </head> <body> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li class="myli">5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body> </html> - 用$(this)来获取当前的元素
- 实例:选项卡
- 代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> .btns input{ width:100px; height:40px; background-color:#ddd; /*默认有边框*/ border:0px; border-radius:15px; } .btns .current{ background-color:gold; } .cons div{ width:500px; height: 300px; background-color:gold; display:none; /*默认不显示*/ text-align: center; line-height: 300px; font-size: 30px; } .cons .active{ display: block; } </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ var $btn = $('.btns input'); var $div = $('.cons div'); // alert($btn.length); // alert($div.length); $btn.click(function(){ // $(this) -- jquery的： 我点那个按钮那个就是this // this: 原生的this 没有css方法 只有style.color // this 表示当前点击的元素 // siblings() : 表示同级之外的其他元素 // 点击后这个加上这个类样式，同级的都去掉这个类样式 $(this).addClass('current').siblings().removeClass('current'); // 弹出当前点击按钮的索引 // alert($(this).index()); // 选中当前点击按钮的索引值对应的div，然后选中的div加上active样式，同级的去掉active样式 $div.eq($(this).index()).addClass('active').siblings().removeClass('active'); }); }); </script> </head> <body> <div class="btns"> <input type="button" name="" value="01" class="current"> <input type="button" name="" value="02"> <input type="button" name="" value="03"> </div> <div class="cons"> <div class="active">选项卡1</div> <div>选项卡2</div> <div>选项卡3</div> </div> </body> </html> - 效果:
- 代码
4. html内容/text内容/属性值获取与设置
-
html() 取出或设置html内容
// 取出html内容 var $htm = $('#div1').html(); // 设置html内容 $('#div1').html('<span>添加文字</span>') -
text()取出或设置text()内容
// 取出文本内容 var $htm = $('#div1').text(); // 设置文本内容 $('#div1').text('<span>添加文字</span>') -
attr()取出或设置某一属性值
// 取出图片的地址 var $src = $('#img1').attr('src'); // 设置图片的地址和alt属性 $('#img1').attr({ src: "test.jpg", alt: "Test Image" });
四、jquery的特殊效果
1. 淡入淡出
- fadeIn() ：淡入
- fadeOut() ：淡出
- fadeToggle()：淡入和淡出切换
2. 显示与隐藏
- hide()：隐藏元素
- show()：显示元素
- toggle()：显示与隐藏的切换
3. 向上卷起和向下展开
- slideUp()：向上卷起
- slideDown()：向下展开
- slideToggle()：依次展开卷起
4. 每个效果都有三个参数 (时间，运动曲线，回调函数) – 一般只是用时间和回调函数；运动曲线一般都为默认的匀速
5. 实例:
- 实例效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>特殊效果</title> <style type="text/css"> .box{ width:300px; height:300px; background-color: gold; display: none; } </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ $('#btn').click(function(){ // 参数 时间 / 运动曲线(可以不写) / 回调函数 /* $('.box').fadeIn(1000,function(){ alert("动画完了") });*/ // 点一下显示 点一些隐藏 /* $('.box').fadeToggle();*/ // 显示 // $('.box').show(); // 隐藏 // $('.box').hide(); // $('.box').slideDown(); // 向下展开 // $('.box').slideUp(); // 向上卷起 收回 $('.box').slideToggle(1000,function(){ alert("动画完了"); }); // 展开和收回 }); }); </script> </head> <body> <input type="button" name="" value="动画" id="btn"> <div class="box"></div> </body> </html>
五、animate动画
1. 使用方法
-
-
animate() — 有三个参数
-
第一个为:变化(字典)
第二个为:时间(ms)
第三个回调函数
-
第一个为:变化(字典)
- 默认参数 缓冲运动 时间为400ms-500ms
- 如果是两个参数改变的话，如果不设置两个动画效果，直接写到一个animate()的字典参数中话，则为两个一起动
2. 实例一:
- 滑块变化实例
效果： 第一个按钮按下后宽先改变然后再改变高，最后消失(变透明)—占用空间<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animate动画</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ // 200px 也可以直接写成 200 // 默认为缓冲运动 同时动 默认为400-500ms // 如果不要同时动的话要用回调函数 $("#btn").click(function(){ $(".box").animate({"width":600},1000,function(){ $(".box").animate({"height":400},1000,function(){ $(".box").animate({'opacity':0}); }); }); }); $("#btn2").click(function(){ // 每点一次 在基础上每次加100 // stop(): 是将前面的动画都关掉然后在做 $('.box2').stop().animate({"width":"+=100"}); }); }); </script> <style type="text/css"> .box,.box2{ width:100px; height:100px; background-color:gold; } </style> </head> <body> <input type="button" name="" value="动画" id="btn"> <div class="box"></div> <br /> <br /> <input type="button" name="" value="动画" id="btn2"> <div class="box2"></div> </body> </html>
第二个按钮没按一次增加100px的宽度
初始:
3. 实例二：滑动选项卡
- 使用动画做选项卡左右滑动效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> .btns input{ width:100px; height:40px; background-color:#ddd; /*默认有边框*/ border:0px; border-radius:15px; outline: none; /*点击时的框*/ } .btns .current{ background-color:gold; } .slide{ width:500px; height: 300px; position: relative; overflow: hidden; } .slide .cons{ width:1500px; position: absolute; left:0; top:0; float:left; } .slide .cons div{ width:500px; height: 300px; background-color:gold; text-align: center; line-height: 300px; font-size: 30px; float:left; } </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ var $btn = $('.btns input'); var $div = $('.cons div'); // alert($btn.length); // alert($div.length); $btn.click(function(){ $(this).addClass('current').siblings().removeClass('current'); $('.cons').stop().animate({"left":-500*$(this).index()}); }); }); </script> </head> <body> <div class="btns"> <input type="button" name="" value="01" class="current"> <input type="button" name="" value="02"> <input type="button" name="" value="03"> </div> <div class="slide"> <div class="cons"> <div>选项卡1</div> <div>选项卡2</div> <div>选项卡3</div> </div> </div> </body> </html>
六、链式调用
1.链式调用解释
- jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：
$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素，也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素
2. 层级菜单效果
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层级菜单</title> <style type="text/css"> *{ margin:0; padding:0; color:#fff; } ul{ list-style:none; } a{text-decoration: none;} body{ font-size: 16px; font-family: "Microsoft Yahei"; } .menu{ margin:20px auto 0; /*background-color:gold;*/ width:300px; display: bold; /*height:300px; */ } .menu .level1{ background-color:#3366cc; display: block; text-indent: 10px; line-height: 40px; border-bottom: 1px solid #afc6f6; } .current li a{ display: block; background-color:#7aa1ef; /*height:40px;*/ line-height:40px; border-bottom: 1px solid #afc6f6; text-indent: 20px; } .menu .level1:hover,.current a:hover{ background-color: gold; } .current{ display: none; } </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ $(".level1").click(function(){ // stop(): 是将前面的动画都关掉然后在做 解决多次点击后出点停不下来的bug $(this).siblings().stop().slideToggle().parent().siblings().children("ul").slideUp(); }); }); </script> </head> <body> <ul class="menu"> <li> <a href="#" class="level1">水果</a> <ul class="current"> <li><a href="#">香蕉</a></li> <li><a href="#">苹果</a></li> <li><a href="#">梨</a></li> </ul> </li> <li> <a href="#" class="level1">肉类</a> <ul class="current"> <li><a href="#">香蕉</a></li> <li><a href="#">苹果</a></li> <li><a href="#">梨</a></li> </ul> </li> <li> <a href="#" class="level1">海鲜</a> <ul class="current"> <li><a href="#">香蕉</a></li> <li><a href="#">苹果</a></li> <li><a href="#">梨</a></li> </ul> </li> </ul> </body> </html> -
效果
七、总结
- 选项卡实例中的东西
- $(this) – jquery的： 我点那个按钮那个就是this
- this: 原生的this 没有css方法 只有style.color
- this 表示当前点击的元素
- siblings() : 表示同级之外的其他元素
- animate动画设置opacity为0后，是设置透明操作，会占用空间
- 在做动画的时候防止用户暴力操作，即一直点的话，解决方法如下：
- 在做动画前加上.stop()
- 设置一个全局锁，在做动画的时候上锁，做完之后解锁后清除之前的操作，将其只剩下一次操作
- 滑动选项卡使用到的知识点
- 定位
- animate动画
- 获取元素个数
扫一扫
451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
