jQuery学习之旅 Item10 ajax快餐
最后更新于：2022-04-01 11:32:23
### 1. 摘要
本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.
本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式.
### 2. 前言
Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数来帮助我们统一这种差异, 并且让调用Ajax更加简单.
### 3. 原始Ajax与jQuery中的Ajax
首先通过实例, 来看一下jQuery实现Ajax有多简单. 下面是一个使用原始Ajax的示例:
~~~
<html>
<head>
<title>jQuery Ajax</title>
<script type="text/javascript">
$(function()
{
var xhr = new AjaxXmlHttpRequest();
$("#btnAjaxOld").click(function(event)
{
var xhr = new AjaxXmlHttpRequest();
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4)
{
document.getElementById("divResult").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "data/AjaxGetCityInfo.aspx?resultType=html", true);
xhr.send(null);
});
})
//跨浏览器获取XmlHttpRequest对象
function AjaxXmlHttpRequest()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
return xmlHttp;
}
</script>
</head>
<body>
<button id="btnAjaxOld">原始Ajax调用</button><br />
<br />
<div id="divResult"></div>
</body>
</html>
~~~
上面的实例中, `data/AjaxGetCityInfo.aspx?resultType=html` 地址会返回一段HTML代码.
使用原始Ajax, 我们需要做较多的事情, 比如创建XmlHttpRequest对象, 判断请求状态, 编写回调函数等.
而用jQuery的Load方法, 只需要一句话:
~~~
$("#divResult").load("data/AjaxGetCityInfo.aspx", { "resultType": "html" });
~~~
曾经我是一个原始Ajax的绝对拥护者, 甚至摒弃微软的Asp.net Ajax, 因为我想要最高的代码灵活度. 使用原始Ajax让我感觉完成自己的工作更加轻松, 即使多写了一些代码. 但是当我去翻看别人的Ajax代码并且尝试修改的时候, 我改变了我的看法——我们的代码到处分布着创建XmlHttpRequest方法的函数, 或者某些Ajax程序逻辑性和结构性很差, 很难看懂.
我们可以将通用方法放到一个js文件中, 然后告诉大家”嘿伙伴们, 都来用这个js中的方法”. 但是在某些时候有些新来的外包人员并不知道有这个js文件的存在. 而且其实这个通用的js就是一个公共的脚本类库, 我相信没有人会觉得自己开发一个类库会比jQuery更好!
所以我放弃了制造轮子的计划, 大家都使用jQuery编写Ajax相关的方法就可以解决各种差异性问题, 并且让工作更有效率.
现在只是用jQuery的Ajax函数, 我的页面变得简洁了:
~~~
<html>
<head>
<title>jQuery Ajax</title>
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript">
$(function()
{
$("#btnGetHtml").click(function(event)
{
$("#divResult").load("data/AjaxGetCityInfo.aspx", { "resultType": "html" });
});
})
</script>
</head>
<body>
<button id="btnAjaxJquery">使用jQuery的load方法</button>
<br />
<div id="divResult"></div>
</body>
</html>
~~~
### 4. jQuery Ajax详解
jQuery提供了几个用于发送Ajax请求的函数. 其中最核心也是最复杂的是`jQuery.ajax( options )`,所有的其他Ajax函数都是它的一个简化调用. 当我们想要完全控制Ajax时可以使用此结果, 否则还是使用简化方法如get, post, load等更加方便. 所以jQuery.ajax( options ) 方法放到最后一个介绍. 先来介绍最简单的load方法:
**1. load( url, [data], [callback] )**
~~~
Returns: jQuery包装集
~~~
说明:
- load方法能够载入远程 HTML 文件代码并插入至 DOM 中。
- 默认使用 GET 方式, 如果传递了data参数则使用Post方式.
- 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 “url #some > selector”, 默认的选择器是”body>*”.
讲解:
- load是最简单的Ajax函数, 但是使用具有局限性:
- 它主要用于直接返回HTML的Ajax接口
- load是一个jQuery包装集方法,需要在jQuery包装集上调用,并且会将返回的HTML加载到对象中, 即使设置了回调函数也还是会加载.
不过不可否认load接口设计巧妙并且使用简单.下面通过示例来演示Load接口的使用:
~~~
<html>
<head>
<title>jQuery Ajax - Load</title>
<script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript">
$(function()
{
$("#btnAjaxGet").click(function(event)
{
//发送Get请求
$("#divResult").load("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click" + "&tim
estamp=" + (new Date()).getTime());
});
$("#btnAjaxPost").click(function(event)
{
//发送Post请求
$("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxPost_click" });
});
$("#btnAjaxCallBack").click(function(event)
{
//发送Post请求, 返回后执行回调函数.
$("#divResult").load("../data/AjaxGetMethod.aspx", { "param": "btnAjaxCallBack_click
" }, function(responseText, textStatus, XMLHttpRequest)
{
responseText = " Add in the CallBack Function! <br/>" + responseText
$("#divResult").html(responseText); //或者: $(this).html(responseText);
});
});
$("#btnAjaxFiltHtml").click(function(event)
{
//发送Get请求, 从结果中过滤掉 "鞍山" 这一项
$("#divResult").load("../data/AjaxGetCityInfo.aspx?resultType=html" + "×tamp
=" + (new Date()).getTime() + " ul>li:not(:contains('鞍山'))");
});
})
</script>
</head>
<body>
<button id="btnAjaxGet">使用Load执行Get请求</button><br />
<button id="btnAjaxPost">使用Load执行Post请求</button><br />
<button id="btnAjaxCallBack">使用带有回调函数的Load方法</button><br />
<button id="btnAjaxFiltHtml">使用selector过滤返回的HTML内容</button>
<br />
<div id="divResult"></div>
</body>
</html>
~~~
上面的示例演示了如何使用Load方法.
提示:
- 我们要时刻注意浏览器缓存, 当使用GET方式时要添加时间戳参数 (net Date()).getTime() 来保证每次发送的URL不同, 可以避免浏览器缓存.
- 当在url参数后面添加了一个空格, 比如” “的时候, 会出现”无法识别符号”的错误, 请求还是能正常发送. 但是无法加载HTML到DOM. 删除后问题解决.
**2.jQuery.get( url, [data], [callback], [type] )**
~~~
Returns: XMLHttpRequest
~~~
说明:
- 通过远程 HTTP GET 请求载入信息。
- 这是一个简单的 GET 请求功能以取代复杂 `$.ajax` 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 `$.ajax`。
讲解:
- 此函数发送Get请求, 参数可以直接在url中拼接, 比如:
~~~
$.get("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click");
~~~
或者通过data参数传递:
~~~
$.get("../data/AjaxGetMethod.aspx", { "param": "btnAjaxGet2_click" });
~~~
- 两种方式效果相同, data参数会自动添加到请求的url中，如果url中的某个参数, 又通过data参数传递, 不会自动合并相同名称的参数.
回调函数的签名如下:
~~~
function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc
this; // the options for this ajax request
}
~~~
其中data是返回的数据, testStatus表示状态码, 可能是如下值:在回调函数中的this是获取options对象的引用
type参数是指data数据的类型, 可能是下面的值:
**“xml”, “html”, “script”, “json”, “jsonp”, “text”.默认为”html”.**
jQuery.getJSON( url, [data], [callback] ) 方法就相当于 jQuery.get(url, [data],[callback], “json”)
**3. jQuery.getJSON( url, [data], [callback] )**
~~~
Returns: XMLHttpRequest
~~~
相当于: jQuery.get(url, [data],[callback], “json”)
说明:
- 通过 HTTP GET 请求载入 JSON 数据。
- 在 jQuery 1.2 中，您可以通过使用JSONP 形式的回调函数来加载其他网域的JSON数据，如 “myurl?callback=?”。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
注意：此行以后的代码将在这个回调函数执行前执行。
讲解:
- getJSON函数仅仅将get函数的type参数设置为”JSON”而已. 在回调函数中获取的数据已经是按照JSON格式解析后的对象了:
~~~
$.getJSON("../data/AjaxGetCityInfo.aspx", { "resultType": "json" }, function(data, textStatus)
{
alert(data.length);
alert(data[0].CityName);
});
~~~
服务器端返回的字符串如下:
~~~
[{""pkid"":""0997"",""ProvinceId"":""XJ"",""CityName"":""阿克苏"",""CityNameEn"":""Akesu"",""PostCode"":""843000"",""isHotCity"":false},
{""pkid"":""0412"",""ProvinceId"":""LN"",""CityName"":""鞍山"",""CityNameEn"":""Anshan"",""PostCode"":""114000"",""isHotCity"":false}]
~~~
示例中我返回的饿是一个数组, 使用data.length可以获取数组的元素个数, data[0]访问第一个元素, data[0].CityName访问第一个元素的CityName属性.
**4. jQuery.getScript( url, [callback] )**
~~~
Returns: XMLHttpRequest
~~~
相当于: jQuery.get(url, null, [callback], “script”)
说明:
- 通过 HTTP GET 请求载入并执行一个 JavaScript 文件。
- jQuery 1.2 版本之前，getScript 只能调用同域 JS 文件。 1.2中，您可以跨域调用 JavaScript 文件。
讲解:
以前我使用dojo类库时官方默认的文件不支持跨域最后导致我放弃使用dojo(虽然在网上找到了可以跨域的版本, 但是感觉不够完美). 所以我特别对这个函数的核心实现和使用做了研究.
首先了解此函数的jQuery内部实现, 仍然使用get函数, jQuery所有的Ajax函数包括get最后都是用的是jQuery.ajax(), getScript将传入值为”script”的type参数, 最后在Ajax函数中对type为script的请求做了如下处理:
~~~
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = s.url;
~~~
上面的代码动态建立了一个script语句块, 并且将其加入到head中:
~~~
head.appendChild(script);
~~~
当脚本加载完毕后, 再从head中删除:
~~~
// Handle Script loading
if ( !jsonp ) {
var done = false;
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function(){
if ( !done && (!this.readyState ||
this.readyState == "loaded" || this.readyState == "complete") ) {
done = true;
success();
complete();
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
head.removeChild( script );
}
};
}
~~~
我主要测试了此函数的跨域访问和多浏览器支持.下面是结果:
下面是我关键的测试语句, 也用来演示如何使用getScript函数:
~~~
$("#btnAjaxGetJSON").click(function(event)
{
$.getScript("../scripts/getScript.js", function(data, textStatus)
{
alert(data);
alert(textStatus);
alert(this.url);
});
});
$("#btnAjaxGetJSONXSS").click(function(event)
{
$.getScript("http://resource.elong.com/getScript.js", function(data, textStatus)
{
alert(data);
alert(textStatus);
alert(this.url);
});
});
~~~
**5. jQuery.post( url, [data], [callback], [type] )**
~~~
Returns: XMLHttpRequest
~~~
说明:
- 通过远程 HTTP POST 请求载入信息。
- 这是一个简单的 POST 请求功能以取代复杂 `$.ajax` 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 `$.ajax`。
讲解:
- 具体用法和get相同, 只是提交方式由”GET”改为”POST”.
**6. jQuery.ajax( options )**
~~~
Returns: XMLHttpRequest
~~~
说明:
- 通过 HTTP 请求加载远程数据。
- jQuery 底层 AJAX 实现。简单易用的高层实现见 `$.get, $.post` 等。
- `$.ajax()` 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。
- `$.ajax()` 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。
jQuery 1.2 中，您可以跨域加载 JSON 数据，使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。数据类型设置为 “jsonp” 时，jQuery 将自动调用回调函数。
### 5、Ajax相关函数.
jQuery提供了一些相关函数能够辅助Ajax函数.
**1. jQuery.ajaxSetup( options )**
无返回值
说明:
- 设置全局 AJAX 默认options选项。
讲解:
有时我们的希望设置页面上所有Ajax属性的默认行为.那么就可以使用此函数设置options选项, 此后所有的Ajax请求的默认options将被更改.
比如,设置 AJAX 请求默认地址为 “/xmlhttp/”，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数:
~~~
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });
~~~
**2. serialize( )**
~~~
Returns: String
~~~
说明:
- 序列表表格内容为字符串，用于 Ajax 请求。
- 序列化最常用在将表单数据发送到服务器端时. 被序列化后的数据是标准格式, 可以被几乎所有的而服务器端支持.
- 为了尽可能正常工作, 要求被序列化的表单字段都有name属性, 只有一个eid是无法工作的.
像这样写name属性:
~~~
<input id="email" name="email" type="text" />
~~~
讲解:
serialize()函数将要发送给服务器的form中的表单对象拼接成一个字符串. 便于我们使用Ajax发送时获取表单数据. 这和一个From按照Get方式提交时, 自动将表单对象的名/值放到url上提交差不多.
比如这样一个表单:
生成的字符串为:single=Single¶m=Multiple¶m=Multiple3&check=check2&radio=radio1
**3. serializeArray( )**
~~~
Returns: Array<Object>
~~~
说明:
- 序列化表格元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。
- 注意，此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。
讲解:
看说明文档让我有所失望, 使用此函数获取到的是JSON对象, 但是jQuery中没有提供将JSON对象转化为JSON字符串的方法.
在JSON官网上没有找到合适的JSON编译器, 最后选用了jquery.json这个jQuery插件:
[http://code.google.com/p/jquery-json/](http://code.google.com/p/jquery-json/)
使用起来异常简单:
~~~
var thing = {plugin: 'jquery-json', version: 1.3};
var encoded = $.toJSON(thing); //'{"plugin": "jquery-json", "version": 1.3}'
var name = $.evalJSON(encoded).plugin; //"jquery-json"
var version = $.evalJSON(encoded).version; // 1.3
~~~
使用serializeArray( ) 再配合 `$.toJSON` 方法, 我们可以很方便的获取表单对象的JSON, 并且转换为JSON字符串:
~~~
$("#results").html( $.toJSON( $("form").serializeArray() ));
~~~
结果为:
~~~
[{"name": "single", "value": "Single"}, {"name": "param", "value": "Multiple"}, {"name": "param"
, "value": "Multiple3"}, {"name": "check", "value": "check2"}, {"name": "radio", "value": "radio1"}]
~~~
### 6、全局Ajax事件
在jQuery.ajaxSetup( options ) 中的options参数属性中, 有一个global属性:global 值类型:布尔值, 默认值: true,
说明:
是否触发全局的Ajax事件.
这个属性用来设置是否触发全局的Ajax事件. 全局Ajax事件是一系列伴随Ajax请求发生的事件.主要有如下事件:
| 第一列 | 第二列 |
|-----|-----|
| ajaxComplete( callback ) | AJAX 请求完成时执行函数 |
| ajaxError( callback ) | AJAX 请求发生错误时执行函数 |
| ajaxSend( callback ) | AJAX请求发送前执行函数 |
| ajaxStart( callback ) | AJAX请求开始时执行函数 |
| ajaxStop( callback ) | AJAX请求结束时执行函数 |
| ajaxSuccess( callback ) | AJAX 请求成功时执行函数 |
用一个示例讲解各个事件的触发顺序:
~~~
<html >
<head>
<title>jQuery Ajax - AjaxEvent</title>
<script type="text/javascript" src="../scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#btnAjax").bind("click", function(event)
{
$.get("../data/AjaxGetMethod.aspx");
})
$("#divResult").ajaxComplete(function(evt, request, settings) { $(this).append('<div>
ajaxComplete</div>'); })
$("#divResult").ajaxError(function(evt, request, settings) { $(this).append('<div>
ajaxError</div>'); })
$("#divResult").ajaxSend(function(evt, request, settings) { $(this).append('<div>
ajaxSend</div>'); })
$("#divResult").ajaxStart(function() { $(this).append('<div>ajaxStart</div>'); })
$("#divResult").ajaxStop(function() { $(this).append('<div>ajaxStop</div>'); })
$("#divResult").ajaxSuccess(function(evt, request, settings) { $(this).append('<div>
ajaxSuccess</div>'); })
});
</script>
</head>
<body>
<br /><button id="btnAjax">发送Ajax请求</button><br/>
<div id="divResult"></div>
</body>
</html>
~~~
结果如图:
我们可以通过将默认options的global属性设置为false来取消全局Ajax事件的触发.
### 7. 注意事项
1. 如果在Get请求发送的url中有两个同名参数, 比如两个param参数:
[http://localhost/AjaxGetMethod.aspx?param=Multiple¶m=Multiple3](http://localhost/AjaxGetMethod.aspx?param=Multiple¶m=Multiple3)
使用服务器端方法获取param参数:
~~~
if (!String.IsNullOrEmpty(HttpContext.Current.Request["Param"]))
{
param = HttpContext.Current.Request["Param"];
}
~~~
此时获取到得param是一个用”,”分隔多个值的字符串:
Multiple,Multiple3
### 8. 总结
本文介绍如何使用jquery实现Ajax功能. 用于发送Ajax请求的相关函数如load, get, getJSON和post这些渐变Ajax方法, 对于核心的ajax 方法没有过多介绍, 主要是通过配置复杂的参数实现完全控制Ajax请求. 另外讲解了ajax的辅助函数比如用于序列化表单对象为字符串的serialize()方法, 用于将表单对象序列化为JSON对象的serializeArray()方法. 这些在使用脚本获取数据实现与服务器端交互是很有用, JSON格式的数据在处理大对象编程时将我们从混乱的属性字符串中解放出来.
jQuery还提供录入全局ajax事件这一个特殊的事件, 并且可以在一个对象上设置这些事件, 在发送Ajax请求的各个生命周期上会调用这些事件, 可以通过修改默认的options对象的global属性打开或关闭全局事件.
jQuery学习之旅 Item9 动画效果
最后更新于：2022-04-01 11:32:20
### 1、元素的显示和隐藏
- display:none; 隐藏
- display:block; 显示
简单显示和隐藏方法
- a) show() 显示
- b) hide() 隐藏
- c) toggle() 开关，显示则隐藏，隐藏则显示
~~~
<script type="text/javascript">
function f1(){
//隐藏
$("div").hide();//display:none
//document.getElementById('id').style.display="none";
}
function f2(){
//显示
$("div").show();//display:block
}
function f3(){
$("div").toggle();
}
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>
<body>
<div>duck and dog</div>
<input type="button" value="隐藏" onclick="f1()" />
<input type="button" value="显示" onclick="f2()" />
<input type="button" value="开关效果" onclick="f3()" />
</body>
~~~
CSS支持两种方法显示和隐藏元素，即使用visibility或display样式，他们控制元素显示和隐藏的时候效果相同，但是结果却不同。
具体说明如下：
- visibility 属性在隐藏元素的时候，同时会保存元素在文档流中的影响力，隐藏后元素的未知保持不变。该属性包括visible(默认)和hidden两个值。
- display 隐藏后，隐藏的元素不再占用文档的位置。
### 2、滑动效果显示和隐藏
- slideUp(speed[,callback]) 向上滑动元素并最终隐藏
- slideDown(speed[,callback]) 向下滑动元素并最终显示
- slideToggle(speed[,callback])
- speed：设置效果的速度(slow（600）normal（400） fast（200） 时间(毫秒))
- callback: 效果执行完毕之后自动调用的回调函数
~~~
<script type="text/javascript">
function f1(){
//隐藏
$("div").slideUp(3000,function(){
alert('我消失了，你能看到么');
});
}
function f2(){
//显示
$("div").slideDown(3000,function(){
alert('我又回来了');
});//display:block
}
function f3(){
$("div").slideToggle(1000);
}
$(function(){
//气缸滑动效果
//setInterval("f3()",1000);
});
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>
<body>
<div>duck and dog</div>
<input type="button" value="隐藏" onclick="f1()" />
<input type="button" value="显示" onclick="f2()" />
<input type="button" value="开关效果" onclick="f3()" />
</body>
~~~
### 3、淡入淡出效果
让元素通过一定透明度变化，达到显示和隐藏的效果
- fadeIn(speed, [callback])
- fadeOut(speed, [callback])
- fadeToggle(speed, [callback])开关效果
- fadeTo(speed, opacity, [callback]) 把div设置一定透明度（0-1）0.3就是30%透明度
~~~
<script type="text/javascript">
function f1(){
//隐藏
$("div").fadeOut(4000);
}
function f2(){
//显示
$("div").fadeIn(4000);
$("#two").fadeTo(2000,0.3);
}
function f3(){
$("div").fadeToggle(2000);
}
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>
<body>
<div id = "two">duck and dog</div>
<input type="button" value="隐藏" onclick="f1()" />
<input type="button" value="显示" onclick="f2()" />
<input type="button" value="开关效果" onclick="f3()" />
</body>
~~~
设置透明度，div的透明度是30%：
### 4、动画效果底层方法animate()
show() hide() 等等动画效果内部都是执行animate()方法
~~~
$().animate(css效果参数[，时间][，回调函数]);
~~~
css()等一般jquery方法执行完毕之后会返回当前jquery对象，因此jquery的许多方法可以链式调用。
~~~
<script type="text/javascript">
function f1(){
//文字大小、文字粗体、div本身宽度和高度
//font-size background-color color
console.log($("div"));
//jquery对象调用完毕css方法本身还是一个jquery对象
//说明css方法执行完毕有return this关键字
console.log($("div").css('font-weight','bold').css("background-color",'pink'));
var jn = {'font-size':'30px',width:'400px',height:'300px'};
$("div").css('font-weight',"bold").css("background-color","pink").css("color","white").animate(jn,2000);
//$("div").animate(jn,2000);
}
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:blue; }
</style>
<body>
<div>duck and dog</div>
<input type="button" value="设置" onclick="f1()" />
</body>
~~~
### 5、累加累减动画
如果动画一次设定left：500 ,第一次单击div会左移500像素,第二次单击就不会动了。累加累减就是连续动的，只需要将left:”500px”改成left:”+=500px”或者left:”-=500px”即可。
~~~
(function(){
$("#panel").click(function(){
$(this).animate({left: "+=500px"}, 3000);
})
})</span>
~~~
### 6、多重动画
**1、同时执行多个动画**
上面的例子只控制了left属性的变化，这回我们在控制left属性的时候同时控制元素高度变为200px
~~~
$(function(){
$("#panel").click(function(){
$(this).animate({left: "500px",height:"200px"}, 3000);
})
})
~~~
**2、顺序执行动画**
上面例子中元素右移和放大高度两个动画是同时进行的。现在我们要实现先右移再放大高度，那很简单，只需要把上面的animate()方法拆开写成两个即可
~~~
$(function(){
$("#panel").click(function(){
$(this).animate({left: "500px"},3000)
.animate({height:"200px"},1000);
})
})
~~~
**3、综合动画**
接下来完成更复杂的动画。单击div元素后让他向右移动的同时增大他的高度，并将它的不透明度从50%切换到100%。然后再让它从上向下移动，同时它的宽度变大，当完成这
些效果后让它以淡出的方式隐藏掉。
~~~
$(function(){
$("#panel").css("opacity",0.5);//设置不透明度
$("#panel").click(function(){
$(this).animate({left: "400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000)
.fadeOut(1000);
})
})
~~~
### 7、动画回调函数
在上例中，如果想在最后一步切换css样式而不是隐藏元素。这我们就可以用到animate的第三个参数回调函数了
~~~
$(function(){
$("#panel").css("opacity",0.5);//设置不透明度
$("#panel").click(function(){
$(this).animate({left: "400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000,function(){$(this).css("border","5px solid blue")});
})
})
~~~
这样就把css方法加入到动画队列中了。
### 8、停止动画和判断是否处于动画状态
**1、停止元素的动画**
`stop([clearQueue][,gotoEnd])` 两个都是可选参数，都是boolean类型
参数说明：
- clearQueue：代表是否清空未执行完的动画队列
- gotoEnd ：代表是否将正在执行的动画跳到末状态
通过一个综合的示例就可以弄明白stop()方法的这两个参数了：
~~~
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;}
.head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;}
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;}
</style>
<script src="../../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("button:eq(0)").click(function () {
$("#panel")
.animate({height : "150" } , 2000 )
.animate({width : "300" } , 2000 )
.hide(3000)
.animate({height : "show" , width : "show" , opacity : "show" } , 2000 )
.animate({height : "500"} , 2000 );
});
$("button:eq(1)").click(function () {
$("#panel").stop();//停止当前动画，继续下一个动画
});
$("button:eq(2)").click(function () {
$("#panel").stop(true);//清除元素的所有动画
});
$("button:eq(3)").click(function () {
$("#panel").stop(false,true);//让当前动画直接到达末状态 ，继续下一个动画
});
$("button:eq(4)").click(function () {
$("#panel").stop(true,true);//清除元素的所有动画，让当前动画直接到达末状态
});
})
</script>
<body>
<button>开始一连串动画</button>
<button>stop()</button>
<button>stop(true)</button>
<button>stop(false,true)</button>
<button>stop(true,true)</button>
<div id="panel">
<h5 class="head">三国杀杀天下</h5>
<div class="content">
夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情
</div>
</div>
</body>
</html>
~~~
**2、判断元素是否处于动画状态**
当使用animate()方法的时候，要避免动画的累积导致的动画与用户的行为不一致的现象。当用户快速在某个元素上执行animate()动画时，就会出现动画累积。
解决办法是判断元素是否正在处于动画状态，当不处于动画状态的时候，才为元素添加新的动画。
用法：
~~~
if(!$(element).is(":animated")){
//添加新的动画
}
~~~
jQuery学习之旅 Item8 DOM事件操作
最后更新于：2022-04-01 11:32:18
### 1、jquery页面载入事件
**1、传统加载事件**
~~~
<body onload=”函数名()”> 页面全部html和css代码加载完成之后再调用指定的onload函数
window.onload = function(){
加载过程
}
~~~
**2、jquery实现加载事件**
~~~
① $(document).ready(function(){加载代码});
② $().ready(function(){加载代码});
③ $(function(){加载代码}); ----- jQuery.fn.init
~~~
第三种方式是对前两种方法封装的简便实用方法
~~~
//jquery加载事件
//第一种使用
$(document).ready(function(){
//加载过程代码
alert('abc');
});
//第二种使用
$().ready(function(){
alert('hello');
});
//第三种使用
$(function(){
alert('china');
});
$(function(){
alert('beijing');
});
~~~
**3、jquery加载与传统加载区别**
① jquery加载事件可以同时使用多个，传统只有一个
1. 多个人可以定义各自的加载事件
1. jquery加载事件都放入一个数组里边，遍历数组
1. 传统方式加载事件是存入一个变量里边，多次使用变量值被覆盖
② jquery加载事件比传统加载事件执行速度快
1. jquery加载事件执行时间点，dom树结构在内存中绘制完毕就执行加载
1. 传统方式加载执行时间点，全部内容在浏览器里边呈现出来才会执行
jquery加载事件捕捉的时间点不一样
- 内容绘制完毕之后就捕捉时间 DOMContentLoaded
- 传统方式是内容在浏览器显示完毕之后再来捕捉window.onload
jquery内部原理模拟：
~~~
//模拟jQuery的加载事件行为
document.addEventListener("DOMContentLoaed", function(){alert("abcd")});
~~~
给当前应用设置一个事件DOMContentLoaded，dom树结构在内存绘制完毕就执行一些过程。
### 2、jquery事件绑定（bind的省略）
**1、原生js的时间绑定**
~~~
<input type=”text” onclick=”f1()” /> 缺点：结构和行为没有分离
document.getElementById(‘id’).onclick=f1; 结构和行为分离
document.getElementById(‘id’).addEventListener(‘click’, function(){}); 主流浏览器
.attachEvent(“onclick”,fucntion(){}); IE事件绑定
~~~
**2、jquery事件绑定**(input框设置点击事件click)
~~~
$(“input”).click(function(){});
$(“input”).mouseover(function(){});
~~~
在jquery里边把普通时间名字的on去掉，就是jquery对应的事件方法名字
注意：
~~~
$(“input”).click(fn); 给input框设置事件
$(“input”).click(); 触发input框的click事件执行
$(“div”).mouseover(); 触发div的鼠标移入事件执行
~~~
~~~
$(function(){
$("#result").click(function(){
console.log('click');
});
$("#result").mouseover(function(){
//触发点击事件一并执行
$(this).click();
console.log('mouseover');
});
});
~~~
鼠标移入div后会触发点击事件执行
### 3、jquery事件绑定（bind绑定）
上述讲的事件绑定方法有：
~~~
<input onclick=”f1()”>
document.getElementById(“#apple”).click = function(){}
document.getElementById(“#pear”).addEventListener(‘click’,function(){});
$(选择器).click(function(){});//bind的省略形式
~~~
jQuery定义了bind()方法作为统一的接口，用来为每一个匹配元素绑定事件处理程序。其基本语法：
~~~
bind(type,[data],fn);
~~~
其中参数type表示事件类型，参数data是可选参数,它可以作为event.data属性值传递给事件对象的额外数据对象。参数fn表示事件处理函数。
bind方法与之前事件绑定不同之处：
**1． 事件绑定和取消**
（1） 可以为多个不同的事件类型，绑定同一个处理过程
~~~
a) $(“#apple”).bind(“click mouseover mouseout”,function(){事件处理});
b) 多个不同类型事件中间使用单个空格分隔。
~~~
（2）. 可以为同一个对象同时绑定多个不同类型事件
~~~
a) $(“#apple”).bind({click:fn, mouseover:fn, mouseout:fn});
b) bind(json对象)
~~~
（3）. 可以为同一个对象的同一类型事件绑定多个处理过程
~~~
a) $(“#apple”).bind(‘click’,fn1);
b) $(“#apple”).bind(‘click’,fn2);
~~~
（4）. 可以灵活取消事件绑定
~~~
a) 全部事件都取消
i. $(“#apple”).unbind();
b) 可以取消指定类型取消
i. $(“#apple”).unbind(‘click’);
c) 可以取消指定类型指定处理过程事件
i. $(“#apple”).unbind(‘click’,fn1);
d) 第三项事件取消注意：
$(“div”).bind(‘click’,function(){}); 不灵
function f1(){}
$(“div”).bind(‘click’,f1); 有效
~~~
示例：
~~~
<script>
function a(){
alert("ok, I see");
}
function b(){
alert("ok, you see");
}
function f1(){
//$("div").bind(事件类型[,事件传递参数],事件处理);
//①绑定多个同类型事件
//事件可以使用匿名函数表达式，也可以使用函数指针
$("div").bind('click',a);
$("div").bind('click',b);
//② 同时为多个事件绑定相同的处理过程
$("div").bind("click mouseover mouseout",function(){
$("#result").append('hello');
});
//③ 同时绑定不同事件
$("div").bind({
click:function(){ $("#result").append('click') },
mouseover:function(){ $("#result").append('over') },
mouseout:function(){ $("#result").append('out') }
});
}
function del(){
//全部取消
//$("div").unbind();
//取消指定事件
//$("div").unbind('mouseover');
//取消指定事件具体处理程序
$("div").unbind("click",a);
}
</script>
<body>
<div>bread and milk</div>
<input type="button" value="触发" onclick="f1()"/>
<input type="button" value="取消" onclick="del()"/>
<span id="result"></span>
</body>
~~~
**2． 事件绑定参数**
~~~
$(“div”).bind(‘click’,{json对象参数}, function(evt){
//参数具体使用
evt.data.对象属性名称；
});
~~~
示例：
~~~
<script>
function f1(){
//$("div").bind(事件类型[,事件传递参数],事件处理);
var name = "tom";
$("div").bind('click',{name:'tom',age:33},function(evt){
//evt就是event事件对象
alert(evt.data.name);//tom
alert(evt.data.age);//33
});
//name被复制了一份传递给nm
$("div").bind('click',{nm:name},function(evt){
//evt就是event事件对象
alert(name);
alert(evt.data.nm); //tom
});
name = "jack";
//name被复制了一份传递给nm
$("#btn").bind('click',{nm:name},function(evt){
//使用参数name
alert(name);
alert(evt.data.nm); //jack
});
}
//tom jack
//jack jack //内存中只有一个name值为jack
// div设置事件的时候，内部并没有执行函数（只是做了一个声明），name也没有被访问
// 等待事件被触发的时候，name的值已经变为jack
</script>
<body>
<div>bread and milk</div>
<input type="button" value="元素" id="btn" />
<input type="button" value="触发" onclick="f1()"/>
<span id="result"></span>
</body>
~~~
**3．事件触发模拟**
用户出发触发事件执行：
~~~
$(“form”).submit();
~~~
模拟用户触发事件执行trigger()：
具体用法：
trigger（type, [data]）===>只需将你的type设置为自定义的事件即可。
~~~
$(“form”).trigger(‘submit’);
$(“form”).triggerHandler(‘submit’);(没有浏览器默认动作)
~~~
triggerHandler() 只会执行具体事件，没有浏览器默认动作
例如：表单有提交事件
表单通过按钮真实被提交后发生的事情
① 执行“ok，马上出发”弹出框(提交事件的处理程序执行)
② 浏览器需要提交给下个页面(浏览器默认动作)
~~~
$(function(){
$("form").bind("submit",function(){
alert("ok, i go quickly");
});
});
function f1(){
//trigger 触发器
$("form").trigger("submit");
$("form").trigger("submit");//触发指定事件执行，同时有浏览器默认动作
//$("form").triggerHandler("submit");
$("form").triggerHandler("submit");//触发指定事件执行,不会执行浏览器默认动作
}
~~~
trigger()还可以出发自定义时间
### 4、阻止浏览器默认动作
浏览器默认动作：表单提交，页面重定向， `<a>`标签的超链接
利用提交事件可以实现表单域验证，通过页面就跳转，否则页面要停止跳转
阻止浏览器默认动作有两种方式：
① return false; //也可以阻止事件冒泡
② event.preventDefault(); //推荐使用
~~~
$(function(){
//表单提交需要验证表单域，正确就可以提交走，否则没有浏览器默认动作
$("form").bind('submit',function(evt){
//对表单域进行验证，
//用户名不正确
alert('用户名不正确');
//return false;
evt.preventDefault();//阻止浏览器默认动作
});
});
~~~
### 5、阻止事件冒泡
html
—>head
———>body
—————–>div
————————>input
input和div都有点击事件，由于事件冒泡作用，input框被点击触发事件之后，div的点击事件也要被触发。
有的时候根据需要不要进行事件冒泡，需要对其进行阻止
事件冒泡阻止：
① return false; 容易与“浏览器默认动作阻止“混淆
② event.stopPropagation(); 阻止事件冒泡
~~~
$(function(){
$("div").bind('click',function(){
alert("divdiv");
});
$("input").bind('click',function(evt){
alert("inputinput");
//阻止事件冒泡
//return false;
evt.stopPropagation();
});
});
~~~
### 6、事件委派与解除委派
事件委派与事件绑定效果一致，解除委派与时间取消类似。
~~~
$().bind(type,fn);
$().live(type,fn);
$().die(type,fn);//不带参数就是解除live事件，如果带了参数type，那会移除相应的live事件，如果同时指定了第二个参数，则只能移除指定事件的处理函数。
~~~
“事件委派“较比”事件绑定“不同之处：
**使用事件委派，后增加的兄弟元素也有相同的事件被设置。**
~~~
<script type="text/javascript">
$(function(){
//使用live事件委派，增加的元素也有与兄弟一样的事件
$("li").live('click',function(){
//li被点击输出自己的文本内容
alert($(this).html());
});
});
//方法声明要在加载事件外部，否则会访问不到
function f1(){
$("ul").append("<li>北京</li>");
}
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:pink;}
</style>
<body>
<ul>
<li>天</li>
<li>角</li>
<li>涯</li>
<li>海</li>
</ul>
<input type="button" value="增加" onclick="f1()" />
</body>
~~~
### 7、事件合并
Query有两个合成事件—-hover()和toggle(),这两个方法都是jQuery自定义的方法
**1、hover()方法**
语法结构为 hover(enter,leave)
hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数，离开时触发第二个函数。
这个函数很好理解，而且实际开发中会有很多妙用。
~~~
<ul>
<li>天</li>
<li>角</li>
<li>涯</li>
<li>海</li>
</ul>
~~~
鼠标移动在每个li身上，有高亮效果
本质：每个li都有鼠标移入和移出事件，有三种实现方法
1、第一种方式：
~~~
$(“li”).each(function(){
$(this).mouseover(fn);
$(this).mouseout(fn);
});
~~~
第二种方式：
~~~
$(“li”).mouseover(fn)
$(“li”).mouseout(fn)
~~~
第三种方式：hover()
该方法就是对mouseover和mouseout两个事件封装的简便使用
~~~
$(“li“).hover(两个函数参数：移入和移出函数);
$(“li”).hover(
function(){},
function(){}
);
~~~
~~~
<script>
$(function(){
$("li").hover(
function()
{
$(this).css('background-color','lightblue');
},
function()
{
$(this).css("background-color","");
}
);
});
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:pink;}
</style>
<body>
<ul>
<li>天</li>
<li>角</li>
<li>涯</li>
<li>海</li>
</ul>
</body>
~~~
**2、toggle()方法**
语法结构 `toggle(fn1,fn2,fn3...fnN)`
toggle()方法用于模拟鼠标连续单击事件，第一次单击事件触发指定的第一个函数，第二次就触发第二个函数…. 如果有更多的函数则依次触发，直到最后一个。随后的每次单击都是对这几个函数的轮番调用。
看到这个方法第一想到的是toggleClass() 用于给元素对象切换样式。
toggle方法也是挺好理解的，以前项目中倒是没有应用过。举个例子：
~~~
<html>
<head>
<title> unbind() </title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
$("input").toggle(
function(){$("ul").append($("<li><h2>左 慈</h2></li>"))},
function(){$("ul").append($("<li><h2>曹 冲</h2></li>"))},
function(){$("ul").append($("<li><h2>神周瑜</h2></li>"))},
function(){$("ul").append($("<li><h2>神曹操</h2></li>"))},
function(){$("ul").append($("<li><h2>孙尚香</h2></li>"))},
function(){$("ul").append($("<li><h2>神关羽</h2></li>"));$(this).unbind()}
)
})
//-->
</script>
</head>
<body>
<h1>三国杀变态武将</h1>
<div >
<ul>
</ul>
</div>
<input type="button" value="连续点击按钮可切换事件" >
</body>
</html></span>
~~~
注意：在上例中引用的jquery库不是以前常用的jquery-2.1.0.min.js了，是因为在jquery1.9版本中将toggle()的切换功能去掉了,现在toggle这个功能只能控制元素的显隐。
### 8、事件命名空间
jQuery支持事件命名空间以方便管理事件。例如，在下面示例中为div元素绑定多个事件类型，然后使用命名空间进行规范，从而方便管理。所谓事件命名空间，就是在事件类型后面以点语法附加一个别名，以便于引用事件，如，click.a ，其中a就是click当前事件的别名。
~~~
<html>
<head>
<title> jQuery命名空间 </title>
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function(){
$("div").bind("click.a",function(){
$("body").append("<p>click事件<p/>")
});
$("div").bind("dblclick.a",function(){
$("body").append("<p>dblclick事件<p/>")
});
$("div").bind("mouseover.a",function(){
$("body").append("<p>mouseover<p/>")
});
$("div").bind("mouseout.a",function(){
$("body").append("<p>mouseout<p/>")
});
})
//-->
</script>
</head>
<body >
<div id="" class="">
jQuery命名空间
</div>
</body>
</html>
~~~
我们为div绑定的几个事件都指定了命名空间，这样在删除事件的时候，就可以直接指定命名空间即可。例如调用下面一行代码就可以把上面绑定的事件全部删除：
~~~
$("div").unbind(".a");
~~~
同样，假如我们为click事件类型指定了不同的命名空间，那么当我们只想删一个的时候只要指定它的命名空间即可。
jQuery学习之旅 Item7 区别this和$(this)
最后更新于：2022-04-01 11:32:16
刚开始以为this和`$(this)`就是一模子刻出来。但是我在阅读时，和coding时发现,总不是一回事，这里就谈谈this与$(this)的区别。
### 1、jQuery中this与$(this)的区别
~~~
$("#textbox").hover(
function() {
this.title = "Test";
},
fucntion() {
this.title = "OK”;
}
);
~~~
这里的this其实是一个html 元素(textbox)，textbox有text属性，所以这样写是完全没有什么问题的。
但是如果将this换成`$(this)`就不是那回事了，报Error了。this与 $(this)的区别在此。
~~~
\\Error Code：
$("#textbox").hover(
function() {
$(this).title ＝ "Test";
},
function() {
$(this).title = "OK";
}
);
~~~
$()这是jQuery的一个函数，也是最核心最基本的函数
功能一：传入一个选择器字符串，获得这个选择器对应的dom内容，保存在[]中，也就是俗称的jQuery对象。例如
~~~
$('#id') $('.class') $('tag')
~~~
功能二：传入一个匿名函数，例如
~~~
$(function(){})//这个匿名函数在网页载入完成后开始执行
~~~
功能三：将javascript对象包装成为jQuery对象。例如
~~~
$(this)
$({a:1,b:2,c:3})
$(document.getElementById('idstr'))
~~~
this是javascript**自身的**语法关键字，它指向一个javascript对象，所以可以使用所指向的目标javascript对象所拥有的方法, 但他自己不是一个普通的变量，所以你无法自己定义一个变量叫this
所以为了使用jQuery对象的方法，你必须传入jQuery函数$(this), 将javascript 对象包装成为一个jquery对象。
这里的$(this)是一个JQuery对象，而jQuery对象沒有title 属性，因此这样写是错误的。
JQuery拥有attr()方法可以get/set DOM对象的属性，所以正确的写法应该是这样：
正确的代码：
~~~
$("#textbox").hover(
function() {
$(this).attr(’title’, ‘Test’);
},
function() {
$(this).attr(’title’, ‘OK’);
}
);
~~~
使用jQuery的好处是它包裝了各种浏览器版本对DOM对象的操作，因此统一使用$(this)而不再用this应该是比较不错的选择。
jQuery中this与$(this)的区别就介绍到这里。
### 2、典型错误与注意点
~~~
var node = $('#id');
node.click(function(){
this.css('display','block'); //报错 this是一个html元素，不是jquery对象，因此this不能调用jquery 的css()方法
$(this).css(); //正确 $(this)是一个jquery对象，不是html元素，可以用css()方法
this.style.display = 'block'; //正确 this是一个html元素，不是jquery对象，因此this不能调用jquery的css()方法,但是可以用javascript来更改style属性
});
~~~
**不要滥用$(this)**
如果不了解javasrcipt中基本的DOM属性和方法的话，很容易滥用jQuery对象。比如：
~~~
$(‘#someAnchor’).click(function() {
alert( $(this).attr(‘id’) );
});
~~~
如果你只是通过jQ对象获取简单的dom元素的属性比如id，那么你完全可以使用js原生的方法：
~~~
$(‘#someAnchor’).click(function() {
alert( this.id );
});
~~~
诸如“src,” “href,” 和“style.”等一些属性在老版本的ie中使用了getAttribute方法。
jQuery学习之旅 Item6 好用的each()
最后更新于：2022-04-01 11:32:13
### 1、javascript 函数的调用方式
首先来研究一下jquery的each()方法的源码，在这之前，先要回顾一下javascript函数具体调用样式：
1. 普通函数调用 setName();
1. 可以作为对象的属性调用
1. 作为构造函数使用，new 函数，实例化对象
1. call() apply()
~~~
//1、函数作为对象成员使用
var cat = {'climb':function(){alert('zai pa shu')}};
//cat.climb();
//2、函数作为构造方法使用
function Person(){
this.name = "abc";
this.run = function(){alert('running');}
}
var tom = new Person;
console.log(tom.name);//abc
~~~
同一个函数可以被两个变量来调用：getName和tom.say
~~~
//3、call()和apply()方法
var name = "china";// function getName(){
//this:谁调用该函数，this就代表谁
return this.name;
}
//console.log(window.getName());//undefined [china]
var name = "china";
function getName(a,b){
var name = "xiaoqiang";
//this:谁调用该函数，this就代表谁
return this.name+a+b;
}
//console.log(getName());//xiaoqiang [china]
var tom = {'name':'tom'}
tom.say = getName;//把getName的引用赋值给say属性
//alert(tom.say()); //tom
//getName.call(对象,参数,参数);
//函数执行中。内部this指引tom
alert(getName.call(tom)); //函数执行方式
var black = {'name':"xiaohei"}
alert(getName.call(black,'hello','world')); //xiaohei
alert(getName.apply(black,['china','USA']));
~~~
### 2、jQuery each()源码分析
看下jQuery中的each实现：
~~~
function (object, callback, args) {
//该方法有三个参数:进行操作的对象obj，进行操作的函数fn，函数的参数args
var name, i = 0,length = object.length;
if (args) {
if (length == undefined) {
for (name in object) {
if (callback.apply(object[name], args) === false) {
break;
}
}
} else {
for (; i < length;) {
if (callback.apply(object[i++], args) === false) {
break;
}
}
}
} else {
if (length == undefined) {
for (name in object) {
if (callback.call(object[name], name, object[name]) === false) {
break;
}
}
} else {
for (var value = object[0]; i < length && callback.call(value, i, value) !==
false; value = object[++i]) {}
}
}
return object;
}
//object[0]取得jQuery对象中的第一个DOM元素，通过for循环，
//得到遍历整个jQuery对象中对应的每个DOM元素，通过 callback.call( value,i,value);
//将callback的this对象指向value对象，并且传递两个参数,i表示索引值，value表示DOM元素；
//其中callback是类似于 function(index, elem) { ... } 的方法。
//所以就得到 $("...").each(function(index, elem){ ... });
~~~
分析结果：each()有两种形式，
1、 `$(“li”).each(function(){});` ——> 调用的是jQuery.fn.init的方法(继承)
2、`$.each(数组/对象, function(){})` ——> 调用的是jQuery的方法(继承)
3、 第一个each是对第二个each的封装 ；
4、 最后执行的都是第二个each。两种方法本质是一样。
### 3、 each()方法具体使用
each()方法能使DOM循环结构简洁，不容易出错。each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等
在javaScript开发过程中使用$each可以大大的减轻我们的工作量。
下面提一下each的几种常用的用法
**1、each处理一维数组**
~~~
var arr1 = [ "aaa", "bbb", "ccc" ];
$.each(arr1, function(i,val){
alert(i); //i为数组索引值
alert(val); //val为具体的值
});
~~~
alert(i)将输出0，1，2
alert(val)将输出aaa，bbb，ccc
**2、each处理二维数组**
~~~
var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
$.each(arr2, function(i, item){
alert(i);
alert(item);
});
~~~
arr2为一个二维数组，item相当于取这二维数组中的每一个数组。
item[0]相对于取每一个一维数组里的第一个值
alert(i)将输出为0，1，2，因为这二维数组含有3个数组元素
alert(item)将输出为 [‘a’, ‘aa’, ‘aaa’]，[‘b’, ‘bb’, ‘bbb’]，[‘c’, ‘cc’, ‘ccc’]
**对此二位数组的处理稍作变更之后**
~~~
var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
$.each(arr, function(i, item){
$.each(item,function(j,val){
alert(j);
alert(val);
});
});
~~~
alert(j)将输出为0，1，2，0，1，2，0，1，2
alert(val)将输出为a，aa，aaa，b，bb，bbb，c，cc，ccc
**3、each处理json数据**
这个each就有更厉害了，能循环每一个属性
~~~
var obj = { one:1, two:2, three:3};
each(obj, function(key, val) {
alert(key); //key为属性名
alert(val); //val为属性值
});
~~~
这里alert(key)将输出one two three
alert(val)将输出one，1，two，2，three,3
这边为何key不是数字而是属性呢，因为json格式内是一组无序的**属性/值**，既然无序，又何来数字呢。
而这个val等同于obj[key]
**4、ecah处理dom元素**
此处以一个input表单元素作为例子。
如果你dom中有一段这样的代码
~~~
<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden" value="444"/>
然后你使用each如下
$.each($("input:hidden"), function(i,val){
alert(val);//val这里是获得的DOM对象
alert(i);//Dom对象的索引
alert(val.name);
alert(val.value);
});
~~~
那么，alert(val)将输出[object HTMLInputElement]，因为它是一个表单元素。
alert(i)将输出为0，1，2，3
alert(val.name);将输出aaa,bbb,ccc,ddd，如果使用this.name将输出同样的结果
alert(val.value); 将输出111,222,333,444，如果使用this.value将输出同样的结果
如果将以上面一段代码改变成如下的形式
~~~
$("input:hidden").each(function(i,val){
alert(i);
alert(val.name);
alert(val.value);
});
~~~
可以看到，输出的结果是一样的，个人建议：操作DOM 用第二种语义上更好理解。
这样，几个例子的实际结果已经得到答案。接着再继续往下研究，总不能知其然不知其所以然。
从以上的例子中可知`$`和jQuery对象都实现了该方法，对于jQuery对象，只是把each方法简单的进行了**委托**：把jQuery对象作为第一个参数传递给`$`的each方法。
jQuery学习之旅 Item5 $与jQuery对象
最后更新于：2022-04-01 11:32:11
### 1、$符号的由来
**$符号本质就是函数的名字。**
jquery源码分析
通过分析我们知道，在jquery里边不只可以使用$符号，还可以使用jQuery标志
**解决冲突问题**
有的项目是中间过渡项目(prototype和jquery框架都有使用)
- prototype框架也使用$符号
- jquery里边也使用符号现在就分不清楚符号到底是prototype框架的 还是 jquery框架的
jquery本身有方法可以是的$符号的使用权被让出来
~~~
jQuery.extend({
noConflict: function( deep ) {
//使用一个空变量_$，把$符号给覆盖
window.$ = _$;
if ( deep ) {
//使用一个空变量_jQuery把jQuery使用权收回
window.jQuery = _jQuery;
}
return jQuery;
},
~~~
~~~
<script>
//通过jquery指定方法让出$符号的使用权
//被让出使用权的$符号，就不能出现在jquery的应用里边
//var jq = $.noConflict(); //收回$符号使用权
var jq = $.noConflict(true); //"$符号"和"jQuery"两个使用权都被收回
function f1(){
//alert($("div").html());
//alert(jQuery("div").html());
console.log(jq("div").html());
console.log(jQuery("div").html()); //不允许使用jQuery
}
</script>
<body>
<div>I am bread</div>
<input type="button" value="触发" onclick="f1()" />
</body>
~~~
### 2、jQuery对象与dom对象的区别和联系
- jquery对象——$(“li”)
- dom对象——document.getElementById(‘one’);
**1. jquery对象创建过程中如何封装dom代码**
结论：`$(“#one”)[0] = document.getElementById(‘one’);`
**2. jquery对象转化为dom对象**
a) jquery对象[下标] 例如 `$(“#one”)[0]`
~~~
//jquery对象调用dom对象的方法
$("#one")[0].setAttribute("class","pear");//说明jquery对象转化为了dom对象
~~~
在jquery对象里边获得指定的dom对象
$(“li”)多个节点
~~~
//jQuery 对象转换为Domd对象
$("li")[3].style.color ="red";
~~~
**3. dom对象转换为jquery对象**
a) var dv = document.getElementById(‘id’);
b) $(dv) 转化完毕
~~~
//$("#one").css('color','red');
//$("#one")就是对dom代码的封装(document.getElementById)
//利用dom对象调用jquery的方法(失败)
var dv = document.getElementById("one");
//jquery封装dom代码（dom对象）
//$(dv) dv是div元素节点 nodeType=1(dom对象转化为jquery对象)
$(dv).css("color","green");
~~~
### 3、jquery对象分析
jquery对象创建：jQuery.fn.init(); （从105行——219行）
但是 css() html() attr() addClass()等方法在 100多行的init()里边没有具体的操作方法
下面来分析代码结构：
- jQuery.fn 代码：104—338行
- jQuery.fn.init 代码：105—219行
- jQuery.fn.init.prototype = jQuery.fn;
-
jQuery.fn.init通过原型链继承jQuery.fn
jQuery.fn.init创建——>jQuery.fn.init 继承 ——> jQuery.fn （例如 length、jquery、size属性调用 ——> jQuery.fn 继承extend 冒充继承 (例如 addClass attr removeAttr)
~~~
jQuery.fn.init.prototype = jQuery.fn;
jQuery.extend = jQuery.fn.extend = function() {}
~~~
- jquery对象创建完毕需要向上继承**两层**关系
- jquery之所以会调用许多相关方法，也是继承得来的方法
**jquery在使用的时候可以使用两种对象**
1. $(“#one”) 是普通jQuery.fn.init创建出来的对象
1. $.get(“url”) 不是jQuery.fn.init创建，而是jquery内部的jQuery对象
1.
例如: `$.noConflict()``$`符号就是内部jQuery对象
该对象$，代码行数22—915行
`$`符号对象本身也有冒充继承，我们直接调用$符号的相关方法，首先去22-915行找，如果没有，就去extend继承方法里边找
系统里边有两套extend冒充继承：**普通jquery对象的、$符号的**
### 4、总结：
- 1、 $符号由来
- 2、 jquery对象与dom对象互相转化
- 3、 jquery对象分析
- a) jquery生成好的对象继承 jQuery.fn
- b) jQuery.fn 通过冒充继承 extend，又得到了许多属性和方法
jQuery学习之旅 Item4 细说DOM操作
最后更新于：2022-04-01 11:32:09
# jQuery—–DOM操作(文档处理)
Dom是Document Object Model的缩写，意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件。DOM操作可以分为三个方面即DOM Core(核心)、HTM-DOM和CSS-DOM。
每一个网页都可以用DOM表示出来，每个DOM都可以看作是一棵DOM树。下面的html页面结构可以构建出一棵DOM树，代码：
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"
<title>DOM Demo</title>
</head>
<body>
<p title="选择你最喜欢的水果.">你最喜欢的水果是？</p>
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
</body>
</html>
~~~
构建出的DOM树如下：
JQuery中的DOM操作主要对包括：建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库操作】。下面的DOM操作将围绕上面的DOM树进行学习JQueryDOM操作。
### 一、查–查找DOM节点
查找节点非常容易，使用选择器就能轻松完成各种查找工作。
例：查找元素节点p返回p内的文本内容
~~~
$("p").text();
~~~
例：查找元素节点p的属性返回属性名称对应的属性值
~~~
$("p").attr("title"),返回p的属性title的值。
~~~
### 二、建–新建DOM节点
**1、创建元素节点**
创建元素节点并且把节点作为`<ul>`元素的子节点添加到DOM节点树上。先创建元素点，创建元素节点使用Jquery的工厂函数`$()`来完成，格式如下：`$(html)`,该方法会根据传入的html字符串返回一个DOM对象，并将DOM对象包装成一个JQuery对象后返回。创建一个元素节点JQuery代码如下：
~~~
$li1=$("<li></li>")
~~~
代码返回`$li1`就是一个由DOM对象包装成的JQuery对象。把新建节点添加到DOM树中JQuery代码如下：
~~~
$("ul").append($li1);
~~~
添加后页面中只能看到`<li>`元素默认的”·”,由于没有为节点添加文本所以只显示默认符号，下面创建文本节点。
**PS:**append()方法是添加DOM节点方法详见增–添加DOM节点。
**2、创建文本节点**
使用JQuery的工厂函数`$()`同样能够创建文本节点，创建文本节点的JQuery代码如下：
~~~
$li2=$("<li>苹果</li>");
~~~
代码返回`$li2`就是一个由DOM对象包装成JQuery对象，把新建的文本节点添加到DOM树中JQuery代码如下：
~~~
$("ul").append($li2);
~~~
添加后页面中能看到”·苹果”，右键查看页面源码发现新加的文本节点没有title属性。下面方法创建带属性的节点。
**3、创建属性节点**
创建属性节点同元素节点、文本节点一样使用JQuery的工厂函数完成。创建属性节点的JQuery代码如下：
~~~
$li3=$("<li title='榴莲'>榴莲</li>");
~~~
代码返回`$li3`也是一个由DOM对象包装成JQuery对象，把新建的属性节点添加到DOM树中JQuery代码如下：
~~~
$("ul").append($li3);
~~~
添加后页面中能看到”·榴莲”，右键查看页面源码发现新加的属性节点有title=’榴莲’属性。
### 三、增–添加DOM节点
**1、插入节点**
**(1). 节点追加-父子关系**
~~~
$(“ul”).append(“<li>强</li>”); 后置追加
$(“ul”).prepend(“<li>强</li>”); 前置追加
$(“ul”).append(jquery对象); 把指定对象后置追加
(jquery对象如果是页面上已有的元素节点，那么就被挪动位置到ul里边)
$(“ul”).prepend(jquery对象); 把指定对象前置追加
$(“<li>强</li>”).appendTo(“ul”); 被追加（后置）
$(“<li>强</li>”).prependTo(“ul”); 被追加（前置）
~~~
~~~
<script>
function f1(){
//主动：追加字符串、已有节点对象、新节点对象
$("#one").append("<li>其实</li>");//==>被追加到第一个ul的最后一个li
$("#one").prepend("<li>good</li>");//==>被追加到第一个ul的第一个li
$("#one").append($("#two li:eq(1)"));//==>“家”被移动到第一个ul的最后一个li，原来的li被移除
$("#one").append($("<li>abc</li>")); //documentCreateElement();
//被动 ：没有找到的节点直接创建新节点、已有节点则执行移动操作
$("<li>年</li>").appendTo("#one");//==>这里不用$符号$("#one");
$("<li>新</li>").prependTo("#one");
$("#two li:eq(3)").appendTo("#one");
}
</script>
<body>
<ul id="one">
<li>四</li>
<li>大</li>
<li>家</li>
<li>族</li>
</ul>
<ul id="two">
<li>乔</li>
<li>家</li>
<li>大</li>
<li>院</li>
</ul>
<ul>
<li>老大</li>
</ul>
<input type="button" value="触发" onclick="f1()">
</body>
~~~
**(2). 节点追加—兄弟关系**
~~~
$(“div”).after(“<span>hello</span>”); 后置追加兄弟节点
$(“div”).after(jquery对象); 把一个jquery对象后置追加为兄弟节点
$(“#one”).insertAfter(‘对象标志’); 已有对象被追加为对象标志的兄弟节点
$(“<span></span>”).insertAfter(“#ul”) 一个新的span对象被追加为ul的兄弟节点
~~~
~~~
<script>
function f1(){
//主动兄弟追加节点
$("#one").after("<span>tomorrow</span>");//第一个ul之后追加了一个span的兄弟节点
$("#one").after($("p"));//p节点被移动到第一个ul之后
//被动兄弟节点追加
$("<span>hello</span>").insertAfter("#one"); //新节点被追加
$("ul:eq(2)").insertAfter("#one"); //已有节点被追加
}
</script>
<body>
<ul id="one">
<li>四</li>
<li>大</li>
<li>家</li>
<li>族</li>
</ul>
<ul id="two">
<li>乔</li>
<li>家</li>
<li>大</li>
<li>院</li>
</ul>
<ul>
<li>老大</li>
</ul>
<p>road</p>
<input type="button" value="触发" onclick="f1()">
</body>
~~~
### 四、删–删除DOM节点操作
**1. 节点删除**
empty() 父节点删除子节点
remove() 删除匹配到的节点
~~~
<script>
function f1(){
//节点删除
//$("#one").empty();//第一个ul的所有li被删除，ul还在，一个空标签
$("#two li:gt(0)").remove();//删除匹配到的节点
}
</script>
<body>
<ul id="one">
<li>四</li>
<li>大</li>
<li>家</li>
<li>族</li>
</ul>
<ul id="two">
<li>乔</li>
<li>家</li>
<li>大</li>
<li>院</li>
</ul>
<ul>
<li>老大</li>
</ul>
<p>road</p>
<input type="button" value="触发" onclick="f1()">
</body>
~~~
### 五、改–修改DOM节点操作
**1. 节点替换**
~~~
<script>
function f1(){
//节点替换(被动)
//"四"被"乔"替换,利用已有节点进行替换
$("#one li:eq(0)").replaceWith($("#two li:eq(0)"));
//利用新节点替换
$("#one li:eq(0)").replaceWith("<li>五</li>");
$("#one li:eq(0)").replaceWith($("<li>六</li>"));
//主动替换
$("<li>七</li>").replaceAll($("#one li:eq(2)"));
}
</script>
<body>
<ul id="one">
<li>四</li>
<li>大</li>
<li>家</li>
<li>族</li>
</ul>
<ul id="two">
<li>乔</li>
<li>家</li>
<li>大</li>
<li>院</li>
</ul>
<ul>
<li>老大</li>
</ul>
<p>road</p>
<input type="button" value="触发" onclick="f1()">
</body>
~~~
**2. 节点复制**
clone(false) 复制节点本身和子级节点内容
clone(true) 复制节点本身和子级节点内容,同时复制节点的事件
~~~
<script>
function f1(){
//clone(true)同时复制节点和对应的事件
var qiao = $("#two li:eq(0)").clone(true);
$("#one").append(qiao);
}
$(function(){
$("#two li").each(function(){
//每个li被点击，就输出对应的文本内容
$(this).click(function(){
alert($(this).html());
});
});
});
</script>
<body>
<ul id="one">
<li>四</li>
<li>大</li>
<li>家</li>
<li>族</li>
</ul>
<ul id="two">
<li>乔</li>
<li>家</li>
<li>大</li>
<li>院</li>
</ul>
<ul>
<li>老大</li>
</ul>
<p>road</p>
<input type="button" value="触发" onclick="f1()">
</body>
~~~
**3. 节点包裹 —子父关系**
~~~
<script>
function f1(){
//每个匹配节点都给找一个父级
$("ul").wrap("<div id='pear'></div>");//三个ul每个都被div包裹
$("#one").wrap($("p")); //已有节点被追加(复制)第一个ul被p包裹
//多个节点共用一个父级
$("ul").wrapAll("<div id='pear'></div>");//三个ul共同被一个div包裹
//把子内容包裹起来
//每个元素的子内容都被包裹
$("ul").wrapInner("<div id='pear'></div>");每个ul的所有li元素被div包裹
}
</script>
<body>
<ul id="one">
<li>四</li>
<li>大</li>
<li>家</li>
<li>族</li>
</ul>
<ul id="two">
<li>乔</li>
<li>家</li>
<li>大</li>
<li>院</li>
</ul>
<ul>
<li>老大</li>
</ul>
<p></p>
<input type="button" value="触发" onclick="f1()">
</body>
~~~
### 六. 遍历节点操作children()、next()、prev()、siblings()和closest()
- children()——方法用于取得匹配元素的子元素集合，只匹配子元素不考虑任何后代元素。方法如下：$(selector).children();例：
~~~
$("$("body").children().length;\\该示例获得body元素的子元素个数；
~~~
- next()方法——用于匹配元素的下一个兄弟节点，方法如下:$(selector).next();例：
~~~
$("p").next().html();\\该示例获得p元素的下一个兄弟节点的html内容。
~~~
- prev()方法——用于匹配元素的上一个兄弟节点，方法如下：$(selector).prev();例：
~~~
$("ul").prev().text();\\该示例获得ul元素的上一个兄弟节点的文本内容。
~~~
- siblings方法——-用于匹配目标元素的所有兄弟元素，方法如下：$(selector).siblings();例：
~~~
$("p").slibings();\\示例获得p元素的所有兄弟节点元素。
~~~
- closest()方法——用来取得最近的匹配元素，首先检查当前元素是否匹配如果匹配则直接返回，否则继续向上查找父元素中符合条件的元素返回，如果没有匹配的元素则返回空JQuery对象。
ps:注意closest()、parent()、parents()方法的区别：
jQuery学习之旅 Item3 属性操作与样式操作
最后更新于：2022-04-01 11:32:07
本节将Dom元素的操作:属性操作、样式操作、设置和获取HTML,文本和值、Css-Dom操作。
### 1、属性操作
~~~
<input type=”text” name=”username” value=”jack” class=”apple”>
~~~
**方法：attr() attribute属性**
使用：
- 1、 attr(名称); 获得元素节点对应的属性信息
~~~
$(“input”).attr(‘class’); //apple
$(“input”).attr(‘type’); //text
~~~
- 2、 attr(名称，值) 设置元素节点的属性信息
~~~
$(“input”).attr(‘name’,’useremail’);
$(“input”).attr(‘value’,’tom’);
~~~
- 3、 attr(json对象) 同时可以修改多个属性信息
~~~
var jn = {name:’userqq’, value:’123987’, class:’pear’};
$(“input”).attr(jn);
~~~
- 4、 attr(key,function(){}) 通过函数返回值，设置属性信息
~~~
$("#usernm").attr('value',function(){
//相关程序
return "linken";
});
~~~
- 5、 removeAttr(name) 删除指定的属性（type属性特殊一般不允许删除）
~~~
$("#usernm").removeAttr('class');
$("#usernm").removeAttr('value');
~~~
具体实例：
~~~
<script>
function f1(){
//获得元素节点对应的属性信息
console.log($("#usernm").attr('type')); //text
console.log($("#usernm").attr('name')); //username
console.log($("#usernm").attr('class')); //apple
//修改元素的属性信息attr(name,value)
$("#usernm").attr('name','useremail');
$("#usernm").attr('id','user');//本身可以修改，但是后边的选择器就失效了
$("#usernm").attr('value','tom');
$("#usernm").attr('class','orange');
//console.log($("#usernm").attr('value'));
//同时修改多个属性信息
var jn = {name:'userqq',value:'987345',class:'pear'};
$("#usernm").attr(jn);
//通过函数返回值设置属性信息
$("#usernm").attr('value',function(){
//相关程序
return "linken";
});
//修改type属性(低版本火狐允许修改type属性)
//$("#usernm").attr('type','radio');
//删除指定属性
$("#usernm").removeAttr('class');
$("#usernm").removeAttr('value');
$("#usernm").removeAttr('name');
//$("#usernm").removeAttr('type');
$("#usernm").removeAttr('id');
}
</script>
<body>
<h2>属性操作</h2>
<input id="usernm" type="text" name="username" value="jack" class="apple" />
<input type="button" value="触发" onclick="f1()">
</body>
~~~
### 2、class类别快捷操作方法
可以用上面的方法来修改class属性：
~~~
<div class=”apple”>
$(“div”).attr(“class”); //apple 获得属性信息
$(“div”).attr(“class”,’pear’) //修改属性信息
~~~
另外也有单独操作class 属性的方法：
- 1、 **addClass()**——给元素设置class属性信息
- 2、 **removeClass()**——把元素对应的class指定属性值给删除 ,
- 3、 **toggleClass(class)**——开关class设置属性，有就给删除，没有就给添加上
- 4、**hasClass()**——检查匹配的元素是否含有某个特定的类
和attr 和removeAttr(class)有区别，这里只能全部修改，而addClass 和removeClass可以操作多个class中的一个。
~~~
<sccript>
function f1(){
//$("div").attr('class','apple');
//添加class属性
//addClass()
$("div").addClass('pear');
}
function f2(){
//删除class属性
$("div").removeClass("banana"); //删除指定的class属性值
//$("div").removeAttr("class");
//$("div").attr("class","banana");
}
function f3(){
//开关效果
$("div").toggleClass('apple');
}
</script>
<body>
<h2>class快捷操作方法</h2>
<div class="banana">this is computer</div>
<input type="button" value="添加class" onclick="f1()">
<input type="button" value="删除class" onclick="f2()">
<input type="button" value="开关class" onclick="f3()">
</body>
~~~
**PS:**addClass()和attr()方法设置样式的不同，attr方法把元素的属性名对应的属性值设为方法中的参数值，addClass()则把属性值
添加到属性名对应的属性值中。例：已有元素`<p class='class1'>元素样式</p>`,使用attr()和addClass()分别添加新样式。
~~~
$("p").attr("class","another").结果是<p class='another'>元素样式</p>
$("p").addClass("class","another")结果是<p class='class1 another'>元素样式</p>
~~~
### 3、html()获取或设置一个元素包含的内容
~~~
<div id=”one”>hello</div>
document.getElementById(‘one’).innerHTML; //可以获得元素标签包含的内容：hello
~~~
innerHTML不是w3c标准的内容，在有的地方改属性不起作用 例如操作 xml
- 1、 html() 获取元素包含的内容
- 2、 html(参数) 设置元素包含的内容
特点：
① 可以设置元素包含的文本内容
② 也可以设置元素包含的html标签内容
~~~
<script>
function f1(){
console.log($("div").html()); //<span>this</span> is <a>computer</a>
}
function f2(){
//可以同时设置元素包含的“文本”和“html”标签内容
$("div").html("<a href='http://www.baidu.com'>hello world</a>");
}
</script>
<body>
<h2>html快捷操作方法</h2>
<div class="banana"><span>this</span> is <a>computer</a></div>
<input type="button" value="获得元素包含的内容" onclick="f1()">
<input type="button" value="设置元素包含的内容" onclick="f2()">
</body>
~~~
**PS：**该方法可以用于XHTML文档，不能用于XML文档。
### 4、text()方法获取或设置元素包含的内容
text ——-针对文本发生作用
~~~
<div><a>hello world</a>milk</div>
~~~
1.
获取内容：
- html() 获取 : [hello world]()milk
- text() 获取 : hello worldmilk
1.
设置内容
- 内容1：百度
~~~
html(内容): <div>百度</div>
text(内容): <div>百度</div>
~~~
- 内容2：[http://www.baidu.com](http://www.baidu.com)’>百度
~~~
html(内容): <div><a href=’http://www.baidu.com’>百度</a></div>
text(内容): <div><a href=’http://www.baidu.com’>百度</a></div>
// text(参数)作用参数html标签会被转化为符号实体
~~~
**text和html方法区别**
-
获取内容：text:获取内容只关心文本内容，不理会html标签; html:获取内容html和文本内容都起作用
-
设置内容：text:设置内容，html标签内容转化为符号实体内容；html: html标签和普通文本内容都可以设置
~~~
<script>
function f1(){
//文本和元素标签内容都可以获得<span>this</span> is <a>computer</a>
//console.log($("div").html());
//获取纯文本内容this is computer
//console.log($("div").text());
$("div").html($("div").html()+'abc');
}
function f2(){
//可以同时设置元素包含的“文本”和“html”标签内容
//$("div").html("<a href='http://www.baidu.com'>hello world</a>");
//$("div").text("<span>百度</span>"); //<span>百度</span>
}
</script>
<body>
<h2>text快捷操作方法</h2>
<div class="banana"><span>this</span> is <a>computer</a></div>
<input type="button" value="获得元素包含的内容" onclick="f1()">
<input type="button" value="设置元素包含的内容" onclick="f2()">
</body>
~~~
**PS:**该方法对html和XML文档都适用。
### 5、操作value属性快捷方法val()
1. val() 获得指定元素的value信息
1. val(参数) 设置指定元素的value信息
attr()
form表单会经常操作value属性：密码框、下拉列表、复选框、单选按钮、文本域、隐藏域
~~~
function f1(){
//textarea与普通input框一样可以使用value属性
//$("#username").attr('value');
//console.log($("#username").val()); //获得value属性信息
console.log($("#introduce").val()); //获得textarea的value值
}
function f2(){
//修改value属性信息
//$("#username").val('tom');
$("#introduce").val('very good'); //设置textarea的value值
}
<body>
<h2>val快捷操作方法</h2>
<input type="text" name="username" id="username" value="linken" />
<!--密码框、下拉列表、复选框、单选按钮、文本域、隐藏域、普通按钮-->
<textarea id="introduce">I am linken</textarea>
<input type="button" value="获得" onclick="f1()">
<input type="button" value="设置" onclick="f2()">
</body>
~~~
### 6、CSS-Dom操作css()操作样式属性信息
1. css(name) 获取样式信息
1. css(name,value) 设置样式属性信息
1. css(json对象) 同时设置多个样式属性信息
~~~
<script>
function f1(){
//获取样式信息
console.log($("div").css("width"));
console.log($("div").css("background-color"));
}
function f2(){
//$("div").css('width',"200px");
//$("div").css('height',"100px");
//$("div").css('background-color',"pink");
//利用json对象同时设置多个样式信息
var jn = {width:"300px",height:"200px;",fontSize:"30px","background-color":"lightgreen"};
$("div").css(jn);
}
</script>
<body>
<h2>css快捷操作方法</h2>
<div>this is computer</div>
<input type="button" value="获得" onclick="f1()">
<input type="button" value="设置" onclick="f2()">
</body>
~~~
**另附：offset()、position()、scrollTop()和scrollLeft()**
- **offset()方法**——用于获取元素相对当前窗体的偏移量，其返回对象包括两个属性：top和left。方法如下：`$(selector).offset()`
~~~
\\该示例用于获得元素p的偏移量。
var offset= $("p").offset();
var left=offset.left;
var top=offset.top;
~~~
**PS:**offset()只对可见元素有效。
- **position()方法**——用于获取元素于最近的个position样式属性设置为relative或者absolute的祖交节点的相对偏移量。方法如下：`$(selector).position();`
~~~
\\该示例用于获得元素p的位置。
var postion = $("p").positon();
var left=positon.left;
var top=positon.top;
~~~
- scrollTop()和scrollLeft()方法用于获取元素的滚动条距顶端的距离和距左侧的距离。方法如下:`$(selector).scrollTop();$(selector).scrollLeft();`例：
~~~
\\该示例用于获得元素的滚动条的位置。
var scrollTop=$("p").scrollTop();
var scrollLeft=$("p").scrollLeft();
~~~
也可以添加参数将元素滚动到指定的位置。例：
~~~
$("textarea").scrollTop(300);
$("textarea").scrollLeft(300);
~~~
jQuery学习之旅 Item2 选择器【二】
最后更新于：2022-04-01 11:32:04
这里接着上一个Item1 把jQuery的选择器讲完。主要有：属性过滤器和子元素过滤器
**点击”名称”会跳转到此方法的jQuery官方说明文档.**
### 5. 属性过滤器 Attribute Filters
<table border="1" cellspacing="1" cellpadding="5"><tbody><tr><td width="238" valign="top">名称</td><td width="222" valign="top">说明</td><td width="312" valign="top">举例</td></tr><tr><td width="242" valign="top"><a href="http://docs.jquery.com/Selectors/attributeHas#attribute">[attribute]</a></td><td width="220" valign="top">匹配包含给定属性的元素</td><td width="312" valign="top">查找所有含有 id 属性的 div 元素: <br/>$(“div[id]”)</td></tr><tr><td width="245" valign="top"><a href="http://docs.jquery.com/Selectors/attributeEquals#attributevalue">[attribute=value]</a></td><td width="219" valign="top">匹配给定的属性是某个特定值的元素</td><td width="312" valign="top">查找所有 name 属性是 newsletter 的 input 元素: <br/>$(“input[name=’newsletter’]”).attr(“checked”, true);</td></tr><tr><td width="246" valign="top"><a href="http://docs.jquery.com/Selectors/attributeNotEqual#attributevalue">[attribute!=value]</a></td><td width="218" valign="top">匹配给定的属性是不包含某个特定值的元素</td><td width="311" valign="top">查找所有 name 属性不是 newsletter 的 input 元素: <br/>$(“input[name!=’newsletter’]”).attr(“checked”, true);</td></tr><tr><td width="248" valign="top"><a href="http://docs.jquery.com/Selectors/attributeStartsWith#attributevalue">[attribute^=value]</a></td><td width="217" valign="top">匹配给定的属性是以某些值开始的元素</td><td width="311" valign="top">$(“input[name^=’news’]”)</td></tr><tr><td width="249" valign="top"><a href="http://docs.jquery.com/Selectors/attributeEndsWith#attributevalue">[attribute$=value]</a></td><td width="217" valign="top">匹配给定的属性是以某些值结尾的元素</td><td width="311" valign="top">查找所有 name 以 ‘letter’ 结尾的 input 元素: <br/>$ (“input[name =’letter’]”)</td></tr><tr><td width="249" valign="top"><a href="http://docs.jquery.com/Selectors/attributeContains#attributevalue">[attribute*=value]</a></td><td width="217" valign="top"><p>匹配给定的属性是以包含某些值的元素</p></td><td width="311" valign="top"><p>查找所有 name 包含 ‘man’ 的 input 元素: <br/>$ (“input[name * =’man’]”)</p></td></tr><tr><td width="249" valign="top"><a href="http://docs.jquery.com/Selectors/attributeMultiple#attributeFilter1attributeFilter2attributeFilterN">[attributeFilter1][attributeFilter2][attributeFilterN]</a></td><td width="217" valign="top">复合属性选择器，需要同时满足多个条件时使用。</td><td width="313" valign="top">找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的: <br/> $ (“input[id][name =’man’]”)</td></tr></tbody></table>
~~~
<input type=”text” name=”username” value=”zhangsan” />
~~~
- $ (“[name]”) —— 找到有name属性的元素
- $(“[value=tom]”) —— 找到有value属性的元素，并且value的值等于tom
- $(“[value^=to]”) —— 找到有value属性的元素，并且value的值是以to开始
- $(“[value$=ab]”) —— 找到有value属性的元素，并且value的值是以ab结尾
- $(“[value*=ab]”) —— 找到有value属性的元素，并且value的值里边包含ab信息
-
$(“[value!=ab]”)
①找到有value属性的元素，并且value的值不等于ab
②或者是没有value属性元素
~~~
<input value=”123”><input value=”ab”>
~~~
- $([name][class=^a][value!=123] ) —— 符合选择器,多个条件同时满足(并且，交集)
~~~
<script>
function f1(){
//$("[class]").css('color','red');//有class属性
//$("[id=hello]").css("color","blue");//id=hello的元素
//$("[class^=app]").css("color",'blue');//class内容以app开始
//$("[class$=e]").css("color","red"); //class内容以e结尾
//$("[class*=p]").css("color","red"); //class内容包含p
//class内容不为app123 或 没有class属性的
//$("[class!=app123]").css("color","blue");
//有id属性和class属性并且class不等于app123
//$("[id][class!=app123][class]").css("color",'blue');
//获得input元素，并且有class属性，内容以app开始
$("[class=app123]input").css("color",'blue');
//$("input:eq(2)").css("color",'blue');
}
</script>
<body>
<div class="apple">apple</div>
<div class="app123">banana</div>
<input type="text" value="tom" id="hello" class="peare"><br />
<input type="text" value="jack" class="app123"><br />
<input type="text" value="linken" class="apple"><br />
<input type="button" value="触发" onclick="f1()">
<p>I am bread</p>
</body>
~~~
### 6. 子元素过滤器 Child Filters
<table border="1" cellspacing="1" cellpadding="5"><tbody><tr><td width="256" valign="top">名称</td><td width="223" valign="top">说明</td><td width="290" valign="top">举例</td></tr><tr><td width="266" valign="top"><a href="http://docs.jquery.com/Selectors/nthChild#index">:nth-child(index/even/odd/equation)</a></td><td width="219" valign="top"><p>匹配其父元素下的第N个子或奇偶元素</p><p>‘:eq(index)’ 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！ </p><p>可以使用: <br/>nth-child(even) <br/>:nth-child(odd) <br/>:nth-child(3n) <br/>:nth-child(2) <br/>:nth-child(3n+1) <br/>:nth-child(3n+2)</p></td><td width="284" valign="top">在每个 ul 查找第 2 个li: <br/>$(“ul li:nth-child(2)”)</td></tr><tr><td width="276" valign="top"><a href="http://docs.jquery.com/Selectors/firstChild">:first-child</a></td><td width="216" valign="top"><p>匹配第一个子元素</p><p>‘:first’ 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素</p></td><td width="279" valign="top">在每个 ul 中查找第一个 li: <br/>$(“ul li:first-child”)</td></tr><tr><td width="284" valign="top"><a href="http://docs.jquery.com/Selectors/lastChild">:last-child</a></td><td width="214" valign="top"><p>匹配最后一个子元素</p><p>‘:last’只匹配一个元素，而此选择符将为每个父元素匹配一个子元素</p></td><td width="275" valign="top">在每个 ul 中查找最后一个 li: <br/>$(“ul li:last-child”)</td></tr><tr><td width="290" valign="top"><a href="http://docs.jquery.com/Selectors/onlyChild">:only-child</a></td><td width="212" valign="top"><p>如果某个元素是父元素中唯一的子元素，那将会被匹配</p><p>如果父元素中含有其他元素，那将不会被匹配。</p></td><td width="277" valign="top">在 ul 中查找是唯一子元素的 li: <br/>$(“ul li:only-child”)</td></tr></tbody></table>
**1 :nth-child(index/even/odd)**
匹配其父元素下的第N个子或奇偶元素
‘:eq(index)’ 只匹配一个元素，
而这个将为每一个父元素匹配子元素。
:nth-child从1开始的，而:eq()是从0算起的！
**2 :first-child**
匹配其父元素下的第一个子元素
**3 :last-child**
匹配其父元素下的最后一个子元素
**4 :only-child**
如果某个元素是父元素中唯一的子元素，那将会被匹配
容易与“简单过滤选择器”混淆
:first :eq() :last
~~~
<script>
function f1(){
//把全部的li汇合到一起找到第一个
$("li:first").css("color","red"); //一个结果
//first-child匹配其父元素下的第一个子元素
$("li:first-child").css("color","blue"); //两个结果
$("li:last-child").css("color","red");//两个结果
$("li:nth-child(2)").css("background-color","lightblue"); //两个结果
$("li:nth-child(even)").css("background-color","lightblue");
$("li:nth-child(odd)").css("background-color","lightblue");
//找到其父元素只有一个子元素的元素
$("li:only-child").css('color','red');
}
</script>
<body>
<ul>
<li>四</li>
<li>大</li>
<li>家</li>
<li>族</li>
</ul>
<ul>
<li>乔</li>
<li>家</li>
<li>大</li>
<li>院</li>
</ul>
<ul>
<li>老大</li>
</ul>
<input type="button" value="触发" onclick="f1()">
</body>
~~~
**子元素选择器 和 简单过滤选择器使用 区别：**
1.
简单过滤选择器使用
- a) 把全部元素放到一起统一使用
- b) 下标从0开始计算
2.子元素选择器
- a) 每个元素的父元素看成独立的单位进行运算
- b) 下标从1开始计算
jQuery学习之旅 Item1 选择器【一】
最后更新于：2022-04-01 11:32:02
点击"名称"会跳转到此方法的jQuery官方说明文档.
### 1. 基础选择器 Basics
<table cellspacing="1" cellpadding="5" width="767" border="1" style="margin:0px 0px 0px 10px; padding:0px; width:650px; border:1px solid silver; border-collapse:collapse; word-break:break-word; color:rgb(51,51,51); font-family:verdana,Arial,Helvetica,sans-serif; font-size:14px; line-height:25.2000007629395px"><tbody style="margin:0px; padding:0px"><tr style="margin:0px; padding:0px"><td valign="top" width="130" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px; color:rgb(0,0,0)">名称</span></td><td valign="top" width="365" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px; color:rgb(0,0,0)">说明</span></td><td valign="top" width="266" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px; color:rgb(0,0,0)">举例</span></td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="139" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/id#id" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">#id</a></span></td><td valign="top" width="360" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">根据元素Id选择</td><td valign="top" width="264" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">$("divId") 选择ID为divId的元素</td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="146" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/element#element" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">element</a></span></td><td valign="top" width="356" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">根据元素的名称选择,</td><td valign="top" width="262" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">$("a") 选择所有<a>元素</td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="152" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/class#class" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">.class</a></span></td><td valign="top" width="353" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">根据元素的css类选择</td><td valign="top" width="260" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">$(".bgRed") 选择所用CSS类为bgRed的元素</td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="157" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/all" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">*</a></span></td><td valign="top" width="351" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">选择所有元素</td><td valign="top" width="259" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">$("*")选择页面所有元素</td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="160" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/multiple#selector1selector2selectorN" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">selector1, <br style="margin:0px; padding:0px"/>selector2, <br style="margin:0px; padding:0px"/>selectorN</a></span></td><td valign="top" width="349" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容.</td><td valign="top" width="263" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">$("#divId, a, .bgRed")</td></tr></tbody></table>
~~~
function f1(){
//通过【id选择器】获得节点
//$()符号就是jquery的函数，函数执行完毕返回对象
$("#bread").css('color','red');
//【class类别选择器】
$(".milk").css('color','blue');
//【tag标签选择器】
$("h2").css('color','green');
$("p").css('color','gold');
//【通配符选择器*】 ，获得全部节点
$("*").css("color",'blue');
//【联合选择器】
$("#bread,.milk,p").css('background-color','lightblue');
}
</script>
<style type="text/css">
#bread{}
.milk{}
p{}
*{}
#bread,.milk,p {}
</style>
</head>
<body>
<h2>基本选择器</h2>
<div id="bread">bread</div>
<div class="milk">milk</div>
<div>apple</div>
<p>banana</p>
<input type="button" value="触发" onclick="f1()">
</body>
~~~
[学习建议]: 大家暂时记住基础选择器即可, 可以直接跳到下一节"jQuery选择器实验室"进行动手练习, 以后再回来慢慢学习全部的选择器, 或者用到的时候再回来查询.
### 2.层次选择器 Hierarchy
<table cellspacing="1" cellpadding="5" width="774" border="1" style="margin:0px 0px 0px 10px; padding:0px; width:650px; border:1px solid silver; border-collapse:collapse; word-break:break-word; color:rgb(51,51,51); font-family:verdana,Arial,Helvetica,sans-serif; font-size:14px; line-height:25.2000007629395px"><tbody style="margin:0px; padding:0px"><tr style="margin:0px; padding:0px"><td valign="top" width="173" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px; color:rgb(0,0,0)">名称</span></td><td valign="top" width="321" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px; color:rgb(0,0,0)">说明</span></td><td valign="top" width="274" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px; color:rgb(0,0,0)">举例</span></td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="178" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/descendant#ancestordescendant" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">ancestor descendant</a></span></td><td valign="top" width="318" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">使用"form input"的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input.</td><td valign="top" width="273" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">$(".bgRed div") 选择CSS类为bgRed的元素中的所有<div>元素.</td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="181" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/child#parentchild" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">parent > child</a></span></td><td valign="top" width="316" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">选择parent的直接子节点child. child必须包含在parent中并且父类是parent元素.</td><td valign="top" width="272" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">$(".myList>li") 选择CSS类为myList元素中的直接子节点<li>对象.</td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="184" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/next#prevnext" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">prev + next</a></span></td><td valign="top" width="315" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">prev和next是两个同级别的元素. 选中在prev元素后面的next元素.</td><td valign="top" width="272" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">$("#hibiscus+img")选在id为hibiscus元素后面的img对象.</td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="185" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/siblings#prevsiblings" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">prev ~ siblings</a></span></td><td valign="top" width="314" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px; color:rgb(0,0,0)"> </span>选择prev后面的根据siblings过滤的元素<br style="margin:0px; padding:0px"/>注:siblings是过滤器</td><td valign="top" width="274" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">$("#someDiv~[title]")选择id为someDiv的对象后面所有带有title属性的元素</td></tr></tbody></table>
实例：
**2.1 ancestor descendant:父子级关系**
派生选择器
~~~
$(“#bread .milk”)
<div id=bread><input class=milk><spanclass=milk>
<div><p class=milk></div>
</div>
~~~
在指定的父级选择器下边获得全部的派生子级(后代)元素
2.2 parent > child :父子级关系
在给定的父元素下匹配所有子元素.
~~~
$(“#bread >.milk”)
<div id=bread>
<input class=milk>
<spanclass=milk></span>
<div>
<p class=milk></p>
~~~
**2.3 prev + next:兄弟级关系**
匹配紧接在 所有prev 元素后的 next(下一个) 元素
~~~
$(“#bread + .milk”)
<div id=bread>
<span class=milk></span>
</div>
<p class=milk></p>
<spanclass=milk></span>
~~~
**2.4 prev ~ siblings:兄弟级关系**
匹配 prev 元素之后的所有 siblings 元素.
~~~
$(“#bread ~ .milk”)
<span class=milk>
<div id=bread>
<span class=milk></span>
</div>
<p class=milk></p>
<span class=milk></span>
<inputclass=milk />
~~~
~~~
function f1(){
//派生选择器$("sel1 sel2")
$("#bread .milk").css("color","red");
//子元素选择器$("sel1 > sel2")
$("#bread > .milk").css('color','red');
//匹配紧贴在一起的下一个元素
$("#bread + .milk").css("color",'red');
//匹配prev之后所有的兄弟节点
//$("prev ~ sibling")
$("#bread ~ .milk").css("color","red");
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>层次选择器</h2>
<div id="bread">
<input type="text" value="hello" class="milk">
<span class="milk">world</span>
<div>
<span class="milk">pear</span>
</div>
</div>
<p class="milk">this is p tag</p>
<span class="milk">desk</span>
<div id="apple"><span class="milk">第二个span</span></div>
<input type="button" value="触发" onclick="f1()" />
</body>
~~~
### 3.基本过滤器 Basic Filters
<table cellspacing="1" cellpadding="5" width="776" border="1" style="margin:0px 0px 0px 10px; padding:0px; width:650px; border:1px solid silver; border-collapse:collapse; word-break:break-word; color:rgb(51,51,51); font-family:verdana,Arial,Helvetica,sans-serif; font-size:14px; line-height:25.2000007629395px"><tbody style="margin:0px; padding:0px"><tr style="margin:0px; padding:0px"><td valign="top" width="171" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px; color:rgb(0,0,0)">名称</span></td><td valign="top" width="207" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px; color:rgb(0,0,0)">说明</span></td><td valign="top" width="392" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px; color:rgb(0,0,0)">举例</span></td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="175" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/first" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">:first</a></span></td><td valign="top" width="206" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">匹配找到的第一个元素</td><td valign="top" width="390" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">查找表格的第一行:$("tr:first")</td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="178" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/last" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">:last</a></span></td><td valign="top" width="206" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">匹配找到的最后一个元素</td><td valign="top" width="389" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">查找表格的最后一行:$("tr:last")</td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="179" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/not#selector" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">:not(selector)</a></span></td><td valign="top" width="205" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">去除所有与给定选择器匹配的元素</td><td valign="top" width="388" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">查找所有未选中的 input 元素: $("input:not(:checked)")</td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="181" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/even" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">:even</a></span></td><td valign="top" width="205" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">匹配所有索引值为偶数的元素，从 0 开始计数</td><td valign="top" width="387" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">查找表格的1、3、5...行:$("tr:even")</td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="182" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/odd" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">:odd</a></span></td><td valign="top" width="205" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">匹配所有索引值为奇数的元素，从 0 开始计数</td><td valign="top" width="387" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">查找表格的2、4、6行:$("tr:odd")</td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="182" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/eq#index" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">:eq(index)</a></span></td><td valign="top" width="205" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">匹配一个给定索引值的元素 <br style="margin:0px; padding:0px"/>注:index从 0 开始计数</td><td valign="top" width="387" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">查找第二行:$("tr:eq(1)")</td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="182" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/gt#index" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">:gt(index)</a></span></td><td valign="top" width="205" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">匹配所有大于给定索引值的元素 <br style="margin:0px; padding:0px"/>注:index从 0 开始计数</td><td valign="top" width="387" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">查找第二第三行，即索引值是1和2，也就是比0大:$("tr:gt(0)")</td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="182" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/lt#index" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">:lt(index)</a></span></td><td valign="top" width="205" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">选择结果集中索引小于 N 的 elements <br style="margin:0px; padding:0px"/>注:index从 0 开始计数</td><td valign="top" width="387" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">查找第一第二行，即索引值是0和1，也就是比2小:$("tr:lt(2)")</td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="182" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/header" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">:header</a></span></td><td valign="top" width="205" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">选择所有h1,h2,h3一类的header标签.</td><td valign="top" width="387" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">给页面内所有标题加上背景色: $(":header").css("background", "#EEE");</td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="182" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/animated" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">:animated</a></span></td><td valign="top" width="205" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">匹配所有正在执行动画效果的元素</td><td valign="top" width="387" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">只有对不在执行动画效果的元素执行一个动画特效:<p style="margin:10px auto; padding-top:0px; padding-bottom:0px; padding-left:20px">$("#run").click(function(){ <br style="margin:0px; padding:0px"/> $("div:not(:animated)").animate({ left: "+=20" }, 1000); <br style="margin:0px; padding:0px"/>});</p></td></tr></tbody></table>
~~~
function f1(){
$("li").css("color","red"); //获得全部li元素
//过滤选择器
$("li:first").css("color","red"); //把全部li元素的第一个过滤出来
$("li:last").css("color","red"); //把全部li元素的最后一个过滤出来
$("li:odd").css("color","red"); //奇数 li，下标从0开始计算
$("li:even").css("color","red"); //偶数li，下标从0开始计算
$("li:eq(6)").css("color","red"); //过滤指定下标的节点 eq (equal)
//过滤下标大于某个范围的元素
$("li:gt(3)").css("color","red"); //gt : greate than(greate wall)
$("li:lt(4)").css("color","red"); //lt : less than
//过滤器【嵌套】使用
$("li:odd") //奇数li li的下标从0开始
$("li:gt(0):odd").css("color","red") //奇数，(智 [播])
//li:gt(0)元素下标重新从0开始计算，再与odd进行赛选
$("li:gt(2):even").css("color","red"); //”客“ 开始
$("li:gt(3):eq(2)").css("color","red"); //"集"字被过滤出来
$("li:not(#ke)").css("color","red"); //not去除指定的选择器元素
$("li:not(#ke,#yu)").css("color","red"); //not去除指定的选择器元素
//$("*:header").css("color","red");//过滤h1 h2 h3 h4 h5 h6等标题标签
//$("h2")//全部h2
$(".apple:header").css("color","red");//第二个h2
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h2>我是正式标题</h2>
<h2 class="apple">简单过滤选择器</h2>
<ul class="apple">
<li>传</li>
<li>智</li>
<li>播</li>
<li id="ke">客</li>
<li>教</li>
<li id="yu">育</li>
<li>集</li>
<li>团</li>
</ul>
<input type="button" value="触发" onclick="f1()" />
</body>
~~~
### 4. 内容过滤器 Content Filters
| 名称 | 说明 | 举例 |
|-----|-----|-----|
| [:contains(text)](http://docs.jquery.com/Selectors/contains#text) | 匹配包含给定文本的元素 | 查找所有包含 "John" 的 div 元素:$("div:contains('John')") |
| [:empty](http://docs.jquery.com/Selectors/empty) | 匹配所有不包含子元素或者文本的空元素 | 查找所有不包含子元素或者文本的空元素:$("td:empty") |
| [:has(selector)](http://docs.jquery.com/Selectors/has#selector) | 匹配含有选择器所匹配的元素的元素 | 给所有包含 p 元素的 div 元素添加一个 text 类: $("div:has(p)").addClass("test"); |
| [:parent](http://docs.jquery.com/Selectors/parent) | 匹配含有子元素或者文本的元素 | 查找所有含有子元素或者文本的 td 元素:$("td:parent") |
实例：
**4.1 :contains(text)**
用法: $(”div:contains(’John’)”)
匹配包含给定文本的元素
~~~
<div>this is computer</div>
<div>I amJohn</div>
~~~
**4.2 :empty**
用法: $(”div:empty”)
匹配所有不包含子元素或者文本的空元素
~~~
<div>I am John</div>
<div></div>
<div><span></div>
<div> </div>
<div>bread</div>
~~~
**4.3 :has(selector)**
用法: $(”div:has(.milk)”)
匹配含有选择器所匹配的元素的元素
~~~
<div></div>
<div><pclass=”milk”></div>
<div><spanclass=”milk”></div>
~~~
**4.4 :parent**
用法: $(”p:parent”)
匹配含有子元素或者文本的元素(元素必须有后代)
~~~
<p></p>
<p><span></p>
<p>hello</p>
<p> </p>
~~~
### 5.可见性过滤器 Visibility Filters
<table cellspacing="1" cellpadding="5" width="783" border="1" style="margin:0px 0px 0px 10px; padding:0px; width:650px; border:1px solid silver; border-collapse:collapse; word-break:break-word; color:rgb(51,51,51); font-family:verdana,Arial,Helvetica,sans-serif; font-size:14px; line-height:25.2000007629395px"><tbody style="margin:0px; padding:0px"><tr style="margin:0px; padding:0px"><td valign="top" width="233" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px; color:rgb(0,0,0)">名称</span></td><td valign="top" width="235" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px; color:rgb(0,0,0)">说明</span></td><td valign="top" width="309" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px; color:rgb(0,0,0)">举例</span></td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="233" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; padding-left:20px"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/hidden" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">:hidden</a></span></p></td><td valign="top" width="235" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; padding-left:20px">匹配所有的不可见元素</p><p style="margin:10px auto; padding-top:0px; padding-bottom:0px; padding-left:20px">注:在1.3.2版本中, hidden匹配自身或者父类在文档中不占用空间的元素.如果使用CSS visibility属性让其不显示但是占位,则不输入hidden.</p></td><td valign="top" width="309" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">查找所有不可见的 tr 元素:$("tr:hidden")</td></tr><tr style="margin:0px; padding:0px"><td valign="top" width="233" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"><span style="margin:0px; padding:0px"><a target="_blank" href="http://docs.jquery.com/Selectors/visible" style="margin:0px; padding:0px; text-decoration:none; color:rgb(0,0,0); border-bottom-width:1px; border-bottom-style:dotted; border-bottom-color:rgb(51,51,51)">:visible</a></span></td><td valign="top" width="235" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">匹配所有的可见元素</td><td valign="top" width="309" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse">查找所有可见的 tr 元素:$("tr:visible")</td></tr></tbody></table>
元素是隐藏的：
display:none; 隐藏(不会占据物理空间)
< input type=”hidden”>隐藏域
visibility:hidden 隐藏(要占据物理空间)
:hidden 获得隐藏元素(display input type=hidden)有两种情况会起作用
:visible获得可见元素
总结
1.基本选择(id class tag标签 sel1,sel2,sel3联合 )
2. 层次选择器
3. 简单过滤选择器(:first :last :eq(下标) :gt() :lt() :odd :even)
4. 内容过滤选择器(:contains :has :empty :parent)
5. 可见性过滤选择器(:hidden :visible)
前言
最后更新于：2022-04-01 11:32:00
> 原文出处：[你不知道的jQuery](http://blog.csdn.net/column/details/jquery-known.html)
作者：[i10630226](http://blog.csdn.net/i10630226)
**本系列文章经作者授权在看云整理发布，未经作者允许，请勿转载！**
# 你不知道的jQuery
> 本栏目将让你由浅入深，快速领悟jquery的神奇。
学习结构：1.jquery选择器，
2.DOM操作，
3.事件 4.动画，
4.Ajax的应用，
5.插件的应用与编写，
6.源码分析