前端-jQuery基础知识

最新推荐文章于 2024-06-24 20:52:55 发布

黑马蓝汐

最新推荐文章于 2024-06-24 20:52:55 发布

阅读量1.4k

点赞数 2

分类专栏：网页前端文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_52262831/article/details/122247293

版权

网页前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

每日分享：

在寒冬的时节学会和过去告别，前尘往事，后会无期。

希望在奔赴未来的路上，我们有着生生不息的热爱，如星璀璨，如风自由。

目录：

jQuery的介绍
jQuery的下载
jQuery的使用
jQuery选择器
jQuery选择集过滤
jQuery选择集转移

一、jQuery的介绍

jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery极大的简化了JavaScript编程
jQuery和JavaScript的作用一样，都是负责网页行为操作，增加网页和用户的交互效果，简化了JavaScript编程，实现交互效果更简单
jQuery兼容了现在主流的浏览器，增加了程序员的开发效率

二、jQuery的下载

进入网址：https://code.jquery.com/

下载jQuery1.x

点击之后会出现如下图，进入网址：

之后直接右键->另存为：

jQuery就下载完了，之后使用直接把它的路径放进去就可以了

三、jQuery的使用

1. jQuery的引入

<script src="../../jquery-1.12.4.min.js"></script>

2. jQuery的入口函数

js获取标签元素需要页面加载完成以后再获取，我们通过给onload事件属性设置了一个函数来获取标签元素，而jQuery提供了ready函数，保证获取标签元素没有问题，它的速度比原生的window.onload更快

入口函数完整代码示例：

<!-- 导入jquery对应的js文件 -->
    <script src="../../jquery-1.12.4.min.js"></script>
    <script>
        // 原生js写法
        window.onload = function(){
            // 当前页面的标签和标签使用的资源数据都加载完成，onload事件才会触发
            var oDiv = document.getElementById('div1');
            alert(oDiv);
        };

        // $符号就是jquery的象征，其本质就是一个函数，只不过这个函数名叫$
        $(document).ready(function(){
            // 获取标签和css样式匹配标签的规则一样
            // 以后使用jquery，变量名都要以$符号开头
            var $div = $('#div1');
            alert($div)
        });
        // ready 等待页面标签加载完成以后就执行ready事件，不会等待资源数据加载完成
        // 所以ready比onload快

jQuery简写代码示例：

<!-- 导入jquery对应的js文件 -->
    <script src="../../jquery-1.12.4.min.js"></script>
    <script>
        // 原生js写法
        window.onload = function(){
            // 当前页面的标签和标签使用的资源数据都加载完成，onload事件才会触发
            var oDiv = document.getElementById('div1');
            alert(oDiv);
        };

        // // $符号就是jquery的象征，其本质就是一个函数，只不过这个函数名叫$
        // $(document).ready(function(){
        //     // 获取标签和css样式匹配标签的规则一样
        //     // 以后使用jquery，变量名都要以$符号开头
        //     var $div = $('#div1');
        //     alert($div)
        // });
        // ready 等待页面标签加载完成以后就执行ready事件，不会等待资源数据加载完成
        // 所以ready比onload快

        // jquery的简写方式
        $(function(){
            var $div = $('#div1');
            alert($div);
        });
    </script>

四、jQuery选择器

jQuery选择器就是快速选择标签元素，获取标签的，选择规则和css样式一样，但它只是选择标签，不设置样式

1. jQuery选择器种类

标签选择器
类选择器
id选择器
层级选择器
属性选择器（独有的）

选择器使用代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 通过标签名获取标签对象
            var $p = $('p');
            // 长度大于0就证明获取成功了
            alert($p.length);
            // 通过jquery设置标签样式
            $p.css({'color': 'red'});

            // 通过类名获取标签对象
            var $div1 = $('.div1');
            alert($div1.length);

            // 通过id获取标签对象
            var $div2 = $('#box1');
            alert($div2.length);

            // 通过层级获取标签对象
            var $h1 = $('div h1');
            alert($h1.length);

            // 通过属性获取标签对象
            var $input1 = $('input[type=text]');
            alert($input1.length);
        });
    </script>
</head>
<body>
    <p>哈哈</p>
    <p>嘿嘿</p>
    <div class="div1">加法is</div>
    <div id="box1">开始工地</div>
    <div>
        <h1>吃饭</h1>
    </div>
    <input type="text">
    <input type="button">
</body>
</html>

其中，length属性是用来判断是否选择成功，length大于0代表选择成功

五、选择集过滤

选择集过滤就是在选择标签的集合里面过滤出自己想要的标签

1. 选择集过滤的操作

has（选择器名称）方法：表示选取包含指定选择器的标签
eq（索引）方法：表示选取指定索引的标签

两种方法使用代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 通过jquery选择器获取标签
            var $div1 = $('div');
            // 获取含有指定选择器的父标签
            $div1.has('p').css({'background': 'red'});
            // 根据下标选择指定的标签的父标签
            $div1.eq(1).css({'background': 'blue'});
            // 选择集过滤就是在选中的集合标签里面，根据需要过滤出来自己想要的标签
        });
    </script>
</head>
<body>
    <div>
        <p>哈哈</p>
    </div>
    <div>
        <input type="button" value="按钮">
    </div>
</body>
</html>

结果：

六、选择集转移

选择集转移就是以选择集的标签为参照，然后获取转移后的标签

1. 转移集转移操作

var $div = $('#box1');

$div.prev();表示选择$div元素的上一个同级元素
$div.prevAll();表示选择$div元素的上面所有的同级元素
$div.next();表示选择$div元素的下一个同级元素
$div.nextAll();表示选择$div元素的下面所有的同级元素
$div.parent();表示选择$div元素的父元素
$div.children();表示选择$div元素的所有子元素
$div.siblings();表示选择$div元素的其他同级元素
$div.find(‘.sp1’);表示选择$div元素的class等于sp1的元素

选择集转移代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 获取div，并把div作为参照物，获取其他标签
            var $div = $('#box1');
            // css参数是一个js对象，而js对象和python里面的字典相似
            // 属性名和css中的属性名保持一致

            // 选择上一个同级标签
            $div.prev().css({'color': 'red', 'font-size': '25px'});
            // 选择上面所有的同级标签
            $div.prevAll().css({'text-indent': '50px'});
            // 选择下一个同级标签
            $div.next().css({'color': 'green'});
            // 选择下面所有的同级标签
            $div.nextAll().css({'text-indent': '50px'});
            // 选择同级的其他标签
            $div.siblings().css({'text-decoration': 'underline'});
            // 选择父标签
            $div.parent().css({'background': 'gray'});
            // 获取所有的子标签
            $div.children().css({'color': 'red'});
            // 查找指定的子标签
            $div.find('.sp1').css({'color': 'green'});

        })
    </script>
</head>
<body>
    <div>
        <h3>三级标题</h3>
        <p>哈哈</p>
        <div id="box1"><span>我是</span>一个<span class="sp1">div</span>标签</div>
        <h3>三级标题</h3>
        <p>好好好</p>
    </div>
</body>
</html>

结果：