1.JavaScript和JQuery实现功能的方法对比
以下要实现点击“隐藏”按钮,隐藏盒子的效果:
点击按钮后:
示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实现点击“隐藏”按钮之后,盒子隐藏</title> <style> div{ width:200px; height: 200px; background-color: #2aabd2; margin: 20px 10px; } </style> <!--JQuery实现该功能的方法--> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ $('button').click(function (e){ //此处为匿名函数 $('div').hide(); }); }) </script> </head> <body> <div id="box"></div> <button id="btn" οnclick="yincang()">隐藏</button> </body> </html>JavaScript实现的方法:
<!--原生的js的写法--> <script type="text/javascript"> function yincang(){ // document.getElementById("box").style.display="none"; //不显示,也不占位置 document.getElementById("box").style.visibility="hidden"; //不显示,但是占位置 } //下面的代码相当于是document.getElementById("box").style.display="none"; 的变形 window.onload=function(){ var btn=document.getElementById("btn"); var box=document.getElementById("box"); btn.onclick=function(){ box.style.display="none"; } } </script>上述为三种不同的js实现方式,
1)
document.getElementById("box").style.display="none";
2)
document.getElementById("box").style.visibility="hidden";
3)
window.onload=function(){ var btn=document.getElementById("btn"); var box=document.getElementById("box"); btn.onclick=function(){ box.style.display="none"; } }
其中1)和3)实现的效果是一样的,2)实现的效果稍有不同。
2.JQuery基本:
(该图片来自传智视频截图)
3.通过JQuery实现:CSS属性获取、单属性修改、多属性修改。
注意:遇到复合属性,需要按照驼峰命名法来书写。例如:background-color,则要写成backgroundColor。
示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery练习2</title> <style> div{ width: 200px; height: 200px; background-color: red; margin:10px 20px; } </style> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> // 以下实现CSS的单属性访问、单属性修改、多属性修改 $(function(){ $('button').click(function(e){ // alert($('div').css('width')); //获取盒子的宽度 // $('div').css('width','400px'); //单属性修改,盒子的宽度改为400px // $('div').css('background','#eeff22'); //单属性修改,背景色改为#eeff22 $('div').css({width:'500px',height:'300px'}); //多属性修改,记住不要忘了加{}在CSS()里面 }); }) </script> </head> <body> <div></div> <button>获取</button> </body> </html>
运行效果:
按钮点击之前:
按钮点击之后:
1)
2)
$('div').css('width','400px'); 执行结果:
3)
$('div').css('background','#eeff22'); 执行结果:
4)
$('div').css({width:'500px',height:'300px'}); 执行结果:
$(function(){ //gt表示大于,此处用于检索出索引值大于1的li $('ul li:gt(1)').css('backgroundColor','#0033ff'); //注意测出的'backgroundColor'是不能省略''的 })
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>ceshi</li> <li>ceshi</li> <li>ceshi</li> <li>ceshi</li> </ul>运行效果:(索引值大于1的所有的li的背景色都被设置为#0033ff)
5.筛选选择器:
// 点击哪个ul,哪个就会更改背景色 $(function(){ $('ul').click(function(e){ $(this).css('background','yellow'); }); })
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>ceshi</li> <li>ceshi</li> <li>ceshi</li> <li>ceshi</li> </ul> <ul> <li>这是一个li</li> <li>这是一个li</li> <li>这是一个li</li> <li>这是一个li</li> </ul> <ul>父级ul <li>这是一个li</li> <li>这是一个li</li> <li>这是一个li</li> <li>这是一个li</li> </ul>运行效果:
当修改JQuery代码,将this修改为'ul',则点击某一个ul,所有的ul的背景色都会变,如:
运行效果:
再在上面的基础上做以下调整,如:
运行效果:(后面的这个ul里面添加了文字,就可以看出来li是被选中的,ul没有;和第一个形成对比)
继续修改,给children里面添加上对应类名,则只能修改该类名的子类。如下:
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>ceshi</li> <li>ceshi</li> <li>ceshi</li> <li>ceshi</li> </ul> <ul> <li class="current">这是一个li,这个是带有current类的,子代选择器</li> <li>这是一个li</li> <li>这是一个li</li> <li>这是一个li</li> </ul> <ul>父级ul <li>这是一个li</li> <li class="current">这是一个li</li> <li>这是一个li</li> <li>这是一个li</li> </ul>
$(function(){ $('ul').click(function(e){ // $(this).css('background','yellow'); //点击哪个ul,哪个就会更改背景色 // $('ul').css('background','yellow'); //选中其中的某一个ul点击,所有的ul均更改背景色 // $(this).children().css('background','yellow'); //选中当前的ul,它的子类也就是li的背景色会发生变化 $(this).children('.current').css('background','yellow'); //只有类名为current的li才可以被选中 }); })运行效果:(只有类名为current的li背景色更改)
6. 图片截自传智视频
( 小括号not'小阔号')
7.在JQuery中,只要是动画,就会存在排队机制。所以我们就要去考虑如何清空排队的问题。
水平菜单案例以及清空排队:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用JQuery实现下拉菜单</title> <style> *{ margin:0; padding: 0; list-style: none; } .all{ width: 560px; height: 30px; margin:100px auto; background-color: #8c8c8c; padding-left: 10px; box-sizing: border-box; } .all li{ width: 100px; height: 30px; line-height: 30px; text-align: center; margin-right: 10px; background-color: #9d9d9d; float: left; _display:inline; /*解决IE6双边距的问题*/ position: relative; /*子绝父相*/ } /*解决IE6的问题*/ .all ul{ position: absolute; top: 30px; left: 0px; display: none; } </style> <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script> $(function(){ $('.all>li').mouseover(function(e){ //注意此处是mouseover,不是哦那mouseover // $(this).children().show(); //显示 $(this).children().stop().slideDown(); //让它在鼠标放在上面的时候自动滑下来 }) // 鼠标离开后隐藏显示 $('.all>li').mouseout(function(e){ // $(this).children().hide(); //隐藏 $(this).children().stop().slideUp(); //鼠标离开后,向上卷上去 }) }) </script> </head> <body> <ul class="all"> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> </ul> </body> </html>运行效果: