JQuery基础

Posted 2020-10-06 光影易逝

什么是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(): 当元素失去焦点时触发的事件