12 00jQuery之简介

最新推荐文章于 2022-07-06 00:54:47 发布

布布灵

最新推荐文章于 2022-07-06 00:54:47 发布

阅读量115

点赞数

分类专栏： JavaWeb 文章标签： java jQuery

本文链接：https://blog.csdn.net/weixin_43762330/article/details/107346915

版权

JavaWeb 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

如果说现在要想实现页面的动态操作，那么自然可以想象到要使用JavaScript+DOM操作技术实现，但是JavaScript+DOM开发的模式，并不适合于所有的开发者，也就是说如果现在是一个非专业的技术人员，例如：网页美工，对于现在的开发要求来讲，一个优秀的美工人员除了要求会使用HTML+DIV+CSS等基本操作之外，必须要能够掌握复杂的DOM操作，于是这些人就废了。并且就算是会使用DOM操作的开发人员也会觉得异常的麻烦。例如，如果要创建一个元素：document.createElement()，随后还需要使用appendChild将此元素追加到指定的元素之中，而后才可以显示，并且如果少设计了一些属性，那么元素的显示也不是我们所需要的那样。

所以后来为了简化JavaScript+DOM操作的难度，那么后来推出了一个prototype开发框架，那么随后在这个框架的基础上又推出了一个新的框架——jQuery开发框架，其支持度更加广泛，所以在任何的开发之中（99%）几乎都存在有jQuery的开发身影，如果不会jQuery甚至可以说很难找到一份满意的工作。

首先jQuery属于第三方的开发框架（*.js文件），那么登录“www.jquery.com”上下载jQuery的最新版本。

如果要下载jQuery实际上提供有两种类型的版本：
（1）压缩版本（jquery-3.5.1.min.js）：删除掉所有的注释以及空格信息(.min)；
（2）未压缩版本（jquery-3.5.1.js）：主要是给用户学习使用的，所有的注释以及空格都会保留；

jQuery使用：
1、在项目之中创建一个js的文件目录；
2、随后将jQuery的开发包拷贝到此目录之中；
3、在需要使用jQuery的页面位置上使用<script>元素进行导入；

<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>

范例：编写第一个jQuery程序

<html>
    <head>
        <title>jQuery</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
        <script type="text/javascript">
            function show(){
                alert($(msg).val())
            }
        </script>
    </head>
    <body>
        <input type="text" name="msg" id="msg">
        <button type="button" onclick="show()">show</button>
    </body>
</html>

本程序使用了$(msg).val()操作实际上替代了document.getElementById(“msg”).value。现在可以清楚的感受到jQuery就是在简化程序开发的DOM操作。

jQuery中最为常用的操作语法形式就是$(元素ID)。而val()是一个操作函数，用于取得各个表单组件的输入内容。

在之前曾经使用过innerHTML操作设置过<span>或<div>元素的内容，那么这一操作现在也可以简化。
范例：设置元素中的显示内容

<html>
    <head>
        <title>jQuery</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
        <script type="text/javascript">
            function setContent(){
                $(msg).text("hhy big fool");
            }
        </script>
    </head>
    <body>
        <span id="msg"></span>
        <button type="button" onclick="setContent()">show</button>
    </body>
</html>

使用text()函数可以设置指定ID元素的显示文本内容，但是需要注意的是，text()函数只能够设置普通文本，而不能够设置HTML文本数据。

$(msg).text("<h1>hhy big fool</h1>");

此时如果使用了text()函数设置了包含有HTML代码的内容，则所有的HTML代码中的标记都会自动的使用转义字符进行替代。但是所需要的是HTML效果，那么可以使用html()函数完成操作：
范例：设置HTML显示风格

<html>
    <head>
        <title>jQuery</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
        <script type="text/javascript">
            function setContent(){
                $(msg).html("<h1>hhy big fool</h1>");
            }
        </script>
    </head>
    <body>
        <span id="msg"></span>
        <button type="button" onclick="setContent()">show</button>
    </body>
</html>

text()函数只能够设置普通文本数据，如果有HTML元素那么将无法按照HTML的效果显示，而html()函数可以设置HTML风格的显示样式。

在使用JavaScript操作HTML的时候曾经强调过可以使用onload实现页面加载后的处理操作，而后如果使用的JavaScript采用：window.onload=function(){}完成，但是这样的操作在jQuery里面也有支持。它支持两种：
（1）使用标准的jQuery操作：
|————完整操作：

<html>
    <head>
        <title>jQuery</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
        <script type="text/javascript">
            //DOM操作对象在jQuery中依然可以使用
            $(document).ready(function(){
                alert("hhy big fool!");
            });
        </script>
    </head>
    <body>
    </body>
</html>

|————简化操作：

<html>
    <head>
        <title>jQuery</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
        <script type="text/javascript">
            //DOM操作对象在jQuery中依然可以使用
            $(function(){
                alert("hhy big fool!");
            });
        </script>
    </head>
    <body>
    </body>
</html>

（2）使用文本的替代标记，使用jQuery替代$
|————完整操作：

<html>
    <head>
        <title>jQuery</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
        <script type="text/javascript">
            //DOM操作对象在jQuery中依然可以使用
            jQuery(document).ready(function(){
                alert("hhy big fool!");
            });
        </script>
    </head>
    <body>
    </body>
</html>

|————简化操作：

<html>
    <head>
        <title>jQuery</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
        <script type="text/javascript">
            //DOM操作对象在jQuery中依然可以使用
            jQuery(function(){
                alert("hhy big fool!");
            });
        </script>
    </head>
    <body>
    </body>
</html>

以上的几种使用形式都可能经常见到，但是建议使用$，简短好用。jQuery的主要目的是封装了复杂的DOM操作，使开发者使用起来感觉简单.。

布布灵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12 00jQuery之简介

如果说现在要想实现页面的动态操作，那么自然可以想象到要使用JavaScript+DOM操作技术实现，但是JavaScript+DOM开发的模式，并不适合于所有的开发者，也就是说如果现在是一个非专业的技术人员，例如：网页美工，对于现在的开发要求来讲，一个优秀的美工人员除了要求会使用HTML+DIV+CSS等基本操作之外，必须要能够掌握复杂的DOM操作，于是这些人就废了。并且就算是会使用DOM操作的开发人员也会觉得异常的麻烦。例如，如果要创建一个元素：document.createElement()，随后还需要
复制链接

扫一扫

专栏目录