近日,又重拾jquery➕bootstrap,打开官网的第一眼,心想,这是神马东西,好像跟之前有些大大的出入呢,慢慢看下去,嗖噶,不是他变了,是我的脑储存出了差错。😂
下面,就是我近两日边看边进行的总结(勿喷,忘指导!)👇
更新中,长时间未更新可能在神游
jQuery
介绍
它是神马呢,--> 一个轻量级的javascript库,基础语法是: $(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
jquery的一些事件
| Event 函数 | 绑定函数至 |
|---|---|
| $(document).ready(function) | 将函数绑定到文档的就绪事件(当文档完成加载时) |
| $(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
| $(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
| $(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
| $(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
jquery的一些行为
hide()、show()
$(selector).hide(speed,callback) 隐藏selector元素
$(selector).show(speed,callback)显示selector元素
speed 参数:可选的,规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒
callback 参数:可选的,是隐藏或显示完成后所执行的函数名称
toggle()
$(selector).toggle(speed,callback)
可以使用 toggle() 方法来切换 hide() 和 show() 方法
显示被隐藏的元素,并隐藏已显示的元素
stop()
stop() 方法停止当前正在运行的动画
$(selector).stop(stopAll,goToEnd)
stopAll参数: 可选,规定是否停止被选元素的所有加入队列的动画
goToEnd参数:可选, 规定是否允许完成当前的动画,该参数只能在设置了 stopAll 参数时使用
animate()
animate() 方法执行 CSS 属性集的自定义动画。CSS样式将元素从一个状态改变为另一个状态,CSS属性值是逐渐改变的,这样就可以创建动画效果。只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")
-
语法一:$(selector).animate(styles,speed,easing,callback)
- styles: 必须,CSS 样式和值
- speed:可选,动画的速度,默认是normal
- easing:可选,规定在不同的动画点中设置动画速度的 easing 函数(内置的 easing 函数:swing()、linear())
- callback:可选,animate 函数执行完之后,要执行的函数。
-
语法二:$(selector).animate(styles,options)
-
styles:必须
-
options:可选,规定动画的额外选项。
- speed - 设置动画的速度
- easing - 规定要使用的 easing 函数
- callback - 规定动画完成之后要执行的函数
- step - 规定动画的每一步完成之后要执行的函数
- queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始
- specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数
-
jquery中的获取和设置
-
$(selector).text() - 获取所选元素的文本内容
-
- $(selector).text("Hello world!"),即设置选择器中的文本
-
$(selector) .html() - 获取所选元素的内容(包括 HTML 标记)。比如获取到
文字
-
- $(selector).html("Hello world!"),设置选择器中的文本,展示为Hello world! (加粗的文本)
-
$(selector).val() - 获取表单字段的值。比如链接中 href 属性的值
-
- $("input").val("ezylf"),设置input表单值为 -->ezylf
text()、html()、val() 的回调函数由两个参数:被选元素列表中当前元素的下标、以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); });
-
("#divbox").attr("href")
-
-
有参数时,可用来设置/改变属性值,如,$('input').attr('placeholder','你看,我变了')
- 回调函数
-
$("button").click(function(){$("input").attr({"value" : '这是值',"placeholder" : "请输入哟~"});});
-
\