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

随机推荐

HIbernate学习笔记（二） hibernate对象的三种状态与核心开发接口
1.在hibernate中持久化对象有三个状态,这个面试时可能会问到: (1)transient瞬时态:在数据库中没有与之匹配的数据,一般就是只new出了这个对象,并且在session缓存中也没有即此 ...
【转】getopt分析命令行参数
(一) 在Linux中,用命令行执行可执行文件时可能会涉及到给其加入不同的参数的问题,例如: ./a.out -a1234 -b432 -c -d 程序会根据读取的参数执行相应的操作,在C语言中,这个 ...
SGU-495 Kids and Prizes 概率DP
题目链接:http://acm.sgu.ru/problem.php?contest=0&problem=495 题意:有n个盒子,每个盒子里面放了一个奖品,m个人轮流去选择盒子,如果盒子里面 ...
第十三章、学习 Shell Scripts 简单的 shell script 练习
简单的 shell script 练习简单范例对谈式脚本:变量内容由使用者决定 [root@www scripts]# vi sh02.sh #!/bin/bash # Program: # Us ...
hdoj 2084 数塔
数塔 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...
[iOS基础控件 - 6.2] LOL英雄列表 UITableView单项显示
A.需求 1.使用只有一个section的TableView来显示LOL 的英雄列表 2.内容包括标题.副标题.图标 3.使用plain样式 4.使用MVC模式 heros.plist 文件结 ...
AVR抗干扰能力一般
在485通信中,为了方便测试,在485 芯片前端加下了插测好测试量,可是用TTL直接通信, 但是,在实际的PCB测试中,9600 的波特率下不小心用手碰了P5插针,会现大量的数量错误, 后来在Tx和R ...
ASP.NET基础系列
一.HttpContext概述 1).如何获取对象: 在WebForm或类库(包括MVC)项目中,通过Current静态属性,就能够获得HttpContext的对象: HttpContext cont ...
【Stage3D学习笔记续】真正的3D世界（四）：空间大战雏形
前面几个星期抽空用Starling做了一个打飞机的小游戏(所以没有接着看书了),准备面试时用的,结果面试还是没过%>_<%...这个游戏打算过几天全部开源了那么接下来打算这周把<S ...
Go2Shell
1.背景 windows系统可以轻而易举地拿到文件所在目录, 但是mac显得想拿文件目录有点蛋疼.而Go2Shell可以快速定位到文件所在的目录. 2.安装配置选择默认打开的终端软件 3.使用进入 ...

第一章 认识jQuery

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

随机推荐

热门专题

第一章认识jQuery

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