`
longying2008
  • 浏览: 302312 次
社区版块
存档分类
最新评论

jQuery学习之入门

阅读更多

1.jQuery简介

 

jQuery是继Prototype之后又一个优秀的JavaScript库。

 

jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。

 

2.配置jQuery环境

 

在<head>标签内引入jQuery库,即在<head>标签中添加类似如下的代码:

 

<script type="text/javascript" src="../resource/jquery-1.10.1.js"></script>


3.编写简单的jQuery

 

示例:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../resource/jquery-1.10.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		alert("hello world.");
	});
</script>
<title>First jQuery Test</title>
</head>
<body>
First jQuery Test.
</body>
</html>


注:在jQuery库中,$就是jQuery的一个简写形式,例如:$("#foo")和jQuery("#foo")是等价的。

 

4.jQuery对象和DOM对象

 

(1).jQuery对象

  jQuery对象是通过jQuery包装DOM对象后产生的对象。

 

(2).DOM对象(Document Object Model ,文档对象模型)

 

var domObj = document.getElementById("id");//获取DOM对象


(3).jQuery对象转成DOM对象

 

方法一:jQuery对象是一个数组对象,可以通过[index]的方法得到相应的DOM对象

 

var $cr = $("#cr");	//jQuery对象
var cr = $cr[0];	//DOM对象


方法二:通过get(index)方法得到相应的DOM对象

 

var $cr = $("#cr");	//jQuery对象
var cr = $cr.get(0);	//DOM对象


(4).DOM对象转成jQuery对象

 

var cr = document.getElementById("cr");	//DOM对象
var $cr = $(cr);	//jQuery对象



 

分享到:
评论

相关推荐

    jQuery Mobile快速入门完整版.pdf + 所有源码

    通过本书的学习,读者将会获悉jQuery Mobile的核心特性,以及如何创建可主题化的设计,还会掌握jQuery Mobile的API,以及如何使用PhoneGap来扩展jQuery Mobile。 《jQuery Mobile快速入门》适合想要掌握jQuery ...

    jQuery Mobile快速入门.pdf

    ### jQuery Mobile 快速入门知识点概述 #### 一、jQuery Mobile 概述 - **定义与背景**:jQuery Mobile 是一款流行的开源 JavaScript 库,它主要用于构建响应式的 Web 应用程序,支持触摸操作,兼容多种移动设备。...

    Jquery从入门到精通

    **jQuery入门** jQuery是一款高效、简洁的JavaScript库,它的出现极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。"jQuery从入门到精通"这个主题将带你全面了解和掌握这一强大的工具。 首先,...

    jQuery经典入门教程

    jQuery经典入门教程,供学习交流,谢谢~

    jQuery Mobile 快速入门

    - **实践项目:** 实践是最好的学习方式之一,尝试为自己感兴趣的项目构建一个简单的应用,将理论知识运用到实践中去。 通过以上介绍,相信你已经对 jQuery Mobile 有了初步了解。接下来,你可以通过官方文档和其他...

    jquery学习入门教程

    《jQuery学习入门教程》是一份专为初学者设计的教程,旨在帮助读者快速掌握jQuery的基础知识和实用技巧。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务,使得...

    jQueryAPI学习入门精通

    **jQuery API 学习入门精通** jQuery 是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。这个压缩包文件“jQueryAPI-CHM-080801.CHM”显然是一个关于jQuery API的离线帮助...

    jQuery使用手册 jquery入门教程

    从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery 包装集 从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始学习jQuery (五) ...

    jQuery开发从入门到精通源代码和示例 清华大学 袁江

    《jQuery开发从入门到精通》是由清华大学出版社出版的一本关于jQuery技术的专著,作者是袁江。这本书全面深入地介绍了jQuery这一强大的JavaScript库,旨在帮助读者从零基础开始掌握jQuery,逐步提升到精通水平。...

    jquery学习手册,30分钟入门

    jQuery 是一个著名的 JavaScript 库,由 John Resig 在2006年初创建,它极大地简化了DOM操作和Ajax交互,适合新手和经验丰富的开发者。...通过学习jQuery,您可以提高开发效率,写出更高效、更易于维护的代码。

    jquery学习资料+教程

    jquery学习资料+教程 包括五个文档:jQuery的起点教程,jQuery经典入门教程,jquery的基本用法.pdf,2010最新jQuery学习资料.pdf,精通JavaScript+jQuery.pdf

    Jquery从入门到精通及附件下载(一)

    链接中的博客(https://javawangli.iteye.com/blog/979750)提供了更详细的jQuery学习资料,包括实例和讲解,是初学者很好的参考资料。 通过这些基本概念的学习和实践,你将能够熟练地运用jQuery来提高网页的交互...

    jQuery学习入门教程

    这篇“jQuery学习入门教程”旨在为初学者提供一个全面且深入的jQuery知识框架,帮助你们快速掌握这一强大的库。 1. **jQuery简介** - jQuery是由John Resig在2006年创建的,它的核心理念是"Write Less, Do More",...

    jquery入门(一)

    **jQuery 入门指南(一)** jQuery 是一个流行的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画效果以及Ajax交互。本篇将作为jQuery入门的起点,带领初学者逐步理解并掌握这个强大的工具。 ###...

    jQuery开发从入门到精通源代码和示例(8-15)

    《jQuery开发从入门到精通》是一本由袁江编著...总之,《jQuery开发从入门到精通》是学习jQuery的一份宝贵资源,结合书中的源代码和视频教程,读者可以全面掌握jQuery的核心技术,并能将其运用到实际的Web开发项目中。

    1.[jQuery.EasyUI]第1章.jQuery.EasyUI入门

    其中 `1.[jQuery EasyUI]第1章 jQuery EasyUI入门.exe` 和 `第1章 jQuery EasyUI.pdf` 分别提供了电子书和PDF格式的教程,方便离线学习。 总结,jQuery EasyUI 作为一款强大的前端框架,极大地简化了 Web 开发过程...

    jQuery 入门经典教程

    **jQuery 入门经典教程** jQuery 是一个广泛应用于前端开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这个经典教程将带你深入理解jQuery的核心概念,帮助你快速上手并...

    jQuery七天入门指南

    资源名称:jQuery 七天入门指南内容简介:jQuery 初级教程——七天入门指南中文版, pdf高清淅版,翻译加实例,学习jQuery的第一手资料,jQuery的起点教程,书中的内容涉及以实例为基础一步步说明了jQuery的工作方式...

Global site tag (gtag.js) - Google Analytics