什么是
jQuery
1
、jQuery
是一个
JavaScript
函数库。
2
、jQuery是一个轻量级的
"写的少,做的多"
的JavaScript
库。
3、jQuery库包含以下功能:HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和HTML DOM 遍历和修改。
jQuery
安装
jQuery
库是一个
JavaScript
文件,您可以使用
HTML
的
<script> 标签引用它:
<
head
>
<
script
src
=
"
jquery-1.10.2.min.js
"
></
script
>
</
head
>
2
、
从
CDN
中载入
jQuery,
如从
Google
中加载 jQuery
jQuery
入口函数与
JavaScript
入口函数的区别
jQuery 的入口函数是在 html 所有标签
(DOM)都加载之后,就会去执行。
JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。
{js的入口函数只有一个,不能重复。jQuery的入口函数可以有多个,可以重复}
{js的入口函数不可以简写。jQuery的入口函数可以简写}
{js入口函数要把外部的静态资源(js/css/images/dom)都加载完才会执行。
jQuery只需DOM加载完即可执行}
JQueryCSS方法
css() 方法设置或返回被选元素的一个或多个样式属性。
1、返回属性值 元素.css("CSS属性")
2、设置属性和属性值 元素.css("CSS属性","CSS属性值")
3、设置多个css属性。使用js对象格式
jQuery选择器
选择器:通过特定的符号选择指定的元素
基本选择器、层级选择器、过滤选择器、筛选选择器
基本选择器
名称
|
用法
|
描述
|
ID
选择器
|
$(“#id”);
|
获取指定ID的元素
|
类选择器
|
$(“.class”);
|
获取同一类class的元素
|
标签选择器
|
$(“div”);
|
获取同一类标签的所有元素
|
并集选择器
|
$(“div,p,li”);
|
使用逗号分隔,只要符合条件之一就可。获取所有的div、p、li元素
|
交集选择器(标签指定式选择器)
|
$(“div.redClass”);
|
注意选择器1和选择器2之间没有空格,class为redClass的div元素,注意区分后代选择器。
|
js的语法和jQuery的语法不能同时打点使用
层级选择器
名称
|
用法
|
描述
|
子代选择器
|
$(“ul>li”);
|
使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素
|
后代选择器
|
$(“ul li”);
|
使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等
|
过滤选择器
用法
|
描述
| |
:eq
(
index
)
|
$(
“
li
:eq(2)
”
).css(
“
color
”
,
”
red
”
);
|
获取到的li元素中,选择索引号为2的元素,索引号index从0开始。
|
:odd
|
$(
“
li
:odd
”
).css(
“
color
”
,
”
red
”
);
|
获取到的li元素中,选择索引号为奇数的元素
|
:even
|
$(
“
li
:even
”
).css(
“
color
”
,
”
red
”
);
|
获取到的li元素中,选择索引号为偶数的元素
|
总结:这类选择器都带冒号。
筛选选择器(方法)
用法
|
说明
| |
children(selector)
|
$(“ul”).children(“li”)
|
相当于$(“ul>li”),子类选择器
|
find(selector)
|
$(“ul”).find(“li”);
|
相当于$(“ul li”),后代选择器
|
siblings(selector)
|
$(“#first”).siblings(“li”);
|
查找兄弟节点,不包括自己本身。
|
parent()
|
$(“#first”).parent();
|
查找父亲
|
eq(index)
|
$(“li”).eq(2);
|
相当于$(“li:eq(2)”),index从0开始
|
next()
|
$(“li”).next()
|
找下一个兄弟
|
prev()
|
$(“li”).prev()
|
找上一次兄弟
|
Index()
|
$(“li”).index()
|
获取当前的位置(索引)
|
not()
|
$("p").not(".intro")
|
返回不带有类名 "intro" 的所有 <p> 元素
|
总结:筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。
jQuery
事件
1、单击事件
click
$
(
"
p
"
)
.
click
(
function
(){
// 动作触发后执行的代码!!
})
;
-
双击 事件 dblclick
$
(
"
p
"
)
.
dblclick
(
function
(){
$
(
this
)
.
hide
()
;
})
3、鼠标进入 mouseenter
4、鼠标离开 mouseleave
5、获取焦点 focus
6、失去焦点 blur
7、滚动事件 scroll
键盘事件
1、键盘按下 回调
$("user").keydown(function(){
}
)
2、键盘的抬起 keyup