jQuery标签


文章目录

  • jQuery标签
  • 一、jQuery 对象 获取对象有俩种方式 1、通过class ：. 的方式 2、通过id ： # 的方式获取
  • 二、互相转换
  • 三、html()方法与text()方法
  • 四、val() 方法
  • 五、attr() 方法
  • 六、prop() 方法
  • 七、添加类名
  • 八、toggleClass() 类名切换
  • 九、hasClass() 检测类名是否存在
  • 十、注意：mouseenter 和 mouseleave 没有事件冒泡。
  • 十一、$(this) 自己
  • 十二、hide() 和 show() 方法
  • 十三、slideDown() 和 slideUp() 方法
  • 十四、fadeIn() 和 fadeOut() 方法
  • 十五、其它方法


一、jQuery 对象 获取对象有俩种方式 1、通过class ：. 的方式 2、通过id ： # 的方式获取

  • $()方法获取到的内容叫做jQuery 对象
  • $().length 个数
  • $().size()

二、互相转换

  • jQuery 转原生：直接利用数组下标方式，得到 jQuery 封装的原生对象。
  • 原生转 jQuery：将原生对象用$()方法包裹即可

三、html()方法与text()方法

  • html()获取文本和内部标签 ，若设置标签时，标签会被渲染 会被渲染
  • text()获取的仅仅是文本，若设置标签时，标签会被当做普通文本

四、val() 方法

val() 方法相当于原生 JS 中的 value 属性，用来获取或设置表单元素内容。

  • 获取：表单元素的 value 语法：jQuery对象.val();
  • 设置：表单元素的value 语法：jQuery对象.val(‘文本内容’);

五、attr() 方法

attr：全称 attribute，属性的意思。 作用：用来获取或者设置标签的属性值。

  • 设置标签的属性 语法：jQuery对象.attr(name,value);
  • 获取标签的属性 语法：jQuery对象.attr(name);
  • removeAttr() 方法 移除方法

六、prop() 方法

针对：selected、checked、disabled 等表单元素的属性。此类属性的属性值与属性名相同。

  • 获取 语法：$(‘input’).prop(‘属性名’);
  • 设置 语法：$(‘input’).prop(‘属性名’,值）；

七、添加类名

  • addClass() 添加类名
  • removeClass() 移除类名
  • 删除指定的类名 语法：jQuery对象.removeClass(); 字符串格式的类名。 不传参数，表示删除所有的类名

八、toggleClass() 类名切换

  • 若这个类名存在，则会移除该类名。否则添加该类名 toggleClass() 类名切换
  • 语法：jQuery对象.toggleClass(‘类名’);
  • 参数：字符串格式的类名。
  • 优点：三个方法只操作参数部分的类名，不影响原有的其他类名。

九、hasClass() 检测类名是否存在

  • 语法：jQuery对象.hasClass(‘类名’); hasClass检测类名是否存在
  • 返回值：true 和 false

十、注意：mouseenter 和 mouseleave 没有事件冒泡。

  • 在使用时替换 mouseover 和 mouseout 更加合适。
  • hover() 方法
  • hover 事件相当于将 mouseoenter 和 mouseleave 事件进行了合写。
  • 参数：有两个参数，第一个参数是鼠标移上执行的事件函数，第二个参数是鼠标离开执行 事件函数。

十一、$(this) 自己

  • 在原生的 DOM 操作中，事件函数内部有一个 this 关键字指向的就是触发事件的事件源，
  • 在 jQuery 中将 this 关键字传递给 $() 方法，得到就是指向自己的 jQuery 对象，就可 以使用 JQ 的方法。
  • parent()父级 children()子级 siblings()兄弟 eq()比较 index() 下标

十二、hide() 和 show() 方法

  • hide()：元素隐藏，隐藏的前提必须是元素 display:block；
  • show()：元素显示，显示的前提必须是元素 display:none;
  • toggle()：在元素隐藏和显示之间进行切换。 toggle隐藏和显示之间进行切换
  • 这三个方法可以设置元素的显示和隐藏效果，在过程中还可以出现过渡动画。

十三、slideDown() 和 slideUp() 方法

  • slideDown()：滑动显示（方向不一定）
  • slideUp()：滑动隐藏
  • slideToggle()：滑动切换
  • 让元素在 display 属性的 block 和 none 之间进行切换。

十四、fadeIn() 和 fadeOut() 方法

  • fadeIn()：淡入，透明度逐渐增大最终显示。
  • fadeOut()：淡出，透明度逐渐降低最终隐藏。
  • fadeToggle()：切换效果。
  • fadeTo()：淡入或淡出到某个指定的透明度。

动画效果，执行的是透明度动画。也是在 display属性的block和none之间切换

如果不传参数：默认的过渡时间为 400 毫秒。

如果传递参数： 单词格式：“slow”,“normal”, “fast”

数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画

十五、其它方法

  • animate() 动画方法
  • deplay()延迟方法
  • stop()停止动画方法
  • 删除元素

语法：jQuery对象.remove();

删除谁就让谁调用这个方法

  • 清空元素

清空方式1：jQuery对象.empty(); 推荐使用， 清空内部的所有元素及元素相关的事件

清空方式2：jQuery对象.html(‘’); 仅仅清空内部的元素，不清清理内存中的元素的事 件。

  • 克隆元素

语法：jQuery对象.clone(布尔值); 返回克隆好的元素

参数：默认是false,表示仅仅克隆内容。 true，克隆内容和事件
ery对象.html(''); 仅仅清空内部的元素，不清清理内存中的元素的事 件。

+ 克隆元素 

		语法：jQuery对象.clone(布尔值); 返回克隆好的元素 

```java
	参数：默认是false,表示仅仅克隆内容。 true，克隆内容和事件