JQuery
一个javaScript框架。提供了丰富的选择器和页面元素的处理方案。
使用JS写好的一些很有用的方法,提供给开发者使用。
安装JQuery
将JQuery的代码引入到当前的页面中。
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script> |
认识JQuery
Jquery中的 “$”符号既是JQuery的对象,也是JQuery的构造方法。
属性,样式(css),事件,动画,文档
JQuery选择器
通过各种不同的选择器可以获取页面的各种元素。
Tips:通过jQuyer选择器选择的元素不再是原生的javaScript对象,而是jquery对象,不能再直接使用原生的方法。
选择器 | 实例 | 选取 |
* | $("*") | 所有元素 |
#id | $("#lastname") | id="lastname" 的元素 |
.class | $(".intro") | 所有 class="intro" 的元素 |
element | $("p") | 所有 <p> 元素 |
.class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
|
|
|
|
|
|
[attribute] | $("[href]") | 所有带有 href 属性的元素 |
[attribute=value] | $("[href='#']") | 所有 href 属性的值等于 "#" 的元素 |
[attribute!=value] | $("[href!='#']") | 所有 href 属性的值不等于 "#" 的元素 |
[attribute$=value] | $("[href$='.jpg']") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
伪类自己查看jquery文档。
:contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
Jquery属性操作
获取页面元素的属性值,设置页面元素的属性值
前提是页面的元素必须通过jquery的选择器获取的。
attr() | 设置或返回匹配元素的属性和值。 |
addClass() | 向匹配的元素添加指定的类名。 |
hasClass() | 检查匹配的元素是否拥有指定的类。 |
removeClass() | 从所有匹配的元素中删除全部或者指定的类。 |
toggleClass() | 从匹配的元素中添加或删除一个类。 |
removeAttr() | 从所有匹配的元素中移除指定的属性。 |
val() | 设置或返回匹配元素的值。 |
html() | 设置或返回匹配的元素集合中的 HTML 内容。 |
jQuery样式操作
css() | 设置或返回匹配元素的样式属性。 |
height() | 设置或返回匹配元素的高度。 |
width() | 设置或返回匹配元素的宽度。 |
offset() | 返回第一个匹配元素相对于文档的位置。 |
offsetParent() | 返回最近的定位祖先元素。 |
position() | 返回第一个匹配元素相对于父元素的位置。 |
scrollLeft() | 设置或返回匹配元素相对滚动条左侧的偏移。 |
scrollTop() | 设置或返回匹配元素相对滚动条顶部的偏移。 |
jQuery事件
方法 | 描述 |
click() | 触发、或将函数绑定到指定元素的 click 事件 |
dblclick() | 触发、或将函数绑定到指定元素的 double click 事件 |
blur() | 触发、或将函数绑定到指定元素的 blur 事件 |
focus() | 触发、或将函数绑定到指定元素的 focus 事件 |
change() | 触发、或将函数绑定到指定元素的 change 事件 |
keydown() | 触发、或将函数绑定到指定元素的 key down 事件 |
keypress() | 触发、或将函数绑定到指定元素的 key press 事件 |
keyup() | 触发、或将函数绑定到指定元素的 key up 事件 |
mousedown() | 触发、或将函数绑定到指定元素的 mouse down 事件 |
mousemove() | 触发、或将函数绑定到指定元素的 mouse move 事件 |
mouseout() | 触发、或将函数绑定到指定元素的 mouse out 事件 |
mouseover() | 触发、或将函数绑定到指定元素的 mouse over 事件 |
mouseup() | 触发、或将函数绑定到指定元素的 mouse up 事件 |
scroll() | 触发、或将函数绑定到指定元素的 scroll 事件 |
bind() | 向匹配元素附加一个或更多事件处理器 |
unbind() | 从匹配元素移除一个被添加的事件处理器 |
event.isDefaultPrevented() | 返回 event 对象上是否调用了 event.preventDefault()。 |
event.pageX | 相对于文档左边缘的鼠标位置。 |
event.pageY | 相对于文档上边缘的鼠标位置。 |
event.preventDefault() | 阻止事件的默认动作。 |
event.result | 包含由被指定事件触发的事件处理器返回的最后一个值。 |
event.target | 触发该事件的 DOM 元素。 |
event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
event.type | 描述事件的类型。 |
event.which | 指示按了哪个键或按钮。 |
jQuery文档操作
通过jquery创建一个元素
//创建元素加入页面 //原生js创建元素 var a = document.createElement("a"); a.href="sdfsdf" console.log(a) //使用jquery创建元素 var as = $("<a>")[0]; console.log(as) |
方法 | 描述 |
append() | 向匹配元素集合中的每个元素结尾插入由参数指定的内容。 |
appendTo() | 向目标结尾插入匹配元素集合中的每个元素。 |
remove() | 移除所有匹配的元素。 |
after() | 在匹配的元素之后插入内容。 |
before() | 在每个匹配的元素之前插入内容。 |
clone() | 创建匹配元素集合的副本。 |
insertAfter() | 把匹配的元素插入到另一个指定的元素集合的后面。 |
insertBefore() | 把匹配的元素插入到另一个指定的元素集合的前面。 |
text() | 设置或返回匹配元素的内容。 |
jQuery动画
方法 | 描述 |
hide() | 隐藏被选的元素 |
show() | 显示被选的元素 |
toggle() | 对被选元素进行隐藏和显示的切换 |
fadeIn() | 逐渐改变被选元素的不透明度,从隐藏到可见 |
fadeOut() | 逐渐改变被选元素的不透明度,从可见到隐藏 |
fadeTo() | 把被选元素逐渐改变至给定的不透明度 |
slideDown() | 通过调整高度来滑动显示被选元素 |
slideToggle() | 对被选元素进行滑动隐藏和滑动显示的切换 |
slideUp() | 通过调整高度来滑动隐藏被选元素 |
animate() | 对被选元素应用“自定义”的动画 |