jQuery

目录

#介绍

简介

语法

文档就绪

jQuery选择器

元素选择器

#id选择器

.class选择器

事件

jQuery事件方法语法

常用的jQuery事件方法

#jQuery效果

隐藏/显示

hide() 和show()

toggle()

淡入淡出

fadeln() 方法

fadeOut() 方法

fadeToggle()方法

fadeTo()方法

滑动

动画

停止动画

callback方法

链

#jQuery HTML

获取内容和属性

text()、html()、val()

attr()

attr()与prop()

设置内容和属性

text()、html()以及val()

text()、html() 以及 val() 的回调函数

attr()

添加元素

append/prepend和after/before的区别

删除元素

获取并设置CSS类

CSS() 方法

尺寸

#遍历

遍历

祖先

parent()

parents()

parentsUntil()

后代

children()

find()

同胞

siblings()

next()

nextAll()

nextUntil()

prev()、prevAll()、&prevUntil()

过滤

first()

last()

eq()

filter()

not()

#AJAX

简介

load()方法

get() post()方法

HTTP请求：GET  POST

$.get()方法

$.post()方法

GET 和 POST 方法的区别

#其他

noConflict()方法

JSONP

JSONP应用

---

#介绍

简介

jQuery是一个Javascript函数库，是一个轻量级“写的少，做得多”的JavaScirpt库

jQuery 库包含以下功能：

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

百度 CDN（内容分发网络）

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

语法

通过选取HTML元素，并对选取的元素执行某些操作

$(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）"查询"和"查找" HTML 元素
• jQuery 的 action() 执行对元素的操作

文档就绪

实例中的所有 jQuery 函数位于一个 document ready 函数中

$(document).ready(function() {
    //代码
})
//简介写法
$(function() {
  //
})

为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。

//Javascript

window.addEventListener('load',function() {
    //
})

jQuery选择器

对HTML元素组或单个元素进行操作

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素

所有选择器都以美元符号开头： $()

元素选择器

基于元素名选取元素

<p>   -->  $("p")

#id选择器

通过 HTML 元素的 id属性选取指定的元素

.class选择器

通过指定的 class 查找元素

事件

页面对不同访问者的响应叫做事件

常见的事件：

jQuery事件方法语法

大多DOM事件都有一个等效的jQuery方法

页面中指定一个点击事件

$("p").click();

常用的jQuery事件方法

dbclick()

双击元素触发事件

$(document).ready(function() {
  $("p").dbclick(function() {
    $(this).hide();
  });
});

mouseenter() 鼠标指针穿过元素

mouseleave() 鼠标指针离开元素

mousedown() 鼠标指针移动到元素上方并按下按键

mouseup() 在元素上松开鼠标按钮

hover() 模拟光标悬停

focus() 元素获得焦点

blur() 失去焦点

---

#jQuery效果

隐藏/显示

hide() 和show()

语法：

$(selector).hide(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称
第二个参数是一个字符串，表示过渡使用哪种缓动函数

$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});

toggle()

使用 toggle() 方法来切换 hide() 和 show() 方法

淡入淡出

Fading方法实现元素淡入淡出

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

fadeln() 方法

用于淡入已隐藏的元素

$(selector).fadeIn(speed,callback);

fadeOut() 方法

用于淡出可见元素

$(selector).fadeOut(speed,callback);

fadeToggle()方法

fadeTo()方法

speed没有默认参数，一定要加

$(selector).fadeTo(speed,opacity,callback)；

adeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）

滑动

• slideDown()
• slideUp()
• slideToggle()

动画

创建自定义动画

animate() 

$(selector).animate({params},speed,callback);

• 必需的 params 参数定义形成动画的 CSS 属性。
• 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
• 可选的 callback 参数是动画完成后所执行的函数名称。

默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute

 操作多个属性

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

几乎可以使用animate()方法来操作所有CSS属性，但是色彩动画并不包含在核心jQuery库中，需要下载插件

使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

使用预定义的值

可以把属性的动画值设置为 "show"、"hide" 或 "toggle"

使用队列功能

停止动画

stop()

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

$("#stop").click(function(){
  $("#panel").stop();
});

callback方法

Callback 函数在当前动画 100% 完成之后执行

链

通过 jQuery，可以把动作/方法链接在一起。

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）

在相同的元素上运行多条 jQuery 命令，浏览器就不必多次查找相同的元素

---

#jQuery HTML

获取内容和属性

拥有可操作 HTML 元素和属性的强大方法

text()、html()、val()

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

attr()

用于获取属性值

$("button").click(function(){
  alert($("#runoob").attr("href"));
});

attr()与prop()

prop()函数的结果:

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

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

attr()函数的结果:

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

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

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用 attr 方法。

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

设置内容和属性

text()、html()以及val()

$("#btn1").click(function() {
  $("#test").text("hello");
});
//Javascrpit
var p = document.querySelector('p');
p.innerHTML = "(123)";

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

text()、html() 以及 val() 的回调函数

text()、html() 以及 val()，同样拥有回调函数。

回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串

$("#test1").text(function(i，origText) {
    return "旧文本：" + origText + "新文本索引：" + i ;
})

attr()

用于设置/改变属性值

$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});

//

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

添加元素

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

$("p").append("追加文本");

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);        // 追加新元素
}

append/prepend和after/before的区别

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。

删除元素

• remove() - 删除被选元素及其子元素
• empty() - 从被选元素中删除子元素

remove()方法也可以接受一个参数，允许对被删元素进行过滤

该参数可以是任何jq选择器的语法

获取并设置CSS类

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

$("button").click(function(){
  $("p").addClass("important blue");
});

.blue {
  color:blue;
}
.important {
  font-size: 20px;
}

CSS() 方法

设置或返回被选元素的一个或多个样式属性

如需返回指定的CSS属性的值：css("propertyname");

如需设置指定的CSS属性：css("propertyname","value");

设置多个属性用逗号隔开

尺寸

通过jQuery很容易处理元素和浏览器窗口的尺寸

• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()

---

#遍历

遍历

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

jQuery提供了多种遍历DOM的方法

遍历方法中最大的种类是树遍历

祖先

祖先是父、祖父或曾祖父等等。

向上遍历DOM树方法

• parent()
• parents()
• parentsUntil()

parent()

parent() 方法返回被选元素的直接父元素。

该方法只会向上一级对 DOM 树进行遍历。

parents()

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

parentsUntil()

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

后代

后代是子、孙、曾孙等

向下遍历 DOM 树，以查找元素的后代

• children()
• find()

children()

只会向下一级对DOM树进行遍历

也可以使用可选参数来过滤对子元素的搜索

find()

返回被选元素的后代元素，一路向下直到最后一个后代

同胞

同胞拥有相同的父元素

在DOM树中水平遍历

• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

siblings()

返回被选元素的所有同胞

也可以使用可选参数来过滤对同胞元素的搜索

next()

返回被选元素的下一个同胞元素

该方法只返回一个元素

nextAll()

返回被选元素的所有跟随的同胞元素

nextUntil()

返回介于两个给定参数之间的所有跟随的同胞元素

 

prev()、prevAll()、&prevUntil()

与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）

过滤

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许选取匹配或不匹配某项指定标准的元素。

first()

返回被选元素的首个元素

last()

返回被选元素的最后一个元素

eq()

返回被选元素中带有指定索引号的元素

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1

filter()

允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回

not()

返回不匹配标准的所有元素

not() 方法与 filter() 相反

---

#AJAX

简介

AJAX是与服务器交换数据的技术，它在不重新加载全部页面的情况下，实现了对部分网页的更新

AJAX = 异步JavaScript 和XML

使用AJAX的应用程序案例：谷歌地图、腾讯微博、优酷视频

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

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

load()方法

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

$(selector).load(URL,data,callback);

• 必需的 URL 参数规定您希望加载的 URL。
• 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
• 可选的 callback 参数是 load() 方法完成后所执行的函数名称。

也可以把jQuery选择器添加到URL参数

$("#div1").load("demo_test.txt #p1");

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

• responseTxt - 包含调用成功时的结果内容
• statusTXT - 包含调用的状态
• xhr - 包含 XMLHttpRequest 对象

get() post()方法

get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据

HTTP请求：GET  POST

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

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

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

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

$.get()方法

通过 HTTP GET 请求从服务器上请求数据

$.get(URL,callback);

$.post()方法

通过 HTTP POST 请求向服务器提交数据

$.post(URL,data,callback);

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
    function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

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 方法主要用于更新数据。

---

#其他

noConflict()方法

为了防止JavaScript其他框架也是用$符号作为简写，这样在使用两种不同的框架的简写符号可能导致脚本停止运行

考虑到此问题，实现了noConflict()方法

noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它

我们也仍然可以通过全名替代简写方式来使用jQuery

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    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 仍然在工作!");
  });
});

JSONP

jsonp（JSON with Padding）是json的一种“使用模式”，可以让网页从别的域名（网站）那获取资料，跨域读取数据

为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。

同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。

JSONP应用

JSONP 教程 | 菜鸟教程JSONP 教程 本章节我们将向大家介绍 JSONP 的知识。 Jsonp(JSON with Padding) 是 json 的一种“使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。 为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。 同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。 JSO..https://www.runoob.com/json/json-jsonp.html