JavaScript学习笔记（七）

最新推荐文章于 2024-10-16 16:26:58 发布
最新推荐文章于 2024-10-16 16:26:58 发布
阅读量98 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43894527/article/details/114799101
版权

JavaScript学习笔记（七）

  • 学习内容：JavaScript 库 - jQuery

CDN 内容分发网络

  • CDN (Content Delivery Network) 解决了这个问题。CDN 是包含可分享代码库的服务器网络。

引用jQuery

  •   <!DOCTYPE html>
  <html>
  <head>
  <script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js">
  </script>
  </head>
  <body>
  </body>
  </html>

  •   //百度 CDN:
  <head>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
  </script>
  </head>

jQuery描述

  • jQuery 函数是 $() 函数（jQuery 函数）。如果向该函数传递 DOM 对象，它会返回 jQuery 对象，带有向其添加的 jQuery 功能。

  • jQuery 允许您通过 CSS 选择器来选取元素。

  •   //JavaScript 方式：
  function myFunction()
  {
      var obj=document.getElementById("h01");
      obj.innerHTML="Hello jQuery";
  }
  onload=myFunction;
  
  //jQuery 方式：
  function myFunction()
  {
      $("#h01").html("Hello jQuery");
  }
  $(document).ready(myFunction);

jQuery 语法

  • jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
  • 基础语法：$(selector).action()
  • 美元符号定义 jQuery
  • 选择符（selector）“查询"和"查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

实例

  • $(this).hide() - 隐藏当前元素
  • $(“p”).hide() - 隐藏所有

    元素

  • $(“p.test”).hide() - 隐藏所有 class=“test” 的

    元素

  • $("#test").hide() - 隐藏 id=“test” 的元素

文档就绪事件

  • 所有 jQuery 函数位于一个 document ready 函数中
  • 防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作
  • $(document).ready(function(){});||$(function(){});

jQuery选择器

  • 允许对 HTML 元素组或单个元素进行操作。
  • 基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。
  • 所有选择器都以美元符号开头：$()。

元素选择器

  • 基于元素名选取元素。

  • 用户点击按钮后，所有

    元素都隐藏

    •   $(document).ready(function(){
    $("button").click(function(){
      $("p").hide();
    });
  });

#id 选择器

  • jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

  • 通过 id 选取元素语法如下：$("#test")

  • 用户点击按钮后，有 id=“test” 属性的元素将被隐藏

    •   $(document).ready(function(){
    $("button").click(function(){
      $("#test").hide();
    });
  });

.class 选择器

  • jQuery 类选择器可以通过指定的 class 查找元素。

  • 语法如下：$(".test")

  • 用户点击按钮后所有带有 class=“test” 属性的元素都隐藏

    •   $(document).ready(function(){
    $("button").click(function(){
      $(".test").hide();
    });
  });

更多实例

  • image-20210314181106242
  • image-20210314181130939

jQuery 事件

什么是事件？

  • 页面对不同访问者的响应叫做事件。

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

    • 实例：
      • 在元素上移动鼠标。
      • 选取单选按钮
      • 点击元素

  • 在事件中经常使用术语"触发"（或"激发"）例如： “当您按下按键时触发 keypress 事件”。

  • 常见的DOM事件

    • image-20210314190635142

jQuery 事件方法语法

  • 在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
  • 页面中指定一个点击事件：
    • $("p").click();
  • 下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
    • $("p").click(function(){ // 动作触发后执行的代码!! });

常见的jQuery事件方法

$(document).ready()
  • $(document).ready() 方法允许我们在文档完全加载完后执行函数。
click()
  • click() 方法是当按钮点击事件被触发时会调用一个函数。
dblclick()
  • 当双击元素时，会发生 dblclick 事件。
  • dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数
mouseenter()
  • 当鼠标指针穿过元素时，会发生 mouseenter 事件。
  • mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数
mouseleave()
  • 当鼠标指针离开元素时，会发生 mouseleave 事件。
  • mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数
mousedown()

  • 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

  • mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数

mouseup()

  • 当在元素上松开鼠标按钮时，会发生 mouseup 事件。

  • mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数

hover()

  • hover()方法用于模拟光标悬停事件。

  • 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

focus()

  • 当元素获得焦点时，发生 focus 事件。

  • 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

  • focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数

blur()
  • 当元素失去焦点时，发生 blur 事件。

个元素时，会触发指定的第二个函数(mouseleave)。

focus()

  • 当元素获得焦点时，发生 focus 事件。

  • 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

  • focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数

blur()

  • 当元素失去焦点时，发生 blur 事件。

  • blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数

Shavwv
关注
专栏目录
jQuery中鼠标事件mousexxx的执行顺序
wuyujin1997的博客
03-28 849
jQuery 鼠标事件顺序 mouseenter 鼠标移入元素上方 mouseover 鼠标在元素上方 mousemove 鼠标在元素上方且移动。 mouseout 鼠标出了元素边界 mouseleave 鼠标完全离开元素 mousedown 按下鼠标 mouseup 松开鼠标 顺序：enter -> over -> move(多次) -> out ...
jQuery 学习01——定义、安装引用、语法、选择器及事件
weixin_30347335的博客
08-30 83
什么是 jQuery ？ jQuery是一个JavaScript函数库。 jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 提示：除此之外，Jqu...
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 1122
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
javascript学习笔记——上
weixin_64574004的博客
10-07 922
​ 1，HTML定义了网页的内容，CSS定义了网页的布局和网页中内容的样式，而JavaScript控制了网页的行为。​ 2，javascript是一种脚本语言。​ 3，javascript的主要使用范围​ **JavaScript：直接写入HTML输入流：**ducument.write(“HTML语句”)​ **JavaScript：对事件的反应：**onclick​ **JavaScript：改变HTML内容：**DOM。
Javascript入门学习笔记
weixin_61370021的博客
04-27 4671
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
JavaScript学习笔记
qq_53388077的博客
03-30 1612
JavaScript是一门跨平台、面向对象的脚本语言，是用来控制网页行为的。脚本语言通常直接解释执行，不需要编译，缩短了传统编程语言的运行过程/*定义格式：var 对象名={属性名1：属性值1，属性名2：属性值2，属性名3：属性值3，函数名称：function(形参列表){}*/var user={age:20,alert("用膳");//简化方法：eat(){alert("用膳");
《高性能JavaScript》学习笔记
Leon_Chenl的博客
05-21 1105
当DOM的变化影响了元素的几何属性（宽和高）——比如改变边框宽度或给段落增加文字，导致行数增加——浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。一旦空闲，队列中的下一个任务就被重新提取出来并运行。并不是所有的DOM变化都会影响几何属性，例如改变一个元素的背景色不会影响它的宽和高，这种情况下只会发生一次重绘，因为元素的布局并没有改变。对象成员包括属性和方法，当一个被命名的成员引用了一个函数，该成员就被称为一个“方法”，相反，引用了非函数类型的成员就被称为“属性”。
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
小白JavaScript学习笔记----JavaScript 进阶
weixin_51877011的博客
05-05 1916
垃圾回收机制(Garbage Collection) 简称 GCJS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收。正因为垃圾回收器的存在，许多人认为JS不用太关心内存管理的问题但如果不了解JS的内存管理机制，我们同样非常容易成内存泄漏（内存无法被回收）的情况不再用到的内存，没有及时释放，就叫做内存泄漏面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。举个栗子：蛋炒饭。
JavaScript基础第一弹学习笔记
qq_55961367的博客
07-13 1739
JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。
javascript学习笔记
11-24
学习JavaScript时，了解这些基础知识是至关重要的。随着深入学习，你将接触到更高级的概念，如闭包、异步编程（回调函数、Promise、async/await）、模块系统以及现代框架如React、Vue和Angular的使用。JavaScript的...
【JavaScript】移动色块案例 实现一个可以拖动并且在拖动过程中会自动改变颜色的色块（JS 事件监听器）
m0_66584716的博客
10-11 1349
- **移动色块**：用户可以通过鼠标按住并拖动页面上的红色方块（`#blocks`）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。 - **显示当前位置**：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（`#positionDisplay`）中。 - **自动变色**：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 `getRandomColor()` 函数生成一个
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 670
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 568
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)
最新发布
源码好优多
10-16 722
请联系我获取更详细的演示视频。
如何使用Python爬虫处理JavaScript动态加载的内容？
Z_suger7的博客
10-11 842
JavaScript动态加载的内容为爬虫带来了挑战，但也提供了新的机遇。通过使用Selenium、分析API请求或Pyppeteer，我们可以有效地爬取这些动态内容。这些方法各有优势，Selenium适合模拟复杂的用户交互，API请求适合直接获取数据，而Pyppeteer则提供了更强大的JavaScript控制能力。在实际应用中，开发者应根据目标网站的特点和需求选择合适的方法。随着技术的不断发展，我们也需要不断学习和适应新的工具和方法，以保持在数据获取领域的竞争力。复制再试一次分享。
React入门 9：React Router
pingguocu3的博客
10-13 556
路由routing）就是通过互联的网络把信息从源地址传输到目的地址的活动。以上是中文维基百科对路由的解释。通俗的来讲，把一个地方的信息传输到他想去的目的地的过程，就叫路由。
基于SpringBoot的冬奥会科普平台
weixin_53180424的博客
10-16 236
系统展示 【2024最新】基于Java+SpringBoot+Vue+MySQL的，前后端分离。
JavaScript学习笔记：从基础到DOM编程
"这是一份全面的JavaScript学习笔记，涵盖了从CSS样式表基础到JavaScript语法、DOM编程等多个方面，旨在帮助读者深入理解并掌握JavaScript语言。" 在这份笔记中，作者首先介绍了CSS样式表的基本概念，包括什么是CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值