jQuery
程序员文章站
2022-07-14 11:01:37
...
jQuery
-
介绍:jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
-
特点:
1.一款轻量级的js框架。
2.链式表达式。
3.事件、样式、动画支持。
4.Ajax操作支持。
5.跨浏览器兼容。
6.插件扩展开发。
7.可扩展性强。 -
作用
1.取得页面中的元素。
2.修改页面的外观。
3.改变页面的内容。
4.响应用户的页面操作。
5.为页面添加动态效果。
6.无需刷新页面即可从服务器获取信息(Ajax)。 -
选择器 (jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的CSS 选择器):
jQuery 中所有选择器都以美元符号开头:$()。
a.元素选择器
$("p")
//在页面中选取所有 <p> 元素
b.id选择器
$("#id")
// #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
c.class选择器
$(".test")
//类选择器可以通过指定的 class 查找元素。
- 效果
1.隐藏和显示
$(selector).hide(speed,callback);//隐藏
$(selector).show(speed,callback); //显示
2.淡入淡出
方法 | 描述 |
---|---|
fadeIn() | 用于淡入已隐藏的元素。 |
fadeOut() | 用于淡出可见元素。 |
fadeToggle() | 可以在 fadeIn() 与 fadeOut() 方法之间进行切换。 |
fadeTo() | 允许渐变为给定的不透明度(值介于 0 与 1 之间)。 |
语法:
/*
1.speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
2.callback 参数是 fading 完成后所执行的函数名称。
3.opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
*/
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
3.滑动
$(selector).slideDown(speed,callback);
//向下滑动元素。
$(selector).slideUp(speed,callback);
//向上滑动元素。
$(selector).slideToggle(speed,callback);
//如果元素向下滑动,则 slideToggle() 可向上滑动它们。
//如果元素向上滑动,则 slideToggle() 可向下滑动它们。
4.动画
//创建自定义动画。
$(selector).animate({params},speed,callback);
/*params 参数定义形成动画的 CSS 属性。*/
5.停止动画
$(selector).stop(stopAll,goToEnd);
//停止动画或效果,在它们完成之前。
/*
stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
goToEnd 参数规定是否立即完成当前动画。默认是 false。
*/
- HTML
1.捕获
方法 | 描述 |
---|---|
attr() | 获取属性值 |
2.设置
方法 | 描述 |
---|---|
text() | 设置或返回所选元素的文本内容 |
html() | 设置或返回所选元素的内容(包括 HTML 标记) |
val() | 设置或返回表单字段的值 |
attr() | 设置/改变属性值 |
attr()也提供回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。 |
3.添加元素
方法 | 描述 |
---|---|
append() | 在被选元素的结尾插入内容 |
prepend() | 在被选元素的开头插入内容 |
after() | 在被选元素之后插入内容 |
before() | 在被选元素之前插入内容 |
4.删除元素
方法 | 描述 |
---|---|
empty() | 从被选元素中删除子元素 |
remove() | 删除被选元素(及其子元素) |
5.尺寸
方法 | 描述 |
---|---|
width() | 设置或返回元素的宽度(不包括内边距、边框或外边距)。 |
height() | 设置或返回元素的高度(不包括内边距、边框或外边距)。 |
innerWidth() | 返回元素的宽度(包括内边距)。 |
innerHeight() | 返回元素的高度(包括内边距)。 |
outerWidth() | 返回元素的宽度(包括内边距和边框)。 |
outerHeight() | 返回元素的高度(包括内边距和边框)。 |
- 遍历(根据其相对于其他元素的关系来"查找"(或选取)HTML 元素。)
1.祖先
方法 | 描述 |
---|---|
parent() | 返回被选元素的直接父元素 |
parents() | 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 () |
parentsUntil() | 返回介于两个给定元素之间的所有祖先元素 |
2.后代
方法 | 描述 |
---|---|
children() | 返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历 |
find() | 返回被选元素的后代元素,一路向下直到最后一个后代 |
3.同胞
方法 | 描述 |
---|---|
siblings() | 返回被选元素的所有同胞元素 |
next() | 返回被选元素的下一个同胞元素 |
nextAll() | 返回被选元素的所有跟随的同胞元素 |
nextUntil() | 返回介于两个给定参数之间的所有跟随的同胞元素 |
4.过滤
方法 | 描述 |
---|---|
first() | 返回被选元素的首个元素 |
last() | 返回被选元素的最后一个元素 |
eq() | 返回被选元素中带有指定索引号的元素 |
filter() | 允许规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回 |
not() | 返回不匹配标准的所有元素 |
- JS对象和JQ对象互转
js对象-->jQuery对象:对于已经是一个js对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(js对象)
jQuery对象-->js对象:jQuery对象是一个数据对象,可以通过jQuery对象[0]来得到相应的js对象。
上一篇: 初学Linux的一些知识点
下一篇: javascript的BOM知识点总结