1.jQuery是什么?
jQuery 是一个 JavaScript 库 – 轻量级的"写的少,做的多"
jQuery功能:
2.jQuery语法
(1)入口函数:检测jq是否引入成功
//原型
$(document).ready(function(){
...
})
//缩写
$(function(){
...
})
jquery和javascript入口函数之间的区别:
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。
JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。
load和ready的区别:
window.onload | $(document).ready() | |
---|---|---|
执行时机 | 必须等待网页全部加载完毕(包括图片等),然后在执行包裹的代码 | 只需要等待网页中的DOM结构加载完毕,就能执行包裹的代码 |
执行次数 | 只能那个执行一次,如果执行第二次,那么第一次的执行就会被覆盖 | 可以执行多次,后续的执行都不会覆盖上一次 |
(2)语法格式:
$('selector').action()
'$' 表示一个全局对象jquery
(3)jQuery定义多种类型的选择器:
选择器类型 | 语法格式 | 含义 |
---|---|---|
层次选择器 | $('_>_') | 子元素选择器 |
$('_空格_') | 后代元素选择器 | |
$('_+_') | 紧邻下一个元素选择器 | |
$('_~_') | 兄弟元素选择器 | |
过滤选择器 | $('li:first/last') | 第一个/最后一个li |
$('li:even/odd') | 下标为偶/奇数的li | |
$('li:gt(5)/lt(4)') | 下标大于5/下标小于4的li | |
$('li:eq(4)') | 下标等于4的li | |
内容过滤选择器 | $('div:contains('Runob')') | 包含Runbo文本的div元素 |
$('div:has(seletor)') | 包含有选择器匹配的元素 | |
$('tb:empty') | 不包含子元素或文本的空元素 | |
$('tb:parent') | 包含子元素或文本的空元素 | |
可见性过滤选择器 | $('li:visible') | 所有可见的li元素 |
$('li:hidden') | 所有不可见的li元素 | |
属性过滤选择器 | $('div:[id ='123']') / $('div:[id !='123']') | id属性值等于/不等于123的div元素 |
$('div:[id ^='123']') / $('div:[id $='123']') | id属性值以123开头/结尾的div元素 | |
$('div:[id *='123']') | id属性值包含123的div元素 | |
状态过滤选择器 | $('input:enabled/disabled/checked') | 可用/不可用/选用的input元素 |
表单过滤选择器 | $(':input') | 匹配所有的input(input,textarea,select,button)元素 |
$(':text') | 匹配所有的单行文本框(password/radio/checkbox/submit/reset/button/file) |
3.jQuery事件
常见的DOM 事件:
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter(mouseleave) | keyup | focus | scroll |
mousedown(mouseup) | blur | unload | |
hover |
事件方法语法:
//以click事件为例:
$(document).ready(function(){
$(' ').click(function(){
//click执行事件函数代码
})
})
4.jQuery遍历
根据其相对于其他元素的关系来"查找"(或选取)HTML 元素
5.jQuery效果
- 显示/隐藏
hide() show() toggle()
参数’1000’ ->规定隐藏/显示的速度,可以取slow,fast或毫秒
toggle() 显示被隐藏的元素,隐藏已显示的元素
<!--隐藏-->
$("#hide").click(function(){
$("p").hide(1000);
});
<!--显示-->
$("#show").click(function(){
$("p").show(1000);
});
<!--切换hide()和show()-->
$("button").click(function(){
$("p").toggle();
});
-
淡入/淡出
fadeIn() 淡入已隐藏的元素
fadeOut() 淡出可见元素
fadeToggle() 切换fadeIn()和fadeOut()元素
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。 如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
fadeTo() 允许渐变为诶定的不透明度(值介于0和1之间)
-
滑动
slideDown() 向下滑动元素
slideUp() 向上滑动元素
slideToggle() 切换slideDown()和slideUp()元素
如果元素向下滑动,则 slideToggle() 可向上滑动它们。 如果元素向上滑动,则 slideToggle() 可向下滑动它们。
-
动画
animate() 方法用于创建自定义动画
语法:$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用。它把 < div> 元素往右边移动了 250 像素:
$("button").click(function(){
$("div").animate({left:'250px'});
});
- 停止动画
stop() 方法用于停止动画或效果,在它们完成之前。适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
格式: $(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此,默认地,stop() 会清除在被选元素上指定的当前动画。
6.jQuery添加//删除元素
-
添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
append/prepend与after/before的区别:
append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。
-
删除元素
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
7.jQuery获取内容或属性
-
获取内容
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值 -
获取属性
attr() -用于获取属性值
attr 和 prop 的区别介绍:
对于 HTML 元素本身就带有的固有属性,在处理时,使用 prop 方法。
对于 HTML 元素我们自己自定义的 DOM 属性,在处理时,使用 attr 方法。
8.jQuery 获取/设置css属性
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性