搜索
首页web前端js教程jQuery 能做什么?

jQuery 能做什么?

May 21, 2018 pm 04:58 PM
jqueryjs使用

本篇对jquery的使用做出了相关的总结。

jQuery是一个小巧的,快速的,功能强大的JavaScript库。它通过一些易用的API简化了许多事情,例如:DOM操作、事件监听、动画、AJAX等等。
jQuery能做的事情,原生JS都能做到,只不过原生JS会更加繁琐,而化繁为简正是jQuery的目的所在。
write less,do more.

jQuery对象和DOM原生对象有什么区别?如何转化?

假设这么一个HTML片段

761ce4649edab91a1e62aaee9958b1ae65281c5ac262bf6d81768915a4a77ac0

我们可以通过jQuery方法或原生DOM方法获取到这个元素节点

$("#btn1");  //jQuesy方法;document.querySelector("#btn1");    //原生DOM方法;

通过这两种方法获得的元素对象是两个完全不一样的对象。
jQuesy方法获取的称为jQuesy对象,它是一个类数组对象,它有它自己的方法,不能使用原生DOM方法;
原生DOM方法获取的称为DOM原生对象,它也有它自己的方法,不能使用jQuery的方法;

两种对象之间可以相互转换

$("#btn1")[0];  //jQuery对象转为原生DOM对象,用索引获取到对应的元素对象;$(document.querySelector("#btn1"));  //DOM元素对象用$包裹,就得到jQuery对象;

jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?

在jQuery中,我们可以使用on()方法绑定事件

$("#btn1").on("click",function() {  //最简单的事件绑定;
    console.log("hello world");
})

其他的事件绑定方法
bind(),该方法在3.0以后的版本已经被弃用,用on()代替;
1.4.3版本,其接受这么几个参数:eventType(事件类型,"click"等)、eventData(传递给事件处理函数的数据)、handler(事件处理函数)、preventBubble(一个Boolean,防止默认事件,阻止事件冒泡)
由于其只能绑定在已有元素中,新添加的元素不会绑定事件,不够灵活,已弃用;

unbind(),该方法可以移除bind()方法绑定的事件,不传递参数的情况下,将删除所有的事件,传递参数可以删除指定的事件和事件处理函数

delegate()方法是1.7版本以前常用的事件代理方法,现已被on()取代。接受这么几个参数:
selector:选择器字符串,用于过滤触发事件的元素
evenType:事件类型,多个用空格隔开
eventData:传递给事件处理程序的数据
handler:事件处理程序

live()也是一种事件代理的方法,附加一个事件处理程序到选择器匹配的所有元素,但是它把事件直接绑定在document上,通过相关参数来确定是否触发事件
events:事件类型
data:传递给事件处理程序的数据
handler:事件处理程序
因为live()是把事件绑定到document上的,导致冒泡链过长,以被弃用。

on()是现在绑定事件的常用方法,接受这么几个参数
1.events:一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", "keydown.myPlugin", 或者 ".myPlugin";
2.selector:一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器,那么被选中的元素总是能触发事件;
3.data:当一个事件被触发时,要传递给事件处理函数的event.data;
4.handler(eventObject):事件被触发时,执行的函数。若该函数只是要执行returnfalse的话,那么该参数位置可以直接简写成false

off()方法可以移除on()方法绑定的事件,不传递参数的情况下,将删除所有的事件,传递参数可以删除指定的事件和事件处理函数

jQuery事件代理写法
假设HTML片段

<ul id="container">
    <li>content1</li>
    <li>content2</li>
    <li>content3</li></ul>

我们可以使用on()方法,并提供相关参数,就可以完成事件代理

//将事件绑定在父容器上,只有满足过滤选择器的的子元素才能触发事件$("#container").on("click","li",function() {    //do something..})

jQuery 如何展示/隐藏元素?

jQuery中通过hide()方法隐藏元素,其接受三个参数:
[duration]:动画持续多久
[easing]:表示过渡使用哪种缓动函数,jQuery自身提供"linear" 和 "swing"
[complete]:在动画完成时执行的函数
不添加参数时,其方法等同于直接设置元素的display为none
通过添加参数,该方法可以实现一个渐变的隐藏元素的效果

$(element).hide()
--------
$(element).hide(3000,function() {
    alert("hello world")
})

同样,jQuery中使用show()方法来展示隐藏的元素,使用方法与hide()相同

jQuery动画如何使用?

jQuery中通过hide()方法隐藏元素,其接受三个参数
[duration]:动画持续多久
[easing]:表示过渡使用哪种缓动函数,jQuery自身提供"linear" 和 "swing"
[complete]:在动画完成时执行的函数
不添加参数时,其方法等同于直接设置元素的display为none
通过添加参数,该方法可以实现一个渐变的隐藏元素的效果

$(element).hide()
--------
$(element).hide(3000,function() {
    alert("hello world")
})

同样,jQuery中使用show()方法来展示隐藏的元素,使用方法与hide()相同
hide()方法会把元素的display变为none,show()方法会还原元素的display
toggle()方法用于切换元素的隐藏/显示,参数与hide()``show()相同,它的机制就是元素如果是隐藏的,就显示该元素,如果元素是显示的,就隐藏该元素,来回切换

fadeIn()/fadeOut用调整元素透明度的方法来显示/隐藏元素,一旦透明度变为0,display将设置为none,接受参数与hide()、show()相同
不设置参数,fadeIn()/fadeOut默认会有渐进显示/隐藏的效果

$(element).fadeIn()
$(element).fadeOut()

fadeTo以动画的形式调整元素到指定的透明度,接受这几个参数:
duration, opacity [, easing ] [, complete ]
opacity为指定变化的透明度
当opacity为0时,fadeTo方法不会使元素display为none

$(element).fadeTo(1000,0.5) //在1s内透明度变化到0.5

fadeToggle会通过改变透明度的方式显示和隐藏元素,如果元素是隐藏的,则显示,显示的,则隐藏,参数与fadeIn()``fadeOut()相同
fadeToggle在元素透明度为0时,会display为none

fadeIn()/fadeOut和show()/hide()的区别:
前者通过调整元素透明度实现元素隐藏和显示,透明度为0时设置display为none。后者通过改变同时元素的width/height/opacity来显示隐藏元素

slideUp()/slideDown()通过上下滑动来实现元素的隐藏/显示,接受参数与show()/hide()相同
slideToggle()通过上下滑动的方式切换元素的隐藏/显示

animate()是自定义动画方法,接受这几个参数
properties:一个CSS属性和值的对象,动画将根据这组对象进行变化
[duration]:动画时间
[easing]:缓动函数
[complete]:完成动画后的回调函数
animate()的本质是通过动画的方式把元素的样式变为指定的样式
animate()可以通过链式调用实现多个动画

$(element).animate({//something})
          .animate({//something})
          .animate({//something})
          .animate({//something})

多个动画可以整合到一个数组中,对数组进行遍历,执行所有动画

var action = [{//action1},
              {//action2},
              {//action3},
              {//action4}]action.forEach(function(action,index) {
    ${element}.animate(action)
})

stop()方法可以停止当前动画,它接受2个参数:
[clearQueue]:一个布尔值,当为true时,当前动画停止,未执行的动画全部删除
[jumpToEnd]:为true时,当前动画将停止,但该元素上的 css属性会被立刻修改成动画的目标值
stop()不添加任何参数时,会立即结束掉元素当前动画(不完成),马上进入下一个动画(如果有的话)

如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?

在原生DOM中,我们可以使用innerText操作元素文本,innerHTML操作元素内的HTML
在jQuery中提供了相同功能的方法:html()和text()
当没有传递参数时,获取元素内的innerHTML和innerText;当传递了一个string参数的时候,修改元素的innerHTM和innerText为参数值

<ul id="container">
    <li>content1</li></ul>
$("#container").html() //"<li>content1</li>"$("#container").text() //"content1"

如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?

val()方法可以用来获取和设置input的value
当没有传递参数时,获取value的值
传递一个字符串参数时,将value的值改为参数值
attr()可以获取指定属性,也可以设置属性

$(element).attr("id") //获取元素id属性值$(element).attr("id","container") //设置元素id值为container

本篇对jquery的作用进行了相关的讲解,更多相关内容请关注php中文网。

相关推荐:

关于前端跨域总结的相关知识点

前端常见跨域解决方案(全)

什么是跨域?跨域有几种实现形式?

以上是jQuery 能做什么?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
node.js流带打字稿node.js流带打字稿Apr 30, 2025 am 08:22 AM

Node.js擅长于高效I/O,这在很大程度上要归功于流。 流媒体汇总处理数据,避免内存过载 - 大型文件,网络任务和实时应用程序的理想。将流与打字稿的类型安全结合起来创建POWE

Python vs. JavaScript:性能和效率注意事项Python vs. JavaScript:性能和效率注意事项Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差异主要体现在:1)Python作为解释型语言,运行速度较慢,但开发效率高,适合快速原型开发;2)JavaScript在浏览器中受限于单线程,但在Node.js中可利用多线程和异步I/O提升性能,两者在实际项目中各有优势。

JavaScript的起源:探索其实施语言JavaScript的起源:探索其实施语言Apr 29, 2025 am 12:51 AM

JavaScript起源于1995年,由布兰登·艾克创造,实现语言为C语言。1.C语言为JavaScript提供了高性能和系统级编程能力。2.JavaScript的内存管理和性能优化依赖于C语言。3.C语言的跨平台特性帮助JavaScript在不同操作系统上高效运行。

幕后:什么语言能力JavaScript?幕后:什么语言能力JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript在浏览器和Node.js环境中运行,依赖JavaScript引擎解析和执行代码。1)解析阶段生成抽象语法树(AST);2)编译阶段将AST转换为字节码或机器码;3)执行阶段执行编译后的代码。

Python和JavaScript的未来:趋势和预测Python和JavaScript的未来:趋势和预测Apr 27, 2025 am 12:21 AM

Python和JavaScript的未来趋势包括:1.Python将巩固在科学计算和AI领域的地位,2.JavaScript将推动Web技术发展,3.跨平台开发将成为热门,4.性能优化将是重点。两者都将继续在各自领域扩展应用场景,并在性能上有更多突破。

Python vs. JavaScript:开发环境和工具Python vs. JavaScript:开发环境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

JavaScript是用C编写的吗?检查证据JavaScript是用C编写的吗?检查证据Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C语言编写的。1)C语言提供了高效性能和底层控制,适合JavaScript引擎的开发。2)以V8引擎为例,其核心用C 编写,结合了C的效率和面向对象特性。3)JavaScript引擎的工作原理包括解析、编译和执行,C语言在这些过程中发挥关键作用。

JavaScript的角色:使网络交互和动态JavaScript的角色:使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心,因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容,2)通过DOMAPI操作网页,3)支持复杂的交互效果如动画和拖放,4)优化性能和最佳实践提高用户体验。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境