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 立刻到执行完毕状态