Jquery


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

1.Jquery:

是一种js框架

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

后期我们还要学习jquery的一种UI插件,有JqueryUIJquery-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表示排除 

   (4odd 表示选择下标为奇数的对象even表示选择下标为偶数的对象;

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

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

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

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

      

      

 (7):checked 表示被选中的,表示过滤,只针对radiocheckbox使用; 

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对象或者数组, functionk,v{用于遍历数据}) 

7)attr()一个参数,获取某个属性的值;两个参数,为某个属性赋值

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

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

例如:$("div").find(“span”)

10):next()表示过滤, 找指定标签后面紧跟着的对象

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

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

12)offset方法获取指定标签在页面上的偏移量,通过lefttop属性获取; 

13)html()方法 

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

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

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

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

例如:同时绑定clickmouseovermouseout 

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) 意思是当前对象, thisjs对象,那么如果转化为jquery对象,需要通过$(this)