该帖已经被评为良好帖
|
|
---|---|
作者 | 正文 |
发表时间:2010-04-29
最后修改:2010-05-06
说明:本文参考《巧用JQuery》,并集合自己的一些实际经验,可作为jquery入门参考 , 这里面绝大数jquery的操作方式都给出了如何使用传统Js来完成,有的时候如果只是需要一些简单的功能,完全可以 用传统js实现,而无需为了几句简单的话去多加载100多K的文件
浅谈jquery(二):jquery中的事件总结 http://www.iteye.com/topic/656214 一.基本操作1. 页面加载事件 传 统:window.load jquery: $(); var test=function(){ alert(""); } $(test); 说明:前者是HTML所有元素加载完成后执行,后者是只要DOM加载完成后,就开始执行,显然,$()对于window.load,性能方面做了很大提升 2. 通过ID查询元素 传统:document.getElementById(ElementId); jquery:$("#ElementId"); $("#ElementId");
3. 通过tagName获得元素 传统: document.getElementsByTagName(tagname) jquery:$("tagName"); 例: alert($("a").length);
4.。元素的遍历 :each() ; var test =function(){ $(this).attr("href"); } ("a").each(test);
5。元素的属性访问 :attr(属性名称); $("#id").attr("href"); $("#id").attr("id");
此外attr()还可以用于赋值 attr(属性名称,value); value可以是对属性的赋值,也可以是一个方法 $("#id").attr("href","www.baidu.com"); 6.attr()与innerHTML的一些特殊处理 传统JS获得文本使用innerHTML,在jquery中,你可以使用attr("innerHTML")来获得,但jquery还提供另外2个方法对获得额外方法: htm()和text() html():等同于传统innerHTML或attr("innerHTML") text():只返回文本 以下是一个说明的例子: html: <div id="d1"> <p>文本</p> </div>
js: alert($("#d1").text());//文本 alert($("#d1").html());//<p>文本</p> 二.进阶操作1.创建一个元素,并赋值,然后添加到页面上 var text= '<div id="testDIV"></div>'; $(document.body).append(text); //$("#id").append(text) 将DIV插入具体的元素 $("#testDIV").attr("innerHTML","test1"); 2.关于css的操作(这里只是简单介绍,后面会有专门的文章介绍) 2.1首先,看看传统js对css的操作(如果对传统操作方法不感兴趣,可直接看2.2) <div id="test">dd</div>
var style =document.getElementById("test").style; style.color="red"; 显然,如果要设置多个css属性,这种方式不适合,传统JS还可以使用className,结合css文件配合来进行设置 首先,我们在css文件中定义一个class .class1{ color: red; border:1px solid gray; }
然后,在js中给元素赋予class属性 var div =document.getElementById("test"); div.className="class1";
<div id="test" >dd</div>
2.2jquery中css的操作 第一种方式 :使用方法css(key,value);这种操作方式类似与前面提到的传统js中的style.color="red",这种操作方式 <div id="test" >dd</div>
$("#test").css("color","red"); 如过要添加多个样式,可以这样写
var style= { "height":"70%", "color":"red" }; $("#test").css(style);
第二种方式:结合css文件,通过addClass(className)方法,类似与上面提到的传统js方法className="..";
$("#test").addClass("class1"); // $("#test").removeClass("class1"); removeClass("className") 移除class
1
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-05-04
比较喜欢jquery,但多数情况下,还是习惯性用js。楼主可以加点AJAX的东西
|
|
返回顶楼 | |
发表时间:2010-05-05
var div= $("div"); ==> var div= $("<div />"); |
|
返回顶楼 | |
发表时间:2010-05-05
想问下。。。jquery和ext两者学哪个好???
|
|
返回顶楼 | |
发表时间:2010-05-05
jquery
|
|
返回顶楼 | |
发表时间:2010-05-05
zw61911169 写道 想问下。。。jquery和ext两者学哪个好???
没有什么好与不好,各有各的长处。不要那么偏激 |
|
返回顶楼 | |
发表时间:2010-05-05
birdbiena 写道 zw61911169 写道 想问下。。。jquery和ext两者学哪个好???
没有什么好与不好,各有各的长处。不要那么偏激 呵呵,是这样的,但是个人还是喜欢jQuery一些! |
|
返回顶楼 | |
发表时间:2010-05-05
ext只能用于管理系统。jquery都可以用。建议jquery
|
|
返回顶楼 | |
发表时间:2010-05-05
phoenixfm 写道 比较喜欢jquery,但多数情况下,还是习惯性用js。楼主可以加点AJAX的东西
感谢您的建议,我会在后面的文章中提到 |
|
返回顶楼 | |
发表时间:2010-05-05
zw61911169 写道 想问下。。。jquery和ext两者学哪个好???
ExtJs适合做网站后台和性能要求不是很高的系统(不是绝对的) 我最开始时用Extjs。后来感觉extjs加载的文件太大,而且学习成本相对JQuery太大,并且代码可维护性不如 JQuery.后期以致现在的开发都是JQuery为主了 |
|
返回顶楼 | |