jQuery权威指南读书笔记1-初识jQuery_jquary 全能权威指南读书笔记-CSDN博客

本文链接：https://blog.csdn.net/xqdd/article/details/15504427

虽然项目中用户jQuery,但是对其了解还是很片段，趁着双11的大风，买本书:jQuery权威指南第二版，准备边学习边记笔记，形成自己对jQuery 比较全面的理解。

还是从hello World开始。

1、认识jQuery

1.1 jQuery的基本功能

一、访问和操作DOM元素

二、控制页面样式

三、对页面事件的处理

四、大量插件在页面中的应用

五、与ajax技术的完美结合

2、搭建jQuery开发环境

2.1 下载jQuery文件库

下载地址：http://jquery.com

2013年11月12日的最新版本为：jQuery 1.10.2+jQuery 2.0.3

原来jquery的版本也是分为新老版本，1.X + 2.X

jQuery 1.x

The jQuery 1.x line had major changes as of jQuery 1.9.0. We strongly recommend that you also use the jQuery Migrate plugin if you are upgrading from pre-1.9 versions of jQuery or need to use plugins that haven't yet been updated.

jQuery 2.x【原来不支持老版本IE了】

jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8. All the notes in the jQuery 1.9 Upgrade Guide apply here as well. Since IE 6/7/8 are still relatively common, we recommend using the 1.x version unless you are certain no IE 6/7/8 users are visiting the site. Please read the 2.0 release notes carefully.

2.2 引入jQuery文件库

<script language="javascript" type="text/javascript"
	src="js/jquery-2.0.3.js"></script>

2.3第一个例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一个简单的jQuery程序</title>
   <script language="javascript" type="text/javascript"
	src="js/jquery-2.0.3.js"></script>
	<style type="text/css">
	    div{padding:8px opx;font-size:12px; text-align:center;border:solid 1px #888;}
	</style>
	<script type="text/javascript" >
	    $(document).ready(function(){
	        $("div").html(" 您好！欢迎来到 jQuery 的精彩世界")
	    });
	</script>
</head>
<body>
    <div></div>
</body>
</html>

OK~

3、jQuery简单应用

3.1 jQuery访问DOM对象

javascript 和jQuery两种方式访问DOM对象的比较，简单明了:

例如：页面有两个div元素：

<div id="Tmp">测试文本</div>
<div id="Out"></div>

javascript方式	jQuery方式
var tDiv = document.getElementById("Tmp");var oDiv = document.getElementById("Out"); var cDiv = tDiv.innerHTML; oDiv.innerHTML = cDiv;	var tDiv = $("#Tmp");var oDiv =$("#Out"); var cDiv = tDiv.html(); oDiv.html( cDiv)