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 - 当浏览器窗口大小被调整时

---