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. 图片截自传智视频
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>运行效果：
2685
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
