JavaScript进阶内容——jQuery

2022-10-25 18:10:36 浏览数 (1)

JavaScript进阶内容——jQuery

我们在前面的文章中已经掌握了JavaScript的全部内容，现在让我们了解一下JavaScript库

这篇文章主要是为了为大家大致讲解JavaScript库以及使用方法，本篇不会完全讲解jQuery的全部语法

如果希望完全掌握，可以参考网站jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

JavaScript库

JavaScript库：

  • 即library，是一个封装好的特定的集合（包括许多属性和方法）。
  • 从封装一大堆函数的角度来理解库，就相比于Java的类，里面封装了许多方法，我们可以直接导入并且调入其方法
  • 简单理解：就是一个JS文件，里面对我们的原生JS代码进行了封装，存放在里面，这样我们就可以快速高效的使用这些封装好的功能
  • 比如jQuery，就是为了快速操作DOM对象，里面封装的基本都是函数（方法）

常见的JavaScript库：

  • jQuery
  • Prototype
  • YUI
  • Dojo
  • Ext JS
  • zepto

jQuery概述

jQuery概念：

  • jQuery是一个快速，简洁的JavaScript库，其设计的宗旨是：“Write Less，Do More”，即提倡更少的代码做更多的事

jQuery优点：

  • 轻量级，核心文件只有不到100kb，不会影响页面加载速度
  • 跨浏览器兼容，基本兼容所有浏览器
  • 链式编程，隐式迭代
  • 对事件，样式，动画，大大的简化了DOM操作
  • 支持插件开发拓展，支持第三方软件
  • 免费且开源

jQuery基本格式：

  • $(选择器).action()

jQuery使用顺序

jQuery是开源的JS文件代码，我们需要先获得其JS文件，才能够使用

  1. 在官网中下载jQuery的JS文件，或者复制其代码，自定义一个jQuery代码
  1. 在我们需要使用jQuery的文件中导入该JS文件
代码语言：javascript复制
<!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>
    <!-- 在开头导入jQuery文件 -->
    <script src="jQuery.min.js"></script>
</head>
<body>
    
</body>
</html>

jQuery入口函数

jQuery的使用位置和JavaScript的使用位置一样，都是在script中进行，同样存放在body底部

代码语言：javascript复制
$(function(){
	...//页面DOM加载完成后进行
})

$(document),ready(function(){
	...//页面DOM加载完成后进行
})

上述两种方法可以使jQuery的书写位置任意存放

  • 等待DOM结构渲染完毕后即可执行内部代码，不必等到所有外部资源加载完毕，jQuery帮我们完成了封装
  • 相当于原生JS中的DOMContentLoaded
  • 更推荐第一种方法（简单快捷）

代码展示：

代码语言：javascript复制
<!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>

    <!-- 我们需要先导入jQuery的js文件 -->
    <script src="jQuery.min.js"></script>

    <!-- 这里设置div样式，我们希望将div的display设置为none -->
    <style>
        div {
            height: 200px;
            width: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <script>
        // 首先我们先来介绍一下入口函数，等同于DOMContentLoaded，可以将script写于任意位置

        // 1.$(function() {})第一种入口函数
        $(function() {
            alert('1');
        })

        // 2.$(document).ready(function(){})第二种入口函数
        $(document).ready(function(){
            // 这个意思是隐藏div，暂时做个了解即可
            $('div').hide();
        })
    </script>


    <div></div>
</body>
</html>

jQuery的顶级对象$

我们在这里介绍一下jQuery出场率最高的$符号：

  • 是jQuery的别称，在代码中我们可以用代替jQuery，但一般为了方便，我们习惯写
  • 是jQuery的顶级对象，类似于JavaScript中的window对象，把元素利用包装成jQuery对象，就可以调用jQuery的方法

代码展示：

代码语言：javascript复制
<!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.min.js"></script>
</head>
<body>
    <script>
        // 1.$是 jQuery的别称 
        // 下面两种代码的运行结果是一致的：

        $(function(){
            console.log('1');
        })

        jQuery(function(){
            console.log('1');
        })

        // 2.$是jQuery的顶级对象，你可以从中调用任何函数，类似于window
        

    </script>
</body>
</html>

jQuery对象和DOM对象以及互相转换

我们需要注意jQuery对象和DOM对象是两种完全不同的对象：

  • 用原生JS获得来的对象就是DOM对象
  • 用jQuery获得来的对象就是jQuery对象
  • jQuery对象的本质是： 利用$对DOM对象包装后产生的对象（伪数组形式存储）

代码展示：

代码语言：javascript复制
<!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.min.js"></script>
</head>
<body>
    <div></div>
    <span></span>

    <script>
        // 1.DOM对象，由原生JS获得的对象
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        console.log(div);

        // 2.jQuery对象，由jQuery方法获得的对象
        // $('标签')创建对象
        $('div');
        $('span');
        // 注意：获得的是一个伪数组
        console.log($('div'));

        // 3.两种对象，只能使用各自的方法，不能混合使用：
        div.style.display = 'none';
        $('div').hide();
    </script>
</body>
</html>

虽然两种对象不尽相同，但我们仍旧可以进行转换：

  • DOM对象 -> jQuery对象
代码语言：javascript复制
$('选择器') == $(DOM对象)
  • jQuery对象 -> DOM对象
代码语言：javascript复制
$('选择器')[index]
$('选择器').get(index)

注意：因为原生JS比jQuery更大，原生的一些属性和方法jQuery并没有封装，所以如果想使用这些属性和方法就需要把jQuer对象转换为DOM对象才能使用

代码展示：

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.min.js"></script>
</head>
<body>
    <video src="#"></video>

    <script>
        // 1.DOM对象转化为jQuery对象: $('标签') == $(DOM对象)
        var myVideo = document.querySelector('video');

        $(myVideo);

        // 2.jQuery对象转化为DOM对象: $('标签')[索引号]  $('标签').get(索引号)
        $('video');

        $('video')[0];
        $('video').get(0);
    </script>
</body>
</html>

jQuery选择器

jQuery的选择器与CSS的选择器完全相同：

  • 标签选择器
  • 类选择器
  • ID选择器
  • 层次选择器
  • 兄弟选择器

代码展示：

代码语言：javascript复制
<!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>
</head>
<body>
    <script>
        // 我们来比较一下原生创建和jQuery创建

        // 原生选择器相对繁琐
        document.getElementsByTagName('div');
        document.getElementById('#id');
        document.getElementsByClassName('.class');
        
        // 在HTML5产生的document.querySelector('')便综合了上述所有选择器，类似于jQuery的创建
        document.querySelector('');

        // jQuery创建的格式：$(选择器).action()
        // 这里的选择器完全符合CSS选择器的格式，action我们会在下一部分讲到
        $('div').click();
        $('.class').click();
        $('#id').click();
    </script>
</body>
</html>

如果想要了解更多选择器，可以访问页面：https://jquery.cuishifeng.cn/index.html

jQuery事件

jQuery的鼠标事件和键盘事件与JavaScript原生代码事件完全相同：

鼠标事件

触发条件

click

鼠标点击左键触发

mouseover

鼠标经过触发

mouseout

鼠标离开触发

focus

获得鼠标焦点触发

blur

失去鼠标焦点触发

mousemove

鼠标移动触发

mouseup

鼠标弹起触发

mousedown

鼠标按下触发

键盘事件

说明

keyup

某个键盘按键被松开时触发

keydown

某个键盘按键被按下时触发

keypress

某个键盘按键被按下时触发（不能识别功能键，如ctrl，shift，左右箭头）

代码展示：

代码语言：javascript复制
<!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.min.js"></script>

    <!-- 我们希望在盒子里移动鼠标时，上面显示鼠标位置 -->
    <style>
        div {
            height: 400px;
            width: 400px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    mouse: <span></span>
    <div></div>

    <script>
        // 这里的鼠标操作和JavaScript原生的addEventListener中的方法完全相同
        $('div').mousemove(function(e){
            // 这里的text改变其文本内容
            $('span').text("x:"   e.pageX   "y:"   e.pageY);
        })
    </script>
</body>
</html>

如果想要了解更多事件，可以访问页面：https://jquery.cuishifeng.cn/index.html

jQuery操作DOM元素

对于DOM元素的操作分为许多种，下面仅做出实例介绍：

节点文本操作：

代码语言：javascript复制
// 这里获得值
$('').text();
// 这里设置值
$('').text('');
// 这里获得值
$('').html();
// 这里设置值
$('').html('');

CSS操作：

代码语言：javascript复制
$('').css(''，'');
$('').css({'':'','':''});

元素的显示和隐藏（本质是display：block/none）

代码语言：javascript复制
//元素隐藏
$('').hide();
//元素显示
$('').show();

代码示例：

代码语言：javascript复制
<!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.min.js"></script>
</head>
<body>
    <ul id="test-ul">
        <li name="java">Java</li>
        <li class="javascript">JavaScript</li>
    </ul>

    <script>
        // 我们仅做出最简单的入门演示

        // 1.节点文本操作：

        // 注意：这里的选择器采用了层次选择器，且在选择的li中加入了判定条件，用[]包裹
        // 文本修改的两种方法有text和html

        // 这里获得值
        $('#test-ul li[name=java]').text();
        // 这里设置值
        $('#test-ul li[name=java]').text('JJJJava');
        // 这里获得值
        $('#test-ul li[name=java]').html();
        // 这里设置值
        $('#test-ul li[name=java]').html('Java');

        // 2.css操作：

        // 这里css操作直接action为css，然后后面加入两个字符串，第一个是属性，第二个是属性值
        $('#test-ul li[class=javascript]').css("color","red");
        // 当需要修改多个属性时，用{}包括起来,里面用“，”隔开，并且以“：”的形式赋值
        $('#test-ul li[class=javascript]').css({"color":"blue","backgroundColor":"yellow"});

        // 3.元素的显示和隐藏

        // 元素显示用show（），隐藏用hide（）
        $('ul').hide();
        $('ul').show();
        
    </script>
</body>
</html>

如果想要了解更多操作，可以访问页面：https://jquery.cuishifeng.cn/index.html

结束语

关于jQuery的内容我们仅做出相关介绍，后期我会出一期jQuery的常用操作，希望可以为你带来帮助！

javascript jquery api dom yui

0 人点赞