JQuery的应用

什么是 jQuery ？

jQuery是一个JavaScript函数库。

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

jQuery库包含以下功能：

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

下载 jQuery

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

jQuery 语法

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

文档就绪事件

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(

function(){ // 开始写 jQuery 代码... }

);

简洁写法（与以上写法效果相同）:

function(){ // 开始写 jQuery 代码... }

);

jQuery 选择器

元素选择器

#id 选择器

.class 选择器

其他丰富的选择器

通过 $(":button") 可以选取所有 type="button" 的 <input> 元素和 <button> 元素，如果去掉冒号，$("button")只能获取 <button> 元素。

<p id="test1">点进这里测试  <b>button</b></p>
<p id="test2">点进这里测试 <b>:button</b></p>
<button>Button 按钮</button>
<input type="button" value="Input 按钮">

关于 : 和 [] 这两个符号的理解

：可以理解为种类的意思，如：p:first，p 的种类为第一个。

[] 很自然的可以理解为属性的意思，如：[href] 选取带有 href 属性的元素。

jQuery 事件

jquery提供了丰富的事件操作

jQuery 效果- 隐藏和显示

jQuery 效果 - 淡入淡出

jQuery 效果 - 滑动

jQuery Callback 方法

以下实例在隐藏效果完全实现后回调函数:

使用 callback 实例

$("button").click(

function(){

$("p").hide("slow",

function(){

alert("段落现在被隐藏了");

});

jQuery 方法链接

直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。

不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

提示： 这样的话，浏览器就不必多次查找相同的元素。

jQuery - 获取内容和属性

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

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

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

jQuery - 设置内容和属性

设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容：

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

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

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

attr() 方法也允许您同时设置多个属性。

下面的例子演示如何同时设置 href 和 title 属性：

实例

$("button").click

(function()

{ $("#runoob").attr({

"href" : "http://www.runoob.com/jquery",

"title" : "jQuery 教程" });

});

jQuery - 添加元素

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

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

那有木有考虑过append/prepend和after/before有什么区别呢？

append

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>

结果是这样的:

<p>
  <span class="s1">s1</span>
  <span class="s2">s2</span>
</p>

after

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>

结果是这样的:

<p>
  <span class="s1">s1</span>
</p>
<span class="s2">s2</span>

总结：

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

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

jQuery - 删除元素

通过 jQuery，可以很容易地删除已有的 HTML 元素。

删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

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

jQuery - 获取并设置 CSS 类

通过 jQuery，可以很容易地对 CSS 元素进行操作。

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

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

jQuery toggleClass() 方法

下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：

jQuery css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery 尺寸

jQuery 遍历

什么是遍历？

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

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

遍历 DOM

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

遍历方法中最大的种类是树遍历（tree-traversal）。

jQuery parent() 方法

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

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

jQuery parents() 方法

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

jQuery parentsUntil() 方法

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

下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：

实例

$(document).ready(function(){ $("span").parentsUntil("div"); });

jQuery 遍历 - 后代

后代是子、孙、曾孙等等。

通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。

向下遍历 DOM 树

下面是两个用于向下遍历 DOM 树的 jQuery 方法：

children()
find()

jQuery find() 方法

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

jQuery 遍历 - 同胞(siblings)

同胞拥有相同的父元素。

通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。

jQuery siblings() 方法

siblings() 方法返回被选元素的所有同胞元素。

jQuery next() 方法

next() 方法返回被选元素的下一个同胞元素。

该方法只返回一个元素。

jQuery nextUntil() 方法

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

jQuery prev(), prevAll() & prevUntil() 方法

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。

jQuery 遍历- 过滤

缩小搜索元素的范围

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

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

jQuery first() 方法

first() 方法返回被选元素的首个元素。

jQuery last() 方法

last() 方法返回被选元素的最后一个元素。

jQuery eq() 方法

eq() 方法返回被选元素中带有指定索引号的元素。

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：

实例

$(document).ready(function(){ $("p").eq(1); });

jQuery filter() 方法

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

下面的例子返回带有类名 "url" 的所有 <p> 元素：

实例

$(document).ready(function(){ $("p").filter(".url"); });

jQuery not() 方法

not() 方法返回不匹配标准的所有元素。

提示：not() 方法与 filter() 相反。

JSON 语法

JSON 语法规则

JSON 语法是 JavaScript 对象表示法语法的子集。

数据在名称/值对中
数据由逗号分隔
大括号保存对象
中括号保存数组

JSON 值

JSON 值可以是：

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在中括号中）
对象（在大括号中）
null

JSON 文件

JSON 文件的文件类型是 ".json"
JSON 文本的 MIME 类型是 "application/json"

访问对象值

你可以使用点号（.）来访问对象的值：

实例

var myObj, x;

myObj = { "name":"runoob", "alexa":10000, "site":null };

x = myObj.name;

你也可以使用中括号（[]）来访问对象的值：

实例

var myObj, x;

myObj = { "name":"runoob", "alexa":10000, "site":null };

x = myObj["name"];

循环对象

你可以使用 for-in 来循环对象的属性：

实例

var myObj = { "name":"runoob", "alexa":10000, "site":null };

for (x in myObj)

{ document.getElementById("demo").innerHTML += x + "<br>";

}

删除对象属性

我们可以使用 delete 关键字来删除 JSON 对象的属性：

json 对象和 json 字符串的区别：

json 对象

var str2 = { "name": "asan", "sex": "man" };

json字符串

var str1 = '{ "name": "deyuyi", "sex": "man" }';

在使用for遍历时，只能通过 myObj[x] 来获取相应属性的值，而不能使用 myObj.x

<div id="demo"></div>
<script>
var myObj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com" };

for (x in myObj) { 
  document.getElementById("demo").innerHTML += myObj[x] + "<br>";//x是下标
}
</script>

JSON.parse()

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

语法

JSON.parse(text[, reviver])

参数说明：

text:必需，一个有效的 JSON 字符串。
reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数。

解析前要确保你的数据是标准的 JSON 格式，否则会解析出错。

你可以使用我们的在线工具检测：https://c.runoob.com/front-end/53。

从服务端接收 JSON 数据

我们可以使用 AJAX 从服务器请求 JSON 数据，并解析为 JavaScript 对象。

实例

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function()

{

if (this.readyState == 4 && this.status == 200)

{

myObj = JSON.parse(this.responseText);

document.getElementById("demo").innerHTML = myObj.name; }

};

xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);

xmlhttp.send();

异常

解析数据

JSON 不能存储 Date 对象。

如果你需要存储 Date 对象，需要将其转换为字符串。

之后再将字符串转换为 Date 对象。

我们可以启用 JSON.parse 的第二个参数 reviver，一个转换结果的函数，对象的每个成员调用此函数。

实例

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';

var obj = JSON.parse(text, function (key, value)

{ if (key == "initDate")

{ return new Date(value); }

else { return value; }});

document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.initDate;

eval(string):函数可计算某个字符串，并执行其中的的 JavaScript 代码。

eval("var a=1");     // 声明一个变量a并赋值1。
eval("2+3");         // 执行加运算，并返回运算值。
eval("mytest()");    // 执行mytest()函数。
eval("{b:2}");       // 声明一个对象。

对于服务器返回的JSON字符串，如果 jQuery 异步请求没做类型说明，或者以字符串方式接受，那么需要做一次对象化处理，方式不是太麻烦，就是将该字符串放于 eval()中执行一次。这种方式也适合以普通 javascipt 方式获取 json 对象，以下举例说明：

var u = eval('('+user+')');

为什么要 eval 这里要添加 ('('+user+')') 呢？

原因在于：eval 本身的问题。由于 json 是以 {} 的方式来开始以及结束的，在 js 中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。

加上圆括号的目的是迫使 eval 函数在处理 JavaScript 代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量 {}，如若不加外层的括号，那么 eval 会将大括号识别为j avascript 代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：

alert(eval("{}"); // return undefined
alert(eval("({})");// return object[Object]
var user = 
'{name:"张三",age:23,'+ 
'address:{city:"青岛",zip:"266071"},'+ 
'email:"iteacher@haiersoft.com.cn",'+ 
'showInfo:function(){'+ 
'document.write("姓名："+this.name+"<br/>");'+
'document.write("年龄："+this.age+"<br/>");'+ 
'document.write("地址："+this.address.city+"<br/>");'+
 'document.write("邮编："+this.address.zip+"<br/>");'+
 'document.write("E-mail："+this.email+"<br/>");} }'; 
var u = eval('('+user+')'); u.showInfo();

JSON.stringify()

JSON 通常用于与服务端交换数据。

在向服务器发送数据时一般是字符串。

我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

语法

JSON.stringify(value[, replacer[, space]])

把 JSON 文本转换为 JavaScript 对象

JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），

将 JSON 数据转换为 JavaScript 对象，

然后在网页中使用该数据。

由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。

eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。

JSON 解析器

eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。

使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本，而不会编译脚本。

在浏览器中，这提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。

JSONP

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

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

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

同源策略(Same-Origin Policy)。所谓的同源是指域名、协议、端口号 相同。不同的客户端脚本（javascript，ActionScript）在没有授权的情况下，

不能读取对方资源。简单来说，浏览器允许包含在页面A的脚本访问第二个页面B的数据资源，这一切是建立在A和B页面是同源的基础上。

同源策略带来的影响:

它影响了与BOM,DOM间的交互.如:不可以访问不同来源的任何页面的document对象,也就是说不能访问其中任何DOM结构.如:

页面上有两个iframe 分别引用了不同源;

alert(frames[1].location.href);

alert(frames[1].document.location.href);//失败

window 和 document 都有一个 location 对象的属性.如果在与框架页不同源的页面中运行这两行代码,第二行会报错.

下面，我们看一下，具体哪些情况会出现跨域问题(具体策略限制)：

主流跨域请求解决方案

JSONP 实现跨域

为了便于客户端使用数据，逐渐形成了一种非正式传输协议。人们把它称作JSONP。该协议的一个要点就是允许用户传递一个callback参数给服务端，

然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

JSONP实现原理?

1、JS 跨域请求资源会被限制。但是在页面中，script 标签跨域时，却是没有限制的（frame，img同理）。
2、我们通过，script的src属性，请求服务器，并通过参数（如：？callback=foo，foo为本地一个执行的方法）告诉服务器返回指定格式的JS脚本，并将数据封装在此脚本中。

3、服务器再配合客户端返回一段脚本 （如：* foo({“id”: 123, “name” : 张三, “age”: 17});* ），其实返回的就是一个客户端本地的一个可执行的方法的方法名, 并将要返回的数据封装在了参数里。
4、请求到资源后，本地就会执行此方法，通过对参数的处理，也就获取到了我们所要的数据。

接下来简单地总结一下在“前台”一般处理跨域的办法，后台proxy这种方案牵涉到后台配置

参考：http://www.mamicode.com/info-detail-502598.html

1、document.domain+iframe的设置

对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。具体的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html两个文件中分别加上document.domain = ‘a.com’；

然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况

动态创建script

虽然浏览器默认禁止了跨域访问，但并不禁止在页面中引用其他域的JS文件，并可以自由执行引入的JS文件中的function（包括操作cookie、Dom等等）。

根据这一点，可以方便地通过创建script节点的方法来实现完全跨域的通信

7、JSONP

　　JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。

posted @ 2017-11-09 09:46 Hill_Dong 阅读(89) 评论(0) 收藏举报

刷新页面返回顶部

Hill_Dong

JQuery的应用

什么是 jQuery ？

下载 jQuery

jQuery 语法

文档就绪事件

使用 callback 实例

获得内容 - text()、html() 以及 val()

获取属性 - attr()

jQuery - 设置内容和属性

设置内容 - text()、html() 以及 val()

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

设置属性 - attr()

实例

添加新的 HTML 内容

jQuery - 删除元素

删除元素/内容

jQuery - 获取并设置 CSS 类

jQuery 操作 CSS

jQuery toggleClass() 方法

jQuery css() 方法

jQuery 遍历

什么是遍历？

遍历 DOM

jQuery parent() 方法

jQuery parents() 方法

jQuery parentsUntil() 方法

实例

jQuery 遍历 - 后代

向下遍历 DOM 树

jQuery find() 方法

jQuery 遍历 - 同胞(siblings)

jQuery siblings() 方法

jQuery next() 方法

jQuery nextUntil() 方法

jQuery prev(), prevAll() & prevUntil() 方法

jQuery 遍历- 过滤

缩小搜索元素的范围

jQuery first() 方法

jQuery last() 方法

jQuery eq() 方法

实例

jQuery filter() 方法

实例

jQuery not() 方法

JSON 语法规则

JSON 值

JSON 文件

访问对象值

实例

实例

循环对象

实例

删除对象属性

JSON.parse()

语法

从服务端接收 JSON 数据

实例

异常

解析数据

实例

JSON.stringify()

语法

把 JSON 文本转换为 JavaScript 对象

JSON 解析器

主流跨域请求解决方案

JSONP 实现跨域

JSONP实现原理?

1、document.domain+iframe的设置

7、JSONP

公告