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

Posted 上海-悠悠

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 中发生某些事件时所调用的方法。

鼠标事件键盘事件表单事件文档/窗口事件
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleaveblurunload
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>

以上是关于JavaScript 学习-35.jQuery 基础语法与事件的主要内容,如果未能解决你的问题,请参考以下文章

前段进阶必备:JavaScript 内存机制

如何在 JavaScript 中创建抽象基类?

javascript `errorWrapper`可组合基函数

如何学习ReactJS:

JavaScript -- 筑基

如何在 JavaScript 中创建无法实例化的抽象基类