JQuery
JQuery : 是一个JS的框架(JS的类库).对传统的JS进行了封装.
现在企业的开发中往往不会使用传统的JS进行开发,通常都会使用JS框架进行开发.
JS的常用的框架:
JQuery,ExtJS,DWR,Prototype...
JQ的效果操作:
引入Jquery的js文件.
<script src="../../js/jquery-1.11.3.min.js"></script>
JQ显示和隐藏
* show();
* 使用一:Jq对象.show();
* 使用二:Jq对象.show(“slow”); // slow,normal,fast
* 使用三:Jq对象.show(毫秒值); // 1000
* 使用四:Jq对象.show(毫秒值,function(){});
* hide();
* 使用一:Jq对象.hide();
* 使用二:Jq对象.hide(“slow”); // slow,normal,fast
* 使用三:Jq对象.hide(毫秒值); // 1000
* 使用四:Jq对象.hide(毫秒值,function(){});
* slideDown(); --向下滑动
* 使用一:Jq对象.slideDown();
* 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast
* 使用三:Jq对象.slideDown(毫秒值); // 1000
* 使用四:Jq对象.slideDown(毫秒值,function(){});
* slideUp(); --向上滑动
* 使用一:Jq对象.slideUp();
* 使用二:Jq对象.slideUp(“slow”); // slow,normal,fast
* 使用三:Jq对象.slideUp(毫秒值); // 1000
* 使用四:Jq对象.slideUp(毫秒值,function(){});
* fadeIn(); --淡入
* 使用一:Jq对象.fadeIn();
* 使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast
* 使用三:Jq对象.fadeIn(毫秒值); // 1000
* 使用四:Jq对象.fadeIn(毫秒值,function(){});
* fadeOut(); --淡出
* 使用一:Jq对象.fadeOut();
* 使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast
* 使用三:Jq对象.fadeOut(毫秒值); // 1000
* 使用四:Jq对象.fadeOut(毫秒值,function(){});
* animate(); --自定义动画
* toggle(); --单击切换函数
* Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...
选择器
【基本选择器】
id选择器
* 用法:$(“#id”)
类选择器
* 用法:$(“.类名”)
元素选择器
* 用法:$(“元素名称”)
通配符选择器
* 用法:$(“*”)
并列选择器
* 用法:$(“选择器,选择器,选择器”)
【层级选择器】:
后代选择器: 使用空格 所有后代包含孙子及以下的元素
子元素选择器: 使用> 第一层的元素(儿子)
下一个元素: 使用+ 下一个同辈元素
兄弟元素: 使用~ 后面所有的同辈元素
基本过滤选择器:
first/last/not/even/odd
eq/gt/it(index)
header/animated
内容选择器:
contains/empty/has/parent
表单选择器:
input/text/password/radio/checkbox/submit/image
reset/button/file
表单属性选择器:
enabled/disabled/checked/selected
JQuery
JQuery的事件切换:
toggle(); --单击事件的切换
hover(); --鼠标悬停的切换
【JQuery对属性的操作的方法】
* attr(); (老版本)最好不用
* 使用方法一:$(“”).attr(“src”); 给属性值
* 使用方法二:$(“”).attr(“src”,”test.jpg”); 添加
* 使用方法三:$(“”).attr({“src”:”test.jpg”,”width”:”100”}); 多个给属性值
* removeAttr();
* prop();新版本的方法.
* 使用方法一:$(“”).prop(“src”);
* 使用方法二:$(“”).prop(“src”,”test.jpg”);
* 使用方法三:$(“”).prop({“src”:”test.jpg”,”width”:”100”});
* removeProp();
* addClass()
* removeClass();
【JQuery的遍历】
遍历的方式一:
* $.each(objects,function(i,n){
});
遍历的方式二:
* $(“”).each(function(i,n){
})