jQuery 第三章（语法+选择器+事件）

news/2024/7/11 1:05:24 标签: jquery, 前端, javascript

文章目录

  • 前言
  • jQuery 语法
    • 文档就绪事件
  • 选择器
    • 元素选择器
    • #id 选择器
    • .class 选择器
    • CSS 选择器
    • 更多实例
  • 独立文件中使用 jQuery 函数
  • jQuery 事件
    • jQuery 事件方法语法
    • 常用的 jQuery 事件方法
    • 比较keypress、keydown与keyup
  • 后言

前言

hello world欢迎来到前端的新世界

😜当前文章系列专栏：jQuery
🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

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

$(this).hide() - 隐藏当前元素

$(“p”).hide() - 隐藏所有段落

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

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

你对 CSS 选择器熟悉吗？

jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。

文档就绪事件

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

javascript"> $(document).ready(function(){

   // 开始写 jQuery 代码...

 });

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

  • 试图隐藏一个不存在的元素
  • 获得未完全加载的图像的大小
    提示：简洁写法（与以上写法效果相同）:
javascript"> $(function(){

   // 开始写 jQuery 代码...

 });

以上两种方式你可以选择你喜欢的方式实现文档就绪后执行jQuery方法。

选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有

元素:

javascript">$("p")

实例

用户点击按钮后，所有

元素都隐藏：

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

#id 选择器

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

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

javascript">$("#test")

实例

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

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

.class 选择器

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

语法如下：

javascript">$(".test")

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

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

CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

实例
下面的例子把所有 p 元素的背景颜色更改为红色：

javascript">$("p").css("background-color","red");

更多实例

语法描述
${“*”}选取所有元素
${“p.intro”}选取 class 为 intro 的

元素

$(“p:first”)选取第一个

元素

$(“ul li:first”)选取第一个
  • 元素的第一个
  • 元素
$(“ul li:first-child”)选取每个
  • 元素的第一个
  • 元素
$(“[href]”)选取带有 href 属性的元素
$(“a[target=‘_blank’]”)选取所有 target 属性值等于 “_blank” 的 元素
$(“a[target!=‘_blank’]”)选取所有 target 属性值不等于 “_blank” 的 元素
$(“:button”)选取所有 type=“button” 的 元素 和 元素
$(“tr:even”)选取偶数位置的
$(“tr:odd”)选取奇数位置的
元素 元素

独立文件中使用 jQuery 函数

如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。

当我们在教程中演示 jQuery 时，会将函数直接添加到 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：

javascript"><head>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

jQuery 事件

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

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

实例：

  • 在元素上移动鼠标。
  • 选取单选按钮
  • 点击元素
    在事件中经常使用术语"触发"（或"激发"）例如： “当您按下按键时触发 keypress 事件”。
    | | |
    |–|–|
    | | |
鼠标事件键盘事件表单事件文档/窗口事件
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleaveblurunload
hover

jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

javascript">$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

javascript">$("p").click(function(){      
  // action goes here!!        
});

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到过。

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTML 元素时执行。

在下面的实例中，当点击事件在某个

元素上触发时，隐藏当前的

元素：

javascript">$("p").click(function(){
  $(this).hide();
});

dblclick()

当双击元素时，会发生 dblclick 事件。

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

javascript">$("p").dblclick(function(){
  $(this).hide();
});

mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

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

javascript">$("#p1").mouseenter(function(){
  alert("You entered p1!");
});

mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

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

javascript">$("#p1").mouseleave(function(){
  alert("Bye! You now leave p1!");
});

mousedown()

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

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

javascript">$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});

mouseup()

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

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

javascript">$("#p1").mouseup(function(){
  alert("Mouse up over p1!");
});

hover()

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

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

javascript">$("#p1").hover(function(){
  alert("You entered p1!");
  },
  function(){
  alert("Bye! You now leave p1!");
});

focus()

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

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

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

javascript">$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

blur()

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

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

javascript">$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

比较keypress、keydown与keyup

  • keydown：在键盘上按下某键时发生，一直按着则会不断触发（opera浏览器除外），它返回的是键盘代码;
  • keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl - 等键按下并不会产生字符，所以监听无效，换句话说，只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
  • keyup：用户松开某一个按键时触发，与keydown相对，返回键盘代码.

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力


http://www.niftyadmin.cn/n/5203515.html

相关文章

算法笔记-第十章-动态规划2

算法笔记-第十章-动态规划2

算法笔记-第十章-动态规划2 最大连续子序列和最大连续子序列和的最优方案最长上升子序列最长上升子序列的最优方案最长公共子序列(LCS)最长回文字符串题目一题目二 最大连续子序列和 对于最大连续数组求和的问题&#xff0c;设置一个dp数组&#xff0c;然后进行分开讨论边界的问…
阅读更多...
《向量数据库指南》——向量数据库Milvus Cloud搭建Excel公式编辑器助手

《向量数据库指南》——向量数据库Milvus Cloud搭建Excel公式编辑器助手

引言 在日常工作中，Excel是我们经常使用的办公工具，而熟练应用Excel公式对于提高工作效率非常重要。然而，有时候我们会遇到一些复杂的需求，需要用到较为专业的Excel公式，而这正是Excel公式编辑器助手的用武之地。本文将介绍如何利用向量数据库Milvus Cloud搭建GPT大模型和…
阅读更多...
GZ033 大数据应用开发赛题第10套

GZ033 大数据应用开发赛题第10套

2023年全国职业院校技能大赛 赛题第10套 赛项名称&#xff1a; 大数据应用开发 英文名称&#xff1a; Big Data Application Development 赛项组别&#xff1a; 高等职业教育组 赛项编号&#xff1a; GZ033 …
阅读更多...
C#中密封类和密封方法

C#中密封类和密封方法

目录 一、定义与特性 1.何时使用密封类 2.定义 3.特性 二、示例 如果所有的类都可以被继承&#xff0c;很容易导致类的层次结构变得十分复杂。使对类的理解和使用变得十分困难。为了避免滥用继承&#xff0c;C#中提出了密封类的概念。 一、定义与特性 密封类可以用来限制…
阅读更多...
springboot2自动加载sql文件

springboot2自动加载sql文件

文章目录 1. Spring Boot 2 初始化数据库脚本 data.sql & user.sql2. 文件放置的位置 如下表&#xff1a;3. application.yml 配置写法 1. Spring Boot 2 初始化数据库脚本 data.sql & user.sql user.sql &#xff1a;数据表结构 data.sql &#xff1a;数据内容 2. 文…
阅读更多...
趣学python编程(六、关于蓝桥杯比赛)

趣学python编程(六、关于蓝桥杯比赛)

蓝桥杯全国软件和信息技术专业人才大赛简称“蓝桥杯”&#xff0c;是由工业和信息化部人才交流中心举办的国内最大的信息技术竞赛。为促进中小学科技创新&#xff0c;提升中小学生逻辑思维&#xff0c;发现和培养面向未来的科技精英人才。 蓝桥杯介绍 蓝桥杯全国软件和信息技术…
阅读更多...
「L2C」型行业从线索到成交，听懂客户之「声」是关键

「L2C」型行业从线索到成交，听懂客户之「声」是关键

存量经营时代下&#xff0c;营销变得越来越难。无论是稳流量&#xff0c;或是促活跃&#xff0c;转化率就是难以提升。 相比传统快消行业&#xff0c;线索型&#xff08;L2C&#xff0c;Leads to Cash&#xff09;行业因为客单价高、决策周期长、用户触点分散等特性&#xff0…
阅读更多...
后端真批量新增的使用

后端真批量新增的使用

1,添加真批量新增抽象接口 public interface EasyBaseMapper extends BaseMapper { /** * 批量插入 仅适用于mysql * * return 影响行数 */ Integer insertBatchSomeColumn(Collection entityList); } 2,新增类,添加真批量新增的方法 public class InsertBatchSqlInjector ext…
阅读更多...
最新文章

Copyright @ 2022~2023