第一章认识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 ...

随机推荐

JAVA——装箱和拆箱
Java 将某些基本数据类型自动转换为包装类型的过程称为装箱,相反自动将包装类型转换为基本数据类型的过程称为拆箱. Integer integer_1=1; //装箱 int i=integer_1; ...
iOS开发 autoResizingMask使用
autoResizingMask 是UIView的一个属性,在一些简单的布局中,使用autoResizingMask,可以实现子控件相对于父控件的自动布局. autoResizingMask 是UIV ...
ECSHOP模板文件说明
最新ECSHOP 2.7.3完整的一套ECSHOP模板有一下构造 • 35个 .dwt文件(模板框架文件.可调用lbi库文件的主体文件) • 57个 .lbi文件(模板库文件,可通过后台库项目管理直接 ...
JS幻灯片,循环播放,滚动导航,jQuery平滑旋转幻灯片
最近在帮别人改一些东西,在网上找了好久,但是没有相同的,自己改了下,拿出来分享下: 先展示下效果把: index.html 页面展示代码 <!DOCTYPE html PUBLIC " ...
Redis实战
大约一年多前,公司同事开始使用Redis,不清楚是配置,还是版本的问题,当时的Redis经常在使用一段时间后,连接爆满且不释放.印象中,Redis 2.4.8以下的版本由于设计上的主从库同步问题,就会 ...
jboss 7部署cas3.4.11
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
感动前行——给医学媳妇写的演讲稿(非IT类）
感动前行我是一个平庸的人,走在人群中大家可能不能辨别出我.我是一个平庸的人,每天上班.工作.吃饭.睡觉.我是一个平庸的人,来了医院多半年也仅仅和检验科的同事相对照较熟悉,其它科室人员非常少有交流. ...
Codeforces Round #325 (Div. 2) F. Lizard Era: Beginning meet in the mid
F. Lizard Era: Beginning Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/5 ...
2015北京网络赛 G题 Boxes bfs
Boxes Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://hihocoder.com/contest/acmicpc2015beijingonl ...
hdu 5442 Favorite Donut 后缀数组
Favorite Donut Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid ...

第一章 认识jQuery

第一章 认识jQuery的更多相关文章

随机推荐

热门专题

第一章认识jQuery

第一章认识jQuery的更多相关文章