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

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

1. 元素 value 属性操作


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

JS 方式:元素对象.value=;

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

jQuery 中,还有一种快捷操作方式:

image.png

准备代码:

image.png

image.png

image.png

准备代码:

image.png

3. 追加元素内容体


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

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

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

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

image.png

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

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

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

image.png

准备代码:

image.png

4. 遍历数组-each


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

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

image.png

each 中的 fn 为每循环一次,就会调用一次的函数。(回调函数)

格式:

function(index){

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

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

}

准备代码:

image.png

5. 常见 jQuery 事件


image.png

总结:比 JS 事件少了 on

6. jQuery 事件定义方式


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

鼠标移入: mouseover

鼠标移出: mouseout

点击事件: click

格式:

JQ 对象 .mouseover(fn);

其中: fn 为当鼠标移入时会调用的函数(回调函数)

回调函数格式:

function(){

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

}

准备代码:

image.png

相关文章
|
11月前
|
JavaScript 前端开发 索引
jQuery入门&以及选择器
jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
47 0
|
11月前
|
JavaScript 前端开发
jQuery01-入门-选择器
jQuery01-入门-选择器
|
11月前
|
JavaScript 前端开发 Java
jQuery入门&选择器
jQuery入门&选择器
|
11月前
|
存储 JavaScript 前端开发
jQuery 入门&选择器
jQuery 入门&选择器
61 0
|
3月前
|
JavaScript 前端开发 API
jQuery 入门:轻松创建与插入节点
jQuery 入门:轻松创建与插入节点
|
9月前
|
存储 JavaScript 前端开发
JQuery入门基础
JQuery入门基础
39 0
|
10月前
|
JavaScript 前端开发 开发工具
jQuery入门级别介绍及选择器的使用----详细介绍
jQuery入门级别介绍及选择器的使用----详细介绍
49 0
|
11月前
|
JavaScript 前端开发
JQuery入门到精通教程(二)
JQuery入门到精通教程(二)
39 0
|
11月前
|
JavaScript 前端开发
JQuery入门到精通教程()
JQuery入门到精通教程()
58 0
|
11月前
|
JavaScript 前端开发
js和jQuery知识点总结(二)
js和jQuery知识点总结