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)的更多相关文章

  1. JavaScript学习07 内置对象

    JavaScript内置对象 图像对象 导航对象 窗口对象 屏幕对象 事件对象 历史对象 文件对象(重要) 锚点对象 链接对象 框架对象 表单对象(重要) 位置对象 JS Window 窗口对象:ht ...

  2. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  3. Java程序猿JavaScript学习笔记(14——扩大jQuery UI)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  4. Java程序猿的JavaScript学习笔记(9—— jQuery工具方法)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  5. 前端07 /jQuery初识

    前端07 /jQuery初识 目录 前端07 /jQuery初识 1.jquery介绍 1.1 jquery的优势 1.2 jquery是什么? 1.3 jquery的导入 2.jQuery的使用 2 ...

  6. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  7. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  8. 3、Javascript学习 - IT软件人员学习系列文章

    接下来,我们开始进入Javascript语言的学习. Javascript语言是一种解释性的语言,不同于ASP.NET.C#语言的这种编译性的语言.它随着HTML网页的发布而发布,就是说嵌入到HTML ...

  9. HTMl5/CSS3/Javascript 学习推荐资源

    HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...

随机推荐

  1. 在docker中使用nginx部署前端项目

    前言 部署了三个nginx用于前端项目, 并使用keepalived部署好热备, 所以总共有5个nginx 创建好nginx的文件和配置 根据上面的指令创建好目录 mkdir /home/web/ng ...

  2. nacos服务注册,ClientWorker狂刷日志的问题

    日志,启动项目就疯狂的刷ClientWorker日志 配置 本身项目中配置的依赖 nacos-discovery,nacos-config版本都是2021.1,但是编译版本是1.4.1 升级nacos ...

  3. 每日单词 —— cut to the chase

    cut to the chase: 词面意思--切奶酪 是美国俚语--开门见山:直奔主题 看一看相关的例句或者电影读白吧! 1. - 嫌疑人:Shall we cut to the chase ? 侦 ...

  4. ms17-010 永恒之蓝漏洞复现(CVE-2017-0143)

    0x01 首先对目标机的开放端口进行探测,我们可以使用探测神器nmap 发现开放的445端口,然后进行下一步的ms17-010的漏洞验证 0x02 打开MSF美少妇神器,用search命令搜索ms17 ...

  5. Linux常用命令 day day up系列3

    一.命令执行的优先级二.Linux目录结构三.cat--查看文件内容四.more--查看文件内容五.less--查看文件内容六.head.tail--查看文件内容七.wc--统计文件内容八.grep- ...

  6. 关于java异常处理的思考

    学习java的过程中,初学者更多的是为了实验而写代码,而不考虑实际情况中的人机交互过程中的一些问题. 在java项目中,更多的用户不会因为你给了某些限制提醒,他就一定会按照你所给的提示来输入或者操作, ...

  7. [刘阳Java]_MySQL数据优化总结_查询备忘录

    数据库优化是在后端开发中必备技能,今天写一篇MySQL数据优化的总结,供大家看看 一.MySQL数据库优化分类 我们通过一个图片形式来看看数据优化一些策略问题 不难看出,优化有两条路可以选择:硬件与技 ...

  8. springMVC-8-jackson使用

    springMVC默认的 Json 解决方案是 Jackson, 所以只需要导入 Jackson 的 jar, 即可使用 <!--Jackson--> <dependency> ...

  9. CSAPP:bomblab

    BOMBLAB实验总结 CSAPP实验BOMB,很头疼,看不懂,勉强做完了. 答案是这样的: Border relations with Canada have never been better. ...

  10. 使用ThinkPHP5.0.12连接Mongo数据库的经验

    本地开发环境xamppv3.2.2,ThinkPHP5.0.12版本. 由于之前开发项目时使用的是TP3.2.3+mongo数据库,也是在本地进行的,所以也进行过mongo数据库驱动的配置.详细方法可 ...