jquery基本操作
前言
终于开始了在博客园的第一篇随笔,一直想写,又都没时间(其实都是忽悠自已)。经历了一个电商平台的开发,真心很疲惫,想休息下,但我不敢。今天若休息,明天呢,最终会发现一直是在自已忽悠自己。以前经常看别人的博客,某些写的真的很好,是书本上根本看不到的,现在我也要以此来记录下我的所学所悟。以下是使用jQuery的一个小总结,为一些常用选择器和方法。
jQuery选择器
1.id选择器:$("#elementid"),选择id为elementid的元素集,注意当使用服务.NET的服务器控件时,由于使用母板或元素嵌套等因素解析到客户端的元素id可能会有变化
2.class选择器:$(".elementclass"),选择class含elementclass的元素集,元素是可以指定多个样式的,如class="btn001 width100"
3.子选择器:$("pselector>cselector"),选择pselector的cselector子元素
4.后代选择器:$("aselector dselector"),选择aselector的dselector后代元素集,注意子选择器与后代选择器的区别
5.基本过滤选择器:$("selector:first")、$("selector:last"),选择selector中的第一个/最后一个元素,如$("ul li:first")选择ul下的第一个li元素
6. $("selector:eq(index)"),选择selector中的第index+1个元素,如$("ul li:eq(1)")选择ul下的第二个li元素
7. $("selector:not(selector2)"),选择selector中不符合selector2的元素集,如$("ul li:not(.highlight)")选择ul下的不含样式highlight的li元素集
8. $("selector:even")、$("selector:odd"),选择selector中index为偶/奇的元素集,如$("ul li:even")选择ul下的偶index的li元素集,即从第一条,then隔条取
9.属性过滤选择器:$("selector[typename=typevalue]"),选择selector中typename属性的值为typevalue的元素集,如选择单选按钮$("input[type=radio]")
10. :$("selector[typename]"),选择selector中含typename属性的元素集,如选择选中的单选按钮$("input[type=radio][checked]")
11.表单对象属性过滤选择器:$("input:checked"),获取选中的元素,相当于$("input[checked]")
12 $("select :selected"),获取下拉框下的选中项,如$("select :selected").length获取下拉框选项的个数,相当于$("select input[selected]")
13.表单选择器:$("selector :elementtype"),提取selector下elementtype类型的元素,如$("#form1 :checkbox")选取form表单中的复选框,相当于$("#form1 input[type=checkbox")
说明:1.以上均为个人开发中一些实际常用到的选择器
2.选择的结果均为集合,表现为有length属性
3.属性过滤与表单对象属性过滤:从字面就可以理解后者只是前者的一个子功能,即前者可以实现后者
4.表单对象属性过滤与表单选择器的区别:前者是对元素的attr的过滤,后者是对元素的type的过滤
jQuery方法
1.事件方法:click()、focus()、hover()、ready(),为元素绑定事件处理器
2.unbind():为元素移除事件处理器,如在为文本框赋值并触发焦点时,焦点会文本的前面,解决办法:绑定元素focus事件的内容为为文本框赋值,触发focus事件,unbind focus事件
3.toggle():指定两个或多个处理器,click时轮流执行
4.trigger():触发事件,$ele.trigger("click")与$ele.click()的确没区别,但如果要给事件传参呢,答案是只能用trigger。如$ele.click(function(event,arg1,arg2){}),可以这样触发$.ele.trigger("click",["zhagnsan","male"])
5.sildeDown()、slideUp()、slideToggle():展开、收起、切换
6.children()与find():前者为其子元素,而后者为其所有后代元素
7.parent()与parents():前者为其父,后者为其祖先
8.prev()、prevAll()、next()、nextAll()与siblings():前一,前所有、后一、后所有与兄弟元素。均位于同层
9.hasClass()、addClass()、removeClass():对元素的样式进行判断、添加、移除
10.val()、text()、html()、width()、height()、css()、attr():根据传参的个数取或赋
11.show()、hide():显示或隐藏元素
12.has()、is():前者筛选出含有匹配该选择器的后代元素的元素,后者筛选出匹配该选择器的元素。如$("div").has(":hidden")筛选出含有不可见div元素的元素,而$("div").is(":hidden")筛选出不可见的div元素
13. append() :附加元素,作为其最后一个子元素,如$("#div1").append($("<span class='colorred'>你好啊<span>"));
14.$element.offset().top、$element.offset().left:元素左上脚相对于document的top、left
15.e.pageX、e.pageY:事件触发时鼠标指针的坐标
16.animate():动画,如$(".div1").animate({width:"100px",height:"100px"},2000),在2秒内使.div的width、height同时完成渐变为100px
17.js中的一些字符串操作:str.substring(num1,num2),选取索引为小num到序号为大num的子串;$.trim(),$.trim()相当于C#的trim(),注意没有str.trim()这种用法;str.match(reg),使用正则表达式模式对字符串执行查找,并将包含查找的结果作为数组返回;str.split(sep),返回str用sep分隔后的数组;$.inArray(str,strArray),返回str在strArray中的索引
18.each():遍历,两种用法:array.each(function(index,element){}),或$.each(array,function(index,element){}),return false可跳出each
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何在 .NET 中 使用 ANTLR4
· 后端思维之高并发处理方案
· 理解Rust引用及其生命周期标识(下)
· 从二进制到误差:逐行拆解C语言浮点运算中的4008175468544之谜
· .NET制作智能桌面机器人:结合BotSharp智能体框架开发语音交互
· Cursor预测程序员行业倒计时:CTO应做好50%裁员计划
· 想让你多爱自己一些的开源计时器
· 大模型 Token 究竟是啥:图解大模型Token
· 用99元买的服务器搭一套CI/CD系统
· 当职场成战场:降职、阴谋与一场硬碰硬的抗争