jQuery笔记
jQuery 是一个 JavaScript 函数库
jQuery 库包含以下特性:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
一、引入jQuery:
可以到jQuery官网http://jquery.com/download 下载js文件;然后在html中引入;
jQuery语法:
$(selector).action( )
$美元符号定义 jQuery选择符
(selector)“查询”和“查找” HTML 元素
jQuery 的 action( ) 执行对元素的操作
示例:
$(this).hide( ) - 隐藏当前元素
$("p").hide( ) - 隐藏所有段落
$(".test").hide( ) - 隐藏所有 class="test" 的所有元素
$("#test").hide( ) - 隐藏所有 id="test" 的元素
jQuery 元素选择器:
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器:
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery 事件:
$(document).ready(function) | 将函数绑定到文档的就绪事件(当文档完成加载时) |
$(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
二、jQuery 效果:
1.隐藏/显示
语法:$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
语法:$(selector).toggle(speed,callback);
使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素,并隐藏已显示的元素。
2.淡入淡出
fadeIn( ) 淡入 语法:$(selector).fadeIn(speed,callback);
fadeOut( ) 淡出 语法:$(selector).fadeOut(speed,callback);
fadeToggle( ) 切换淡入淡出 语法:$(selector).fadeToggle(speed,callback);
fadeTo( ) 给定的不透明度(值介于 0 与 1 之间) 语法:$(selector).fadeTo(speed,callback);
3.滑动
slideDown( ) 向下滑动元素 语法:$(selector).slideDown(speed,callback);
slideUp( ) 向上滑动元素 语法:$(selector).slideUp(speed,callback);
slideToggle( ) 切换向上向下滑动 语法:$(selector).slideToggle(speed,callback);
4.动画
animate( ) 方法用于创建自定义动画
语法:$(selector).animate({params},speed,callback);
提示:默认地,所有 HTML 元素都有一个静态位置,且无法移动。
如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
5.stop( )
语法:$(selector).stop(stopAll,goToEnd);
stop( ) 方法用于停止动画或效果,在它们完成之前。
stop( ) 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
三、jQuery HTML
1.获取内容
text()设置或者返回所选元素的文本内容
html()设置或返回所选元素的html内容(包含标签)
val()设置或返回表单字段的值
2.获取属性
attr()获取的是所选元素的直接属性
3.添加方法
append()在被选元素内的结尾添加 添加多个元素用 , 隔开
prepend()在被选元素内的开头添加 添加多个元素用 , 隔开
after()在被选元素之后插入内容 添加多个元素用 , 隔开
before()在被选元素之前插入内容 添加多个元素用 , 隔开
4.删除元素
remove()删除被选元素(及其他的子元素) 删除的时候是彻底移除 还能接受参数进行过滤
empty()删除被选元素的子元素 清空其子元素 本身不会清除
5.获取并设置css类
addclass()向被选元素添加一个多个类 中间用 , 隔开
removeclass()删除一个多个类 中间用 , 隔开
togglecalss()进行添加/删除类的切换
caa()设置或返回样式属性 一个或多个 他与attr相似 但是attr是返回的直接属性 css是返回的是样式
6.尺寸
width() height() 不包括内边距 边框 外边距
innerWidth() innerHeight() 包括内边距 不包括边框 和外边距
outerWidth() outerHeight() 包括内边距和边框 不包括外边距
outerWidth(true) outerHeight(true) 包括内边距和边框外边距
$(document).height()/width() 设置文档宽高
$(window).height()/width() 设置窗口宽高
三、jQuery 遍历
1.所有的父级
parent()返回被选元素的直接父级(爸爸)
parents()返回被选元素的所有的父级
arentUntil()返回介于俩个被选元素的之间所有的父级元素 但是不包括parentsUntli("div")括号里面的
2.所有的子级
childen()返回被选元素的所有的子级
find("div") 返回被选元素的所有div子级
find("*") 返回被选元素的所有子级
3.同胞 兄弟
siblings() f返回被选元素的所有兄弟元素
next() 返回被选元素的下一个兄弟元素
nextAll() 返回被选元素跟随之后的所有兄弟元素
nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素 不包括括号内的元素
prev(), prevAll() & prevUntil() 方法 是上的意思 与next() nextAll() nextUntli()相反 它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。
4.过滤
first() 返回被选元素的首个元素
last() 返回被选元素的最后一个元素
eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素(索引号 1)