第一章 认识jQuery
jQuery是一个优秀的JavaScript库，它凭借简洁地语法和跨平台的兼容性，极大地简化了开发人员遍历HTML文档，操作DOM，处理事件，执行动画和开发Ajax操作。
jQuery优势：1.轻量级。2.强大的选择器。3.出色的DOM操作的封装。4.可靠的事件处理机制。5.完善的Ajax。6.不污染顶级变量。7.出色的浏览器兼容性。8.链式操作方式。9.隐式迭代。10.行为层与结构层分离。11.丰富的插件支持。12.完善的文档。13.开源。
（1）编写简单的jQuery代码:
注：$ 就是jQuery的简写形式。
<!-- 引入 jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () { //等待DOM元素加载完毕.（可能DOM元素关联的文件没有加载完）
alert("Hello World!"); //弹出一个框
}); $(document).ready(function () { //可以同时编写多个
alert("Hello again!");
}); $(function () { //简写形式
alert("Hello jQuery!");
});
</script>
（2）jQuery的代码风格
注：链式操作。1、对同一个对象不超过3次操作的，可以写成一行。
2、对于同一个对象操作较多的，建议每行写一个操作。
3、对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当的缩进。
4、对于多个对象的较多操作，可以结合2,3条。
添加必要的注释。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-4-3</title>
<style type="text/css">
#menu {
width:300px;
}
.has_children{
background : #555;
color :#fff;
cursor:pointer;
}
.highlight{
color : #fff;
background : green;
}
div{
padding:0;
}
div a{
background : #888;
display : none;
float:left;
width:300px;
}
</style>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
$(".has_children").click(function(){
$(this).addClass("highlight") //为当前元素增加highlight类
.children("a").show().end() //将子节点的a元素显示出来并重新定位到上次操作的元素
.siblings().removeClass("highlight") //获取元素的兄弟元素，并去掉他们的highlight类
.children("a").hide(); //将兄弟元素下的a元素隐藏
});
});
</script>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>第1章-认识jQuery</span>
<a>1.1-JavaScript和JavaScript库</a>
<a>1.2-加入jQuery</a>
<a>1.3-编写简单jQuery代码</a>
<a>1.4-jQuery对象和DOM对象</a>
<a>1.5-解决jQuery和其它库的冲突</a>
<a>1.6-jQuery开发工具和插件</a>
<a>1.7-小结</a>
</div>
<div class="has_children">
<span>第2章-jQuery选择器</span>
<a>2.1-jQuery选择器是什么</a>
<a>2.2-jQuery选择器的优势</a>
<a>2.3-jQuery选择器</a>
<a>2.4-应用jQuery改写示例</a>
<a>2.5-选择器中的一些注意事项</a>
<a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
<a>2.7-还有其它选择器么？</a>
<a>2.8-小结</a>
</div>
<div class="has_children">
<span>第3章-jQuery中的DOM操作</span>
<a>3.1-DOM操作的分类</a>
<a>3.2-jQuery中的DOM操作</a>
<a>3.3-案例研究——某网站超链接和图片提示效果</a>
<a>3.4-小结</a>
</div>
</div>
</body>
</html>
（3）DOM对象与jQuery对象
DOM(Document Object Model,文档对象模型)，每一个DOM都可以表示成一棵树。JavaScript中的getElementById或者getElementByTagName来获取元素节点，这样的DOM元素就是DOM对象。
jQuery对象是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，可以使用jQuery中的方法，但不能使用DOM对象的方法。
注：jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>1-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入 jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function () {
var domObj = document.getElementsByTagName("h3")[0]; // Dom对象
var $jQueryObj = $(domObj); //jQuery对象
alert("DOM对象：" + domObj.innerHTML);
alert("jQuery对象：" + $jQueryObj.html());
});
</script>
</head>
<body>
<h3>例子</h3>
<p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
</ul>
</body>
</html>
DOM对象与jQuery对象可以相互转换，案例如下：
1.DOM对象方式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-6-2</title>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function () {
var $cr = $("#cr"); //jQuery对象
var cr = $cr.get(0); //DOM对象获取 2种方式 $cr[0] 或者 $cr.get(0)
$cr.click(function () {
if (cr.checked) { //DOM方式判断
alert("感谢你的支持!你可以继续操作!");
}
})
});
</script>
</head>
<body>
<input type="checkbox" id="cr" />
<label for="cr">我已经阅读了上面制度.</label>
</body>
</html>
2.jQuery对象方式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-6-1</title>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function () {
var cr = document.getElementById("cr"); //DOM对象
var $cr = $(cr); //jQuery对象
$cr.click(function () {
if ($cr.is(":checked")) { //jQuery方式判断
alert("感谢你的支持!你可以继续操作！");
}
})
});
</script>
</head>
<body>
<input type="checkbox" id="cr" />
<label for="cr">我已经阅读了上面制度.</label>
</body>
</html>
PS:参考文献《锋利的jquery》
第一章 认识jQuery的更多相关文章
- 第一章 jQuery基础
第一章jQuery基础 一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype ...
- jQuery系列 第一章 jQuery框架简单介绍
第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...
- （李南江jQuery+Ajax）第一章：初识jQuery
第一章:初识jQuery 一.原生的JS与jQuery的区别 <!DOCTYPE html> <html lang="en"> <head> & ...
- 第一章：Javascript语言核心
本节是javascript语言的一个快速预览,也是本书的第一部分快速预览. 读此书之前,感谢淘宝技术团队对此javascript核心的翻译,感谢弗拉纳根写出此书.感谢你们无私的分享,仅以此笔记献给你们 ...
- 第四章 使用jQuery操作DOM
第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...
- javascript高级程序设计第一章有感
第一章JavaScript简介 Javascript的诞生最早是为了处理表单数据验证的问题,以前主要是使用perl这个强大的服务端脚本语言处理的.在未诞生javascript之前, 人们每次提交表单就 ...
- MVC 第一章（下）
继续第一章 用Javascript and jQuery调用Web API 在上一节,我们用浏览器直接调用web API.但是大多数web API被客户端应用以编程的方式调用.那么我们写一个简单的ja ...
- Pro ASP.NET Core MVC 第6版 第一章
目录 第一章 ASP.NET Core MVC 的前世今生 ASP.NET Core MVC 是一个微软公司开发的Web应用程序开发框架,它结合了MVC架构的高效性和简洁性,敏捷开发的思想和技术和.N ...
- 第一章 React新的前端思维方式
---恢复内容开始--- 第一章 React新的前端思维方式 1.1 初始化一个React项目 1.安装create-react-app npm install --global create-rea ...
随机推荐
- C语言不支持默认参数,不过可以用宏来模拟
C语言不支持默认参数,不过可以用宏来模拟: //--------------------------------------------------------------------------- ...
- BNUOJ-29364 Bread Sorting 水题
题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=29364 题意:给一个序列,输出序列中,二进制1的个数最少的数.. 随便搞搞就行了,关于更多 ...
- 高效使用Bitmaps（三） 神奇的Cache
转载:http://my.oschina.net/rengwuxian/blog/184650 应用的场景 假设你开发了一个聊天程序,它的好友列表中显示从网络获取的好友头像.可是如果用户发现每次进入好 ...
- SQLite DBHelp
c#连接SQLite SQLite这个精巧的小数据库,无需安装软件,只需要一个System.Data.SQLite.DLL文件即可操作SQLite数据库.SQLite是一个开源数据库,现在已变得越来越 ...
- A Mathematician‘s Survival Guide Graduate School and Early Career Development
推荐大家一本书尤其是即将读研究生或者研一研二的学生: A Mathematician‘s Su ...
- Android事件分发原理
终于用上了word 2013来写博客,感觉真是老好了,以前在网页上写,老是要把网页拖上拖下的,每次都要吐一升老血啊,现在用上本地的word,瞬间感觉好多了.还有感谢为word写插件的这个大神,代码高亮 ...
- Android开发——自动生成Android屏幕适配的dimens.xml文件
使用dimens.xml解决屏幕适配问题是Android官方解决方案,本文主要讲述了如何自动生成Android屏幕适配的dimens.xml,减少了工作量,在维护dimens.xml文件时更加省时省力 ...
- 今天写一些 有关iOS 多图片组合 成一张图片的问题。保持原像素不变
1.要求:服务器给一张图片模板,要在模版上镂空,然后添加一些别的图片,然后组合成一张图,这个模版的像素 不是固定的,有可能比 当前手机屏幕大.所以,在组合截图的时候,有一定的要求. 贴代码: /** ...
- C# Redis Server分布式缓存编程(二)
在Redis编程中, 实体和集合类型则更加有趣和实用 namespace Zeus.Cache.Redis.Demo { public class Person { public int Id { g ...
- [Bootstrap] 8. 'Collapse', data-target, data-toggle & data-parent
Using Bootstrap JavaScript Plugins If we want to add behavior to our website, which of the following ...