3月26日 笔记

时间:2021-03-26 14:18:22

包裹节点和属性操作

1.wrapAll()方法

该方法会将所有匹配的元素用一个元素来包裹。

2.wrapInner()方法

该方法将每

2.on()方法

on()方法结构和使用与bind()没有任何区别。

新版本的jQuery里面都是使用on()方法,bind()方法已经不再使用了。

一个匹配的子元素(包括文本节点)用其他结构化的标记包裹起来。

2.属性操作

1.获取属性和设置属性
在jQuery中,用attr()方法获取和设置元素属性,removeAttr()方法来删除元素属性。

如果要获取<p>元素的属性title,那么只需要在attr()方法中传入属性名。

2.删除属性

删除属性可以用removeAttr()方法来完成。

样式操作

1.获取和设置样式

我们一般在用 class 属性添加样式,因此可以用attr()方法来完成。

2.追加样式

jQuery 提供了addClass()方法来追加样式。

3.移除样式

相对应的,使用removeClass()方法来删除 class 的某个值,他的作用是从匹配的的元素中删除全部或指定的 class 。

4.切换样式

jQuery 提供了toggleClass()方法控制样式上的重复切换。如果类名存在则删除它,如果类名不存在则添加它。

5.判断是否含有某个样式

hasClass()可以用来判断元素中是否含有某个 class 。

设置和获取HTML、文本和值

1.html()方法

此方法类似于javascript中的innerHTML属性,可以用来读取和设置元素中的HTML内容。

2.text()方法

text()方法类似于javascript中的innerText属性,可以用来读取或设置元素中的文本内容。

3.val()方法

此方法类似于javascript中的value属性,可以用来设置和获取元素的值。

1.children方法

用于去的匹配的子元素集合。

children()方法只考虑子元素而不考虑后代元素。

2.next()方法

用于取得匹配元素后面紧邻的同辈元素。

3.prev()方法

用于取得匹配元素前面紧邻的元素。

4.siblings()方法

用于取得所有同辈元素。

5.closest()方法

该方法用于取得最近的匹配元素。首先检查当前元素是否匹配,匹配直接返回元素本身。否则逐级向上查找。

parent()和parents()

  • parent()方法获得集合中每个元素的父级元素。
  • parents()方法集合中每个匹配元素的祖先元素。

CSS操作

可以直接利用css()方法获取和设置元素的样式属性。

如果值是数字,将会被自动转化为像素值。
在css()方法中,如果属性带有‘-’符号,如font-size,如果设置这些属性的时候不带引号,那么需要使用驼峰命名法。

事件绑定

1.bind()方法

结构:bind(事件类型,回调函数)

2.on()方法

on()方法结构和使用与bind()没有任何区别。

新版本的jQuery里面都是使用on()方法,bind()方法已经不再使用了。

3.阻止冒泡

使用事件对象 event 的方法stopPropagation();

4.绑定多个事件

on()方法中可以使用类似JSON结构进行处理。

5.事件解绑

使用unbind()方法解绑事件

jQuery动画

1. show() 方法和 hide() 方法

  • 调用hide()方法会将元素的display样式改为' none '。
  • show()方法将元素的display样式设置为先前的显示状态。
  • show()方法和hide()方法的参数可以指定毫秒值,缓慢的隐藏和展示。

2.fadeIn()和fadeOut()方法

fadeIn()和fadeOut()方法只改变元素的不透明度。

fadeOut()方法会在指定的一段时间内降低元素的不透明度,直到元素完全消失(display:none)。

3.slideUp()方法和slideDown()方法

slideUp()方法和slideDown()方法只会改变元素的高度。

如果一个元素的 display 属性值为'none',调用slideDown()方法时,这个元素将由上至下延伸显示。slideUp()方法正好相反,元素将由下到上缩短隐藏。

4.animate()方法

可以使用animate()方法来自定义动画。
结构:animate(params,speed,callback)