JavaScript 学习-35.jQuery 基础语法与事件

前言

jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。极大地简化了 JavaScript 编程
jQuery 库包含以下功能：

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

环境准备

在网页中使用 jQuery 可以使用以下方法：

  • 从 jquery.com 下载 jQuery 库
  • 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

jQuery 所有版本下载地址 https://www.jq22.com/jquery-info122
引用在线 CDN 示例

<head>
    <meta charset="UTF-8">
    <title>jquery 选择器与事件</title>
    <!-- 引入jquery-->
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script>
</head>

入口函数

为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。可以将 jQuery 代码位于一个 $(document).ready() 函数中

$(document).ready(function(){
        // 执行代码
        alert('页面加载完')
    });

也可以用下面简写方式，与上面写法效果一样

// 简洁写法（与以上写法效果相同
    $(function(){
        alert('页面加载完2')
    });

JavaScript 入口函数:

window.onload = function () {
    // 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别：

  • jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
  • JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
执行 window.onload $(document).ready
执行时机 必须等网页全部加载完毕，包含图片等，再执行onload 只需等待页面中DOM结构加载完毕
执行次数 只执行一次，第二个会覆盖前面的 可以执行多次，后面的不会覆盖前面
简写 无 $(function(){ // do something ....}）

jQuery 基本语法

通过jQuery 可以对元素查询修改操作，也可以添加事件。基本语法结构

  • 美元符号定义 jQuery
  • 选择符（selector）"查询"和"查找" HTML 元素
  • jQuery 的 action() 执行对元素的操作
 $(selector).action()

隐藏和显示

jQuery 提供了隐藏和显示元素的基本方法

  • hide() 隐藏元素
  • show() 显示元素
  • toggle() 切换显示和隐藏

示例

<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">toggle</button>
<script>
     $(document).ready(function(){
         // 执行代码
         $('#hide').click(function () {
             $('p').hide();
         })
         $('#show').click(function () {
             $('p').show();
         })
         // toggle 切换
         $('#toggle').click(function () {
             $('p').toggle();
         })
     });
</script>

事件

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
hover

click 事件

如果需要对当前元素操作， 这里的this是你定位的元素对象

<button id="btn">点我</button>
<button id="submit">提交按钮</button>
<script>
     $(document).ready(function(){
         // 执行代码
         $('#btn').click(function () {
             console.log(this);
             $(this).hide();
         })
     });
</script>

点击元素后，弹alert示例

<button id="btn">点我</button>
<button id="submit">提交按钮</button>
<script>
     $(document).ready(function(){
         // 执行代码
         $('#btn').click(function () {
             console.log(this);
             //$(this).hide();
             alert('提交成功！')
         })
     });
</script>

如果定位的是多个元素，可以一次性绑定同一事件

     $(document).ready(function(){
         // 绑定button标签click事件
         $('button').click(function () {
             console.log(this);
             //$(this).hide();
             alert('提交成功！')
         })
     });

但是通过id定位的元素，只会绑定第一个，因为一般id在页面上具有唯一性，不要重复，通过id查找的元素，只返回第一个

<button id="btn">点我</button>
<button id="btn">提交按钮</button>
<script>
     $(document).ready(function(){
         // 只会绑定第一个id为btn元素
         $('#btn').click(function () {
             console.log(this);
             //$(this).hide();
             alert('提交成功！')
         })
     });
</script>

鼠标事件

常用的一些鼠标事件

事件 触发时机
mouseenter() 鼠标指针穿过元素时
mouseleave() 当鼠标指针离开元素时
mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键
mouseup() 松开鼠标按钮
hover() 光标悬停事件
focus() 获得焦点时，发生 focus 事件
blur() 失去焦点时，发生 blur 事件

示例：鼠标按在文本位置，弹窗提示：本文禁止复制

<p>mouse鼠标事件</p>
<h3>文章标题</h3>
<p>hello world</p>
<button id="btn">点我</button>
<script>
     $(document).ready(function(){
         // 匹配p 或h3标签
         $('p, h3').mousedown(function () {
             console.log(this);
             //$(this).hide();
             alert('本文禁止复制，开通会员可复制')
         })
     });
</script>

posted @ 2022-05-31 10:09  上海-悠悠  阅读(194)  评论(0)  编辑  收藏  举报