JavaScript学习07(jQuery)
jQuery
什么是JQuery
jQuery 由 John Resig 于 2006 年创建。它旨在处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画和 Ajax。
十多年来,jQuery 一直是世界上最受欢迎的 JavaScript 库。
但是,在 JavaScript Version 5(2009)之后,大多数 jQuery 实用程序都可以通过几行标准 JavaScript 来解决。
选择器
通过 id 来查找 HTML 元素
var myElement = $("#id01");
通过标签名来查找 HTML 元素
var myElements = $("p");
通过类名来查找 HTML 元素
var myElements = $(".intro");
通过 CSS 选择器查找 HTML 元素
var myElements = $("p.intro");
操作DOM
设置文本内容
myElement.text("Hello China!");
获取文本内容
var myText = myElement.text();
设置 HTML 内容
var myElement.html("<p>Hello World</p>");
获取 HTML 内容
var content = myElement.html();
隐藏 HTML 元素
myElement.hide();
显示 HTML 元素
myElement.show();
样式化 HTML 元素
myElement.css("font-size","35px");
删除元素
$("#id").remove();
获取父元素
var myParent = myElement.parent();
事件
输入事件
- onblur - 当用户离开输入字段时
- onchange - 当用户更改输入字段的内容时
- onchange - 当用户选择下拉值时
- onfocus - 当输入字段获得焦点时
- onselect - 当输入文本被选取时
- onsubmit - 当用户点击提交按钮
- onreset - 当用户点击重置按钮
- onkeydown - 当用户按下/按住某个键时
- onkeypress - 当用户按下/按住某个键时
- onkeyup - 当用户释放按键时
- onkeyup - 当用户释放按键时
- onkeydown vs onkeyup - 两者
鼠标事件
- onmouseover/onmouseout - 当鼠标经过一个元素时
- onmousedown/onmouseup - 当按下/释放鼠标按钮时
- onmousedown - 当按下鼠标时:提示点击了哪个元素
- onmousedown - 当点击鼠标时:提示点击了哪个按钮
- onmousemove/onmouseout - 当把鼠标指针移入/移出 div 时
- onmouseover/onmouseout - 当把鼠标指针移入/移出图像时
- onmouseover - 将鼠标悬停在图像映射上
点击事件
- 对 onclick 事件作出反应
- onclick - 单击按钮时
- ondblclick - 双击文本时
加载事件
- onload - 页面加载后
- onload - 图像加载后
- onerror - 当图像加载时发生错误
- onunload - 当浏览器关闭文档时
- onresize - 当浏览器窗口大小被调整时
JavaScript学习07(jQuery)的更多相关文章
- JavaScript学习07 内置对象
JavaScript内置对象 图像对象 导航对象 窗口对象 屏幕对象 事件对象 历史对象 文件对象(重要) 锚点对象 链接对象 框架对象 表单对象(重要) 位置对象 JS Window 窗口对象:ht ...
- Java程序猿的JavaScript学习笔记(8——jQuery选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记(14——扩大jQuery UI)
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- Java程序猿的JavaScript学习笔记(9—— jQuery工具方法)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- 前端07 /jQuery初识
前端07 /jQuery初识 目录 前端07 /jQuery初识 1.jquery介绍 1.1 jquery的优势 1.2 jquery是什么? 1.3 jquery的导入 2.jQuery的使用 2 ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- 学习使用 jQuery & CSS3 制作照片堆栈效果
在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...
- 3、Javascript学习 - IT软件人员学习系列文章
接下来,我们开始进入Javascript语言的学习. Javascript语言是一种解释性的语言,不同于ASP.NET.C#语言的这种编译性的语言.它随着HTML网页的发布而发布,就是说嵌入到HTML ...
- HTMl5/CSS3/Javascript 学习推荐资源
HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...
随机推荐
- 在docker中使用nginx部署前端项目
前言 部署了三个nginx用于前端项目, 并使用keepalived部署好热备, 所以总共有5个nginx 创建好nginx的文件和配置 根据上面的指令创建好目录 mkdir /home/web/ng ...
- nacos服务注册,ClientWorker狂刷日志的问题
日志,启动项目就疯狂的刷ClientWorker日志 配置 本身项目中配置的依赖 nacos-discovery,nacos-config版本都是2021.1,但是编译版本是1.4.1 升级nacos ...
- 每日单词 —— cut to the chase
cut to the chase: 词面意思--切奶酪 是美国俚语--开门见山:直奔主题 看一看相关的例句或者电影读白吧! 1. - 嫌疑人:Shall we cut to the chase ? 侦 ...
- ms17-010 永恒之蓝漏洞复现(CVE-2017-0143)
0x01 首先对目标机的开放端口进行探测,我们可以使用探测神器nmap 发现开放的445端口,然后进行下一步的ms17-010的漏洞验证 0x02 打开MSF美少妇神器,用search命令搜索ms17 ...
- Linux常用命令 day day up系列3
一.命令执行的优先级二.Linux目录结构三.cat--查看文件内容四.more--查看文件内容五.less--查看文件内容六.head.tail--查看文件内容七.wc--统计文件内容八.grep- ...
- 关于java异常处理的思考
学习java的过程中,初学者更多的是为了实验而写代码,而不考虑实际情况中的人机交互过程中的一些问题. 在java项目中,更多的用户不会因为你给了某些限制提醒,他就一定会按照你所给的提示来输入或者操作, ...
- [刘阳Java]_MySQL数据优化总结_查询备忘录
数据库优化是在后端开发中必备技能,今天写一篇MySQL数据优化的总结,供大家看看 一.MySQL数据库优化分类 我们通过一个图片形式来看看数据优化一些策略问题 不难看出,优化有两条路可以选择:硬件与技 ...
- springMVC-8-jackson使用
springMVC默认的 Json 解决方案是 Jackson, 所以只需要导入 Jackson 的 jar, 即可使用 <!--Jackson--> <dependency> ...
- CSAPP:bomblab
BOMBLAB实验总结 CSAPP实验BOMB,很头疼,看不懂,勉强做完了. 答案是这样的: Border relations with Canada have never been better. ...
- 使用ThinkPHP5.0.12连接Mongo数据库的经验
本地开发环境xamppv3.2.2,ThinkPHP5.0.12版本. 由于之前开发项目时使用的是TP3.2.3+mongo数据库,也是在本地进行的,所以也进行过mongo数据库驱动的配置.详细方法可 ...