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");
(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)