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){
})
posted @ 2018-08-21 14:46  GodCity  阅读(112)  评论(0编辑  收藏  举报