JQuery 基础笔记-白红宇

JQuery 基础笔记

阅读量：3946 次

发布时间：2019-05-24

本文共 36812 字，大约阅读时间需要 122 分钟。

JQuery 基础笔记

1. jQuery 概述

1.1 jQuery 是什么？

在这里插入图片描述

jQuery 由美国人 John Resig 于2006年创建

jQuery 是目前最流行的 JavaScript 程序库之一，它是对 JavaScript 对象和函数的封装

它的设计思想是write less,do more，能对 HTML 文档遍历和操作，事件处理，动画以及 Ajax 变得更加简单

1.2 jQuery 简单应用

原生 JS 设置背景

window.onload = function (ev) {
      // 1.利用原生的JS查找DOM元素   var div1 = document.getElementsByTagName("div")[0];   var div2 = document.getElementsByClassName("box1")[0];   var div3 = document.getElementById("box2");   // 2.利用原生的JS修改背景颜色   div1.style.backgroundColor = "red";   div2.style.backgroundColor = "blue";   div3.style.backgroundColor = "yellow";}

使用 jQuery 设置背景

$(document).ready(function(){
   // 查询，操作 CSS 一步到位	$("div").eq(0).css('background','red');	$(".one").eq(0).css('background','blue');	$("#two").css('background','yellow');});

1.3 jQuery 功能应用

强大的选择器
- 方便快速查找 DOM 元素
- jQuery 允许开发者使用 CSS1-CSS3 几乎所有的选择器,以及 jQuery 独创的选择器

样式操作
- 链式调用

事件处理
- DOM 操作（C增U改D删）
- 隐式遍历(迭代)
- 读写合一

扩展新的jQuery插件

与Ajax技术完美结合

浏览器兼容（建议学习1.x版本）

版本	兼容性
1.x	`兼容ie678`，但相对其它版本文件较大，官方只做BUG维护，功能不再新增，最终版本：1.12.4
2.x	`不兼容ie678`，相对1.x文件较小，官方只做BUG维护，功能不再新增，最终版本：2.2.4
3.x	`不兼容ie678`，只支持最新的浏览器，很多老的jQuery插件不支持这个版本，相对1.x文件较小，提供不包含Ajax/动画API版本

1.4 jQuery 技术优势

体积小，压缩后只有100KB左右

强大的选择器

出色的DOM封装

可靠的事件处理机制

出色的浏览器兼容性

使用隐式迭代简化编程

丰富的插件支持

1.5 jQuery 下载安装

jQuery 官网

1.6 jQuery 使用方法

jQuery 库分开发版和发布版

名称	大小	说明
jQuery-1.版本号.js(开发版)	约268KB	完整无压缩版本，主要用于测试，学习和开发
jQuery-1.版本号.min.js(发布版)	约91KB	经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目

在页面中引入jQuery

1.7 jQuery 基本语法结构

工厂函数 $()
- 将 DOM 对象转化为 jQuery 对象

选择器 selector
- 获取需要操作的 DOM 元素

方法 action()
- jQuery 中提供的方法

$(selector).action()$("#current").addClass("current")

1.8 jQuery 语法特性

$ 等同于 jQuery

$(document).ready()=jQuery(document).ready()$(function(){
   ...})=jQuery(function(){
   ...})

jQuery 链式调用
- jQuery 可以通过 . 不断调用 jQuery 对象的方法，而原生 JavaScript 则不一定

// 1.原生JavaScriptvar div = document.getElementsByTagName("div");// 报错,必须分开写div[0].style.backgroundColor = "red".width = 200+"px";// div[0].style.width = 200+"px";// 2.jQuery$(document).ready(function () {
   	// 不报错,后面还可以接着继续写    $("div").eq(1).css('background', 'yellow').css('width', '200px');});

jQuery 隐式遍历(迭代)

// 1.原生JavaScriptvar div = document.getElementsByTagName("div");// div.style.backgroundColor = "red";// 无效for(var i = 0; i

读写合一

$(document).ready(function () {
       // 读取数据    var $tx = $("div").eq(0).text();    alert($tx);    // 写入数据    $("div").eq(0).text("新的数据");});

2. jQuery 入口函数

2.1 jQuery 与JavaScript 加载模式对比

原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行

jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行

1. js 原生入口函数window.onload = function (ev) {
      // 1.通过原生的JS入口函数可以拿到DOM元素   var images = document.getElementsByTagName("images")[0];      // 2.通过原生的JS入口函数可以拿到DOM元素的宽高   var width = window.getComputedStyle(images).width;         }=============================================================2. jQuery 入口函数$(document).ready(function () {
      // 1.通过jQuery入口函数可以拿到DOM元素   var $images = $("images");   // 2.通过jQuery入口函数不可以拿到DOM元素的宽高   var $width = $images.width();});

原生JS如果编写了多个入口函数,后面编写的会覆盖前面编写的

jQuery中编写多个入口函数,后面的不会覆盖前面的

1. 原生 jswindow.onload = function (ev) {
   	alert("hello lnj1");// 不会显示}window.onload = function (ev) {
   	alert("hello lnj2");// 会显示}===================================2. jQuery$(document).ready(function () {
   	alert("hello lnj1");// 会显示});$(document).ready(function () {
   	alert("hello lnj2");// 会显示});

jQuery 不会覆盖的本质
- jQuery 框架本质是一个闭包
- 每次执行都会给ready函数传递一个新的函数,不同函数内部的数据不会相互干扰

为何能访问$符号
- 因为$符号 jQuery 框架对外暴露的一个全局变量

为何 window.jQuery = window.$ = jQuery;
- jQuery框架不仅提供了jQuery访问还提供$访问,提升开发者的编码效率

JavaScript中如何定义一个全局变量?
- 所有全局变量是 window 对象的属性
- jQuery 框架源码实现

window.jQuery = window.$ = jQuery;

使用 jQuery 框架只有两种方式
- 通过 $
- 通过 jQuery

总结

	window.onload	$(document).ready()
执行时机	必须`等待网页全部加载完毕(包括图片等)`,然后再执行包裹代码	只需要`等待网页中的DOM结构加载完毕`,就能执行包裹的代码
执行次数	`只能执行一次`,如果第二次,那么第一次的执行会被`覆盖`	可以`执行多次`,第N次都`不会被上一次覆盖`

2.2 jQuery 其他写法

// 1.第一种写法$(document).ready(function () {
       alert("hello lnj");});// 2.第二种写法jQuery(document).ready(function () {
       alert("hello lnj");});// 3.第三种写法(推荐)$(function () {
       alert("hello lnj");});// 4.第四种写法jQuery(function () {
       alert("hello lnj");});

2.3 解决$符号冲突问题

2.3.1 释放 $ 使用权

当便捷访问符号发生冲突时,可以释放$使用权

注意点
- 释放操作必须在其它jQuery代码之前编写
- 释放之后就不能再使用$,改为使用jQuery

jQuery.noConflict();

2.3.2 自定义访问符号

// 2.自定义一个访问符号var nj = jQuery.noConflict();nj(function () {
       alert("hello lnj");});

2.4 jQuery 核心函数

	
   
	
   
	我是span

3. DOM 对象和 jQuery 对象

3.1 DOM 对象和 jQuery 对象区别

DOM对象
- 直接使用 JavaScript 获取的节点对象

var objDOM = document.getElementById("title");var objHTML = objDOM.innerHTML;

jQuery对象
- 使用 jQuery 包装 DOM 对象后产生的对象，能够使用 jQuery 中的方法

$("#title").html();等同于document.getElementById("title").innerHTML;

DOM 对象和 jQuery 对象分别拥有一套独立的方法，不能混用

3.2 DOM 对象和 jQuery 对象转化

使用$()函数进行转化：$(DOM对象)

jQuery 对象命名一般约定以$开头

var txtName = document.getElementById("txtName"); //DOM对象var $txtName = $(txtName);   //jQuery对象

3.3 DOM 对象和 jQuery 对象的获取

jQuery 对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象

var $txtName = $("#txtName");      // jQuery对象var txtName = $txtName[0];         // DOM对象

通过get(index)方法得到相应的DOM对象

var $txtName = $("#txtName");        // jQuery对象var txtName = $txtName.get(0);       // DOM对象

3.4 DOM 对象和 jQuery 对象的练习

3.5 jQuery 对象的本质

jQuery 对象的本质是一个伪数组

var $div = $("div");	console.log($div);	var arr = [1, 3, 5];	console.log(arr);

什么是伪数组
- 有 0 到 length-1 属性
- 并且有 length 属性

var obj = {
   0:"lnj", 1:"33", 2:"male", length: 3}

4. jQuery 选择器

4.1 基础选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器

名称	语法构成	描述	示例
`标签`选择器	element	根据给定的`标签名`匹配元素	$(“h2”)选取所有h2元素
`类`选择器	.class	根据给定的`class`匹配元素	$(".title")选取所有class为title的元素
`ID` 选择器	#id	根据给定的`id`匹配元素	$("#title")选取id为title的元素
`并集`选择器	selector1,selector2,…,selectorN	将每一个选择器匹配的元素`合并`后一起返回	$(“div,p,.title” )选取所有div、p和拥有class为title的元素
`交集`选择器	element.class或element#id	匹配指定class或id的`某元素或元素集合`	$(“h2.title”)选取所有拥有class为title的h2元素
`全局`选择器	*	`匹配所有元素`	$("*" )选取所有元素

4.2 层次选择器

层次选择器通过DOM 元素之间的层次关系来获取元素

名称	语法构成	描述	实例
`后代`选择器	`ancestor descendant`	选取 ancestor 元素里的`所有 descendant (后代)元素`	$("#menu span" )选取 #menu 下的 span 元素
`子`选择器	`parent > child`	选取 parent 元素下的`child(子)元素`	$(" #menu>span" )选取 #menu 的子元素 span
`相邻`元素选择器	`prev + next`	选取`紧邻 prev 元素之后的 next 元素`	$(" h2+dl " )选取紧邻 h2 元素之后的同辈元素 dl
`同辈`元素选择器	`prev~sibings`	选取 `prev 元素之后的所有 siblings 元素`	$(" h2~dl " )选取 h2 元素之后所有的同辈元素 dl

4.2.1 层次选择器练习

导航菜单案例

在这里插入图片描述

  
       
    男装
    
    女装
    
    童装
    
    老年款式
    
    婴儿专用

4.3 属性选择器

属性选择器通过HTML元素的属性来选择元素

名称	语法构成	描述	示例
属性选择器	`[attribute]`	选取`包含给定属性`的元素	$(" [href]" )选取含有href属性的元素
属性选择器	`[attribute=value]`	选取`等于给定属性是某个特定值`的元素	$(" [href =’#’]" )选取含有href属性的元素
属性选择器	`[attribute != value]`	选取`不等于给定属性是某个特定值`的元素	$(" [href !=’#’]" )选取含有href属性的元素
属性选择器	`[attribute ^= value]`	选取`给定属性是以某些特定值开始`的元素	$(" [href ^=‘en’]" )选取含有href属性的元素
属性选择器	`[attribute $=value]`	选取`给定属性是以某些特定值结尾`的元素	$(" [href $=’.jpg’]" )选取含有href属性的元素
属性选择器	`[attribute *=value]`	选取`给定属性是以包含某些值`的元素	$(" [href *=‘txt’]" )选取含有href属性的元素

4.4 过滤选择器

过滤选择器通过特定的过滤规则来筛选元素

语法特点
- 使用":"
- 如使用$(“li:first”)来选取第一个li元素

主要分类
- 基本过滤选择器
- 可见性过滤选择器
- 内容过滤选择器
- 子元素过滤选择器

4.4.1 基本过滤选择器

基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素

基本过滤选择器可以根据索引的值选取元素

名称	语法构成	描述	示例
基本过滤选择器	`:first`	选取`第一个`元素	$(" li:first" )选取所有 li 元素中的第一个 li 元素
基本过滤选择器	`:last`	选取`最后一个`元素	$(" li:last" )选取所有 li 元素中的最后一个 li 元素
基本过滤选择器	`:even`	选取`索引是偶数的所有元素（index从0开始）`	$(" li:even" )选取索引是偶数的所有 li 元素
基本过滤选择器	`:odd`	选取`索引是奇数的所有元素（index从0开始）`	$(" li:odd" )选取索引是奇数的所有 li 元素
基本过滤选择器	`:eq(index)`	选取`索引等于index`的元素`（index从0开始）`	$(“li:eq(1)” )选取索引等于1的 li 元素
基本过滤选择器	`:gt(index)`	选取`索引大于index`的元素`（index从0开始）`	$(" li:gt(1)" )选取索引大于1的 li 元素`（注：大于1，不包括1）`
基本过滤选择器	`:lt(index)`	选取`索引小于index的元素（index从0开始）`	$(“li:lt(1)” )选取索引小于1的 li 元素`（注：小于1，不包括1）`

4.4.2 可见性过滤选择器

可见性过滤选择器可以通过元素显示状态来选取元素

名称	语法构成	描述	示例
可见性过滤选择器	`:visible`	选取`所有可见的元素`	$(":visible" )选取所有可见的元素
可见性过滤选择器	`:hidden`	选取`所有隐藏的元素`	$(":hidden" ) 选取所有隐藏的元素

4.4.3 内容过滤性选择器

选择器	描述	返回
`:empty`	选取`不包含子元素或文本为空的元素`	集合元素
`:parent`	选取`含有子元素或文本的元素`	集合元素
`:contains(text)`	选取`含有文本内容为text的元素`	集合元素
`:has(selector)`	选取`含有选择器所匹配的元素的元素`	集合元素

:empty
- 找到既没有文本内容也没有子元素的指定元素

:parent
- 找到有文本内容或有子元素的指定元素

:contains(text)
- 找到包含指定文本内容的指定元素

:has(selector)
- 找到包含指定子元素的指定元素
- 与:parent 区别
  - :parent 只要有子元素就会被找到
  - :has(selector) 不仅要有子元素,而且子元素还必须满足条件

5. jQuery Class 操作

5.1 Class 类操作

5.1.1 addClass

元素添加一个或多个类

如果要添加多个, 多个类名之间用空格隔开即可

addClass(class)或addClass(class1 class2 … classN)

5.1.2 removeClass

删除元素的一个或多个类

如果想删除多个, 多个类名之间用空格隔开即可

removeClass(“style2 ”)或removeClass("style1 style2 ")

5.1.3 toggleClass

切换元素

添加或删除一个类(存在就删除不存在就添加)

toggleClass()模拟了addClass()与removeClass()实现样式切换的过程

toggleClass(class)

5.2 jQuery 文本操作

5.2.1 html

添加或获取元素中的HTML

类似于JS中的innerHTML

解析内部HTML标签

$("div.left").html(); // 获取元素中的html代码或$("div.left").html("
   
    …
   
"); // 设置元素中的html代码

5.2.2 text

添加或获取元素中的文本

text方法能做的html方法都能做,所以一般使用html方法即可

$("div.left").text(); // 获取元素中的文本内容或$("div.left").text("
   
    …
   
"); // 设置元素中的文本内容

5.2.3 `html()` 和 `text()` 的区别

语法	参数	功能
html()	无参数	用于获取`第一个`匹配元素的`HTML内容或文本内容`
html(content)	content参数为元素的HTML内容	用于`设置`所有匹配元素的`HTML内容或文本内容`
text()	无参数	用于获取`所有`匹配元素的`文本`内容
text(content)	content参数为元素的文本内容	用于`设置`所有匹配元素的`文本`内容

5.2.4 val

添加或获取元素value属性的值

$(this).val(); // 获取元素的value属性值或$(this).val(""); // 设置元素的value属性值

5.3 jQuery CSS 样式

5.3.1 css 方法

使用css()为指定的元素设置样式值，修改的是行内样式

css(name,value) $(this).css("border","5px solid #f5f5f5");

5.3.2 width 方法

设置或获取元素宽度(相当于获取width属性值)

$(function () {
       $("button").eq(0).click(function () {
           // 1.获取元素宽度(不包括padding和border)		// alert($('.son').width());    });    $("button").eq(1).click(function () {
           // 2.设置元素宽度(不包括padding和border)		// $(".son").width("50px");    });});

5.3.3 height 方法

设置或获取元素高度(相当于获取height属性值)

$(function () {
       $("button").eq(0).click(function () {
           // 1.获取元素宽度(不包括padding和border)		// alert($('.son').width());    });    $("button").eq(1).click(function () {
           // 2.设置元素宽度(不包括padding和border)		// $(".son").width("50px");    });});

5.4. jQuery 元素位置

5.4.1 offset 方法

获取或设置元素相对窗口的偏移位

$(function () {
       $("button").eq(0).click(function () {
           // 1.获取距离窗口的偏移位(从border开始)        alert($('.son').offset().left); // 100    });    $("button").eq(1).click(function () {
           // 2.设置距离窗口的偏移位        $('.son').offset({
   left:10, top:10});    });});

5.4.2 position 方法

获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离

$(function () {
       $("button").eq(0).click(function () {
           // 1.获取匹配元素相对父元素的偏移        alert($('.son').position().left);// 50    });    $("button").eq(1).click(function () {
           // 2.无效,不能设置相对定位元素的偏移位        $('.son').position({
   left:10, top:10})    });});

5.5 jQuery scroll 方法

5.5.1 scrollTop 方法

设置或获取匹配元素相对滚动条顶部的偏移

$(function () {
       $("button").eq(0).click(function () {
           // 7.获取匹配元素相对滚动条顶部的偏移		// alert($('.scroll').scrollTop());		// alert($('html').scrollTop());        // 兼容所有浏览器写法        alert($('html').scrollTop()+$('body').scrollTop());    });    $("button").eq(1).click(function () {
           // 8.设置匹配元素相对滚动条顶部的偏移		// $('.scroll').scrollTop(100);		// $('html').scrollTop(100);        // 兼容所有浏览器写法        $('html,body').scrollTop(100);    });});

5.5.2 scrollLeft 方法

scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置

滚动条的水平位置指的是从其左侧滚动过的像素数

当滚动条位于最左侧时，位置是 0

$(function () {
       $("button").eq(0).click(function () {
           // 7.获取匹配元素相对滚动条水平的偏移		// alert($('.scroll').scrollLeft());		// alert($('html').scrollLeft());        // 兼容所有浏览器写法        alert($('html').scrollLeft()+$('body').scrollLeft());    });    $("button").eq(1).click(function () {
           // 8.设置匹配元素相对滚动条水平的偏移		// $('.scroll').scrollLeft(100);		// $('html').scrollLeft(100);        // 兼容所有浏览器写法        $('html,body').scrollLeft(100);    });});

6. jQuery 属性操作

6.1 属性与属性节点

6.1.1 什么是属性?

对象身上保存的变量就是属性

只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象)

6.1.2 如何操作属性?

添加或修改属性(没有就会添加,有就会修改)
- 对象.属性名称 = 值
- 对象["属性名称"] = 值

获取属性
- 对象.属性名称
- 对象["属性名称"]

6.1.3 什么是属性节点?

在编写HTML代码时,在HTML标签中添加的属性就是属性节点

在浏览器中找到span这个DOM元素之后, 展开看到的都是属性

在attributes属性中保存的所有内容都是属性节点

 // 这里的class和nj就是属性节点

6.1.4 如何操作属性节点?

获取属性节点
- DOM元素.getAttribute("属性名称");

设置属性节点
- DOM元素.setAttribute("属性名称", "值");

6.1.5 属性和属性节点有什么区别?

任何对象都有属性, 但是只有DOM对象才有属性节点

6.2 属性节点方法

6.2.1 attr 方法

作用
- 获取或设置属性节点的值

参数
- 如果传递一个参数, 代表获取属性节点的值
- 如果传递两个参数, 代表设置属性节点的值

注意点
- 如果是获取
  - 无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
- 如果是设置
  - 找到多少个元素就会设置多少个元素
  - 如果设置的属性节点不存在, 那么系统会自动新增

$(function () {
       // 1.获取指定属性节点值    var $res = $(".span1").attr("nj");    console.log($res);    // 2.设置属性节点    $(".span1").attr("nj", "666");    $(".span2").attr("id", "box1 box2");    // 3.注意点:    // 3.1.获取属性节点时,只会获取找到所有元素中第一个元素的属性节点    $res = $("span").attr("class");    console.log($res);     $("span").attr("class", "lnj");});

6.2.2 removeAttr 方法

作用
- 删除属性节点

注意点
- 删除所有找到元素指定的属性节点

$(function () {
       // 1.设置属性节点时,会给所有找到元素设置属性节点    $("span").attr("test", "jonathan");    // 2.删除属性节点时,会删除所有找到元素的属性节点    $("span").removeAttr("test");});

6.2.3 prop 方法

作用
- 设置或获取元素的属性值

注意点
- prop方法不仅能够操作属性, 还能操作属性节点
- 官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点
- 如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

$(function () {
       // 1.设置属性    // 1.1.设置属性时,会设置所有找到元素的属性    $("span").prop("demo", "lnj");    // 2.获取属性    // 2.1.获取属性时,只会获取找到第一个元素的属性    console.log($("span").prop("demo"));});

6.2.4 removeProp 方法

$(function () {
       // 删除所有找到元素的demo属性    $("span").removeProp("demo");});

6.2.5 attr 方法和 prop 方法区别

所有DOM对象，都有一个attributes属性,而prop可以操作属性,所以也可以操作属性节点

在操作属性节点时,具有 true 和 false 两个属性的属性节点(如 checked, selected 或者 disabled)使用prop()，其他的使用 attr()

如果具有 true 和 false 两个属性的属性节点,如果没有编写默认attr返回undefined,而prop返回false

$(function () {
       // 1.可以通过prop获取属性节点    console.log($("input").prop("class"));    // 2.可以通过prop设置属性节点    $("input").prop("class", "tag");    // 3.如果没有默认值,那么attr获取返回undefined	//console.log($("input[type=checkbox]").attr("checked"));    // 4.如果没有默认值,那么prop获取返回false    console.log($("input[type=checkbox]").prop("checked"));    // 5.通过attr设置选中	//$("input[type=checkbox]").attr("checked", true);        // 6.通过prop设置选中    $("input[type=checkbox]").prop("checked", true)});

7. jQuery DOM 操作

7.1 常见的 DOM 操作

jQuery对JavaScript中的DOM操作进行了封装，使用更简便

jQuery中的DOM操作可分为：
- 内容及Value属性值操作
- 节点操作
- 节点属性操作
- 节点遍历

7.2 DOM 节点操作

jQuery中节点操作主要分为：
- 查找节点（利用选择器完成）
- 创建节点
- 插入节点
- 删除节点
- 替换节点
- 复制节点

7.2.1 创建 DOM 节点

工厂函数$()用于获取或创建节点
- $(selector)：通过选择器获取节点
- $(element)：把DOM节点转化成jQuery节点
- $(html)：使用HTML字符串创建jQuery节点

// 创建含文本与属性元素节点var $newNode2=$("
千与千寻
");

7.2.2 插入 DOM 节点

元素内部插入子节点

语法	功能
append(content)	`$(A).append(B)`表示将B追加到A`内部的最后`，如：`$("ul").append($newNode1);`
appendTo(content)	`$(B).appendTo(A)`表示把B追加到A`内部的最后`，如：`$newNode1.appendTo("ul");`
prepend(content)	`$(A). prepend (B)`表示将B`前置插入`到A内部中，如：`$("ul"). prepend ($newNode1);`
prependTo(content)	`$(B). prependTo (A)`表示将B`前置插入`到A内部中，如：`$newNode1. prependTo ("ul");`

元素外部插入同辈节点

语法	功能
after(content)	`$(A).after (B)`表示将B插入到A`外部之后`，如：`$("ul").after($newNode1);`
insertAfter(content)	`$(B). insertAfter(A)`表示将B插入到A`外部之后`，如：`$newNode1.insertAfter("ul");`
before(content)	`$(A). before (B)`表示将B插入至A`外部之前`，如：`$("ul").before($newNode1);`
insertBefore(content)	`$(B). insertBefore (A)`表示将A插入到B`外部之前`，如：`$newNode1.insertBefore("ul");`

7.2.3 删除 DOM 节点

empty()
- 删除指定元素的内容和子元素, 指定元素自身不会被删除

$("div").empty();

remove()
- 删除指定元素

// 删除所有div$("div").remove();// 删除div中id是box1的那个div$("div").remove("#box1");

detach()
- 删除指定元素

// 删除所有div$("div").detach();// 删除div中id是box1的那个div$("div").detach("#box1");

remove 和 detach 区别
- remove 删除元素后,元素上的事件会被移出
- detach 删除元素后,元素上的事件会被保留

$("button").click(function () {
       // $("div").remove();    // $("div").empty();    // $("li").remove(".item");    // 利用remove删除之后再重新添加,原有的事件无法响应    // var $div = $("div").remove();    // 利用detach删除之后再重新添加,原有事件可以响应    var $div = $("div").detach();    // console.log($div);    // 将删除的返回值重新添加到body上    $("body").append($div);});$("div").click(function () {
       alert("div被点击了");});

7.2.4 替换节点

replaceWith
- 将所有匹配的元素替换成指定的 HTML 或 DOM 元素
- replaceWith 参数可以是一个DOM元素、也可以是一个代码片段

replaceAll
- 用匹配的元素替换掉所有 selector 匹配到的元素

// 编写jQuery相关代码$("button").click(function () {
       // 创建一个新的节点    var $item = $("我是标题6
");    // 利用新的节点替换旧的节点    // $("h1").replaceWith($item);    $item.replaceAll("h1");});

7.2.5 复制节点

clone
- 复制一个节点
- 参数 true 表示复制事件处理
- 浅复制
  - 不会复制节点的事件
- 深复制
  - 会复制节点的事件

$(function () {
       // clone([Even[,deepEven]])    $("button").eq(0).click(function () {
           // 1.浅复制一个元素        var $li = $("li:first").clone(false);        // 2.将复制的元素添加到ul中        $("ul").append($li); // 点击li无法响应事件    });    $("button").eq(1).click(function () {
           // 1.深复制一个元素        var $li = $("li:first").clone(true);        // 2.将复制的元素添加到ul中        $("ul").append($li); // 点击li可以响应事件    });    $("li").click(function () {
           alert($(this).html());    });});

7.2.6 包裹节点

wrap
- 将指定节点用其他标记包裹起来
- 该方法对于需要在文档中插入额外的结构化标记非常有用, 而且不会破坏原始文档的语义

wrapAll
- 将所有匹配的元素用一个元素来包裹
- 而wrap方法是将所有的元素进行单独包裹

wrapInner
- 将每一个匹配的元素的子内容（包括文本节点）用其他结构化标记包裹起来

//测试使用 jQuery wrap, wrapAll, wrapInner$(function(){
   	//包装 li 本身	$("#box1 li").wrap("");	//包装所有的 li	$("#box2 li").wrapAll("");	//包装 li 里边的文字. 	$("#box3 li").wrapInner("");})

7.2.7 遍历节点

方法	作用
children	只考虑`子元素`，不考虑后代元素
next	`同辈紧邻后面一个`元素
nextAll	`同辈紧邻后面所有`兄弟元素
prev	`同辈紧邻前一个`兄弟元素
prevAll	`同辈紧邻前所有`兄弟元素
siblings	`同辈所有`兄弟元素
find(‘xx’)	返回`被选元素的后代`元素，括号内必填写，如果查找所有后代使用 “*”，起`查找`作用
filter(‘xx’)	`指定选择器的xx元素`，括号内必填写，符合条件的同级元素，非后代元素，起`过滤`作用
has(‘xx’)	`符合条件的后代`元素，`不包含自身`，括号内必填写，起`过滤`作用
parent()	获取元素的`父级`元素
parents()	获取`所有祖先`元素，参数为`筛选条件`
parentsUntil()	`截止到xx位置的祖先`节点

closest('xx')
- 用来取得最近的匹配元素，包括自身
- 首先检查自身是否符合
  - 如果符合返回元素本身
  - 如果不匹配，向上查找父元素，逐级向上直到匹配到选择器的元素
  - 如果什么没找到，返回一个空的jQuery对象
- 必须填写筛选条件，且只能找到一个元素

7.3 jQuery DOM 操作练习

7.3.1 商品列表

增删全选

    
           
    
                                              全选                        商品信息                        宜美惠价                        数量                        操作                   
                                                                天堂直杆彩虹伞                        ￥32.9元                                                                                                                                               删除                                  
                                                                苹果手机iphone5                        ￥3999元                                                                                                                                               删除                                  
             
    
        
    增加        
    删除

7.3.2 滑动门

在这里插入图片描述

8. 事件机制

jQuery事件是对JavaScript事件的封装
- Window事件
- 鼠标事件
- 键盘事件
- 表单事件

8.1 事件注册

事件注册语法
- $(对象).type(fn)
- type是事件名
- fn是事件处理函数

$(对象).事件名(fn)$('input').click(function(){
   	alert('123')})

8.2 事件绑定

使用bind()方法和on()方法

优点
- 编码效率略低

缺点
- 所有js事件都可以添加

注意点
- 可以添加多个相同或者不同类型的事件,不会覆盖

$(对象).on(type,[event],fn)type 	-- 事件类型event 	-- 事件参数fn 		-- 处理函数// 2.通过on绑定事件$("button").on("click", function () {
       alert("hello click1");});

同时为多个事件绑定方法

$("input[name=event_1]").on({
   	mouseover: function () {
    // 为 mouseover 绑定方法		$("ul").css("display", "none");	},	mouseout: function () {
    // 为 mouseout 绑定方法		$("ul").css("display", "block");	}});

8.3 事件解绑

移除事件使用unbind()方法和off()方法

off方法如果不带参数时，表示移除所绑定的全部事件

off方法如果传递一个参数, 会移除所有指定类型的事件

off方法如果传递两个参数, 会移除所有指定类型的指定事件

$(对象).off([type],[fn])$("button").off(); 				 // 移除button中全部事件$("button").off("click"); 		 // 移除button中click事件$("button").off("click", test1); // 移除button中click事件中test1事件

8.4 事件坐标

当事件被触发时,系统会将事件对象(event)传递给回调函数,通过event对象就能获取时间的坐标

获取事件坐标有三种方式
- event.offsetX, event.offsetY 相对于事件元素左上角
- event.pageX, event.pageY 相对于页面的左上角
- event.clientX, event.clientY 相对于视口的左上角

event.page 和 event.client 区别
- 网页是可以滚动的,而视口是固定的
- 所以想获取距离可视区域坐标通过event.client
- 想获取距离网页左上角的坐标通过event.page

$(function () {
       // 获取事件的坐标    $(".son").click(function (event) {
           // 获取相对于事件元素左上角坐标        console.log(event.offsetX, event.offsetY);        // 获取相对于视口左上角坐标        console.log(event.clientX, event.clientY);        // 获取相对于页面左上角坐标        console.log(event.pageX, event.pageY);    });});

8.5 事件冒泡

什么是事件冒泡
- 事件冒泡是从目标元素逐级向上传播到根节点的过程

阻止事件冒泡
- 如果希望在触发一个元素的事件处理程序时，不影响其父元素, 此时便可以使用停止事件冒泡

$(function () {
       $(".son").click(function (event) {
           console.log(".son");        // 在子元素中停止事件冒泡,时间不会继续向上传播,所以父元素click方法不会被触发        event.stopPropagation();    });    $(".father").click(function () {
           console.log(".father");    });});

8.6 默认行为

什么是默认行为
- 网页中的元素有自己的默认行为
- 例如
  - 单击超链接后会跳转
  - 点击提交表单按钮会提交

阻止默认行为
- 可以使用event.preventDefault();方法阻止事件默认行为

$(function () {
       $("a").click(function (event) {
           var str = $("a").attr("href");        // 如果超链接是百度就不跳转        if(str.indexOf("baidu") > 0){
               // 阻止默认行为            event.preventDefault();        }    });});

8.7 自动触发事件

什么是自动触发事件
- 通过代码控制事件, 不用人为点击/移入/移除等事件就能被触发

自动触发方式
- $("selector").trigger("eventName");
  - 触发事件的同时会触发事件冒泡
  - 触发事件的同时会触发事件默认行为
- $("selector").triggerHandler("eventName");
  - 触发事件的同时不会触发事件冒泡
  - 触发事件的同时不会触发事件默认行为

$(function () {
       /*    $(".son").click(function () {        alert("son");    });    $(".father").click(function () {        alert("father");    });    // trigger 会触发事件冒泡	// $(".father").trigger("click");	// $(".son").trigger("click");    // triggerHandler 不会触发事件冒泡	// $(".father").triggerHandler("click");	// $(".son").triggerHandler("click");    */    $("input[type='submit']").click(function () {
           alert("点击了A标签");    });    // trigger 会触发系统默认事件	// $("input[type='submit']").trigger("click");    // triggerHandler 不会触发系统默认事件    $("input[type='submit']").triggerHandler("click");});

8.8 自定义事件

什么是自定义事件
- 自定义事件就是自己起一个不存在的事件名称来注册事件,
- 然后通过这个名称还能触发对应的方法执行, 这就是自定义事件

自定义事件的条件
- 事件必须是通过on绑定的
- 事件必须通过trigger来触发
- 因为trigger方法可以自动触发对应名称的事件,所以只要事件的名称和传递给trigger的名称一致就能执行对应的事件方法

$(function () {
       $(".father").on("njClick", function () {
           alert("njClick");    });    $(".father").trigger("njClick");});

8.9 事件命名空间

什么是事件命名空间
- 事件命名空间主要用于区分相同类型的事件,区分不同前提条件下到底应该触发哪个事件
- 格式: eventName.命名空间

添加事件命名空间的条件
- 事件是通过on来绑定的
- 通过trigger触发事件

事件命名空间注意点（面试题）
- 利用trigger触发子元素带命名空间的事件时，会触发父元素带相同命名空间的事件，父元素没有命名空间的事件不会被触发
- 利用trigger触发子元素不带命名空间的事件时，所有父元素（带相同命名空间，不带命名空间）事件都会被触发，所有子元素（带相同命名空间，不带命名空间）事件也都会被触发

$(function () {
       // 给父元素添加不带命名空间事件    $(".father").on("click", function () {
           alert("father");    });    // 给父元素添加带命名空间事件    $(".father").on("click.66", function () {
           alert("66 - father");    });    $(".son").on("click.nj", function () {
           alert("nj - 向左走");    });    $(".son").on("click.66", function () {
           alert("66 - 向右走");    });    // 会同时触发NJ和66编写的click事件    // 事件会冒泡到不带命名空间上级元素和带相同命名空间的上级元素	// $(".son").trigger("click");    // 只会触发NJ编写的click事件    // 事件不会冒泡到不带命名空间上级元素	// $(".son").trigger("click.nj");    // 只会触发66编写的click事件    // 事件只会冒泡到带相同命名空间的上级元素    $(".son").trigger("click.66");});

8.10 事件委托

8.10.1 什么是事件委托

事件委托就是请其他人帮忙做我们想做的事

做完之后最终的结果还是会反馈到我们这里

8.10.2 事件委托的好处

减少监听数量
- 添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能
- 因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间
- 每个监听的函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差

新增元素自动有事件响应处理
- 默认情况下新增的元素无法响应新增前添加的事件

8.10.3 jQuery 中添加事件委托

添加前
- $("li").click隐式迭代给界面上所有li都添加了click事件(监听数量众多)
- 通过$("ul").append新添加的li无法影响click事件

	
   	    
    我是第1行
	    
    我是第2行
	    
    我是第3行

添加后
- 格式:$(parentSelector).delegate(childrenSelector, eventName, callback)
- $("ul").delegate隐式迭代所有ul添加事件(相比开始迭代li,必然ul的个数会少很多)
- 当事件被触发时,系统会自动动态查找当前是哪个li触发了事件,所以新增的li也能响应到事件

$(function () {
       // 1.委托ul监听li的点击事件    $("ul").delegate("li","click",function () {
           // 前面我们说过事件委托就是让别人帮忙做事,但最终的结果还是会返回到我们手里,所以这里的this是触发事件的li        // 这里的this之所以是触发事件的li,本质是因为"事件冒泡", 触发事件的li向上传递到ul,触发了click事件.// console.log(this);        // 弹出当前点击行内容        alert($(this).html());    });    // 2.监听新增按钮点击    var count = 0;    $("button").eq(0).click(function () {
           count++;        // 新增一行内容        $("ul").append("我是新增内容"+count+"
")    });});

8.10.4 事件的委托注册

delegate()方法用于委托事件的注册

$(对象).delegate(子元素名,事件名,处理函数）

委托事件的特点
- 利用事件冒泡机制实现委托
- 提高事件处理的性能
- 解决动态添加DOM元素的事件绑定

$(function(){
      // 简单低级方式   $('li').on('mouseover',function(){
      	 $(this).css('color','#f00')   })   // 代理高级方式   $('ul').delegate('li','mouseover',function(){
        $(this).css('color','#f00')   })}

8.11 移入移出事件

8.11.1 mouseenter/mouseleave

移动到子元素不会触发事件

$(function () {
       // 移动到子元素不会触发事件     // 2.1移入事件     $('.father').mouseenter(function () {
          console.log('mouseenter');     });     // 2.2移除事件     $('.father').mouseleave(function () {
          console.log('mouseleave');     });});

8.11.2 mouseover/mouseout

移动到子元素会触发事件

$(function () {
        // 2.1移入事件     $('.father').mouseover(function () {
          console.log('mouseover') ;     });     // 2.2移除事件     $('.father').mouseout(function () {
          console.log('mouseout') ;     });});

8.11.3 hover

内容监听移入和移出

内部实现就是调用mouseenter和mouseleave

$(function () {
       /*   // 传入两个回调函数,一个监听移入,一个监听移出    $(".father").hover(function () {        console.log("mouseenter");    }, function () {        console.log("mouseleave");    });    */    // 如果只传入一个方式,那么这个方式既监听移入也监听移出    $(".father").hover(function () {
           console.log("移入移除");    });});

9. jQuery 动画

9.1 常见动画类型

jQuery 提供了很多动画效果
- 控制元素显示与隐藏
- 控制元素淡入淡出
- 改变元素高度

9.2 显示与隐藏动画

9.2.1 show

显示动画
- 设置显示速度可以实现动画效果
- 显示速度可以取如下值：毫秒（如1000）、slow、normal、fast
- 默认的动画时长是400毫秒
- slow本质是600毫秒
- normal本质是400毫秒
- fast本质是200毫秒

原理
- 当前操作的元素是块级，调用display:block;
- 当前操作的元素是行内，调用display:inline;

// 编写jQuery相关代码$("button").eq(0).click(function () {
       // $("div").css("display", "block");    // 注意: 这里的时间是毫秒    $("div").show(1000, function () {
           // 作用: 动画执行完毕之后调用        alert("显示动画执行完毕");    });});

9.2.2 hide

隐藏动画
- 参数也可以设置隐藏的动画效果

$("button").eq(1).click(function () {
       // $("div").css("display", "none");    $("div").hide(1000, function () {
           alert("隐藏动画执行完毕");    });});

9.2.3 toggle

切换动画
- 显示变隐藏，隐藏变显示

$("button").eq(2).click(function () {
       $("div").toggle(1000, function () {
           alert("切换动画执行完毕");    });});

9.3 展开与收起动画

9.3.1 slideDown

展开动画

使元素逐步延伸显示

$("button").eq(0).click(function () {
       $("div").slideDown(1000, function () {
           alert("展开完毕");    });});

9.3.2 slideUp

收起动画

使元素逐步缩短直至隐藏

$("button").eq(1).click(function () {
       $("div").slideUp(1000, function () {
           alert("收起完毕");    });});

9.3.3 slideToggle

切换动画
- 展开变收起,收起变展开

$("button").eq(2).click(function () {
       $("div").slideToggle(1000, function () {
           alert("收起完毕");    });});

9.4 淡入淡出动画

9.4.1 fadeIn

淡入动画

改变元素的透明度实现淡入效果

$("button").eq(0).click(function () {
       $("div").fadeIn(1000, function () {
           alert("淡入完毕");    });});// 以较慢的速度淡入$("input[name=fadein_btn]").click(function(){
       $("img").fadeIn("slow");});

9.4.2 fadeOut

淡出动画

改变元素的透明度实现淡出效果

$("button").eq(1).click(function () {
       $("div").fadeOut(1000, function () {
           alert("淡出完毕");    });});

9.4.3 fadeToggle

切换动画
- 显示变淡出，不显示变淡入

$("button").eq(2).click(function () {
       $("div").fadeToggle(1000, function () {
           alert("切换完毕");    });});

9.4.4 fadeTo

淡入到指定透明度动画

可以通过第二个参数,淡入到指定的透明度(取值范围0~1)

$("button").eq(3).click(function () {
       $("div").fadeTo(1000, 0.2, function () {
           alert("淡入完毕");    })});

9.5 通用动画函数

9.5.1 animate

animate()针对各类样式变化提供渐变的动画功能

$(selector).animate(styles,speed,easing,callback)styles 	 变化的样式speed  	 动画的速度easing 	 动画的方式callback 动画后的执行回调函数

/*第一个参数: 接收一个对象, 可以在对象中修改属性第二个参数: 指定动画时长第三个参数: 指定动画节奏, 默认就是swing第四个参数: 动画执行完毕之后的回调函数*/$(".two").animate({
       marginLeft: 500}, 5000, "linear", function () {
       // alert("自定义动画执行完毕");});

每次开始运动都必须是初始位置或者初始状态,如果想在上一次位置或者状态下再次进行动画可以使用累加动画

$("button").eq(1).click(function () {
       $(".one").animate({
           width: "+=100"    }, 1000, function () {
           alert("自定义动画执行完毕");    });});

同时操作多个属性,自定义动画会执行同步动画,多个被操作的属性一起执行动画

$(".one").animate({
       width: 500,    height: 500}, 1000, function () {
       alert("自定义动画执行完毕");});

9.6 多动画的组合

同时执行的动画

$(selector).animate({
   样式1,样式2...},speed)

先后执行的动画

//先执行的动画$(selector).animate(styles,speed,easing,function(){
      //后执行的动画   $(selector).animate(styles,speed,easing) 	})

9.7 动画队列

多个动画方法链式编程

等到前面的动画执行完毕再依次执行后续动画

$("div").slideDown(1000).slideUp(1000).show(1000);$(".one").slideDown(1000,function () {
       $(".one").slideUp(1000, function () {
           $(".one").show(1000);    });});

如果后面紧跟一个非动画方法则会被立即执行

// 立刻变为黄色,然后再执行动画$(".one").slideDown(1000).slideUp(1000).show(1000).css("background", "yellow");

如果想颜色在动画执行完毕之后设置
- 使用回调
- 使用动画队列

$(".one").slideDown(1000,function () {
       $(".one").slideUp(1000, function () {
           $(".one").show(1000, function () {
               $(".one").css("background", "yellow")        });    });});$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function () {
       $(".one").css("background", "yellow")});

注意
- 动画队列方法queue()后面不能继续直接添加queue()
- 如果想继续添加必须在上一个queue()方法中next()方法

$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function (next) {
       $(".one").css("background", "yellow");    next(); // 关键点}).queue(function () {
       $(".one").css("width", "500px")});

9.8 动画相关方法

9.8.1 delay

设置动画延迟时长

$(".one").animate({
       width: 500    // height: 500}, 1000).delay(2000).animate({
       height: 500}, 1000);

9.8.2 stop

停止指定元素上正在执行的动画

// 立即停止当前动画, 继续执行后续的动画$("div").stop();$("div").stop(false);$("div").stop(false, false);// 立即停止当前和后续所有的动画$("div").stop(true);$("div").stop(true, false);// 立即完成当前的, 继续执行后续动画$("div").stop(false, true);// 立即完成当前的, 并且停止后续所有的$("div").stop(true, true);

9.9 动画的结束

动画停止stop(stopAll，gotoEnd)
- 参数stopAll表示是否停止后续其他动画执行
- 参数gotoEnd表示是否允许完成当前动画，是在第一个参数生效时使用

9.10 动画练习

9.10.1 切换显示列表

9.10.2

在这里插入图片描述

10. jQuery 静态方法

10.1 什么是静态方法

静态方法对应的是对象方法

对象方法用实例对象调用,而静态方法用类名调用

// 1.定义一个类 function AClass() {
    } // 2.给这个类添加一个静态方法 // 直接添加给类的就是静态方法 AClass.staticMethod = function () {
        alert("staticMethod"); } // 静态方法通过类名调用 AClass.staticMethod(); // 3.给这个类添加一个实例方法 AClass.prototype.instanceMethod = function () {
        alert("instanceMethod"); } // 实例方法通过类的实例调用 // 创建一个实例(创建一个对象) var a = new AClass(); // 通过实例调用实例方法 a.instanceMethod();

10.2 jQuery.holdReady()

暂停或者恢复 jQuery.ready() 事件

传入 true 或 false

10.3 each 方法

js 原生 forEach 方法
- 原生的forEach方法只能遍历数组, 不能遍历伪数组

/*  第一个参数: 遍历到的元素  第二个参数: 当前遍历到的索引*/var arr = [1, 3, 5, 7, 9];var obj = {
   0:1, 1:3, 2:5, 3:7, 4:9, length:5};       arr.forEach(function (value, index) {
   	console.log(index, value);});obj.forEach(function (value, index) {
   	console.log(index, value);// 报错});

jQuery 的 each 静态方法
- 遍历对象或数组(伪数组)
- 优点统一遍历对象和数组的方式
- 回调参数的顺序更符合我们的思维模式

// 1.利用jQuery的each静态方法遍历数组/*第一个参数: 当前遍历到的索引第二个参数: 遍历到的元素*/$.each(arr, function (index, value) {
   	console.log(index, value);});$.each(obj, function (index, value) {
   	console.log(index, value);});

10.4 map 方法

js 原生 map 方法
- 不能遍历的伪数组

jQuery 的 map 方法
- 遍历对象或数组
- 将回调函数的返回值组成一个新的数组返回

$(function () {
        // 4.1遍历数组     var arr = [1, 3, 5, 7, 9];     // 4.1.1通过原生方法遍历数组     // 第一个回调函数参数是遍历到的元素     // 第二个回调函数参数是当前遍历的索引     // 第三个回调函数参数是当前被遍历的数组     // 返回值: 将回调函数返回值收集起来组成一个新的数组     var res = arr.map(function (ele, idx, arr) {
            console.log(idx, ele, arr);         return ele + idx;     });     console.log(res);          // 4.1.2通过jQuery静态方法遍历数组     // 第一个回调函数参数是遍历到的元素     // 第二个回调函数参数是当前遍历的索引     // 返回值: 将回调函数返回值收集起来组成一个新的数组     var $res2 = $.map(arr, function (ele,idx) {
            console.log(idx, ele);         return ele + idx;     });     console.log($res2);     // 4.2遍历对象     var obj = {
   name: "lnj", age:"33", gender:"male"};     /*     obj.map(function (ele, idx, obj) {         // 报错,原生JS没有map方法         console.log(idx, ele, obj);     });     */     var $res = $.map(obj, function (value, key) {
            console.log(key, value);         return key + value;     });     console.log($res); });

10.5 filter 方法

作用
- 返回符合一定条件的元素
- 该方法让您规定一个条件
  - 不符合条件的元素将从选择中移除
  - 符合条件的元素将被返回
- 该方法通常用于缩小在被选元素组合中搜索元素的范围

返回带有类名 "intro" 的所有  元素$("p").filter(".intro")

10.6 find 方法

作用
- 返回被选元素的后代元素
- 后代是子、孙、曾孙，依此类推

返回 
   
     后代中所有的 
     元素$(document).ready(function(){
   	$("ul").find("span").css({
   "color":"red","border":"2px solid red"});});

10.7 each 与 map 区别

each 静态方法默认的返回值就是遍历谁就返回谁

map 静态方法默认的返回值是一个空数组

each静态方法不支持在回调函数中对遍历的数组进行处理

map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回

10.8 type 方法

作用
- 该参数是否一个正则表达式
- 如果对象是undefined或null，则返回相应的"undefined"或"null"
- 如果对象有一个内部属性[[Class]]和一个浏览器的内置对象的 [[Class]] 相同，就返回相应的 [[Class]] 名字

$.type( undefined ) === "undefined"$.type() === "undefined"$.type( window.notDefined ) === "undefined"$.type( null ) === "null"$.type( true ) === "boolean"$.type( 3 ) === "number"$.type( "test" ) === "string"$.type( function(){
   } ) === "function"$.type( [] ) === "array"$.type( new Date() ) === "date"$.type( new Error() ) === "error" // jQuery 1.9 新增支持$.type( /test/ ) === "regexp"

10.9 trim 方法

作用
- 去除字符串两端的空格

参数
- 需要去除空格的字符串

返回值
- 去除空格之后的字符串

$(function () {
       var str = "   lnj   ";    console.log("---"+str+"---");    var $res = $.trim(str);    console.log("---"+$res+"---");});

10.10 isWindow 方法

作用
- 判断传入的对象是否是window对象
- 返回值 true / false

// 真数组var arr = [1, 3, 5, 7, 9];// 伪数组var arrlike = {
   0:1, 1:3, 2:5, 3:7, 4:9, length:5};// 对象var obj = {
   "name":"lnj", age:"33"};// 函数var fn = function(){
   };// window对象var w = window;var res = $.isWindow(w);console.log(res);

10.11 isArray 方法

作用
- 判断传入的对象是否是真数组
- 返回值 true / false

$(function () {
       // 对象    var obj = {
   name:"lnj",age: "33", gender:"male"};    // 真数组    var arr = [1, 3, 5, 7, 9];    var $res = $.isArray(obj);    console.log($res);// false    var $res2 = $.isArray(arr);    console.log($res2);// true});

10.12 inArray 方法

作用
- 返回数组中指定元素的索引值
- 如果没有找到，则返回-1

$(function () {
        var arr = [ 4, "Pete", 8, "John" ];    var $spans = $( "span" );    $spans.eq( 0 ).text( jQuery.inArray( "John", arr ) );    $spans.eq( 1 ).text( jQuery.inArray( 4, arr ) );    $spans.eq( 2 ).text( jQuery.inArray( "Karl", arr ) );    $spans.eq( 3 ).text( jQuery.inArray( "Pete", arr, 2 ) );})

10.13 isFunction 方法

作用
- 判断传入的对象是否是一个函数
- 返回值: true / false

注意点
- jQuery框架本质上是一个函数
- (function( window, undefined ) {})( window );

$(function () {
   	var obj = {
   name:"lnj",age: "33", gender:"male"};	var arr = [1, 3, 5, 7, 9];	var fn = function () {
   }	var $res = $.isFunction(obj);	console.log($res);// false	$res = $.isFunction(arr);	console.log($res);	$res = $.isFunction(fn);	console.log($res);	// 通过该方法验证了我们前面所说的,jQuery框架本质是一个匿名函数	$res = $.isFunction($);	console.log($res);});

10.14 parseJSON 方法

作用
- $.parseJSON()函数用于将符合标准格式的的JSON字符串转为与之对应的JavaScript对象
- 传入格式有误的 JSON 字符串可能导致抛出异常
- JSON标准不允许"控制字符"如制表符或换行符

解析一个 JSON 字符串$(function () {
        var obj = jQuery.parseJSON('{"name":"John"}');    alert( obj.name === "John" );})

10.15 makeArray 方法

作用
- $.makeArray()函数用于将一个类似数组的对象转换为真正的数组对象

注意
- 类数组对象具有许多数组的属性(例如length属性，[]数组访问运算符等)
- 但是缺少从数组的原型对象上继承下来的内置方法(例如：pop()、reverse()等)

将一个HTML元素集合转换成对应的数组$(function () {
        var elems = document.getElementsByTagName("div"); // 返回一个节点列表    var arr = jQuery.makeArray(elems);    arr.reverse(); //对列表的元素使用一个数组方法    $(arr).appendTo(document.body);})

10.16 extend 方法

作用
- jQuery.extend()函数用于将一个或多个对象的内容合并到目标对象

注意
- 如果只为$.extend()指定了一个参数，则意味着参数target被省略，此时，target就是jQuery对象本身
- 通过这种方式，可以为全局对象 jQuery 添加新的函数
- 如果多个对象具有相同的属性，则后者会覆盖前者的属性值

10.17 fn.extend 方法

作用
- $.fn.extend()函数为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)

提示
- jQuery.fn是jQuery的原型对象，其extend()方法用于为jQuery的原型添加新的属性和方法
- 这些方法可以在jQuery实例对象上调用

11. jQuery 的 Ajax

11.1 Ajax 的定义

Ajax: 异步刷新技术

在这里插入图片描述

11.2 异步刷新的作用

无刷新: 不刷新整个页面，只刷新局部

无刷新的好处
- 只更新部分页面，有效利用带宽
- 提供连续的用户体验
- 提供类似C/S的交互效果，操作更方便

11.3 Ajax 和传统 web 区别

传统web	Ajax技术
`提交表单`方式发送请求	`异步引擎对象`发送请求
响应内容是一个`完整页面`	响应内容只是`需要的数据`
需`等待服务器响应完成并重新加载整个页面后`，用户才能进行操作	可以`动态更新页面中的部分内容`，用户不需要等待请求的响应

11.4 Ajax 异步请求原理

在这里插入图片描述

11.5 jQuery 的 Ajax 请求

传统方式实现Ajax的不足
- 方法、属性、常用值较多不好记忆
- 步骤繁琐
- 浏览器兼容问题

jQuery常用Ajax方法(“$”不需要选择器，这是工具方法)
- $.ajax()
- $.get()
- $.post()
- $.getJSON()
- load()

11.6 Ajax 请求方法的语法

使用$.ajax()实现异步交互

$.ajax({
   	url: url,					// 要提交的 URL 路径	type: "get",				// 发送请求的方式	data: data,					// 要发送到服务器的数据	dataType: "json"			// 指定传输的数据格式	success: function(result){
   	// 请求成功后要执行的代码	},	error: function(){
   			// 请求失败后要执行的代码	}});

11.7 get 请求方法的语法

使用$.get()实现异步交互

$.get(url,data,function(result){
   	// 省略将服务器返回的数据显示到页面的代码});// 以上代码等价于$.ajax({
   	url:url,	data:data,	type:"get",	success: function(result) {
   		//省略代码	}});

11.8 load 请求方法的语法

使用load()实现异步交互

加载外部的页面文件到当前页面中

$("#nameDiv").load(url,data);// 以上代码等价于$.get(url,data,function(result){
   	$("#nameDiv").html(result);}

11.9 getJSON 请求方法的语法

使用$.getJSON()实现异步交互

仅限于JSON数据格式

$.getJSON(url,data, success(result) {
   	//省略将服务器返回的数据显示到页面的代码});

12. jQuery 异步请求 Ajax

12.1 跨域问题

跨域的限制

在这里插入图片描述

跨域的规定

URL	原因	是否允许通信
http://www.a.com/dir/b.html	同一域名下	允许
http://www.a.com/dir2/c.html	同一域名，不同文件夹	允许
http://www.a.com:81/dir/d.html	同一域名,`不同端口`	不允许
https://www.a.com/dir/e.html	同一域名，`不同协议`	不允许
http://71.23.92.77/dir/f.htmll	`域名和域名对应 ip`	不允许
http://script.a.com/g.html	主域相同，`子域不同`	不允许
http://a.com/h.html	同一域名，`不同二级域名`(同上)	不允许(cookie 这种情况下也不允许访问)
http://www.cc.com/a.html	`主机名不同`	不允许