【JQuery】JQuery入门——知识点讲解(三)

👀专栏介绍

【JQuery】 目前主要更新JQuery，一起学习一起进步。

👀本期介绍

本期主要介绍JQuery入门——知识点讲解(三)

文章目录

1. 元素 value 属性操作

2. 获取/设置元素内容体

3. 追加元素内容体

4. 遍历数组-each

5. 常见 jQuery 事件

6. jQuery 事件定义方式

1. 元素 value 属性操作

操作元素的 value 属性值，目前我们可以使用如下方式操作：

JS 方式：元素对象 .value= 值 ;

jQuery 方式： JQ 对象 .prop("value","value 值 ");

jQuery 中，还有一种快捷操作方式：

准备代码：

2. 获取/设置元素内容体

1、获取/设置元素内容体 HTML 代码

2、获取/设置元素内容体纯文本

准备代码：

3. 追加元素内容体

通常我们涉及到追加内容体，使得效果可以层层叠加。

以下两句效果相同，写法不同

A.append(B) , 向 A 的末尾追加 B

B.appendTo(A) ，将 B 追加到 A 的末尾

以下两句效果相同，写法不同

A.prepend(B) , 向 A 的头部追加 B

B.prependTo(A) ，将 B 追加到 A 的头部

准备代码：

4. 遍历数组-each

在 JS 中，我们使用普通 FOR 循环即可遍历数组。

在 JQuery 中，我们可以使数组的遍历变得更为简单

each 中的 fn 为每循环一次，就会调用一次的函数。（回调函数）

格式：

function(index){

        //index 为当前遍历的索引，从 0 开始

        //this 为当前遍历出来的元素，这个元素是 JS 对象

}

准备代码：

5. 常见 jQuery 事件

总结：比 JS 事件少了 on

6. jQuery 事件定义方式

我们以鼠标移入、移出和点击事件为例讲解：

鼠标移入： mouseover

鼠标移出： mouseout

点击事件： click

格式：

JQ 对象 .mouseover(fn);

其中： fn 为当鼠标移入时会调用的函数（回调函数）

回调函数格式：

function(){

//this 就是当前操作的 JS 对象

}

准备代码：