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