文章目录
- 一、元素操作
- 1. 类属性操作
- 2. 样式操作
- 3. 属性操作
- 4. 文档处理
- 二、事件
- 1. 常用事件
- 2. 绑定事件的方法
- 3. 阻止标签后续事件的执行
- 4. 事件冒泡
- 5. 事件委托
- 6. 页面加载
- 7. 两个重要方法
一、元素操作
jQuery对象调用jQuery方法后,返回值还是原来的jQuery的jQuery对象,因此,可以链式调用,即对同一个对象连续调用多个方法。
如:$(选择器).方法1().方法2().方法3()……在下面的方法中,如果一个方法既能获取值也能设置值。那么,通常有参数代表设置值,无参数或少参数代表获取值。
1. 类属性操作
-
.addClass('类名')
:添加指定的类名。 -
.removeClass('类名')
: 移除指定的类名。 -
.hasClass('类名')
:判断类是否存在。 -
.toggleClass('类名')
: 切换类名,如果有就移除,如果没有就添加。
2. 样式操作
-
.css('样式','值')
:设置样式。
位置操作:
-
.offset()
: 获取匹配元素在当前窗口的相对偏移或设置元素位置。 -
.position()
: 获取匹配元素相对父元素的偏移。 -
.scrollTop(偏移量px)
: 获取或设置匹配元素相对滚动条顶部的偏移。 -
.scrollLeft(偏移量px)
: 获取或设置匹配元素相对滚动条左侧的偏移。
尺寸操作:
-
.height()
:获取元素内容高度。 -
.width()
:获取元素内容宽度。 -
.innerHeight()
:获取元素内容+padding的高度。 -
.innerWidth()
:获取元素内容+padding的宽度。 -
.outerHeight()
:获取元素内容+padding+border的高度。 -
.outerWidth()
:获取元素内容+padding+border的宽度。
文本操作:
- HTML代码:
-
.html()
:取得第一个匹配元素的html内容 -
.html(val)
:设置所有匹配元素的html内容
- 文本值:
-
.text()
:取得所有匹配元素的内容 -
.text(val)
:设置所有匹配元素的内容
3. 属性操作
.val('值')
:获取或设置元素的value属性值,常用于input元素。.attr('属性名')
:获取元素的属性值。.attr('属性名','值')
:设置元素的属性值。.removeAttr('属性名')
:移除属性。.prop('checked','布尔值')
:此方法专门用于checkbox、radio、option等选择框,用来获取或设置它们的选择状态,返回布尔值。
4. 文档处理
-
let 变量名= $('<标签名>')
:创建标签并保存jquery对象。 -
元素A.append(元素B)
:元素B追加到元素A内部的最后面。 -
元素A.appendTo(元素B)
:元素A追加到元素B内部的最后面。 -
元素A.prepend(元素B)
:元素B追加到元素A内部的最前面。 -
元素A.prependTO(元素B)
:元素A追加到元素B内部的最后面。 -
元素A.after(元素B)
:元素B放到元素A后面。 -
元素A.before(元素B)
:元素B放到元素A前面。 -
.remove()
:从DOM中删除当前元素。 -
.empty()
:清空当前元素内部的所有内容。
二、事件
1. 常用事件
事件 | 描述 |
blur | 元素失去焦点 |
change | 元素的值改变,该事件仅适用于文本域(text field),以及 textarea 和 select 元素。 |
click | 元素被点击 |
focus | 元素获得焦点 |
keyup | 键盘按键被松开 |
keydown | 键盘按键被按下 |
2. 绑定事件的方法
- 方法一:
$(选择器).事件(要执行的动作)
- 方法二:
$(选择器).on('事件',要执行的动作)
举例:当input标签获得焦点时,其背景色改变。
$("input").focus(function(){
$(this).css("background-color","red");
});
this关键字指的是当前被操作的元素对象自己。
3. 阻止标签后续事件的执行
有些元素自带一些事件,比如submit类型的input标签元素,会在按下后发生submit事件。
如果我们不想在点击input时,让submit事件发生,可以采用以下两种方法:
- 方法一:
$('input').click( function (e) {
// 这里可以自定义事件触发的动作。。。
e.preventDefault()
})
- 方法二:
$('input').click( function () {
// 这里可以自定义事件触发的动作。。。
return false
})
注意:第二种方法,其实阻止的是后续所有的动作,并不是真正的去阻止自带事件的执行。
4. 事件冒泡
- 事件冒泡:
当某个元素发生了一个事件时,它会先在自身查找是否绑定了后续动作。如果找到了就执行,如果未找到,就会将事件传递给父元素,父元素再重复上述过程,一直传递到window为止。 - 阻止事件冒泡:
方法一:
$('input').click( function () {
// 这里可以自定义事件触发的动作。。。
return false
})
方法二:
$('input').click( function (e) {
// 这里可以自定义事件触发的动作。。。
e.stopPropagation()
})
5. 事件委托
事件委托也叫事件代理,指的是子孙元素的事件绑定,完全交给其上级父元素或祖先元素绑定。它利用的就是事件冒泡的原理,目的是减少事件的绑定,提高性能,减少代码量。
比如,将body内所有的点击事件,委托给button按钮触发:
$('body').on('click','button', function(){
// 一些代码。。。
})
6. 页面加载
在原生js中,需要在文档完全加载完成后执行的代码,可以绑定在window.onload`事件上。
而在jquery中,上述过程,可以通过下面三种方式完成:
- 方法一:
$('document').ready(function(){
// 代码……
})
- 方法二:
$(function(){
// 代码……
})
- 方法三:
将js代码直接写在body内部的最下方,这是最稳妥的方法,而且原生js也可以用。
7. 两个重要方法
- each()方法:
each()方法提供了一种更加方便的for循环写法,它会将选择的元素,一个个放进后面的函数中执行。
// 格式一
$(选择器).each(function(索引,元素对象){})
// 格式二
$.each('选择器',function(){})
- data()方法:
data()方法可以设置一个键值对,并且该键值对是隐藏的,在文档中看不到的。想要读取,就还得使用data()方法。
$('选择器').data('属性') // 获取
$('选择器').data('属性', '值') // 设置
$('选择器').removedata('属性') // 移除