什么是jQuery?
JQuery是一个JavaScript函数库,主要包含以下功能:
1、HTML元素提取、操作
2、CSS操作
3、HTML事件操作
4、JavaScript特效和动画
5、HTNL DOM便利和修改
6、AJAX
7、Utillties
JQuery语法:
基础语法:$(selector).action
1、美元符号定义jQuery
2、选择符(selector)‘查询’和‘查找’HTML元素
3、jQuery的action()执行对元素的操作
实例:
$(this).hide():隐藏当前元素
$(“p”).hide(): 隐藏所有<p>元素
$("p.test").hide(): 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
语法
$("*") | 选取所有元素 |
$(this) | 选取当前 HTML 元素 |
$("p.intro") | 选取 class 为 intro 的 <p> 元素 |
$("p:first") | 选取第一个 <p> 元素 |
$("ul li:first") | 选取第一个 <ul> 元素的第一个 <li> 元素 |
$("ul li:first-child") | 选取每个 <ul> 元素的第一个 <li> 元素 |
$("[href]") | 选取带有 href 属性的元素 |
$("a[target='_blank']") | 选取所有 target 属性值等于 "_blank" 的 <a> 元素 |
$("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 |
$(":button") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 |
$("tr:even") | 选取偶数位置的 <tr> 元素 |
$("tr:odd") | 选取奇数位置的 <tr> 元素 |
JQuery选择器的类型:
1、 元素选择器:$(“p”)
2、 #id选择器:#(“#p”)
3、.class选择器:$(“.p”)
JQuery事件:
页面对不同访问者的响应叫做事件
常见的DOM事件:
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave |
| blur | unload |
常用的JQuery事件方法:
$(document).ready() 方法允许我们在文档完全加载完后执行函数。
click(): 是当单击按钮时被触发调用一个函数;
dblclick(): 当双击按钮是被触发调用的一个函数;
mouseenter(): 当鼠标指针穿过元素时触发的事件;
mouseleave(): 当鼠标指针离开元素时触发的事件;
mousedown(): 当鼠标指针移动到元素上方,并按下鼠标按键时触发的事件;
mouseup(): 当在元素上松开鼠标按钮时触发的事件;
hover(): 用于模拟光标悬停事件;
focus(): 当元素获得焦点时触发的事件
blur(): 当元素失去焦点时触发的事件