jquery强大的选择器和javascript 的对比。
2015-05-17 17:50
309 查看
案列demo:http://codepen.io/tianzi77/pen/yNJVaM
首先写结构:
然后添加样式:
纯javascript控制表现:
用js写代码比较多,而且里面有2层循环很饶人。那么我用jquery写了一下:
jq代码:
基本2行代码就搞定,由于jquery支持强大的链式操作,所以以上代码完全可以精简为一行:
不得不说jquery真是强大,研究其源码就是定义了$这个强大 的选择符。
首先写结构:
<body> <ul id="nav"> <li class="current">tianzi</li> <li>tianzi</li> <li>tianzi</li> </ul> <div id="content"> <div class="show">content区域</div> <div>content1</div> <div>content2</div> </div>
然后添加样式:
*{ padding:0; margin: 0; } body{ margin:0 50%; } #nav{ width: 500px; height: 50px; line-height: 50px; list-style: none; border-radius: 20px; margin-bottom: 5px; } #nav li{ float: left; padding-right: 10px; border-left: 1px solid green; font-size: 2em; font-family: "微软雅黑"; cursor: pointer; } #nav li.current{ background: #abcdef; } #nav li:hover{ color: #fff; background: red; cursor: pointer; } #content div{ width: 270px; height: 180px; border:1px solid blue; box-sizing:border-box; display: none; } #content div.show{ display: block; }
纯javascript控制表现:
window.onload=function(){ var ul=document.getElementById("nav"); var li=ul.getElementsByTagName("li"); var content=document.getElementById("content"); var div=content.getElementsByTagName('div'); for(var i=0;i<li.length;i++){ li[i].index=i; li[i].onclick=function(){ for(var j=0;j<li.length;j++){ li[j].className=""; div[j].style.display="none"; } this.className="current"; div[this.index].style.display="block"; } } }
用js写代码比较多,而且里面有2层循环很饶人。那么我用jquery写了一下:
jq代码:
$(function(){ $("ul li").click(function(){ $(this).addClass("current").siblings().removeClass("current"); $("#content div").eq($(this).index()).show().siblings().hide(); }) })
基本2行代码就搞定,由于jquery支持强大的链式操作,所以以上代码完全可以精简为一行:
$(this).addClass("current").siblings().removeClass("current").parent().next().children().eq($(this).index()).show().siblings().hide();
不得不说jquery真是强大,研究其源码就是定义了$这个强大 的选择符。
相关文章推荐
- jquery知识点总结-----javaScript和jquery选择器对比
- jquery详解,jquery 与javascript对比实例学习
- Jquery强大的选择器收集整理
- JavaScript/jQuery选择器
- JavaScript学习笔记8-jQuery基本选择器深度解析
- JavaScript学习笔记8-jQuery内容过滤选择器、可见性过滤选择器深度解析
- javascript城市选择器,jQuery.citypicker之后又一个清爽简洁的城市选择器插件,js城市选择器,js中国城市选择,城市选择js插件
- 对比javascript与jquery对ajax的实现
- jQuery基础教程之强大的选择器(过滤选择器-可见性过滤选择器)
- jQuery---强大的选择器
- jQuery选择器 改写传统javaScript选择器实例(例子)
- Java程序员的JavaScript学习笔记(8——jQuery选择器)
- javascript与jQuery对比之淡入
- JQuery 的选择器可谓之强大无比
- 小结选择器--CSS、JavaScript、JQuery
- jQuery选择器总结 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法
- 强大无比的jQuery选择器
- 2016-AspNet-MVC教学-12-JQuery及Javascript快速对比Demo
- JavaScript--&&--JQuery功能的代码对比(一)
- 【前端】强大的javascript原生选择器querySelector 和 querySelectorAll