jQuery 程序员速成一之简介

最新推荐文章于 2024-07-08 16:22:29 发布

lionzl

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量440

点赞数

分类专栏： LAMP 文章标签： jquery javascript function 浏览器 html css

LAMP 专栏收录该内容

84 篇文章 0 订阅

订阅专栏

http://www.1589.cn/showArticleList0105S2.htm

jQuery 程序员速成一之简介

发布时间: 1/13/2011 9:44 AM[打印]　[返回前一页]　[关闭窗口]

- 文章类型：原创笔记

　阅读(124)　评论(0)　编辑　删除　复制链接　所属分类: [Html/Css/Ajax/Js]

概要介绍：

要使用jQuery类库，在页面的<head>标签中，必须要引用类库文件：
<script src="jquery-1.4.1.js" type="text/javascript"></script>

Jquery说明如下：

1．轻量级

2．出色的 DOM操作的封装

3．可靠的事件处理机制

折叠展开 csharp 代码复制内容到剪贴板

document.getElementById('1589CNDiv').style.color='red';

对于上面传统的 javascript 代码，如果没有 id 为 1589CNDiv 的元素，那么浏览器就会报错。因此必须先判断该元素是否存在，应写为如下：

折叠展开 csharp 代码复制内容到剪贴板

if (document.getElementById('1589CNDiv')) {
document.getElementById('1589CNDiv').style.color = 'red';
}

但是这样每次判断就显得很麻烦。如果使用 jquery 就非常不错，即使获取不存在的元素也不会报错。上述代码可以用 jquery 表示：
$('#1589CNDiv').css('color', 'red');

4. $是 jQuery的简写形式

折叠展开 javascript 代码复制内容到剪贴板

//$('#foo') 与　 jQuery('#foo') 等价
//$.ajax 与　 jQuery.ajax 等价

5. $(document).ready介绍：

折叠展开 csharp 代码复制内容到剪贴板

$(document).ready(function(){//…
}
//也可以简写为
$(function(){//…
});

上述代码类似传统 window.onload 方法，但有以下区别：

a. 执行时机。
　　window.onload必须等待网页中所有内容（包括图片）加载完毕后才执行，而$(document).ready在网页中所有的DOM结构绘制完毕后就执行，可能DOM元素管理的东西并没有加载完。

b. 编写个数。
　　window.onload 一个网页中只能有一个，如果有多个也只能执行其中一个。
　　 $(document).ready　可以存在多个，写在不同的地方，并且多个ready都会被执行。

6. jQuery链式语法，其语法结构有点类似CSS的样式定义：

折叠展开 csharp 代码复制内容到剪贴板

//一段显示，隐藏子菜单的例子
$(".has_children").click(function(){
　 $(this).addClass("highlight")
　 .children("a").show().end()
　 .siblings().removeClass("highlight")
　 .children("a").hide();
});

7. Jquery 对象与 DOM对象区别

DOM对象: 你可以把一个 html 文件看成是一棵 DOM 树。获取页面元素的过程，其实就是在DOM树中查找 DOM 对象的一个过程

折叠展开 javascript 代码复制内容到剪贴板

var domOjb=document.getElementById(“id”);
var ObjHtml=domObj.innerHTML;

jquery对象：就是通过 jquery 包装 DOM 对象后产生的对象。
注意： jquery对象无法使用 DOM对象的任何方法， DOM对象也不能使用 jquery的方法。

8. Jquery对象与 DOM对象的定义

jQuery对象的变量前面加 $。如
var $variable = jquery对象

DOM对象的变量不加 $。如
var variable = DOM对象

9. Jquery对象与 DOM对象的相互转换

jquery提供两个方法来把 jquery 对象转成 DOM 对象：
方法一：
var $cr = $(“1589.CN”); //jquery对象
var cr = $cr[0]; //使用索引，取得DOM对象

方法二：
var $cr = $(“1589.CN”); //jquery对象
var cr = $cr.get(0); //使用get方法，取得DOM对象

DOM 对象转成 jquery 对象，只需要用 $() 把 dom 对象包装起来就可以。
var cr = document.getElementById(“1589.CN”); //DOM对象
var $cr=$(cr) //jquery对象

注：其实每一个 jquery 对象都是一个数组，数组的元素放的就是DOM对象，那怕是只有一个DOM对象，也只能使用上述方法取得。

lionzl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 程序员速成一之简介

jQuery 程序员速成一之简介发布时间: 1/13/2011 9:44 AM[打印]　[返回前一页]　[关闭窗口]文章类型：原创笔记　阅读(124)　评论(0)　编辑　删除　复制链接　所
复制链接

扫一扫

专栏目录

jQuery 程序员速成一 之 简介

jQuery 程序员速成一 之 简介

“相关推荐”对你有帮助么？

jQuery 程序员速成一之简介

jQuery 程序员速成一之简介