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