初识HTML（七）高级：了解jQuery

最新推荐文章于 2021-07-10 15:45:19 发布

Simple子夜

最新推荐文章于 2021-07-10 15:45:19 发布

阅读量1k

点赞数 2

分类专栏： HTML 文章标签： HTML jQuery

本文链接：https://blog.csdn.net/m0_46958731/article/details/114700188

版权

HTML 专栏收录该内容

7 篇文章 10 订阅

订阅专栏

JQuery介绍

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

Jquery优势

一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

JQuery版本

1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。

JQuery的引用

由于jQuery是基于JS而开发出来的，则jQuery就是一堆JS代码，所以我们在使用jQuery前需要先进行引入，这里介绍两种jQuery引入方式。

第一种引入方式：将jQuery保存到JS文件内引入

第一步：页面下载地址：https://jquery.com/download/
第二部：我们将点进去的整个页面的JS代码复制下，然后通过一个JS文件保存

上面推荐的是压缩版的jQuery，它相对未压缩版的会节省一些空间。当然如果想看排序的jQuery源码的话，就复制红色框框下面的页面JS

此时我们已经将jQuery保存到了一个JS文件内：
第三步：我们在HTML内通过<script src='js文件地址'></script>进行jQuery引入

第二种引入方式：通过网址引入

我们可以进入Bootcdn：cdn是一个内容分发网络，主要作用就是可以从离我们本地最近的一个服务器获取内容。https://www.bootcdn.cn/

在这里插入图片描述
选择3.4.1版本

复制script标签后，我们在HTML内的里head标签内粘贴

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Jqueary练习</title>
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
        Hello World!
    </body>
</html>

至此我们的jQuery引入已经完成，笔者选择的是网址引入的，而JQuery的JS文件可以留作备份使用，那么我们现在开始jQuery的使用吧！

jQuery语法

jQuery极大简化了JavaScript代码，如我们查找一个ID为header的标签：

JavaScript写法：

document.getElementById('header');

jQuery写法：

$('#header');

基本可以看出jQuery的语法相对JS特别简洁，尽量让使用者少写更多代码。同时又可以发现，在查找标签方面jQuery很类似于CSS。继续向下了解

标签查找

id选择器

$('#id值');

class选择器

$('.class值')

标签选择器

$('标签名');

组合使用

$('div.c1'); 找到div元素并且class类为c1的元素

组合使用

$('span, #fons, .box'); 同时找到span标签，id值为fons的标签，和类为box的所有标签

层次选择器

$('div span'); div的所有span后代（子子孙孙）
$('div > span'); 找到div下面的span标签（儿子）
$('div + span'); 找到紧挨在div后面的span标签（邻居）
$('div ~ span'); 找到div后面的所有span标签（兄弟）

基本筛选器

$('div>span:first'); 获取div下面的第一个span标签
$('div:last'); 找到最后一个div标签
$('div:eq(2)'); 找到索引值为2的div标签
$('div:even'); 获取索引值为偶数的div
$('div:odd'); 获取索引值的为奇数的div

在这里插入图片描述
属性选择器

$('[name=gender]'); 找到name值为gender的标签

$('input[name=gender]');找到name属性值为gender的input标签。
$('input[name!=gender]');找到name属性值不是gender的input标签。

在这里插入图片描述
表单筛选器

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

比如：
$(':text'); 找到表单控件的type属性值为text的标签

在这里插入图片描述

原生JS与JQ对象

切结（非常重要）：

原生JS对象不能调用JQ对象的方法
JQ对象不能调用元素JS对象的方法

$('div')[0]拿到了第一个div元素，这种就是拿到了原生JS对象

$($('div')[0])将原生JS对象转换成JQ对象

在这里插入图片描述

标签操作

从这里开始对标签本身做一些操作，如：添加属性、添加样式等。

addClass(); 为某个元素添加类名

$('div')[0].addClass('box1'); 这种方式添加吗？不对的，因为这样拿出来是JS对象，而addClass是jQuery的方法。

修改：
$($('div')[0]).addClass('box1');

当然也这样：
$('div:first').addClass('box1');

注意：上面的一堆就是为了说明JS对象与JQ对象的区别。

类的操作：

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

样式操作：

$('.box').css('color','red'); 设置类名为box的样式

文本值

text(); 获取匹配元素的文本值
实例： $('.box1').text();

text(val); 设置匹配元素的文本值
实例：$('.box1').text('你好啊！');

val(); 获取表单控件value属性值
val(val); 设置表单控件的value属性值
val([val1, val2])// 设置多选的checkbox、多选select的值

在这里插入图片描述
属性操作

attr(属性名); 返回匹配元素的属性值
attr(属性名,属性值); 设置匹配元素的属性值
attr({属性名1:属性值,属性名2:属性值}); 为匹配的元素设置多个属性值
removeAttr(属性名); 移除匹配元素的一个属性

在这里插入图片描述
文档处理

这里可以了解到：创建标签、移动标签的所属位置

添加到指定元素内部的后面

var $p = $('<p>我是jq创建的p</p>');
$('body').append($p); 将p标签追加到body内的最后面

$(A).append(B); 把B追加到A
$(A).appendTo(B); 把A追加到B：正着写，反着操作

添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

remove()// 删除所有匹配的元素。
$('div').remove(); 删除所有div标签

empty()// 删除匹配的元素集合中所有的子节点。
$('div p').empty(); 删除div下面的所有p标签

事件

事件也就是遇到某一情况下会触发，比如：用户点击了按钮就会触发click事件；

常见事件：

事件需要配合函数使用，因为事件执行后，可能我们做的操作比较多。通常使用的是匿名函数，当然我们也可以自定义函数放进去。

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

点击前：
在这里插入图片描述
点击后：

代码实现：

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Jqueary练习</title>
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
       <button class="btn">点我变绿</button>

       <script>
           $('.btn').click(
               function () {
                    $(this).css('backgroundColor','green')
                    $(this).css('color','white')
               }
           )
       </script>
    </body>
</html>

注意：函数里面的this代表：对哪个元素使用时间，this就是哪个元素。上面的this就是$('.btn');获取到的元素。

事件绑定

.on( events [, selector ],function(){})

events：事件
selector: 选择器（可选的）
function: 事件处理函数

移除事件
.off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序。

制作input输入值监听：

在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>input监听</title>
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
        username：<input type="text" name="" id="username">

        <script>
            $('#username').on('input',function () {
                console.log($(this).val())
            })
        </script>
    </body>
</html>

如果把事件换成了click，那么用户点击一下文本框那么就打印一下文本框的内容。

事件冒泡

事件冒泡指的是：由某个事件触发了其它事件的执行

代码演示，何为事件冒泡：

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>事件冒泡</title>
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="test_div">我是div<br/><br/>
            <span id="test_span">我是span，我在div内。<br/><br/>
                <a id="test_a">我是a标签，我在span内。点我弹框</a>
            </span>
        </div>

        <script>
            $('#test_a').click(
                function () {
                    alert('我是a标签')
                }
            )

            $('#test_span').click(
                function () {
                    alert('我是span标签')
                }
            )

            $('#test_div').click(
                function () {
                    alert('我是div标签')
                }
            )
        </script>
    </body>
</html>

现在我们点击a标签。
在这里插入图片描述

我们会发现，只是点击了一个a标签却触发了另外两个元素的事件。这是因为，a标签被包含在span内，而span被包含在div内，所以相当于间接把它们都点击了，就像气泡一样一层层往外冒。

那么我们要阻止事件冒泡的方法很简单。在事件结束的时候加上return false;表示不再执行后续任何内容，立马结束掉。

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>事件冒泡</title>
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="test_div">我是div<br/><br/>
            <span id="test_span">我是span，我在div内。<br/><br/>
                <a id="test_a">我是a标签，我在span内。点我弹框</a>
            </span>
        </div>

        <script>
            $('#test_a').click(
                function () {
                    alert('我是a标签')
                    return false;
                }
            )

            $('#test_span').click(
                function () {
                    alert('我是span标签')
                    return false;
                }
            )

            $('#test_div').click(
                function () {
                    alert('我是div标签')
                    return false;
                }
            )
        </script>
    </body>
</html>

至此，我们已经基本了解jQuery的使用，可以根据上序的方法制作一些简单的功能。

如果本文对您有帮助，别忘一键3连，感谢支持！

技术小白记录学习过程，有错误或不解的地方还请评论区留言，如果这篇文章对你有所帮助请点赞收藏+关注 子夜期待您的关注，谢谢支持！

Simple子夜

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初识HTML（七）高级：了解jQuery

目录JQuery介绍Jquery优势JQuery版本JQuery的引用jQuery语法原生JS与JQ对象标签操作事件JQuery介绍jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“Jquery优势一款轻量级的JS框架。jQuery核心js文件才几十kb，不会
复制链接

扫一扫