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

随机推荐

Visual Studio 2015 编译错误【错误 C4996 'vsprintf': This function or variable may be unsafe. Consider using vsprintf_s instead. 】的解决方案
错误提示信息: 错误 C4996 'vsprintf': This function or variable may be unsafe. Consider using vsprintf_s inst ...
HW6.5
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
dataStructure@ Binary Search Tree
#include<iostream> #include<cstdio> #include<cstring> #include<limits> #incl ...
hdoj 1229 还是A+B
还是A+B Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
hdoj 2120 Ice_cream's world I【求成环数】
Ice_cream's world I Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
1000万条数据导入mysql
今天需要将一个含有1000万条数据的文本内容插入到数据库表中,最初自然想到的是使用Insertinto '表名'values(),(),()...这种插入方式,但是发现这种方式对1000万条数据量的情 ...
修复bug的流年
工作的过程中,总是会遇到莫名其妙的错误.bug,由于记忆力有限,用一篇文章记录所遇到的bug及解决过程,解决的过程总是痛苦与欢乐.还有一丝丝的无奈,或许这才是真实的生活. 在VS的项目属性" ...
putty 连接ubuntu
1.安装ssh sudo apt-get install openssh-server 2.查看ssh服务是否启动 sudo ps -e |grep ssh 3.如果没有启动,输入" ...
session和request的区别
request 请求对象请求中保存请求过程中需要的参数比如另一个页面需要使用的对象编号,list,map等,请求结束,就失效了 session 会话对象除非关闭会话(到时间通常为30分钟,或者关 ...
关于python文件操作（转载）
总是记不住API.昨晚写的时候用到了这些,但是没记住,于是就索性整理一下吧: python中对文件.文件夹(文件操作函数)的操作需要涉及到os模块和shutil模块. 得到当前工作目录,即当前Pyth ...

第一章 认识jQuery

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

随机推荐

热门专题

第一章认识jQuery

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