学习jQuery的第一天

最新推荐文章于 2024-01-20 21:49:50 发布

ZYS_Future

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量88

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_46389594/article/details/104543384

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery 简介

jQuery是一个JavaScript函数库。
jQuery 库可以通过一行简单的标记被添加到网页中。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：

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

jQuery 安装

1. 从 jquery.com 下载 jQuery 库

 <head>
 <script src="jquery-1.10.2.min.js"></script>
 </head>

2. 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

- 百度 CDN

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

- 谷歌 CDN

jQuery 语法

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

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

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

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 中所有选择器都以美元符号开头：$()。

1.元素选择器$("p")
2 #id 选择器$("#test")
3.class 选择器$(".test")
4 CSS 选择器$("p").css("background-color","red");
5 选取所有元素$("*")
6 选取当前 HTML 元素$(this)

独立文件中使用 jQuery 函数

<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 事件

jQuery 是为事件处理特别设计的。

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>

<script>
$(document).ready(function(){

// $ (document)所有元素的集合  ready() 方法允许我们在文档完全加载完后执行函数function()

  $("p").click(function(){
  
//  当按钮点击事件click（）点击p元素  被触发时会调用一个函数function()

    $(this).hide();
//  该函数(this)在用户点击 HTML 元素时执行   hide()隐藏

  });
});
</script>
</head>

<body>
<p>你点我，我就会消失。</p>
</body>
</html>

常用的 jQuery 事件方法

允许我们在文档完全加载完后执行函数$(document).ready()
当按钮点击事件被触发时会调用一个函数click()
当双击元素时，会发生 dblclick（） 事件
当鼠标指针穿过元素时，会发生 mouseenter（） 事件
当鼠标指针离开元素时，会发生 mouseleave（） 事件
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown（） 事件
当在元素上松开鼠标按钮时，会发生 mouseup （）事件
用于模拟光标悬停事件hover()
当元素获得焦点时，发生 focus（）事件
当元素失去焦点时，发生 blur（）事件

比较keypress、keydown与keyup

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

ZYS_Future

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习jQuery的第一天

jQuery 简介jQuery是一个JavaScript函数库。jQuery 库可以通过一行简单的标记被添加到网页中。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。jQuery库包含以下功能：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilitiesj...
复制链接

扫一扫

专栏目录