论坛首页 Web前端技术论坛

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

浏览 8968 次
该帖已经被评为良好帖
作者 正文
   发表时间: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

 

   发表时间:2010-05-04  
比较喜欢jquery,但多数情况下,还是习惯性用js。楼主可以加点AJAX的东西
0 请登录后投票
   发表时间:2010-05-05  
var div= $("div"); 

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

0 请登录后投票
   发表时间:2010-05-05  
想问下。。。jquery和ext两者学哪个好???
0 请登录后投票
   发表时间:2010-05-05  
jquery
0 请登录后投票
   发表时间:2010-05-05  
zw61911169 写道
想问下。。。jquery和ext两者学哪个好???


没有什么好与不好,各有各的长处。不要那么偏激
0 请登录后投票
   发表时间:2010-05-05  
birdbiena 写道
zw61911169 写道
想问下。。。jquery和ext两者学哪个好???


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

呵呵,是这样的,但是个人还是喜欢jQuery一些!
0 请登录后投票
   发表时间:2010-05-05  
ext只能用于管理系统。jquery都可以用。建议jquery
0 请登录后投票
   发表时间:2010-05-05  
phoenixfm 写道
比较喜欢jquery,但多数情况下,还是习惯性用js。楼主可以加点AJAX的东西

感谢您的建议,我会在后面的文章中提到
0 请登录后投票
   发表时间:2010-05-05  
zw61911169 写道
想问下。。。jquery和ext两者学哪个好???

ExtJs适合做网站后台和性能要求不是很高的系统(不是绝对的)
我最开始时用Extjs。后来感觉extjs加载的文件太大,而且学习成本相对JQuery太大,并且代码可维护性不如
JQuery.后期以致现在的开发都是JQuery为主了
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics