jQuery (02) 重点知识点总结

时间 2019-11-08

标签 jquery 重点知识总结栏目 JQuery 繁體版

原文原文链接

jQueryjavascript

若是用户未登陆，当加入购物车，会将商品相关信息存入 cookie 或者 session，这两个都是能够标识用户信息的东西css

是一个 JavaScript 库，封装了经常使用的开发功能，和一些须要的方法，来提升开发效率。html

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 文件夹下面java

官网有两个版本的 js 库

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

2. index.html 导入 js 库jquery

<script type="text/javascript" src="./js/jquery-1.12.4.js"></script>



// HTML5 已将 JavaScript 设置为默认脚本语言，可以下编写
<script>
    // js代码
</script>

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

$(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)；cookie

$("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(); 值