Jquery总结

Jquery

这篇文章中本来有一些图片的，但是复制粘贴不上来，附件内容中有此篇文章全部内容

1.Jquery:

是一种js框架。

除了Jquery以外还有prototype.js插件、Extjs框架

后期我们还要学习jquery的一种UI插件，有JqueryUI和Jquery-EasyUI（常用重点）两种；

2.Jquery能够做哪些事情？

实现页面特效

例如：显示隐藏、动画效果、ajax技术、以及操作DOM；

简化了我们的代码，使开发者开发更加效率；

4.开发中常用的版本是：1.6

咱们讲解1.11

5.Jquery中选择器：

 1)id选择器：$("#id属性值") 按照id属性值选择对象；返回结果是jquery的对象，不是js对象，因此没有value或者其他区属性；

    例如：$("#empTab").css("css属性","值").css("color",red); 注意，jquery可以这样连续给定方法，如果是获取到具体值了，到头了；

例如：css（{"css属性":"值","属性":"值"...}）

 2)class选择器：$(".class属性值"),按照class属性值找标签，返回jquery对象； 注意：$(".ood_tr")[0]错误的，因为$(".ood_tr")返回不是数组； 

 3)按照标签名找：$(“标签名”)

 空格表示向里面找 

 4)表示过滤的：

   （1）:eq(下标从0开始) 

  例如：$("table:eq(2)") 找table标签且为第三个table标签；

        例如：$("table:eq(1) tr:eq(0)") 表示找第一个table，里面的第一行；

   （2）:last   :first 表示过虑，找第一个或者最后一个： 

例如：$("table:eq(1) tr:first")

     (3) :not表示排除 

   （4）：odd 表示选择下标为奇数的对象，：even表示选择下标为偶数的对象；

   （5）：lt（下标） ：gt(下标)小于或者大于某个下标  

(6) parent() 返回指定标签对象父标签；

例如：$(":checkbox:first").parent();   

    例如： $("p").parent(".b");

     <div class="a"> <p></p><div>

     <div class="b"> <p></p><div>

 (7):checked 表示被选中的，表示过滤，只针对radio和checkbox使用； 

（8）:checkbox 表示找type属性为checkbox的标签；（其他可以仿照）

（9）按照任意属性找标签对象，表示过滤：语法[属性=‘值’]

 例如：$(":checkbox[name='items']")

6.Jquery事件：

   1)click事件，单击事件；例如：

$("#btn").click(function(){   

});

2) mouseover事件；

3) mouseout事件；

4) focus、 blur、 mousemove

7.Jquery常用方法：

1)css方法：

  css("css属性","值") 对标签对象给定一种样式；

  css({"css属性":"值","属性":"值"...});给定多种样式；

  1.6版本没有： 

  css（"",function(){}） 给定样式时，触发回调函数；   

2）addClass("参数") 和removeClass(参数);

添加或移除已有的class样式，不能覆盖已有的css样式 

3）Ready方法 

4)index方法:

表示获取指定标签中某个标签对象的下标

例如：$("table tr:not(:first,:last)").index($(this))

5）remove方法，移除指定标签对象；

例如：$("table tr:first").remove(); 

6）$("选择器").each(function(){...})

  表示选择的每一个对象像都执行该方法；相当于遍历；注意，这个里面使用$（this） 表示该对象；

$.each(json对象或者数组， function（k,v）{用于遍历数据}) 

7）attr()一个参数，获取某个属性的值；两个参数，为某个属性赋值

8）Show()、hide()  如果加参数，表示多少毫秒显示或隐藏；

9）find()方法用于过滤，表示找指定标签内部对象

例如：$("div").find（“span”）

10）:next（）表示过滤， 找指定标签后面紧跟着的对象；

例如：$("#uid").next("span");

11）:not(this) 这里this表示当前对象；

12）offset方法获取指定标签在页面上的偏移量,通过left和top属性获取； 

13）html()方法 

14）is(参数)表示判断选择的对象处于某种状态，返回true或者false；例如：hidden隐藏 ：selected或者：checked被选中  ：visible 显示 。参数如果是标签名，表示该对象是否是这种标签； 

15）toggle ()方法用于显示和隐藏的切换：

注意:1.10和1.10以上版本 只针对显示和隐藏切换起作用，而以下版本，可以绑定多个click事件的切换；看文档； 

16) bind()方法：表示可以对该对象绑定多种事件；

例如:同时绑定click、mouseover，mouseout 

17) Html()表示获取文本，识别html标签

text() 不解析html标签；有参数为标签文本赋值,无参数获取文本； 

18) append(参数)向指定标签对象内部追加文本，不会替换已有内容；19)  after（参数）向指定标签后面追加文本

 before（参数）向指定标签对象前方追加文本

20) val() 一个参数：为value属性赋值，

没有参数：表示获取value属性值； 

21) 表单序列化： $().serialize()

 $()选择器必须选择指定form表单， 序列化后返回字符串，字符串格式为：&name属性=值&。。。。

22) e.pageX  e.pageY  获取光标在页面位置：

$("#btn").mousemove(function(e){alert(e.pageY+":"+e.pageX);});

23）$.trim(参数) 去掉指定字符串左右空格；

8.其他：

$(this) 意思是当前对象， this是js对象，那么如果转化为jquery对象，需要通过$(this)