浅谈jquery（一)：关于dom操作的一些入门概念

说明：本文参考《巧用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

 

评论

11 楼 zw61911169 2010-05-06  

我其实也倾向于jquery。。。ext貌似速度不怎么样，用ext还不如去学flex了。。
再说现在html5一也出了。。。毕竟jquery就是基于js和css的

10 楼 select*from爱 2010-05-05  

hyj1254 写道

var div= $("div"); 

==>

var div= $("<div />"); 

这里是一个失误，已经更改过来，感谢您的指出

9 楼 select*from爱 2010-05-05  

zw61911169 写道

想问下。。。jquery和ext两者学哪个好？？？

ExtJs适合做网站后台和性能要求不是很高的系统（不是绝对的）
我最开始时用Extjs。后来感觉extjs加载的文件太大，而且学习成本相对JQuery太大，并且代码可维护性不如
JQuery.后期以致现在的开发都是JQuery为主了

8 楼 select*from爱 2010-05-05  

phoenixfm 写道

比较喜欢jquery，但多数情况下，还是习惯性用js。楼主可以加点AJAX的东西

感谢您的建议，我会在后面的文章中提到

7 楼 terrylrvin 2010-05-05  

ext只能用于管理系统。jquery都可以用。建议jquery

6 楼 lucky16 2010-05-05  

birdbiena 写道

zw61911169 写道

想问下。。。jquery和ext两者学哪个好？？？

没有什么好与不好，各有各的长处。不要那么偏激

呵呵，是这样的，但是个人还是喜欢jQuery一些！

5 楼 birdbiena 2010-05-05  

zw61911169 写道

想问下。。。jquery和ext两者学哪个好？？？

没有什么好与不好，各有各的长处。不要那么偏激

4 楼 lioncin 2010-05-05  

jquery

3 楼 zw61911169 2010-05-05  

想问下。。。jquery和ext两者学哪个好？？？

2 楼 hyj1254 2010-05-05  

var div= $("div"); 

==>

var div= $("<div />"); 

1 楼 phoenixfm 2010-05-04  

比较喜欢jquery，但多数情况下，还是习惯性用js。楼主可以加点AJAX的东西