前端-jQuery学习回顾1

最新推荐文章于 2024-08-22 17:38:39 发布

yanyu-yaya

最新推荐文章于 2024-08-22 17:38:39 发布

阅读量71

点赞数

文章标签：前端 jquery 学习

本文链接：https://blog.csdn.net/yunjin0101/article/details/131264242

版权

文章介绍了jQuery的基本概念，它是JavaScript的一个高效库，旨在简化HTML文档操作、事件处理和Ajax交互。文章详细讲解了如何引入jQuery库，包括本地和远程引入，并通过实例对比了原生JavaScript和jQuery的使用差异，强调了jQuery的简洁性。此外，还提到了jQuery的核心函数和对象作为主要工具。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
- 尚硅谷平台学习的jQuery知识回顾(https://www.gulixueyuan.com/my/course/61)
一、jQuery是什么？
二、jQuery引入使用
- 1.引入jQury库
- 2.简单使用
三、jQuery的两把利器
- 1.jQuery核心函数
- 2.jQuery核心对象

前言

尚硅谷平台学习的jQuery知识回顾(https://www.gulixueyuan.com/my/course/61)

一、jQuery是什么？

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

⚠️面试考点：jQuery设计的宗旨是“write Less，Do More”

在这里插入图片描述

二、jQuery引入使用

jQuery官网

可以看jQuery支持什么api(方法)：jQuery在线中文手册

1.引入jQury库

<!--<script> 标签用于定义客户端脚本，比如 JavaScript。
引入jQuery包(本地进入）     测试使用的未压缩的版本，上线使用的压缩版本
-->
<!--  <script type="text/javascript" src="js/jquery-1.10.1.js">  </script>-->
<!--  远程引入-->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>

2.简单使用

举例：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>01_初识jQuery</title>
<!--原生的-->
  <script type="text/javascript">
    window.onload =function(){
      var btn1 = document.getElementById("btn1");
      btn1.onclick =function () {
        var username = document.getElementById("username");
        alert(username.value)
      }
    }
  </script>

<!--引入jQuery包(本地进入）     测试使用的未压缩的版本，上线使用的压缩版本
-->
<!--  <script type="text/javascript" src="js/jquery-1.10.1.js"> </script>-->
<!--  远程引入-->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
 
    <!-- jQuery版 -->
  <script type="text/javascript">
  //绑定文档加载完成监听
  //使用jQuery核心函数($/jQuery)
  // $(
  //         function () {
  //           $('#btn2').click(function () {
  //             //给btn2绑定点击监听
  //             var username = $('#username').val()
  //             alert("username:"+username)
  //           })
  //         }
  // )
  jQuery(
          function () {
            $('#btn2').click(function () {
              //给btn2绑定点击监听
              var username = $('#username').val()
              alert("username:"+username)
            })
          }
  )

  </script>
</head>
<body>
<!--
需求: 点击"确定"按钮, 提示输入的值
-->

用户名: <input type="text" id="username">
<button id="btn1">确定(原生版)</button>
<button id="btn2">确定(jQuery版)</button>

</body>

</html>

对照原生和jQuer版本，可见jQuery版本更简洁

三、jQuery的两把利器

1.jQuery核心函数

简称: jQuery函数($/jQuery)
jQuery库向外直接暴露的就是$/jQuery
引入jQuery库后, 直接使用$即可
- 当函数用: $(xxx)
- 当对象用: $.xxx()

2.jQuery核心对象

简称: jQuery对象
得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
使用jQuery对象: $obj.xxx()

<!--引入库-->
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
  //jQuery 函数 只对外暴露这些
  console.log($);
  console.log(typeof $); //function
    console.log(jQuery===$);//true
    //jQuery对象
  console.log($() instanceof Object)//true
  </script>