一、 文档就绪事件
在JQuery中所有的代码都是放在“文档就绪事件”中;
$(document).ready(function(){
// 开始写 jQuery 代码...}
);
简洁写法:
$(function(){
// 开始写 jQuery 代码...}
);
二、选择器
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法: $(selector).action()
美元符号定义 jQuery
选择符(selector)"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
Query 中所有选择器都以美元符号开头:$()。
JQuery中选择器是个重要的知识点,多种多样的选择器。
1. id选择器(以#开关):
$("#test").hide() - 隐藏所有 id="test" 的元素;
2. 类名选择器(以.开头):
$(".test").hide() - 所有带有 class="test" 属性的元素都隐藏;
3. 标签(种类)选择器:
$("p").hide() - 隐藏所有<p>标签;
$("p.classname") - 选取class为classname的<p>元素;
$("p:first") - 选取第一个 <p> 元素;
$("ul li:first") - 选取第一个 <ul> 元素的第一个 <li> 元素;
$("ul li:first-child") - 选取每个 <ul> 元素的第一个 <li> 元素;
$(":button") - 选取所有 type="button" 的 <input> 元素 和 <button> 元素;
$("tr:even") - 选取偶数位置的 <tr> 元素
$("tr:odd") - 选取奇数位置的 <tr> 元素
4. 属性选择器([attr])
$("[href]") - 选取带有 href 属性的元素;
$("a[target='_blank']") - 选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']") - 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
5. 特殊选择器
$("*") - 选取所有元素;
$(this) - 选取当前 HTML 元素;
三、事件
和JavaScript不同的是JQuery不需要加"on",例如:JavaScript中onClick,JQuery中click就行了。
实例:$("p").click(function(){
$(this).hide();
});
1. 常用事件
click - 当点击元素时,会发生 click 事件。
dblclick - 当双击元素时,会发生 dblclick 事件。
mouseenter - 当鼠标指针穿过元素时,会发生 mouseenter 事件.
mouseleave - 当鼠标指针离开元素时,会发生 mouseleave 事件.
mousedown - 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件.
mouseup - 当在元素上松开鼠标按钮时,会发生 mouseup 事件.
hover(fun1,fun2) - hover()方法用于模拟光标悬停事件,类似于mouseenter事件和mouseleave事件的结合
fun1:指定鼠标移到元素内的事件;
fun2:指定鼠标移出元素外的事件;
focus() - 当元素获得焦点时,发生 focus 事件.
blur() - 当元素失去焦点时,发生 blur 事件.
更多事件详看:https://www.runoob.com/jquery/jquery-events.html