jQuery|jQuery的基本使用

jQuery

1. jQuery 概述

给2022年及以后学者的建议:

jQuery 在三大框架的时代逐渐被淘汰，有必要学，但没必要深究，建议只花1-2天过一遍知识点，了解jQuery的机制即可！

什么是 jQuery ？

jQuery 是一个 JavaScript 函数库

jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库

jQuery 库包含以下功能：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

提示： 除此之外，jQuery 还提供了大量的插件

下载 jQuery: https://jquery.com/download

2. jQuery 语法

入口函数

为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败

// 当网页元素加载完毕后，响应事件
// $(document).ready(function(){
    
    
		......
// })
$(function(){
    
    //加载完毕后响应事件的简写
    $('#divMove').mousemove(function(e){
    
    
        $('#mouseMove').text('x:'+e.pageX+',y:'+e.pageY);
    })
});//等同于上面的（简写）

1.等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
2.相当于原生 js 中的 DOMContentLoaded。
3.不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。

公式

$(selector).aciton();

• 美元符号定义 jQuery，jQuery 就是 $，两者相同
• 选择符（selector）“查询"和"查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

// css中的选择器jQuery都能用
$('#test-jquery').click(function(){
    
    
	alert('hello,jquery!');
});

3. jQuery 选择器

jQuery选择器 (和css选择器基本一样)

① 基本选择器

$("#id")            // ID选择器
$("div")            // 元素选择器
$(".classname")     // 类选择器
$(".classname,.classname1,#id1")     // 组合选择器

② 层次选择器

 $("#id>.classname ")    // 子元素选择器
$("#id .classname ")    // 后代元素选择器
$("#id + .classname ")    // 紧邻下一个元素选择器
$("#id ~ .classname ")    // 兄弟元素选择器

③ 过滤选择器(重点)

$("li:first")    // 第一个li
$("li:last")     // 最后一个li
$("li:even")     // 挑选下标为偶数的li
$("li:odd")      // 挑选下标为奇数的li
$("li:eq(4)")    // 下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    // 下标大于 2 的li
$("li:lt(2)")    // 下标小于 2 的li
$("li:not(#runoob)") // 挑选除 id="runoob" 以外的所有li

3.2 内容过滤选择器

$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 // 不包含子元素或者文本的空元素
$("div:has(selector)")        // 含有选择器所匹配的元素
$("td:parent")                // 含有子元素或者文本的元素

3.3 可见性过滤选择器

$("li:hidden")       // 匹配所有不可见元素，或type为hidden的元素
$("li:visible")      // 匹配所有可见元素

3.4 属性过滤选择器

$("div[id]")        // 所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素

3.5 状态过滤选择器

$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option

④ 表单选择器

$(":input")      // 匹配所有 input, textarea, select 和 button 元素
$(":text")       // 所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   // 所有密码框
$(":radio")      // 所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     // 所有提交按钮
$(":reset")      // 所有重置按钮
$(":button")     // 所有button按钮
$(":file")       // 所有文件域

*	$(“*”)	所有元素
#id	$(“#lastname”)	id=“lastname” 的元素
.class	$(“.intro”)	class=“intro” 的所有元素
.class,.class	$(“.intro,.demo”)	class 为 “intro” 或 “demo” 的所有元素
element	$(“p”)	所有 元素
el1,el2,el3	$(“h1,div,p”)	所有 、 和 元素
:first	$(“p:first”)	第一个 元素
:last	$(“p:last”)	最后一个 元素
:even	$(“tr:even”)	所有偶数
:odd	$(“tr:odd”)	所有奇数
:first-child	$(“p:first-child”)	属于其父元素的第一个子元素的所有 元素
:first-of-type	$(“p:first-of-type”)	属于其父元素的第一个 元素的所有 元素
:last-child	$(“p:last-child”)	属于其父元素的最后一个子元素的所有 元素
:last-of-type	$(“p:last-of-type”)	属于其父元素的最后一个 元素的所有 元素
:nth-child(n)	$(“p:nth-child(2)”)	属于其父元素的第二个子元素的所有 元素
:nth-last-child(n)	$(“p:nth-last-child(2)”)	属于其父元素的第二个子元素的所有 元素，从最后一个子元素开始计数
:nth-of-type(n)	$(“p:nth-of-type(2)”)	属于其父元素的第二个 元素的所有 元素
:nth-last-of-type(n)	$(“p:nth-last-of-type(2)”)	属于其父元素的第二个 元素的所有 元素，从最后一个子元素开始计数
:only-child	$(“p:only-child”)	属于其父元素的唯一子元素的所有 元素
:only-of-type	$(“p:only-of-type”)	属于其父元素的特定类型的唯一子元素的所有 元素
parent > child	$(“div > p”)	元素的直接子元素的所有 元素
parent descendant	$(“div p”)	元素的后代的所有 元素
element + next	$(“div + p”)	每个 元素相邻的下一个 元素
element ~ siblings	$(“div ~ p”)	元素同级的所有 元素
:eq(index)	$(“ul li:eq(3)”)	列表中的第四个元素（index 值从 0 开始）
:gt(no)	$(“ul li:gt(3)”)	列举 index 大于 3 的元素

元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。

更多请看这里

4. jQuery 事件

jQuery事件
1.鼠标事件
2.键盘事件
3.表单事件
4.文档/窗口事件

所有事件一览

/*  ★(按开头字母排序)
    bind()	向匹配元素附加一个或更多事件处理器
    blur()	触发、或将函数绑定到指定元素的 blur 事件
    change()	触发、或将函数绑定到指定元素的 change 事件
    click()	触发、或将函数绑定到指定元素的 click 事件
    dblclick()	触发、或将函数绑定到指定元素的 double click 事件
    delegate()	向匹配元素的当前或未来的子元素附加一个或多个事件处理器
    die()	移除所有通过 live() 函数添加的事件处理程序。
    error()	触发、或将函数绑定到指定元素的 error 事件
    event.isDefaultPrevented()	返回 event 对象上是否调用了 event.preventDefault()。
    event.pageX	相对于文档左边缘的鼠标位置。
    event.pageY	相对于文档上边缘的鼠标位置。
    event.preventDefault()	阻止事件的默认动作。
    event.result	包含由被指定事件触发的事件处理器返回的最后一个值。
    event.target	触发该事件的 DOM 元素。
    event.timeStamp	该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
    event.type	描述事件的类型。
    event.which	指示按了哪个键或按钮。
    focus()	触发、或将函数绑定到指定元素的 focus 事件
    keydown()	触发、或将函数绑定到指定元素的 key down 事件
    keypress()	触发、或将函数绑定到指定元素的 key press 事件
    keyup()	触发、或将函数绑定到指定元素的 key up 事件
    live()	为当前或未来的匹配元素添加一个或多个事件处理器
    load()	触发、或将函数绑定到指定元素的 load 事件
    mousedown()	触发、或将函数绑定到指定元素的 mouse down 事件
    mouseenter()	触发、或将函数绑定到指定元素的 mouse enter 事件
    mouseleave()	触发、或将函数绑定到指定元素的 mouse leave 事件
    mousemove()	触发、或将函数绑定到指定元素的 mouse move 事件
    mouseout()	触发、或将函数绑定到指定元素的 mouse out 事件
    mouseover()	触发、或将函数绑定到指定元素的 mouse over 事件
    mouseup()	触发、或将函数绑定到指定元素的 mouse up 事件
    one()	向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
    ready()	文档就绪事件（当 HTML 文档就绪可用时）
    resize()	触发、或将函数绑定到指定元素的 resize 事件
    scroll()	触发、或将函数绑定到指定元素的 scroll 事件
    select()	触发、或将函数绑定到指定元素的 select 事件
    submit()	触发、或将函数绑定到指定元素的 submit 事件
    toggle()	绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
    trigger()	所有匹配元素的指定事件
    triggerHandler()	第一个被匹配元素的指定事件
    unbind()	从匹配元素移除一个被添加的事件处理器
    undelegate()	从匹配元素移除一个被添加的事件处理器，现在或将来
    unload()	触发、或将函数绑定到指定元素的 unload 事件

	https://www.w3school.com.cn/jquery/jquery_ref_events.asp
*/

更多请看这里

① 鼠标事件

// 鼠标事件
/*
    1.mousemove（元素内部移动）
    鼠标在元素内部移动时触发，只要鼠标移动，即使只是又移动了一个像素，也会触发，这就意味着短时间内会触发多次事件
    
    2.mouseover（元素上方）
    鼠标在元素内部上方时触发，不同于mousemove，在上方移动的时间内只触发一次
    常与 mouseout() 连用
    mouseover与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件
    
    3.mouseenter（进入元素） 原本是为IE设计
    鼠标进入元素时触发，触发一次
    当鼠标指针穿过元素时，会发生 mouseenter 事件
    该事件大多数时候会与 mouseleave 事件一起使用
    mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数
注释：
    与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件
    如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件

    4.mouseout（离开元素）
    鼠标离开元素时触发，触发一次

    5.mouseleave（离开元素）原本为IE设计
    鼠标离开元素时触发，触发一次
	
    6.mousedown （按下鼠标键）

    7.mouseup （鼠标键松开）
    当在元素上放松鼠标按钮时，会发生 mouseup 事件
    注释：与 click 事件不同，mouseup 事件仅需要放松按钮
    当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件

    8.click （鼠标键松开后）
    按下鼠标，执行顺序为onmousedown,onmouseup,onclick
    
    9.dbclick （双击鼠标键松开后）
    双击鼠标，触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数
	提示：dblclick 事件也会产生 click 事件。如果这两个事件都被应用于同一个元素，则会产生问题
	
    10.mousewheel （滚动鼠标滚轮）
    
    11.hover
       鼠标指针悬停在被选元素上时,要运行的两个函数
	   方法触发 mouseenter 和 mouseleave 事件。
	   注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它

*/

鼠标事件实例

// 1.click()  单击
$('p').click(function(){
    
    
     $("p").css("background-color","yellow");
});

// 2.mouseenter()
$("p").mouseenter(function(){
    
    
    $("p").css("background-color","yellow");
});

// 4.mouseleave()
$("#p1").mouseleave(function(){
    
    
    alert("再见，您的鼠标离开了该段落。");
});

// 4.mousedown()
$('#id1').mousedown(function(){
    
    
    $("#id1").css("background-color","yellow");
});

// 5.mouseup
$("#p1").mouseup(function(){
    
    
    alert("鼠标在段落上松开。");
});

// 6.mouseover()  当鼠标指针位于元素上方时
$('.class1').mouseover(function(){
    
    
    $(this).css("background-color","yellow");
});

// 7.hover()
$("#p1").hover(
    function(){
    
    
        alert("你进入了 p1!");
    },
    function(){
    
    
        alert("拜拜! 现在你离开了 p1!");
    }
);

② 键盘事件

不太常用,链接: jQuery事件

③ 表单事件

1.submit
当提交表单时，会发生 submit 事件
该事件只适用于 <form> 元素

2.change
当元素的值改变时发生 change 事件（仅适用于表单字段）
注意：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生

3.focus
当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），发生 focus 事件
提示：该方法通常与 blur() 方法一起使用

4.blur
当元素失去焦点时发生 blur 事件
提示：该方法常与 focus() 方法一起使用

表单事件实例

// 1.submit()  表单提交
$("form").submit(function(){
    
    
    alert("提交");
});

// 2. change()  元素的值改变
$("input").change(function(){
    
    
    alert("文本已被修改");
});

// 3.focus()  获得焦点
$("input").focus(function(){
    
    
    $("span").css("display","inline").fadeOut(2000);
});

/// 4.blur()  失去焦点
$("input").blur(function(){
    
    
    alert("输入框失去了焦点");
});

④ 文档/窗口事件

1.load
load() 方法在 jQuery 版本 1.8 中已废弃
load() 方法添加事件处理程序到 load 事件
当指定的元素已加载时，会发生 load 事件
该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）以及 window 对象
根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件
注意：还存在一个名为 load() 的 jQuery AJAX 方法。根据不同的参数决定调用哪个方法

2.resize
当调整浏览器窗口大小时，发生 resize 事件

3.scroll
用户滚动指定的元素时，会发生 scroll 事件
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）

4.unload()
unload() 方法在 jQuery 版本 1.8 中被废弃，在 3.0 版本被移除。
Firefox 与 Chrome 会阻止弹窗，所以没办法看到效果。
    当用户离开页面时，会发生 unload 事件。
    当发生以下情况下，会触发 unload 事件：
    点击某个离开页面的链接
    在地址栏中键入了新的 URL
    使用前进或后退按钮
    关闭浏览器窗口
    重新加载页面
unload() 方法规定当 unload 事件发生时会发生什么。
unload() 方法只应用于 window 对象。
注意：unload 事件在不同浏览器中效果不一样，请确保使用前在所有浏览器测试该方法。

文档/窗口事件实例

// 1.load() 
$("img").load(function(){
    
    
    alert("图片已载入");
});

// 2.resize  浏览器窗口大小改变
$(window).resize(function(){
    
    
    $('span').text(x+=1);
});

// 3.scroll
$("div").scroll(function(){
    
    
    $("span").text(x+=1);
});

// 4.unload
$(window).unload(function(){
    
    
    alert("Goodbye!");
});

5. jQuery 效果

① 隐藏/显示

• hide() 和 show()

$("#hide").click(function(){
    
    
  $("p").hide();
});
 
$("#show").click(function(){
    
    
  $("p").show();
});

② 淡入/淡出

jQuery 拥有下面四种 fade 方法：

• fadeIn()

• fadeOut()

• fadeToggle()

• fadeTo()

fadeIn() 用于淡入已隐藏的元素

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。

$("button").click(function(){
    
    
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

fadeOut() 用于淡出可见元素

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

$("button").click(function(){
    
    
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

fadeToggle() 切换淡入/淡出效果

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果

$("button").click(function(){
    
    
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

fadeTo() 允许渐变为给定的不透明度（值介于 0 与 1 之间）

必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）
可选的 callback 参数是该函数完成后所执行的函数名称

$("button").click(function(){
    
    
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

③ 滑动

jQuery 拥有以下滑动方法：

• slideDown() 向下滑动元素
• slideUp() 向上滑动元素
• slideToggle() 切换向上/向下滑动

使用方法和淡入/淡出一样

④ 动画

• animate() 用于创建自定义动画。

语法：$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

$("button").click(function(){
    
    
  $("div").animate({
    
    left:'250px'});
});

// 操作多个属性
$("button").click(function(){
    
    
  $("div").animate({
    
    
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

清除队动画列里的上一个动画:

用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行，如果为 true，就可以停止所有动画效果
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false
因此，默认地，stop() 会清除在被选元素上指定的当前动画

stop()

⑤ 链接

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上），可以把动作/方法链接在一起。

提示： 这样的话，浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

提示：当进行链接时，代码行会变得很长。不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。

如下书写也可以很好地运行：

$("#p1").css("color","red")
    .slideUp(2000)
    .slideDown(2000);

更多请看这里

6. jQuery 操作DOM

① 节点文本内容

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标签）
• val() - 设置或返回表单字段的值

$('#test-ul li[name=python]').text();//获取值
$('#test-ul li[name=python]').text('设置值');//修改值
$('#test-ul li[name=python]').html();//.html()和.text()用法一模一样
$('#test-ul li[name=python]').html('设置值2');
$("#test-ul li[name=python]").val();
$("#test-ul li[name=python]").val('设置值3');

text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值

② 获取属性

• prop() - 获得本身就带有的固有属性
• attr() - 获得自定义的 DOM 属性

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用 prop()

<a href="#" id="link1" test1="delete" rel="nofollow">删除</a>

prop()函数的结果:

1.如果有相应的属性，返回指定属性值。

2.如果没有相应的属性，返回值是空字符串。

attr()函数的结果:

1.如果有相应的属性，返回指定属性值。

2.如果没有相应的属性，返回值是 undefined

③ 添加元素

• append() - 在被选元素的结尾插入内容 (在该元素的内部))
• prepend() - 在被选元素的开头插入内容 (在该元素的内部))
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

$("p").append("在元素内部的结尾追加文本");
$("p").prepend("在元素内部的开头追加文本");
$("img").after("在元素后面添加文本");
$("img").before("在元素前面添加文本");

添加若干新元素

通过 append() 和 prepend() 方法添加若干新元素

function appendText(){
    
    
    var txt1="<p>文本-1。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本-2。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本-3。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

④ 删除元素

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素(删除所有子元素，不删除自己)

$("#div1").remove();
$("#div1").empty();

⑤ 操作 css

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回被选元素的一个或多个样式属性

// 1.addClass()  添加类
$("button").click(function(){
    
    
  $("body div:first").addClass("important blue");
});

// 2.removeClass()  删除类
$("button").click(function(){
    
    
  $("h1,h2,p").removeClass("blue");
});

// 1.toggleClass  切换类的添加/删除
$("button").click(function(){
    
    
  $("h1,h2,p").toggleClass("blue");
});

//设置css样式
$('#test-ul li[name=python]').css({
    
    'color':'grey','background':'yellow'});
//设置一个属性中间用','  .css('color','grey');  
//设置多个属性内用{}包起来，中间用冒号':'  .css({'color':'grey','background':'yellow'});


//显示隐藏  隐藏本质：display = none
$('#test-ul li[name=python]').show();
// $('#test-ul li[name=python]').hide();
//点击c的时候python隐藏
$(function(){
    
    
    $('#test-ul li[name=c]').mousedown(function(){
    
    
        $('#test-ul li[name=python]').hide();
    })
});

css() 用法

$("p").css("background-color","yellow");  // 设置一个属性可以不用对象
$("p").css({
    
      // 设置多个属性需要对象
    "background-color":"yellow",
    "font-size":"200%"
});

⑥ 尺寸大小

• width() - 设置或返回元素的宽度（不包括内边距、边框或外边距）
• height() - 设置或返回元素的高度（不包括内边距、边框或外边距）
• innerWidth() - 返回元素的宽度（包括内边距）
• innerHeight() - 返回元素的高度（包括内边距）
• outerWidth() - 返回元素的宽度（包括内边距和边框）
• outerHeight() - 返回元素的高度（包括内边距和边框）

$("button").click(function(){
    
    
  var txt="";
  txt+="div 的宽度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
  txt+="div 高度，包含内边距: " + $("#div1").innerHeight()
  txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
  txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

// 获取当前界面的一些参数
$(window).width();
$(document).width();

唯一需要注意的地方，设置了 box-sizing 后，width() 获取的是 css 设置的 width 减去 padding 和 border 的值

更多请看这里

7. jQuery 元素关系 和 遍历

① 元素之间的关系

(1) 祖先元素

• parent() - 返回被选元素的直接父元素
• parents() - 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>) ，可以使用可选参数来过滤对祖先元素的搜索
• parentsUntil() - 返回介于两个给定元素之间的所有祖先元素

// 1.parent()  直接父元素
$(document).ready(function(){
    
    
  $("span").parent();
});

// 2.parents()  所有祖先元素 
$(document).ready(function(){
    
    
  $("span").parents("ul");  // 所有 ul 祖先元素
});

// 3.parentsUntil() 介于两个给定元素之间的所有祖先元素
$(document).ready(function(){
    
    
  $("span").parentsUntil("div");
});  // 返回介于 <span> 与 <div> 元素之间的所有祖先元素

(2) 后代元素

• children() - 返回被选元素的所有直接子元素
• find() - 返回被选元素的后代元素，一路向下直到最后一个后代，可选参数来过滤对子元素的搜索

// 1.children()  所有直接子元素
$(document).ready(function(){
    
    
  $("div").children("p.1");
});
// 2.find()  所有后代元素
$(document).ready(function(){
    
    
  $("div").find("*");
});

(3) 兄弟元素

• siblings() - 返回被选元素的所有同胞元素
• next() - 返回被选元素的下一个同胞元素
• nextAll() - 返回被选元素的所有跟随的同胞元素(即后面的兄弟)
• nextUntil() - 返回介于两个给定参数之间的所有跟随的同胞元素
• prev() - 返回被选元素的上一个同胞元素
• prevAll() - 返回被选元素的所有前面的同胞元素
• prevUntil() - 返回介于两个给定参数之间的所有前面的同胞元素

// siblings()  所有同胞
$(document).ready(function(){
    
    
  $("h2").siblings();
});

(4) 过滤

三个最基本的过滤方法是：first(), last() 和 eq()，在一组元素中的位置来选择一个特定的元素
其他过滤方法，比如 filter() 和 not() 选取匹配或不匹配某项指定标准的元素

• first() - 返回被选元素的首个元素

• last() - 返回被选元素的最后一个元素

• eq() - 返回被选元素中带有指定索引号的元素 常用

• filter() - 根据自定义标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回

• not() - 返回不匹配标准的所有元素

// 1.first()  首个元素
$(document).ready(function(){
    
    
  $("div p").first();
});

// 2.last()  最后一个元素
$(document).ready(function(){
    
    
  $("div p").last();
});

// 3.eq()  指定索引号的元素
$(document).ready(function(){
    
    
  $("p").eq(1);
});

// 4.filter()  不匹配标准的元素会被从集合中删除，匹配的元素会被返回
$(document).ready(function(){
    
    
  $("p").filter(".url");
});

// 5.not()  不匹配标准的所有元素 
(document).ready(function(){
    
    
  $("p").not(".url");
});

更多请看这里

② 遍历

jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

关于循环

jQuery有隐式迭代

隐式迭代就是遍历内部DOM元素(伪数组形式存储)的过程中，给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用

<body>
    <div>测试</div>
    <div>测试</div>
    <div>测试</div>
    <div>测试</div>
    <ul>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>
    </ul>
    <script>
        // 1. 获取四个div元素 
        console.log($("div"));
        // 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style
        $("div").css("background", "pink");
        // 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
        $("ul li").css("color", "red");
    </script>
</body>

一般用 each() 来遍历对象，为每个匹配元素规定要运行的函数

$("button").click(function(){
    
    
    $("li").each(function(){
    
    
        alert($(this).text())
    });
});

8. jQuery AJAX

什么是 AJAX？
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示
使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等

关于 jQuery 与 AJAX
jQuery 提供多个与 AJAX 有关的方法

​ 通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时能够把这些外部数据直接载入网页的被选元素中

​ 如果没有 jQuery，AJAX 编程还是有些难度的
​ 编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能

① AJAX load() 方法

load() 方法从服务器加载数据，并把返回的数据放入被选元素中

语法

$(selector).load(URL,data,callback);
    必需的 URL 参数规定您希望加载的 URL。
    可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
    可选的 callback 参数是 load() 方法完成后所执行的函数名称。
    	可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数，回调函数可以设置不同的参数：
            responseTxt - 包含调用成功时的结果内容
            statusTXT - 包含调用的状态
            xhr - 包含 XMLHttpRequest 对象

这是示例文件（“demo_test.txt”）的内容：

<h2>jQuery AJAX 是个非常棒的功能！</h2>
<p id="p1">这是段落的一些文本。</p>

$("#div1").load("demo_test.txt");  // 把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中

② AJAX get() 和 post() 方法

HTTP 请求：GET vs POST

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

• GET - 从指定的资源请求数据
• POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

(1) jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法

$.get(URL,callback);
或
$.get( URL [, data ] [, callback ] [, dataType ] )

• URL：发送请求的 URL字符串。
• data：可选的，发送给服务器的字符串或 key/value 键值对。
• callback：可选的，请求成功后执行的回调函数。
• dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）

$("button").click(function(){
    
    
  $.get("demo_test.php",function(data,status){
    
    
    alert("数据: " + data + "\n状态: " + status);
  });
});

(2) jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

语法

$.post(URL,callback);
或
$.post( URL [, data ] [, callback ] [, dataType ] )

• URL：发送请求的 URL字符串。
• data：可选的，发送给服务器的字符串或 key/value 键值对。
• callback：可选的，请求成功后执行的回调函数。
• dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"Syy",
        url:"#"
    },
    function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

(3) GET 和 POST 方法的区别

1、发送的数据数量
在 GET 中，只能发送有限数量的数据，因为数据是在 URL 中发送的
在 POST 中，可以发送大量的数据，因为数据是在正文主体中发送的

2、安全性
GET 方法发送的数据不受保护，因为数据在 URL 栏中公开，这增加了漏洞和黑客攻击的风险
POST 方法发送的数据是安全的，因为数据未在 URL 栏中公开，还可以在其中使用多种编码技术，这使其具有弹性

3、加入书签中
GET 查询的结果可以加入书签中，因为它以 URL 的形式存在；而 POST 查询的结果无法加入书签中

4、编码
在表单中使用 GET 方法时，数据类型中只接受 ASCII 字符
在表单提交时，POST 方法不绑定表单数据类型，并允许二进制和 ASCII 字符

5、可变大小
GET 方法中的可变大小约为 2000 个字符
POST 方法最多允许 8 Mb 的可变大小

6、缓存
GET 方法的数据是可缓存的，而 POST 方法的数据是无法缓存的

7、主要作用
GET 方法主要用于获取信息。而 POST 方法主要用于更新数据

更多请看这里

9. 多库共存 - noConflict() 方法

jQuery 使用 $ 符号作为 jQuery 的简写

如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？

其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行

jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法
noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。
当然，也可以通过全名替代简写的方式来使用 jQuery：

$.noConflict();
jQuery(document).ready(function(){
    
    
  jQuery("button").click(function(){
    
      // 直接使用 jQuery全名
    jQuery("p").text("jQuery 仍然在工作!");
  });
});

也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用

var jq = $.noConflict();  // 赋值给一个变量，使用变量代替$
jq(document).ready(function(){
    
    
  jq("button").click(function(){
    
    
    jq("p").text("jQuery 仍然在工作!");
  });
});

如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。
这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 “jQuery”：

$.noConflict();
jQuery(document).ready(function($){
    
      // 传参使用
  $("button").click(function(){
    
    
    $("p").text("jQuery 仍然在工作!");
  });
});

10. jQuery 杂项方法

① jQuery 杂项方法

方法	描述
data()	向被选元素附加数据，或者从被选元素获取数据
each()	为每个匹配元素执行函数
get()	获取由选择器指定的 DOM 元素
index()	从匹配元素中搜索给定元素
$.noConflict()	释放变量 $ 的 jQuery 控制权
$.param()	创建数组或对象的序列化表示形式（可在生成 AJAX 请求时用于 URL 查询字符串中）
removeData()	移除之前存放的数据
size()	在版本 1.8 中被废弃。返回被 jQuery 选择器匹配的 DOM 元素的数量
toArray()	以数组的形式检索所有包含在 jQuery 集合中的所有 DOM 元素
pushStack()	将一个DOM元素集合加入到jQuery栈
$.when()	提供一种方法来执行一个或多个对象的回调函数

---

② jQuery 实用工具

方法	描述
$.boxModel	在版本 1.8 中被废弃。检测浏览器是否使用W3C的CSS盒模型渲染当前页面
$.browser	在版本 1.9 中被废弃。返回用户当前使用的浏览器的相关信息
$.contains()	判断另一个DOM元素是否是指定DOM元素的后代
$.each()	遍历指定的对象和数组
$.extend()	将一个或多个对象的内容合并到目标对象
$.fn.extend()	为jQuery扩展一个或多个实例属性和方法
$.globalEval()	全局性地执行一段JavaScript代码
$.grep()	过滤并返回满足指定函数的数组元素
$.inArray()	在数组中查找指定值并返回它的索引值（如果没有找到，则返回-1）
$.isArray()	判断指定参数是否是一个数组
$.isEmptyObject()	检查对象是否为空（不包含任何属性）
$.isFunction()	判断指定参数是否是一个函数
$.isNumeric()	判断指定参数是否是一个数字值
$.isPlainObject()	判断指定参数是否是一个纯粹的对象
$.isWindow()	判断指定参数是否是一个窗口
$.isXMLDoc()	判断一个DOM节点是否位于XML文档中，或者其本身就是XML文档
$.makeArray()	将一个类似数组的对象转换为真正的数组对象
$.map()	指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回
$.merge()	合并两个数组内容到第一个数组
$.noop()	一个空函数
$.now()	返回当前时间
$.parseHTML()	将HTML字符串解析为对应的DOM节点数组
$.parseJSON()	将符合标准格式的JSON字符串转为与之对应的JavaScript对象
$.parseXML()	将字符串解析为对应的XML文档
$.trim()	去除字符串两端的空白字符
$.type()	确定JavaScript内置对象的类型
$.unique()	在jQuery 3.0中被弃用。对DOM元素数组进行排序，并移除重复的元素
$.uniqueSort()	对DOM元素数组进行排序，并移除重复的元素
$.data()	在指定的元素上存取数据，并返回设置值
$.hasData()	确定一个元素是否有相关的jQuery数据
$.sub()	创建一个新的jQuery副本，其属性和方法可以修改，而不会影响原来的jQuery对象
$.speed	创建一个包含一组属性的对象用来定义自定义动画
$.htmlPrefilter()	通过jQuery操作方法修改和过滤HTML字符串
$.readyException()	处理包裹在jQuery()中函数同步抛出的错误

---

③ jQuery 回调对象

jQuery 1.7 版本中新增的 jQuery.Callbacks() 函数,返回一个多功能对象，此对象提供了一种强大的方法来管理回调列表。它能够增加、删除、触发、禁用回调函数。

方法	描述
$.Callbacks()	一个多用途的回调列表对象，用来管理回调函数列表
callbacks.add()	在回调列表中添加一个回调或回调的集合
callbacks.disable()	禁用回调列表中的回调函数
callbacks.disabled()	确定回调列表是否已被禁用
callbacks.empty()	从列表中清空所有的回调
callbacks.fire()	传入指定的参数调用所有的回调
callbacks.fired()	确定回调是否至少已经调用一次
callbacks.firewith()	给定的上下文和参数访问列表中的所有回调
callbacks.has()	判断回调列表中是否添加过某回调函数
callbacks.lock()	锁定当前状态的回调列表
callbacks.locked()	判断回调列表是否被锁定
callbacks.remove()	从回调列表中的删除一个回调或回调集合

---

④ jQuery 延迟对象

在jQuery 1.5中介绍了 Deferred 延迟对象，它是通过调用 jQuery.Deferred() 方法来创建的可链接的实用对象。它可注册多个回调函数到回调列表，调用回调列表并且传递异步或同步功能的成功或失败的状态。
延迟对象是可链接的，类似于一个 jQuery 对象可链接的方式，区别于它有自己的方法。在创建一个 Deferred 对象之后，您可以使用以下任何方法，直接链接到通过调用一个或多个的方法创建或保存的对象。

方法	描述
$.Deferred()	返回一个链式实用对象方法来注册多个回调
deferred.always()	当Deferred（延迟）对象被受理或被拒绝时，调用添加的处理程序
deferred.done()	当Deferred（延迟）对象被受理时，调用添加的处理程序
deferred.fail()	当Deferred（延迟）对象被拒绝时，调用添加的处理程序
deferred.isRejected()	从jQuery1.7开始已经过时，确定 Deferred 对象是否已被拒绝
deferred.isResolved()	从jQuery1.7开始已经过时，确定 Deferred 对象是否已被解决
deferred.notify()	给定一个参数，调用正在延迟对象上进行的回调函数( progressCallbacks )
deferred.notifyWith()	给定上下文和参数，调用正在延迟对象上进行的回调函数( progressCallbacks )
deferred.pipe()	过滤 and/or 链式延迟对象的工具方法
deferred.progress()	当Deferred（延迟）对象生成进度通知时，调用添加处理程序
deferred.promise()	返回 Deferred(延迟)的 Promise 对象
deferred.reject()	拒绝 Deferred（延迟）对象，并根据给定的参数调用任何 failCallbacks 回调函数
deferred.rejectWith()	拒绝 Deferred（延迟）对象，并根据给定的 context 和 args 参数调用任何 failCallbacks 回调函数
deferred.resolve()	解决Deferred（延迟）对象，并根据给定的参数调用任何 doneCallbacks 回调函数
deferred.resolveWith()	解决Deferred（延迟）对象，并根据给定的context 和 args 参数调用任何 doneCallbacks 回调函数
deferred.state()	确定一个Deferred（延迟）对象的当前状态
deferred.then()	当Deferred（延迟）对象解决，拒绝或仍在进行中时，调用添加处理程序
.promise()	返回一个 Promise 对象，观察某种类型被绑定到集合的所有行动，是否已被加入到队列中

11. jQuery 属性

方法	描述
context	在版本 1.10 中被废弃。包含被传递到 jQuery 的原始上下文
jquery	包含 jQuery 的版本号
jQuery.fx.interval	改变以毫秒计的动画运行速率
jQuery.fx.off	对所有动画进行全局禁用或启用
jQuery.support	包含表示不同浏览器特性或漏洞的属性集（主要用于 jQuery 的内部使用）
length	包含 jQuery 对象中元素的数目
jQuery.cssNumber	包含所有可以不使用单位的CSS属性的对象

12. 插件

jQuery还有很多插件,可以上各大网站下载!

jQuery插件库

jQuery之家

菜鸟教程

13. 案例

//事件1：点击c的时候python隐藏
    $(function(){
    
    
        $('#test-ul li[name=c]').mousedown(function(){
    
    
            $('#test-ul li[name=python]').hide();
        })
    });


//事件2：鼠标移动到
    $(function(){
    
    
        $('#test-ul li[class=java]').mouseover(function(){
    
    
            $('#test-ul li[class=java]').css({
    
    'background':'grey','color':'green','font-size':'20px'})
        })
        $('#test-ul li[class=java]').mouseout(function(){
    
    
            $('#test-ul li[class=java]').css({
    
    'background':'purple','color':'red','font-size':'18px'});
            // alert('哈哈哈哈');
        })
        x=0;
        $('#div-scroll').scroll(function(){
    
    //滚动框滚动了几次
            $('#test-ul li[class=java]').text('我变了你看出来了吗?');
            $('#spann').text(x+=1);
        })
    })

扩展：json和js对象的区别

json字符串: {
    
     "id":"100","name":"tony","salary":30000 }
js对象：    {
    
     id:100,name:"tony",salary:30000 }

可以看出json对象的key必须加双引号，而js对象中的key的双引号可加可不加

JSON的两种结构
① 对象结构
对象结构在 JSON 中表示为 { } 括起来的内容。数据结构为 { key: value, key: value, … } 的键值对结构。其中，key 必须是使用英文的双引号(单引号不行！)包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
② 数组结构
数组结构在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ “java”, “javascript”, 30, true … ] 。
数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

JSON语法注意事项
① 属性名必须使用双引号包裹
② 字符串类型的值必须使用双引号包裹
③ JSON 中不允许使用单引号表示字符串
④ JSON 中不能写注释
⑤ JSON 的最外层必须是对象或数组格式
⑥ 不能使用 undefined 或函数作为 JSON 的值

json和js的含义不同，json是一种数据格式，js表示类的实例
传输：json用于跨平台、跨网络传输，速度快；js不能传输
展现：json键值对方式，json对象的键必须加双引号；js对象的键不一定加双引号，两者的值都可以是数字、字符串、函数、对象等
转换：

• JSON.parse(jsonStr) 将 json字符串 数据转换为 JavaScript 对象 ( json字符串 --> js对象)

• eval(jsonStr) 将 JSON文本 转换为 JavaScript对象，如果字符串表示了一个表达式， 会对表达式求值，并执行其中的的 JavaScript 代码

• JSON.stringify(obj) 将 JavaScript 对象转换为字符串 ( js对象 --> json字符串)