jQuery (02) 重点知识点总结

jQuery

如果用户未登录，当加入购物车，会将商品相关信息存入 cookie 或者 session，这两个都是可以标识用户信息的东西

是一个 JavaScript 库，封装了常用的开发功能，和一些需要的方法，来提高开发效率。

• jQuery 2.0 以前，以跨浏览器 Web 为主要任务。

• jQuery 的级联调用（链式方法调用）。       size()，add()，not()，filter() 这四个方法返回原包装集
  • .end()    返回前一个 jQuery 对象
  • .andSelf()    用于合并最近的两个包装集
  • .replaceAll();
  • .append();
  • .appendTo();
  • .prepend();
  • .prependTo();
  • .insertBefore();
  • .before();
  • .after();
  • .insertAfter();
  • .is();    是否包含某个元素        包装集中有一个包含，则返回 true
  • .each();    隐式调用

• jQuery 调用多对象的方法，或属性时，默认操作第一个对象。

  • $("ul li").text();    // 只会打印第一个 li 的文本内容

• jQuery 的独立开源组件 Sizzle ，支持CSS选择器语法以及特有的伪类插件

• :header    选中标题元素
  :animated    正在绘制动画效果的元素
  :lang("en")    lang="en" 的元素
  :first
  :last
  :nth-child(1)    第一个元素索引是 1
  :nth-last-child(1)    最后一个元素索引是 1
  :parent    所有父元素
  
  :lt(3)    在同时调用 lt 和 gt 时，正确顺序是 :lt(5):gt(3)    选中小于 5，大于 3 的 jQuery 对象
  :gt(3)    
  
  
  :has(":checked")
  :checked
  :selected
  :enable
  :disable
  
  :input
  :text
  :password
  :radio
  :checkbox
  :submit
  :image
  :reset
  :file

• jQuery 包装集
  • 使用 jQuery(""); 这样的 CSS选择器语法 获得的一组元素
  • 使用 在 jquery-1.3 新增加了 $("#curLi").closest(".curBox"); 从元素本身开始，向祖先元素找
  • 获取包装集中元素的个数

    • $("ul li").length;
      
      $("ul li").size();

  • 获取包装集中 DOM 元素（jQuery 对象转 DOM 对象）

    • $("table tr")[0];
      
      $("table tr").get(0);

  • 获取某元素在包装集中的索引

    • $("tr.current").index();    // 在同辈兄弟元素中的索引
      
      $("#ulList li").index( $ele );    // 在包装集中的索引

  • 往包装集添加元素

    • ("table tr").add("#ulList li");

  • 删除包装集中元素

    • ("table tr").not(".lastTr");

  • 过滤包装集中某些元素

    • ("table tr").filter(".current");    // 得到 class=current 的 tr 元素
      
      ("table tr").filter(func);    // 每个元素都执行func，删除返回 false 的元素

  • 获取包装集的子集

    • // 传入 start， end     返回元素不包括 end
      $("#ulList li").slice(1, 3);    // 得到索引 1 2 的 li

  • 搜索包装集中的元素

    • $("ul").find("li.current");    // ul li.current 元素被选中
      
      区别于
      $("ul").has("li.current");    // 后代元素中有 li.current 的 ul 被选中

  • 根据文本内容获取元素

    • $("#ulList li").contains("kjf");    // 返回 文本内容中包含 kjf 的元素

  • 通过关系获取包装集

    • $("li.current").parent();
                     .parents();
                     .children();
                     .siblings();
                     .contents();    获得匹配元素集合中 每个元素的子节点，包括文本和注释节点
      
                     .first();
                     .last();
                     .next();
                     .nextAll();
                     .prev();
                     .prevAll();
                     .eq();

• 用法

1. 下载 jQuery-1.12.4.js 放到 js 文件夹下面

• 官网有两个版本的 js 库

• jquery-1.12.4.js    // 具有代码编程规范，即代码可以看，有注释
  jquery-1.12.4-min.js    // 由以上 js 代码压缩，去掉了无关空格，换行，注释，变量命名更短    网页加载速度更快

2. index.html 导入 js 库

• <script type="text/javascript" src="./js/jquery-1.12.4.js"></script>
  
  // HTML5 已将 JavaScript 设置为默认脚本语言，可如下编写
  <script>
      // js代码
  </script>

3. 将 js 代码写在 DOM加载完成事件处理函数中。

• $(function(){
      //  js 代码
  });

  以上代码等同于

  • $(document).ready(function(){
        // js 代码    
    
      // 此代码会在 页面 DOM 加载完成后 触发 DOMContentLoaded 事件 而执行，而不用等待图片加载完成。。。
         // 可以写多个 $(function(){}); 且都会执行 

    
      // 优于 window.onload() ， load事件 必须要等到页面所有资源都加载完成才会触发
            // window.onload();    如果写多个，则只会生效最后一个
    });
    
    还等同于
    $().ready(function(){
    　　// js 代码    jQuery 默认参数是 document
    });
    
    // 一个网页的加载顺序是：
        // 1. 域名加载
        // 2. HTML 加载 DOM    这里加载完了就触发 DOMContentLoaded 事件
        // 3. 加载 js、css    
        // 4. 加载图片、视频等等资源，    这里加载完了就触发 load 事件
    

    
    // 用法 document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);

• jQuery 的两把利器
  • jQuery 核心对象        $        jQuery
    • 做为对象使用，调用 jQuery 的方法
      • $.each();
        • 隐式遍历数组

        • $.each(arr, function(index, eleVal){
              console.log("arr["+index+"] :  "+eleVal);
          });

      • $.trim();
        • 去掉字符串首尾空格

        • $.trim("   哈啊    ");    // "哈啊"

      • $.type();
        • 判断数据的类型

        • $.type(jQuery);    // "object"    证明 jQuery 也是一个对象

      • $.isArray();
        • 判断是否是数组

        • $.isArray( $("#content") );    // false    证明 jQuery 的 css选择器得到的是 类数组对象

      • $.isFunction()
        • 判断数据是否是函数

        • $.isFunction(jQuery);    // true    证明 jQuery 也是一个函数

      • $.ajax({url,data,type,success})
    • 这两个是库提供给外界的 接口

• • • 枚举对象的属性

      • for(var eleIndex in aObj ){
            console.log(aObj[eleIndex]);
        }
        
        // 或者
        arr.forEach(eachValue, index, self){};

• • jQuery 核心函数

• jQuery();  
  • jQuery 提供给用户的 API 接口 有两个变量

    • jQuery();
      
      //等价于
      $();

• • 多库共存
    • 由于除了 jQuery 库，其他的库可能也使用了 $ 作为 API 接口，
    • jQuery 提供了 .noConflict() 函数，释放对 $ 的所有权，还可以指定新的变量作为接口

      • var myJQ = jQuery.noConflict();    // 此行以下代码， myJQ(); 等同于 jQuery();

        此行代码以后，$ 就可以供其他库调用了。

• jQuery对象 转成 DOM 对象
  • jQuery对象，使用 $("#id") 这样的选择器获取到的对象
    • 为了区别于 DOM 对象，变量命名以 $ 开头

    • var $firstA = $("#content a:nth-child(1)");

• • 转为 DOM 对象，

    • $("#content a:first")[0];    // 返回对应 DOM 对象    因为 jQuery 使用 css 选择器获取元素时，总是返回一个类数组对象，成员为获取到的一个或多个元素
      
      // 或者
      $firstA[0];    // 返回对应 DOM 对象
      
      // 或者
      $("#content a:first").get(0);
      $firstA.get(0);

• 操作 jQuery 对象 的二值属性

.prop("checked", true);

.prop("checked", false)；

• • $("input:checked").prop("checked", false);
    $("input:checked").prop("selected", false);
    $("input:checked").prop("disable", false);
    $("input:checked").prop("enable", false);

• 元素的 高度/宽度

  • // content    支持设置
    $("#box").height();
    $("#box").width();
    
    // content+padding   不支持设置
    $("#box").innerHeight();
    $("#box").innerWidth();
    
    // content+padding+border    不支持设置
    $("#box").outerHeight();
    
    // 如果传入 true 则获取 content + padding+border+margin
    $("#box").outerWidth(true);
     

• 获取/设置 元素 的位置
  • 相对于网页页面左上角     .offset()
    • 读取位置

      • $("#box").offset().top;
        $("#box").offset().left;

• • • 设置位置

      • $("#box").offset({
            top: 100,
            left: 200
        });

• • 相对于父元素左上角    .position()
    • 读取位置

      • $("#box").position().top;
        $("#box").position().left;

• • • 设置位置

      • $("#box").position({
            top: 100,
            left: 200
        });

• 移除元素    .remove()

  • // <body>    <div id="box"> 我是一个div </div>    </body>
    
    $("#box").remove();
    
    // <body>        </body>

• 移除元素文本内容    .empty();

  • // <p>哈哈哈哈哈</p>
    
    $("p").empty();
    
    // <p></p>

• 事件绑定 .on("click", func1);    与解绑 .off("click", func1);
• on 还可以用于事件委派（根据事件冒泡原理实现: 子元素的事件，会向祖先元素传递）

  • $("#ulList").on("click", "li", function(){
        alert("I am "+ $(this).text() );
    });

• • jQuery 函数的 this 总是返回 DOM对象
    • 如果要使用 jQuery 对象的方法，需要 $() 转换成 jQuery 对象

• • 事件触发    trigger

    • $("#box").trigger("click");

• 鼠标移入/移出事件
  • 只在移入绑定元素时触发，移入子元素不重复触发 （常用）
    • • mouseenter
        • 原理是取消了事件冒泡
        • 建议使用 event.stopPropagation();    取消某个事件的冒泡。。。（IE 使用 window.event.cancelBubble() 取消事件冒泡）
      • mouseleave
    • .hover(enter, leave);   
      • 其实 .hover() 函数 内部封装的是 mouseenter 和 mouseleave 事件

• • 在移入绑定元素时触发，移入子元素时还会触发 （先触发 out 再触发 over）
    • • mouseover
      • mouseout

• 重要事件

  • $("#box").click();    // 单击时 触发
    $("#box").dbclick();    // 双击时 触发
    
    $("#box").blur();    // 元素失去焦点时 触发
    $("#box").focus();    // 元素获取焦点时 触发
    $("#box").focusIn();    // 元素获取焦点瞬间 触发
    $("#box").focusOut();    // 元素失去焦点瞬间 触发
    
    .keypress([data], func);    没插入一个字符时 触发
    
    .keydown([data], func);    按键按下 触发
    .keyup([data], func);    按键 松开触发
    
    $("input:text").select();    // 当文本内容被选中时 触发
    $("textarea").select();    // 当文本内容被选中时 触发
    
    $("input:text").change();    // 当值发生改变，失去焦点时 触发
    $("textarea").change();    // 当值发生改变，失去焦点时 触发
    $("select").change();    // 选中某选项时 触发
    
    // 点击提交时触发
    $("#form_one").submit(function(){
        return false;    // 阻止浏览器默认行为：阻止提交表单
    });
    
    .resize([data], func);    当调整浏览器窗口大小时 触发

• 操作 jQuery 对象的 class
• 增加
  • $("#ulList li:last").addClass("current");
• 删除
  • $("#ulList li:last").removeClass("current");
• 切换
  • $("#ulList li:last").toggleClass("current");

• • 过滤包装集
    • $("#ulList li:last").hasClass("current");

• toggle 切换函数
  • 如果不传参数，    或者只传一个时间（毫秒）
    • $("#box").toggle();    // 两次执行会在 show() 和 hide(); 函数之间操作 $("#box")
    • $("#box").toggle(200);     // 每 200ms 切换 show() 和 hide() 操作 $("#box")
  • 如果传参数，传入 2 个以上的函数，点击交替触发事件，依次切换
    • $("#box").toggle(chgToRed, chgToBlue, chgToBlue);    // 第一次 click 执行chgToRed，第二次 click 执行chgToBlue， 第三次 click 执行chgToGreen

• 动画函数       
  • • 实质上 是 display:none;  的切换   
    • 参数可选值：
      • • 最后一个参数，可以传一个函数。在动画执行完毕后执行
        • normal    代表 400 毫秒
        • slow    代表 200 毫秒
        • fast    代表 600 毫秒
        • 过渡效果    'swing'    变速运动
          • 
        • 过渡效果 'linear'    匀速直线运动
          • 
  • 显示 show();    隐藏 hide();        toggle();
  • 淡入显示 fadeIn();    淡出隐藏 fadeOut();        fadeToggle();
  • 下滑显示 slideDown();    上滑隐藏 slideUp();        slideToggle();
  • 动画定制 :  

    • $('#message').animate( {
          left： '650px',
          opacity： 0.,
          backgroundColor: skyblue,
          fontSize： '24px'
      }， 1500， 'linear' )； 

      清除动画队列：

      • $("#box").stop(true, true);
        // 第一个 true    清除动画队列里的动画
        // 第二个 true    立刻到执行完毕状态

• 在元素之前添加内容

  • $("#box").before("<p>Hello World</p>");

• 在元素之后添加内容

  • $("#box").after("<p>Hello World</p>");

• 元素的

.text();    文本内容

.html();    源码内容

.value();    值