关于jquery

jQuery——jQuery基本概念 文章目录jQuery基本概念为什么要学习jQueryjQuery初体验什么是jQuery?jQuery的版本jQuery的入口函数jQuery对象与DOM对象的区别(重点)DOM对象转换成jQuery对象:jQuery对象转换成DOM对象:练习:隔行变色案例 jQuery基本概念 学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常见的效果。 为什么要学习jQuery? 【01-让div显示与设置内容.html】 使用javascript开发过程中,有许多的缺点 阅读详情

$()的返回值是一个jquery对象,jquery对象是类数组,他们拥有length属性和介于0~length-1之间的数值属性;可以用toArray()方法来将jquery对象转化为真实数组;

each():遍历jquery对象中的所有元素;该方法会将索引值和该元素作为第一个和第二个参数传递给回调函数;

map():和Array.prototype.map()方法很相近;

index():该方法接受一个元素作为参数,返回值是该元素在此jquery对象中的索引值,如果找不到的话则返回-1;

is():它接受一个选择器作为参数,如果选中元素中至少有一个匹配该选择器时则返回true;

jquery对象中的getter和setter方法:同一方法既可以当getter用又做setter用,如果传入新值给该方法,则它设置此值,如果没有则返回当前值;用作setter时,给jquery对象中的每一个元素设置值,返回jquery对象,接受对象/函数作为参数;用作getter时,只查询元素集中的第一个元素,返回单个值;

attr():是jquery中用于HTML属性的getter/setter;

css():作用于元素的css样式;不能获取复合样式的值;

addClass():添加类;

removeClass():删除类;

toggleClass():当元素没有某些类时添加,反之则删除;

hasClass():判断某类是否存在,只能接受单个类名作为参数,并且不支持函数参数;

val():设置和获取HTML表单元素的value属性;

text():获取和设置元素的纯文本内容;

html():设置和获取HTML内容;

offset():可以获取或设置元素的位置;该方法相对文档来计算位置值,返回一个对象,带有left和top属性;

position():返回的元素位置是相对于其偏移父元素的;

offsetParent():把每个元素映射到最近的定位祖先元素或<body>元素;

width()、height():返回元素的宽度和高度,不包含内边距、边框和外边距;可用于Window或Document对象;

innerWidth()、innerHeight():返回元素的宽度和高度,包含内边距;

outerWidth()、outerHeight():返回包含元素内边距和边框的尺寸;

scrollTop()、scrollLeft():可获取或设置元素的滚动条位置;不可传递函数作为参数;

data():可用来设置或获取文档元素、Document或Window对象相关联的数据;不接受函数参数;

removeData():用来从元素中删除数据;

append()/appendTo():在目标元素的结尾处插入内容;

prepend()/prependTo():在目标元素的起始处插入内容;

after()/insertAfter():在目标元素的后面插入内容;

before()/insertBefore():在目标元素的前面插入内容;

replaceWith()/replaceAll():将目标元素替换为内容;

clone():创建并返回每一个选中元素(包含元素所有的子孙)的一个副本;不会复制事件处理程序和与元素关联的其他数据,如果想复制这些,请传入true参数;

wrap():包装每一个选中元素;

wrapInner():包装每一个选中元素的内容;

wrapAll():将选中元素作为一组来包装;

empty():会删除每个选中元素的所有子节点,但不会修改元素本身;

remove():从文档中移除选中元素;若带有参数,该参数会被当成选择器,jquery对象中只有匹配该选择器的元素才会被移除;

filter():

detach():与remove()类似,但不会移除事件处理程序和数据;

unwrap():用来实现元素的移除,移除每一个选中元素的父元素,不影响选中元素及其兄弟节点;不接受可选的选择器参数;

jquery事件处理程序函数的返回值始终有意义:如果返回false,与该事件相关联的默认行为以及该事件接下来的冒泡都会被取消;当返回一个值(非undefined)时,jquery会将该值存储在Event对象的result属性中,该属性可以被后续调用的事件处理程序访问;

bind():为命名的事件绑定程序;需要一个事件类型字符串作为其第一个参数,以及一个事件处理程序函数作为其第二个参数;也可以带有三个参数,事件类型是第一个参数,处理程序函数是第三个参数,中间参数可以传入任何值,jquery会在调用处理程序前,将指定的值设置为Event对象的data属性;如果第一个参数是由空格分隔的事件类型列表,则处理程序函数会为每一个命名的事件类型注册;允许注册的事件处理程序指定命名空间,要绑定事件处理器到命名空间中时,添加句点(.)和命名空间名到事件类型字符串中即可,可分配多个命名空间;第一个参数可以是对象,该对象把事件名映射到处理程序函数;

one():调用和bind()一样,但只触发一次;

unbind():注销bind()和相关jquery方法注册的事件处理程序;

trigger():传入事件类型字符串为第一个参数,会在jquery对象中的所有元素上触发为该类型事件注册的所有处理程序;可以传入Event对象(或任何有type属性的对象);

triggerHandler():通过该函数手动触发的事件不会冒泡,也不会执行相关联的默认操作;

可以用bind()注册“自定义事件”的处理程序,使用trigger()可以调用这些处理程序;

delegate():实时事件,依赖于冒泡;通常在$(document)上调用,传入一个jquery选择器字符串、一个jquery事件类型字符串以及一个jquery事件处理程序函数;它会在document或window上(或jquery对象的任何元素上)注册一个内部处理程序;

undelegate():

live():也可以用来注册实时事件;在jquery对象上调用live()方法时,该对象中的元素实际上并没有使用,真正有关系的是用来创建jquery对象的选择器字符串和上下文对象(传递给$()的第一个和第二个参数);

die():注销实时事件处理程序;

动画效果:

jquery动画框架的一些通用特性:

每段动画都有时长,用来指定动画效果持续多长时间,可以用毫秒数或字符串;“fast"表示200ms,”slow“表示600ms,如果指定的字符串无法识别则采用默认400ms;可以给jQuery.fx.speeds添加新的字符串到数值映射关系来定义新的时长名字;可以设置jQuery.fx.off=ture将在全局禁用所有动画;jquery动画是异步的,方法会立即返回,动画则在后台执行,因此可以向很多jquery动画方法传入第二个参数作为动画完成时的回调函数;jquery动画默认是队列化的;jquery动画方法还可以传入一个对象,该对象的属性指定动画选项;

fadeIn()、fadeOut()、fadeTo():改变CSS的opacity属性来显示或隐藏元素;
show()、hide()、toggle():隐藏或显示选中元素,会将元素从布局中移除;toggle()传入true和不带参数调用show()一样,传入false则和不带参数调用hide()一样;
slideDown()、slideUp()、slideToggle():slideUp()会隐藏jquery对象中的元素,方式是将其高度动态变化到0,然后设置CSS的display属性为“none“;slideDown()使隐藏的元素再次可见;
animate():自定义动画;第一个参数必须是一个对象指定动画内容,剩余参数指定如何定制动画;第一个参数对象的属性名必须是CSS属性名,属性值必须是动画的目标值,动画只支持数值属性,属性值可以指定相对值,用”+=“前缀表示增加,用”-=“表示减少,还可以使用单个其他值,”hide“会保存属性的当前值然后将属性值变到0,”show“会将CSS属性值还原到之前保存的值,”toggle“实现显示或隐藏;第二个参数是可选的,该选项对象用来指定动画如何执行,duration属性指定动画持续的毫秒时间,该属性值还可以是”fast“、”slow“或任何在jQuery.fx.speeds中定义的名称,complete属性指明动画完成时的回调函数,queue属性指定动画是否需要队列化,默认是,可以设置为false取消队列化,easing属性指定缓动函数名;
stop():停止选中元素上的当前正在执行的任何动画;接受两个可选布尔参数,第一个参数为true时会删除选中元素上的动画队列,false则不会,第二个参数指定正在连续变化的CSS属性是否保留当前值,传入true可以让它们变化到最终值,传入false会让它们保持当前值;
delay():添加一个时间延迟到动画队列里;第一个参数是时长,第二个参数是队列名,可选;
queue():给队列添加一个新函数;
dequeue():如果队列中什么也没有,该方法不会有任何响应,否则会将队列头部的函数从队列中移除,并调用它;
clearQueue():清除队列;


LabVIEW进行MQTT通信及数据解析 该文章介绍了LabVIEW的MQTT通信的开源VI控制,以及如果进行数据的解析,特别是一些需要注意的点 阅读详情

相关推荐

Win11 系统下 VisualStudio2022 配置点云库 PCL1.11.1

安装完成之后打开文件夹E:\PCL 1.11.1\3rdParty\OpenNI2双击 并选择路径 (E:\PCL 1.11.1\3rdParty\OpenNI2) 安装即可全部安装完成之后,将pcl-1.11.1-pdb-msvc2019-win64.zip解压后的 .pdb文件拷贝到(E:\PCL 1.11.1\bin)中设置环境变量:到此,环境变量配置完成。

qq_53545309的博客 1072

转帖:jQuery事件处理: 别再乱用“return false”了

原地址 :http://www.jqfans.com/thread-136-1-1.html 最近在写程序的时候经常用到 return false 看了这个文章后 感受颇多 就转过来了 希望对大家有帮助 原文:http://heikezhi.com/2011/04/18/jquery-events-stop-misusing-return-false/ 可能在你刚开始学习关于jQ...

sigh0829的博客 1285

燃煤电站锅炉热力计算表格.xlsx

燃煤电站锅炉热力计算表格

Jquery常见面试题

本博客参考自:https://www.oschina.net/translate/jquery-interview-questions-answers-programmers http://wenku.baidu.com/link?url=fUvld5m4SXB2CK7TniL1w90ok5_WNYtZYQpDeiS-WHwEGlbb6sqJwiUJa2Vi6ggjJgosb2JLmTRsIKC

wojiaohuangyu的专栏 1950

JQUERY中的事件处理:RETURN FALSE、阻止默认行为、阻止冒泡以及兼容性问题

为什么80%的码农都做不了架构师?>>> ...

weixin_33735077的博客 279

JQuery笔记

JQuery简介 一。JQUERY学习重点: 1.熟练背诵JQUERY[选择器和过滤器]语法 2.熟练掌握【JQUERY对象】提供【功能函数】 二。jquery学习方式 1.一天理论介绍 2.分段提供jquery练习内容 三。JQUERY技术介绍: 1.就是JavaScript的封装版 2.简化JavaScript对DOM对象定位以及对DOM对象属性操作开发步骤 四。JQUERY使用: 1.下载jquery工具文件,并导入到工程中. 2.将jquery

Li某人_初学者 2027

JSjQuery的区别(超级详细)

jqueryjs的区别是什么? 一、首先来看一下jQueryjs的概念 jquery是一个快速、简洁的JavaScript库,极大的简化了javascript编程。 js是一种脚本语言,常用于网页客户端编程,使网页在客户端浏览器中,实现更多地动态功能,表现出更加丰富的视觉效果。 所以,最本质的区别就是js是一种语言,而jQuery是基于该语言的一种框架。除却最本质的区别还有一些用法上的差别。 ...

岛田悠米 5590

jQuery——jQuery学习笔记(完整版)

本文主要介绍有关jQuery的相关知识点

Bonsoir777的博客 1753

jquery-cropper:终极jQuery图像裁剪插件完整指南

jquery-cropper是一款基于Cropper.jsjQuery图像裁剪插件,它为网页开发者提供了简单而强大的图像裁剪解决方案。无论是头像上传、照片编辑还是图片处理,这款插件都能帮助你轻松实现专业级的图像裁剪功能。 ## 为什么选择jquery-cropper? 在众多图像裁剪工具中,jquery-cropper脱颖而出的原因有以下几点: - **简单易用**:作为jQuery插件,

gitblog_00114的博客 1103

JQuery校验

JQUERY校验: 1、

抽象的类 506

jQuery简介、引入jQueryjQuery核心函数、jQuery对象、jQuery对象操作class、addclass补充、jQuery对象复制——jQuery

jQuery简介、引入jQueryjQuery核心函数、jQuery对象、jQuery对象操作class、addclass补充、jQuery对象复制

weixin_70320000的博客 3724

jQuery.Turbolinks与其他jQuery插件的兼容性测试:哪些插件可以完美配合

想要在Turbolinks项目中实现无缝的页面切换体验吗?jQuery.Turbolinks插件正是解决jQuery事件绑定问题的终极方案!这个简单的jQuery插件能够修复由Turbolinks引起的绑定事件问题,让您的jQuery代码在Turbolinks环境下正常工作。但对于许多开发者来说,最关心的问题是:jQuery.Turbolinks究竟能与哪些jQuery插件完美配合使用? ##

gitblog_00022的博客 981

jquery

jquery 1. jquery 它是一个js库,类似于package,经常被引用。 中文文档:http://jquery.cuishifeng.cn/ 1.1. 引用方法 常在网页源码文件引用: <script src="{{url_for('static',filename='js/jquery-3.3.1.min.js')}}">&l...

akuibpt23191的博客 229

JSJQuery区别

JSJQUERY的区别 ①.根据ID取元素 { JS:取到的是一个DOM对象。   例:var div = document.getElementByID(“one”); JQUERY:取到的是一个JQUERY对象。   例:var div = $("#one");——括号里面是根据某个东西来找,相当于一个选择,如果我们要根据ID来找,在样式表里的ID是用#来表示的,所以在这里我们直接带入井号,...

zhangankang的博客 163

jQueryjQuery概述及jQuery的原理_01

jQuery是一款优秀的JavaScript库,jQuery设计者的宗旨是“write less,do more”,即少写代码,多做事。那在使用jQuery完成比较复杂的页面开发时,可以快速的获取DOM元素,并且快速的修改DOM元素的样式,这比使用原生的JS简单多了,而且jQuery还提供了一些实现动画及特效的函数,可以快速实现复杂的用户交互效果,用起来是很爽的!.........

青春木鱼的博客 1616

jquery 的模块化

最近在威客上接了个任务,想起来还是觉得对不住那位雇主。我就一半路学PHP打酱油的,全自学,也就只做过一个完整的小网站。这个任务网站完全是东拼西凑弄的。自己看着那些前台后台的代码都不想看第二次。 入正题吧,我以前的JS代码都是使用JQUERY,也是没有什么章法,就是一个 $('#aa').click(){ } 随便放在一个地方都运行就行。我看那个PINPHP的JUQERY代码就感觉很好,虽然很多代

cxmove的专栏 2049

jQuery解析xml的两种方法

第一种方案(最稳妥): 先将String格式的xml转换为xml对象,然后再用Jquery解析xml对象 var returnDataXml = parseXML(returnData); var param = $(returnDataXml).find("param"); for(i=0;i<param .length;i++){ var paramName = $(param[i]).attr("name"); var rDescription = $(param[i]).

图图小淘气的博客 2335

jquery监听input值变化_jQuery入门教程-Jquery实战讲解

不会闲聊!!!不会扯淡!!!小UP只会分享与Java相关的学习资源本套视频共计时长四小时三十二分钟,循序渐进地对jQuery的各种选择器、函数和方法调用进行了详细的讲解,更结合了大量的案例。jQuery详细学习教程来啦 _jQuery_Jquery教程_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili​www.bilibili.com看完视频想要资料的小伙伴 速速保存:网盘链接:https://...

weixin_39866874的博客 160

jQuery Smart Wizard:终极jQuery步骤向导插件完整指南

在现代Web开发中,**jQuery Smart Wizard** 是一款功能强大且易于使用的步骤向导插件,能够为您的表单、注册流程、结账页面等创建美观且用户友好的多步骤界面。这款jQuery步骤向导插件不仅提供了完整的导航控制,还支持表单验证、Ajax内容加载、键盘导航等高级功能,让您的用户体验更加流畅和专业。 ## 🚀 为什么选择jQuery Smart Wizard? **jQuery

gitblog_00229的博客 348

jsjquery区别

jsjquery区别 根据id取元素 js取到的是一个DOM对象 var div=document.getElementByID("a"); jquery取到的是一个jquery对象 var div=$("#a"); 括号里面是根据某个东西来找,相当于一个选择,如果我们要根据ID来找,在样式表里的ID是用#来表示的,所以在这里我们直接带入#号,整句的意思就是根据ID为a的来查找。 根据class取元素,在数组里面如果要去DOM对象使用索引的方式,如果要去jquery对象使用eq() js取到的是一个数

weixin_50659005的博客 222
上一篇: 关于js事件
下一篇: 关于jquery中ajax
edilon_
博客等级 码龄14年 0粉丝 15原创
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值