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

最新推荐文章于 2024-04-22 03:52:54 发布

qq249663289

最新推荐文章于 2024-04-22 03:52:54 发布

阅读量107

点赞数

分类专栏： jquery 文章标签： jQuery CSS EXT Ajax Flex ViewUI

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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