当前位置: 首页 > news >正文

JQuery 使用技巧

文章目录

  • 隐藏/显示
  • 淡入淡出
  • 滑动
  • 追加新元素
  • 删除元素/内容
  • 设置 CSS 样式
  • 尺寸
  • 遍历
  • Ajax
  • 根据 input 控件中的值 实时改变另一个值

$()是jQuery()的简写=getElementByTagName();如: $(“div”)=getElementByTagName(“div”);
$()的作用是用于查找出 HTML 的标签、属性、样式。而且还可以通过层次进行查找出。

noConflict()翻译成中文是“无抵触”。用法:作用是防止与其他框架同使用时$()简写重名导致脚本停止运行。当然我们也可以这样 var jq = $.noConflict();这样就能创建自己的 jQuery 的简写了。jq 就是简写!

隐藏/显示

Hide(),show()

淡入淡出

fadeIn(),fadeout(),fadeToggle(“slow”),fadeTo(“slow”,0.5)分别是只会淡入,只会淡出,会淡入淡出(有可选效果,快、慢),淡出的快慢以及透明度。

滑动

slideDown(),slideUp(),slideToggle()分别是往下滑动,往上滑动,能上能下滑动。

追加新元素

append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容(都是在前面或是都在后面插入内容没感觉有什么不同)
如:$(“div”).append(“asds”);其中 div 是被选元素

删除元素/内容

Remove()删除选中的那个元素(包括其子元素),empty()删除被选中的子元素。

设置 CSS 样式

addClass(),removeClass(),toggleClass(),css()分别是增,删,切换,设置或返回样式属性。

尺寸

Width()height(),innerWidth/Height()outerWidth/Height()分别是设置或返回元素的宽,高。包括内边距宽高。包括内边距加边框,如果括号内为 true 的话则包括内+外+边框总和的宽高

遍历

Parent(),parents(),parentsUntil()分别是返回被选元素的上一级(直父),被选以上所有的元素。返回两个元素之间的所有祖元素。
Children(),find()分别是返回被选元素的下一级(直子)。Find()括号内如果是指定元素标签的话则返回被选元素的所有‘子’指定标签,如果是“*”则返回被选元素下的所有子元素标签。
Siblings()返回被选元素的同胞所有元素(如果括号内带有指定元素标签则返回同胞中所有该元素标签的元素),next()返回被选元素的同胞下一个元素,nextAll()返回的是被选元素的同胞下所有的元素,nextUntil()返回的是被选元素到 nextUntil()括号指定元素之间的所有元素。Prev(),prevAll(),prevUntil()与 next(),nextAll(),nextUntil()一一相反对应。
First()返回被选元素的首个元素(选中的元素有多个),last()则是对应最后一个元素。Eq(n)返回被选元素索引的第 n 个元素(选中的元素有多个),filter(“指定标准的元素”)返回带有指定标准的元素,其他的一律会被从集合中删除。Not()方法与 filter()相反。

Ajax

jQuery 是通过 load(URL,data,callback)方法进行加载服务器数据,其中 callback 参数是可选的。
$.get(URL,callback)从服务器上请求数据,URL 是必选,callback 是可选,用于请求成功后所执行的函数。

根据 input 控件中的值 实时改变另一个值

使用的控件的 onkeyup 方法

1、Html 控件中添加 onkeyup 事件:

<inputtype="text"name="card-num"id="card-num"onkeyup="onCardNumChange();"placeholder="请填写身份证号"
/>

2、JS 中添加对应的数据获取方法:

function onCardNumChange() {var cardNum = $("#card-num").val();var carBirth =cardNum.substr(6, 4) +"-" +cardNum.substr(10, 2) +"-" +cardNum.substr(12, 2);$("#car-birthday").val(carBirth);
}

相关文章:

  • MCP之一_MCP协议解析
  • 邦芒秘籍:面试时自我介绍主要包含四个方面
  • PyCharm 2023升级2024 版本
  • 线下CPG零售的核心:POG与销量的循环优化
  • 回归问题常用模型以及优缺点和使用场景
  • TP5兼容达梦国产数据库
  • JAVA EE_网络原理_UDP与TCP
  • DeepSearch复现篇:QwQ-32B ToolCall功能初探,以Agentic RAG为例
  • SAP /SDF/SMON配置错误会导致HANA OOM以及Disk Full的情况
  • 【TS入门笔记3---接口(interface)、 函数与泛型 、类与面向对象 】
  • [原创](现代Delphi 12指南):[macOS 64bit App开发]: 跨平台开发同样支持retain()引用计数器处理.
  • 【Spark入门】Spark RDD基础:转换与动作操作深度解析
  • 爬虫学习笔记(三)--Http协议
  • 厚铜PCB如何兼顾质量与成本?供应商设计规范执行的黄金平衡点
  • 【行业特化篇2】金融行业简历特化指南:合规性要求与风险控制能力的艺术化呈现
  • 软考-软件设计师中级备考 6、数据结构 图
  • 鸿蒙NEXT开发组件截图和窗口截图工具类SnapshotUtil(ArkTs)
  • 榕壹云信用租赁系统:基于ThinkPHP+MySQL+UniApp的全链路免押租赁解决方案
  • 声纹监测技术在新能源汽车的应用场景解析
  • FPGA-数字时钟
  • 自称“最美”通缉犯出狱当主播?央广网:三观怎能跟着“五官”跑
  • 深圳宝安区一宗涉宅用地中止出让,起始总价86.27亿元
  • 伊朗港口爆炸已致46人死亡
  • 幸福航空五一前三天航班取消:客服称目前是锁舱状态,无法确认何时恢复
  • 马上评丨市长信箱“已读乱回”,群众在意的是什么
  • 网警侦破特大“刷量引流”网络水军案:涉案金额达2亿余元