《jquery权威指南》学习笔记

最新推荐文章于 2022-05-13 15:26:25 发布

huiyinimen

最新推荐文章于 2022-05-13 15:26:25 发布

阅读量357

点赞数

分类专栏：学习笔记文章标签： jquery

本文链接：https://blog.csdn.net/huiyinimen/article/details/103754001

版权

《jquery权威指南》学习笔记

作者陶国荣 tao_guo_rong@163.com

jQuery开发入门

jQuery概述

jQuery是集JavaScript，css，DOM，Ajax于一体的强大的框架体系，它的主旨是：以更少的代码，实现更多的功能（Write less，do more).

jQuery基本功能

1.访问和操作DOM元素

使用jquery库，可以很方便的获取和修改页面中的元素，无论是删除，移动，还是复制某元素。

2.控制页面样式

jquery操作页面样式可以很好的兼容各种浏览器

3.对页面事件的处理

引入jquery库后，可以是页面的表现层和功能开发分离。

4.大量插件在页面中的运用

引入jquery库后，可以使用大量的插件来完善页面的功能和效果，如表单插件，UI插件

5.与Ajax技术的完美结合

搭建jQuery开发环境

1.在jQuery的官方网站（http://jquery.com)中，下载最新版本的jQuery文件库。

2.引入jQuery文件库

下载完jQuery框架文件后，并不需要任何安装，仅需要使用

<head>
    <script language="javascript" type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
</head>

加入上述代码后，便完成了jQuery框架的引入。

编写第一个简单的jQuery应用

首先，我们来编写一个简单的程序。示例：

1.功能描述

在页面加载时，弹出一个模式对话框，显示“您好，欢迎来到jquery世界”字样，点击“确定”按钮后关闭该窗口

2.实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery学习</title>
    <script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
    
            alert("您好，欢迎来到jQuery世界");
        })
    </script>
</head>
<body>
</body>
</html>

上述文件代码中有一段如下的代码：

$(document).ready(function(){
   
    //程序段
})
该段代码类似于传统的JavaScript代码：

window.onload=function(){
   
    //程序段
}

虽然上述两端代码在功能上可以互换，但他们之间又有许多区别：

1.执行事件不同：

$(document).ready 在页面框架下载完毕后就执行。而window.onload必须在页面全部加载完毕（包含图片下载）后才能执行。前者的执行效率高于后者。

2.执行数量不同：

$(document).ready 可以重复多多个，并且每次执行结果不同；而window.onload尽管可以执行多个，但仅输出一个执行结果，无法完成多个结果的输出。

3. $document).ready(function(){})可以简写成$ (function(){})

jQuery程序的代码风格

1."$"美元符的使用

在jquery程序中，无论是页面元素的选择，功能函数的前缀都必须使用该符号

2.事件操作链接式书写

在编写页面某元素事件时，jQuery程序可以使用连接式的方式编写该元素的所有事件。

jQuery事件的链式写法

1.功能描述

在页面中，有一个div标记，在该标记内，包含第二个div标记，一个为主题，另一个为内容，页面首次加载时，被包含的内容div标记是不可见的，当用户单击主题div标记时，改变自身的背景色，并将内容div标记显示出来。

2.实现代码

代码如下：

当用户单击class名称为"divTitle"的元素时，自身增加名称为”divCurrColor“的样式，同时，接下来的class名称为”divContent“元素显示出来，可以看出，两个功能的实现通过**”.“**符号链接在一起。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery时间的链式写法</title>
    <script language="javascript" type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>

    <style type="text/css">
        .divFrame{
    
            width:260px;
            border:solid 1px #666;
            font-size:10pt
        }
        .divTitle{
    
            background-color:#eee;
            padding:5px
        }
        .divContent{
    
            padding:5px;
            display:none
        }
        .divCurrColor{
    
            background-color:Red
        }
    </style>

    <script type="text/javascript">
        $(function(){
    
           $(".divTitle").click(function(){
    
               $(this).addClass("divCurrColor")
                   .next(".divContent").css("display","block");
           });
        });
    </script>
</head>
<body>
<div class="divFrame">
    <div class="divTitle">主题</div>
    <div class="divContent">
        <a href="#">链接1</a><br/>
        <a href="#">链接2</a><br/>
        <a href="#">链接3</a>
    </div>
</div>

</body>
</html>

3.效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W7u7kVRR-1577603752381)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\1576651964002.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZOEu88Ll-1577603752383)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\1576651996378.png)]

jQuery的简单应用

jQuery访问DOM对象

1.什么是DOM对象

DOM（文本对象模型）是每一个页面都是一个DOM对象，通过传统的JavaScript方法访问页面中的元素，就是访问DOM元素。

如，在页面中2个div标记元素，其代码如下：

<div id="divTmp">测试文本</div>
<div id="divOut"></div>

通过下面的JavaScript代码可以访问DOM对象和获取或设置其内容值：

var tDiv=document.getElementById("divTmp"); //获取DOM对象
var oDiv=document.getElementById("divOut"); //获取DOM对象
var cDiv=tDiv.innerHTML; //获取DOM对象中的内容
oDiv.innerHTML=cDiv; //设置DOM对象中的内容

//如果执行上面的代码，将在ID为"divOut"的标记中显示ID为"divTmp"的标记内容。

2.什么是jQuery对象

在jQuery库中，通过本身自带的方法获取页面元素的对象，我们成为jQuery对象。

实现在ID为“divOut”的标记中显示ID为“divTmp”的标记内容，采用jQuery访问页面元素的方法，其实现的代码如下：

var tDiv=$("divTmp");  //获取jQuery对象
var oDiv=$("divOut");  //获取jQuery对象
var cDiv=tDiv.html();  //获取jQuery对象中的内容
oDiv.html(cDiv);  //设置jQuery对象中的内容

通过代码对比，jQuery对象访问方法比DOM对象访问方法更简单。

jQuery控制DOM对象

如何用传统的JavaScript方法访问DOM对象

控制DOM对象

1.功能描述

在页面中输入姓名，性别和婚姻状况，单击“提交”按钮后，将获取到的数据信息显示在页面div标记中。

2.实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制DOM对象</title>
    <style type="text/css">
        .divFrame {
    
            width: 260px;
            border: solid 1px #666;
            font-size: 10pt
        }

        .divTitle {
    
            background-color: #eee;
            padding: 5px
        }

        .divContent {
    
            padding: 8px;
            font-size: 9pt
        }

        .divTip {
    
            width: 244px;
            border: solid 1px #666;
            padding: 8px;
            font-size: 9pt;
            margin-top: 5px;
            display: none
        }

        .txtCss {
    
            border: solid 1px #ccc;
        }

        .divBtn {
    
            padding-top: 5px;
        }

        .divBtn .btnCss {
    
            border: solid 1px #535353;
            width: 60px
        }

    </style>
    <script type="text/javascript">
        function btnClick() {
    
            //获取文本框的值
            var oTxtValue = document.getElementById("Text1").value;
            //获取单选框按钮值
            var oRdoValue = (Radio1.checked) ? "男" : "女";
            //获取复选框按钮
            var oChkValue = (Checkbox1.checked) ? "已婚" : "未婚";
            //显示提示文本元素
            document.getElementById("divTip").style.display = "block";
            //设置文本元素内容
            document.getElementById("divTip").innerHTML = oTxtValue + "<br/>"
                + oRdoValue + "<br/>" + oChkValue;
        }
    </script>
</head>
<body>
<div class="divFrame">
    <div class="divTitle">请输入如下信息</div>
    <div class="divContent">
        姓名:<input id="Text1" type="text" class="txtCss"/><br/>
        性别:<input id="Radio1" name="rdoSex" type="radio" value="男"/>男
        <input id="Radio2" name="rdoSex" type="radio" value="女"/>女<br/>
        婚否:<input id="Checkbox1" type="checkbox"/>
        <div class="divBtn">
            <input id="Button1" type="button" value="提交" class="btnCss" onclick="btnClick();"/>
        </div>
    </div>
</div>
<div id="divTip" class="divTip"></div>

</body>
</html>

在上面的代码中，用传统的JavaScript方法获取用户输入的信息保存到变量中，最后通过document.getElementById(“divTip”).innerHTML方法显示所有的数据信息。

下面将隐去jQuery库，通过jQuery中的方法获取元素的值，并将数据展示出来。

    <script type="text/javascript">
        $(function(){
    
            $("#btnSubmit").click(function(){
    
                //获取文本框的值
                var oTxtValue=$("#Text1").val();
                var oRdoValue=$("#Radio1").is(":checked")?"男":"女";
                var oChkValue=$("#Checkbox1").is(":checked")?"已婚":"未婚";
                $("#divTip").css("display","block").html(oTxtValue+"<br/>"+oRdoValue+"	                 <br/>"+oChkValue);
            });
        });
    </script>

<input id="btnSubmit" type="button" value="提交" class="btnCss" onclick="btnClick();"/>

3.页面效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ukMsK2Qq-1577603752383)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\1576724823342.png)]

jQuery控制页面CSS样式

通过一个简单的示例介绍如何使用jQuery中的toggleClass(className)方法来实现页面样式的动态切换功能

1.功能描述

在页面中，增加一个div元素标记，当用户单击该元素时，变换其文本内容和背景色，再次单击时，恢复其初始的内容和背景色。

2.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制css样式</title>
    <script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        .divDefault{
    
            width:260px;
            font-size:10pt;
            padding:5px
        }
        .divClick{
    
            width:260px;
            border:solid 1px #666;
            font-size:10pt;
            background-color:#eee;
            padding:5px
        }
    </style>

    <script type="text/javascript">
        $(function(){
    
            $(".divDefault").click(function(){
    
                $(this).toggleClass("divClick").html("点击后的样式");
            });
        });
    </script>

</head>
<body>
<div class="divDefault">点击前的样式</div>

</body>
</html>

jQuery选择器

jQuery选择器概述

什么是选择器

jQuery选择器继承了CSS和Path语言的部分语法，允许通过标签名，属性名或内容对DOM元素进行快速，准确的选择，通过jQuery选择器对页面元素的精准定位，才能完成元素属性和行为的处理。

jQuery选择器的优势

1.代码更简单

由于在jQuery库中，封装了大量可以通过选择器直接调用的方法或函数，使编写代码更加简单轻松。

下面是一个是一个实现表格隔行变色的功能。

使用JavaScript实现隔行变色

1.功能描述

在页面中，通过一个table标记展示数据列表信息，在元素标记中，奇数行与偶数行的背景色不同，从而实现隔行变色的页面展示效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用JavaScript实现隔行变色</title>
    <style type="text/css">
        bady {
    
            font-size: 12px;
            text-align: center;
        }

        #tbStu {
    
            width: 260px;
            border: solid 1px #666;
            background-color: #eee;
        }

        #tbStu tr {
    
            line-height: 23px
        }

        #tbStu tr th {
    
            background-color: #ccc;
            color: #fff;
        }

        #tbStu .trOdd {
    
            background-color: #fff;
        }
    </style>

    <script type="text/javascript">
        window.onload = function () {
    
            var oTb = document.getElementById("tbStu");
            for (var i = 0; i < oTb.rows.length - 1; i++) {
    
                if (i % 2) {
    
                    oTb.rows[i].className = "trOdd";
                }
            }
        }
    </script>
</head>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>

最低0.47元/天解锁文章

huiyinimen

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
《jquery权威指南》学习笔记

《jquery权威指南》学习笔记作者陶国荣 tao_guo_rong@163.comjQuery开发入门jQuery概述jQuery是集JavaScript，css，DOM，Ajax于一体的强大的框架体系，它的主旨是：以更少的代码，实现更多的功能（Write less，do more).jQuery基本功能1.访问和操作DOM元素使用jquery库，可以很方便的获取和修改页面中的元素...
复制链接

扫一扫

专栏目录