jquery
- 一、jquery加载
- 二、选择器
- 1. 选择器的使用
- 2. 选择集的过滤
- 三、css属性操作
- 1. 读写css属性
- 2.样式类名操作
- 3. 获取元素的索引值和当前元素
- 4. html内容/text内容/属性值获取与设置
- 四、jquery的特殊效果
- 1. 淡入淡出
- 2. 显示与隐藏
- 3. 向上卷起和向下展开
- 4. 每个效果都有三个参数 (时间，运动曲线，回调函数) -- 一般只是用时间和回调函数；运动曲线一般都为默认的匀速
- 5. 实例:
- 五、animate动画
- 1. 使用方法
- 2. 实例一:
- 3. 实例二：滑动选项卡
- 六、链式调用
- 1.链式调用解释
- 2. 层级菜单效果
- 七、总结
一、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"});// 多个divvar $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');// 读去属性 cssvar 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这个类属性 有返回trueif ($('.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个lialert($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动画
- 获取元素个数