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.5,
            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();    值

posted @ 2018-11-08 17:30  耶梦加德  阅读(340)  评论(0)  编辑  收藏  举报