zoukankan      html  css  js  c++  java
  • jQuery总结

    1,为什么学习jQuery

      write less do  more

      lightweight Footprint

      CSS3  Compliant

      Cross   Browser  兼容

            javaScript缺乏跨浏览器的兼容,最少的代码做更多的事,性能,业内的一个“标准”,节省开发者学习时间,插件,让JavaScript编程变得有趣
      1.几   兼容性是最全的IE5 6 7
      3.几   不考虑IE9之前的兼容
       找之前的版本  找jQuery CDN 镜像,内容分发网络
     
    jQuery对象与DOM转换
      jQuery转DOM
      $("div").get(index);
      或者使用下标索引
      
      DOM转jQuery
      将DOM对象用$()或者jQuery()对象包装
     
      $(document).ready(function(){})  DOM节点加载完毕
      window.onload=function(){}        页面内容加载完毕
      ready比load快
      ready()可以多次调用,不会被覆盖
      window.onload=fn----是赋值操作
      写多个会被覆盖
      $(document).ready(function(){})   ---- $(function(){})
     
     
      
    2,jQuery选择器
      
      基本选择器 
           #id
           element
           .class
           *
           ,
           > 子代
               后代
      其他选择器(选择器太多不想写)
          :first
          :last
          :not(selector)
          :even 偶数
          :odd  奇数
          :eq()
          :hidden 匹配不可见的
          :visible  匹配可见的
          表单
            :checked   匹配所有选中的被选中元素(复选框、单选框,不包括select中的option)
            :selected  匹配所有选中的option
    筛选
        eq(index/-index)----index正数从0算起 , 负数从最后一个元素开始倒数
        first()
        last()
        not(选择器)
        children()
        find()     ----后代
        parent()
        parents() ----祖先
        next()  
        prev()  
        siblings()  
        nextAll() ----查找当前元素之后所有的同辈元素
        prevAll() ----查找当前元素之前所有的同辈元素
        index([selector | element]) ----搜索匹配的元素,并返回相应元素的索引值,从0开始计数
    如果不给index()方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置
        如果参数是一组DOM元素或者jQuery,那么返回值就是传递的元素相对于原先集合的位置
        如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1
        

    样式操作

      设置单个样式 css(name,value);

      设置多个     css({});

      获取样式     css(name);

        addClass();

        removeClass();

        toggleClass();

    动画

       show();

       hide();    ----影响高度,宽度,不透明度

       toggle();

       slideDown();   ----只影响高度

       slideUp();

       slideToggle();

       fadeIn();  

       fadeOut();

       fadeTo([speed],opacity,[easing],fn);  到一个指定的透明度

       fadeToggle();

       animate();

       stop([clearQueue],[jumpToEnd]);

      ----

    节点操作

        append();

        prepend();

        after()   ----外部插入之后

         before() ;

        empty();  ---- 清空节点--删除匹配的元素中所有子节点

        remove(选择器); ----移除节点--自杀--从DOM中删除所有匹配的元素,,这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素,但是这些元素绑定的事件附加的数据都会被移除

        detach(选择器)----从DOM中删除所有匹配的元素,与remove不同的是,他不会移除这些元素绑定的事件和附加的数据

        clone(true);

    DOM操作

        表单值  val();

          内容  html();   text();
        width();  内容宽度
        innerWidth();  包括padding
        outerWidth();   包括border
        outerWidth(true);  包括margin
     属性操作:
        attr(name,value);....
        prop()  布尔类型  checked  selected  disabled  区别  待续...
        1,添加属性名称该属性就会生效使用prop()
        2,只有true,false两个属性使用prop()
        3,其他使用attr()
        
    位置
        offset()   ----获取相对于视口
        position()  ----获取相对于父元素的偏移
     
    滚动 
        scrollTop();
        scrollLeft();
    事件
        on("click","选择器",function(){})
        delegate(selector,type,[data],fn);
        selector:选择器
        type  :  附加到元素的一个或多个事件,由  空格  分隔多个事件值。必须是有效的事件
        fn  :函数
        
    解除
        off(事件,[selector],[fn]);  ----只能解绑on的事件
    触发
        trigger(type,[data]);
          type :一个事件对象或者要触发的事件类型
          data  :  传递给事件处理函数的附加参数
          会触发浏览器默认事件  
        triggerHandler();
           这个特别的方法将会触发指定的事件类型上的所有绑定的处理函数,但不会执行浏览器默认动作
    也不会产生事件冒泡,和trigger类似
        区别:
          1,他不会触发浏览器默认事件
          2,只触发jQuery对象集合中第一个元素的事件处理函数,而trigger是触发所有
          3,这个方法返回的是事件处理函数的返回值,而不是具有可链性的jQuery对象,如果最开始jQuery对象为空
    那么返回undefined   ,,trigger是返回jQuery对象
    事件对象
        e.pageX
        e.pageY
        e.stopPropagation();   ----阻止冒泡
        e.preventDefault();  ----阻止捕获
     
     链式编程   end()
    显示迭代   each(fn)  ----每一个匹配的元素来执行fn函数
    $().each()
    $.each(object,[callback])  ---- 不同于$().each()方法,此方法可用于遍历任何对象
     object : 需要不遍历的 对象 或 数组(!!可以遍历对象)
    callback:  每个成员执行的回调函数,如果需要退出each循环可使用回调函数返回false,其他返回值将被忽略
    ajax:
       $.ajax({});
       $.get(url,[data],[fn],[type]);  
        data:发送的数据
        fn:  载入成功时回调函数
        type:返回的类型
       $.post(url,[data],[fn],[type]);
       $.getJSON(url,[data],[fn]);
     
     
    $.inArray(value,array,[fromIndex])
        确定第一个参数在数组中的位置,从0开始计数,如果没有找到返回-1
        fromIndex:用来搜索数组队列,默认值为0----???
     
    测试操作 
        $.isarray(obj);
        $.isFunction(obj);  
        $.isEmptyObject(obj);
        $.isNumeric(obj);----是否是数字
     
     
     
     
     
    时代在变,你真是留不住自己
  • 相关阅读:
    【SAS NOTE】OUTPUT
    【SAS NOTES】_NULL_
    【SAS NOTE】sas 9.2 安装
    【SAS NOTE】FREQ
    纯数学教程 Page 203 例XLI (1)
    纯数学教程 Page 203 例XLI (3)
    纯数学教程 Page 203 例XLI (2)
    Prove Cauchy's inequality by induction
    纯数学教程 Page 325 例LXVIII (15) 调和级数发散
    纯数学教程 Page 325 例LXVIII (15) 调和级数发散
  • 原文地址:https://www.cnblogs.com/mwfsm/p/6880271.html
Copyright © 2011-2022 走看看