关于前端jQuery框架的一点理解,小的知识块

xiaoxiao2025-10-10 6

jQuery函数库

1 书写问题

jQuery是一个类型非常丰富的函数库,他封装了以前我们所学到的大多数的属性及事件,此时一定要加以区分,正因为他是函数,所以在书写过程中我们一定要注意的是书写规则: 函数名(). 其中这个函数名可能是以前的相关属性名或事件名等熟悉关键字,此时一定要加上括号.

2关于控制css/html

与原生js不同的是,jQuery控制css/html用法是相似的,控制css用到的是css()函数,而控制html内容则用到的是html()函数,控制html属性用到的是prop()函数.即

(" 选 择 器 等 获 取 元 素 方 法 ") . c s s (); /

(“选择器等获取元素方法”).html();/

(" 选 择 器 等 获 取 元 素 方 法 ") . p r o p (); 不 同 的 是 在 c s s () 中, 要 访 问 哪 个 v a l u e 就 写 哪 个 c s s 样 式 的 k e y, 在 单 属 性 控 制 中, c s s () 中 接 k e y 参 数 后, 用 逗 号 隔 开 写 其 n e w v a l u e 即 是 修 改 其 c s s 属 性 样 式, 在 多 属 性 控 制 中, 则 是 用 的 键 值 对 进 行 修 改, k e y 之 间 用 逗 号 隔 开; 在 h t m l () 中, 不 写 参 数 意 味 着 访 问 这 个 h t m l 标 签, 写 参 数 则 意 味 着 修 改 h t m l 内 容 (即 j s 里 的 i n n e r H T M L); 在 p r o p () 中, 参 数 即 是 属 性 名, 修 改 单 属 性 和 多 属 性 方 式 与 c s s () 方 法 一 样 . 其 中, 因 为 对 H T M L 属 性 中 的 v a l u e 属 性 用 的 较 多, 所 以 j Q u e r y 封 装 了 一 个 专 门 修 改 v a l u e 的 方 法 : v a l (), 用 法 与 h t m l () 内 容 控 制 一 样 . 当 然, 还 有 添 加 / 删 除 类 名 也 属 于 修 改 h t m l 属 性, 只 不 过 这 里 要 强 调 的 是 对 类 名 的 操 作 这 就 是 a d d C l a s s () / r e m o v e C l a s s () / t o g g l e C l a s s () . 即 添 加 类 名

(“选择器等获取元素方法”).addClass(),参数即是要添加的类名;删除类名的操作

(" 选 择 器 等 获 取 元 素 方 法 ") . r e m o v e C l a s s (), 不 写 参 数 表 示 类 名 全 部 删 除, 写 一 个 或 多 个 参 数 表 示 删 除 一 个 或 多 个 类 名; 而

(“选择器等获取元素方法”).toggle()则表示重复执行添加/删除类名的操作,通过事件的操作来到达重复执行的效果,参数即是操作的类名.

3关于jQuery的认知

在常规jQUery中,其最大的特点就是拥有丰富的函数,这些函数可以实现js的功能:实现对HTML内容的修改/对HTML属性的修改,对css样式的修改,绑定相应事件属性并完成相应功能.只不过jQuery把这些实现的功能都过程性的封装成了一个个的函数,但其终究是js的继承性函数库,也继承了js的基本语法,所以在用jQuery的时候,以js基本语法为前提,凡是遇到功能性需求时,要用函数来实现,这囊括了获取元素等方法.

4 关于变量定义

首先要说的是,定义的变量是关于控制html/css内容及属性问题时,其修改方式还是如前文"关于控制css/html"所说的进行修改,不能简单使用变量名进行修改.其次,在有多个重复变量需求时,就需要定义一个变量以提高代码的复用性,如进行多次value值操作的时候.还需要指出的是,在需要多次进行查找一个标签元素对其进行控制操作的时候,也需要定义一个变量,以减少每次的查找次数,提高代码执行效率.

5 关于this与$(this)

简单地说,this在jQury里指的是"这个"的意思,当我们定义了一个事件,准备在其中进行元素过滤的时候,就需要用到this.我们在描述一个标签的时候,如果要用到"这个"等词汇的时候,就需要我们使用"this"指定.概括一句话:this指代什么需要看前面指代的是什么,是标签就是指代一个特定html标签,这个标签的所有属性都可以用".“来指定,是自定义对象就是对象,其属性方法操作也可以通过点来表示;而$(this)是jQuery的js对象,他后面接”."表示紧跟的是它的方法,css()/html()/prop()/attr()等jQUery封装起来的方法.两者不能混淆,具体来看一个例子: $("#list").delegate("a", "click", function(){ if($(this).prop("class") == 'del'){ $(this).parent().remove(); } if($(this).prop("class") == 'up'){ if($(this).parent().index()==0){ alert("That is the first one!"); return;} $(this).parent().insertBefore($(this).parent(.prev()); }

6关于事件冒泡和事件委托

事件冒泡简单概括一下,指的是父级定义的事件响应在其相应子级也会有响应,而且,如果父级的父级定义了事件处理程序,那么会逐层向上传递,直至处理事件完成为止.这是一个简单定义,我们需要知道的是,在事件冒泡中,给我们提供了什么方便呢?允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上）它还可以让你在对象层的不同级别捕获事件.这是一个全部没有"过滤"的元素集,而阻止冒泡就可以对层级元素进行"过滤".在工作中我们常用"return false;"来阻止=事件冒泡.两者结合可以让jQuery更加人性化和智慧化,提高开发效率.事件委托就是利用事件冒泡原理特性来把事件加到父级上,通过判断子级的来源来执行相应的操作.自己来源可以是$(this)指定,也可以是其他方法.这样做的目的是减少事件的绑定次数,提高代码的执行效率,还可以通过这种方式对未来元素(以后增加的元素)绑定命令并加以操作.下面通过一段代码来加以区分:

一般绑定事件的写法:

$(function(){ $ali = $('#list li'); $ali.click(function() { $(this).css({background:'red'}); }); }) ... <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> 事件委托的写法 $(function(){ $list = $('#list'); //格式:$('选择器等获取元素的方法').delegate(发生真实事件的标签, 字符串形式的事件属性, 匿名函数) $list.delegate('li', 'click', function() { $(this).css({background:'red'}); }); }) ... <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>

7 ajax

ajax是一个前后台配合的技术，它可以让javascript发送http请求，与后台通信，获取数据和信息.ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信.jQuery将它封装成了一个函数$.ajax()，我们可以直接用这个函数来执行ajax请求.异步操作并且可以局部刷新(无刷新).但是为了数据安全性,ajax并不支持直接面对数据库和本地文件,需要通过第三方借口来实现实数据连接.需要注意的是,ajax是在服务器环境下运行的.

ajax在实际操作中用到的参数:

$.ajax({ url:“请求地址”, type:“请求方式” GET(默认)/POST, dataTye:“预期服务器返回的数据格式” json/html/text, data:“发送给服务器的数据”, success:“请求成功的回调函数”, success:function(dat){} dat:接收dataType格式类型的数据返回值到这个地方来 error:“请求失败后的回调函数”, async:“设置是否异步” 默认是True,代表异步一般省略不写,都是默认值

})

转载请注明原文地址: https://www.6miu.com/read-5037673.html

Java

最新回复(0)