本篇对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中文网其他相关文章!

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

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

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

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

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

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

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

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


热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

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

热门文章

热工具

SublimeText3 Linux新版
SublimeText3 Linux最新版

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

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

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。

禅工作室 13.0.1
功能强大的PHP集成开发环境