JQuery基础
Posted why_not_try
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery基础相关的知识，希望对你有一定的参考价值。
学习jQuery的时候，很快过了一遍，发现好多知识点不清晰。看来还是要写出来加深印象，平时多练习！
jQuery是一个javascript函数库，轻量级，“写得少，做的多！”，它有以下功能：
- html元素选取
- HTML元素操作
- CSS操作
- HTML事件函数
- JavaScript特效和动画
- HTML DOM遍历和修改
- AJAX
- Utilities（实用工具）
很多大公司都在使用jQuery:Google,Microsoft,IBM等。jQuery兼容所有主流浏览器，包括IE6（不失为解决兼容性的一种方法）。
注意：
jQuery 2以上版本不支持IE6,7,8浏览器；
<!-- [if lt IE 9]>
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<![end if] -->
<!-- [if gte IE 9]>
<script type="text/javascript" src="jquery-2.0.0.js"></script>
<![endif] -->
IE版本小于9，引入jquery1.9.0版本；IE版本大于等于9，引入jquery2.0版本。
(lt(<):less than; gt(>):great than; gte(>=):great than equal; ne(不等于):not equal)
第一部分：安装：
从 jquery.com 中下载，然后用script标签引入即可。
jQuery有两个版本：
- production version:用于生产、实际的网络，代码已被精简和压缩；
- development version：用于开发测试，可阅读源码。
两种方式引入jQuery文件：
下载：
1 <script type="text/javascript" src="jquery-2.0.0.js"></script>
不下载，通过CDN（内容分发网络）引用它。百度、新浪、谷歌和微软的服务器都存有 jQuery。
示例百度CDN:
1 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
注意：
1.国内站点不推荐Google CDN,访问不稳定。
2.CDN:Content Delivery Netword，内容分发网络。
基本思路：尽可能的避免互联网上有可能影响网络传输速率和稳定性的因素。使得用户可以就近取得所需内容，提高网站访问速度。
使用大公司CDN好处：
- 许多用户在访问其它站点时，已经从百度、新浪、谷歌和微软加载过jQuery。当用户访问我的站点时，会从缓存中加载jQuery，这样可以有效减少加载时间！
- 大多数CDN都可以确保用户请求文件时，会就近服务器进行响应，从而提高加载速率。
第二部分：jQuery语法：
1.jQuery语法是通过选取HTML元素，然后对选取的元素进行某些操作。
基础语法：$(selector).action()
- 美元符号$定义jQuery
- 选择器（selector）:“查询”和“查找”HTML元素
- action()：对元素进行操作
实例（结尾处有分号）：
// 隐藏当前元素 $(this).hide(); // 隐藏所有<p>元素 $(\'p\').hide(); // 隐藏所有class="test"的<p>元素 $(\'p.test\').hide(); // 隐藏所有id=test的元素 $(\'#test\').hide();
2.文档就绪事件：
$(document).ready(function(){
//开始书写jQuery代码
})；
这是为了防止文档在加载完成前执行jQuery代码，即在DOM加载完成后才可以对DOM进行操作。
注意：简写：
$(function(){
//开始书写jQuery代码
};
第三部分：jQuery选择器：
- 元素选择器：$("p")
- id选择器：$("#test")
- 类选择器：$(".test")
- $("*")：选择所有元素
- $(this)：选取当前html元素
- $("p.test")：选取class为test的<p>元素
- $("p:first")：选取第一个<p>元素
- $("ul li:first")：选取第一个<ul>元素中的第一个<li>元素
- $("ul li:first-child")：选取每个<ul>元素下的第一个<li>元素
- $("[href]")：选取所有带有href的元素
- $("a[target=\'_blank\']")：选取所有taget=_blank的<a>元素
- $("a[target!=\'_blank\']")：选取所有target不等于_blank的<a>的元素
- $(":button")：选取所有type=button的button和input元素
- $("tr :even")：选取所有偶数位置的<tr>元素
- $("tr :odd")：选取所有奇数位置的<tr>元素
第四部分：jQuery事件：
1.事件：页面对不同访问者作出的响应。事件处理程序：当HTML中发生某些事件调用的方法。常见DOM事件：
- 鼠标事件：click（单击元素）,dbclick（双击元素）,mouseenter(鼠标指针移入元素),mouseleave（鼠标指针移出元素）事件；
- 键盘事件：keypress（键被按下）,keydown（键按下的过程）,keyup（键松开）,事件；ps:keypress不会触发所有的键（如alt,ctrl,esc,shift）,请使用keydown()方法检测
- 表单事件：submit（提交表单时）,change（元素值（适用于表单字段）发生改变时）,focus（元素获得焦点）,blur（元素失去焦点）事件；
- 文档/窗口事件：load（元素已加载触发，在jQuery1.8中废除。ajax中也有load()方法）,resize（调整浏览器窗口大小时触发）,scroll（滚动指定的元素）,unload（jQuery1.8中废弃）事件。
另：
hover()：模拟光标悬停事件。当鼠标指针移动到元素上时，会触发第一个函数（mouseenter）；当鼠标指针移出这个元素时，会触发第二个函数（mouseleave）。
1 $("#test").hover( 2 function(){ 3 //鼠标指针移入某元素 4 }, 5 function(){ 6 //鼠标指针移出该元素 7 } 8 );
第五部分：jQuery效果
1.隐藏和显示：
$(selector).hide(speed,callback); $(selector).show(speed,callback); $(selector).toggle(speed,callback);
可选的speed规定隐藏或显示的速度，取值可以为"slow","fast"或毫秒；
可选的callback是隐藏或显示后执行的函数名称。
toggle可以切换show和hide状态。
2.淡入淡出：
$(selector).fadeIn(speed,callback); $(selector).fadeOut(speed,callback); $(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
fadeIn()：隐藏的元素淡入；fadeOut()：显示的元素淡出；fadeToggle()：切换fadeIn()和fadeOut()状态；fadeTo()：渐变为不透明度（opacity值在0~1之间）。
speed,callback参数含义与上述“显示与隐藏”一致。
3.滑动：
$(selector).slideDown(speed,callback); $(selector).slideUp(speed,callback); $(selector).slideToggle(speed,callback);
slideDown()：对隐藏的元素向下滑动；slideUp()：对显示的元素向上滑动收起；slideToggle()：切换两种状态改变。
4.动画：jQuery animate()方法用于创建自定义动画。语法：
$(selector).animate({params},speed,callback);
params：必选参数，形成动画的css属性；
speed：可选参数；
callback：可选参数。
ps:params支持多个属性，中间用","隔开，同时属性值（不加引号时）用驼峰标记法：如：margin-left改为marginLeft；属性值加引号按照css写法。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello</title>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</head>
<body>
<!-- //margin-left,color,font-size -->
<div class="test" style="border:1px solid orange;width: 200px;height: 200px;">hello jQuery</div>
<button>click me</button>
<script type="text/javascript">
$(document).ready(function(){
$(\'button\').click(function(){
$(\'.test\').animate({\'margin-left\':\'10px\',color:\'blue\',fontSize : \'30px\'});
});
});
</script>
</body>
</html>
ps1：color属性值10px要添加引号，如\'10px\'；
ps2：上述代码中color属性设置无效，因为色彩动画不包括在核心jQuery库中。如需使用：需从 jquery.com 下载 颜色动画 插件。
默认：jQuery animate()采用队列来操作效果。队列：先进先出。
5.停止动画：
stop()方法用于停止动画效果，适用于所有jQuery效果函数，包括滑动，淡入淡出，自定义动画。
$(selector).stop(stopAll,goToEnd);
可选的stopAll：是否清除动画队列。默认false：仅停止当前活动动画，允许插入的动画向后执行；
可选的goToEnd：是否立即完成当前动画。默认false。
因而，默认的stop()会清除当前元素上的动画。（不带参数）
6.jQuery链(chaining)
链：顾名思义，锁链，即一环套一环。
jQuery中将动作/方法链接在一起，因此，在相同元素上，我们可以在一条语句上运行多个jQuery方法。
如：
$(\'p\').css(\'font-size\':\'10px\').show().hide();
第六部分：jQuery HTML
1.获取内容和属性
-- 获取内容：
text()：设置或获取所选元素的文本内容
html()：设置或获取所选元素的内容(包括HTML标记)
val()：设置或获取表单字段的值
-- 获取属性：
attr()：设置或获取属性值
ps1：以上函数不传入参数时是获取；传入参数时是设置。
ps2：以上函数均有最后一个参数设置为回调函数。回调函数有两个值：当前选中元素下标，旧值。
2.添加元素
- append()：在被选元素的末尾插入内容
- preappend()：在被选元素的开头插入内容
- after()：在被选元素之后插入内容
- before()：在被选元素之前插入内容
ps：append/preappend：选择元素内部嵌入；before/after：选择元素外部追加。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello</title>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</head>
<body>
<!-- //margin-left,color,font-size -->
<div class="test" style="border:1px solid orange;width: 200px;height: 200px;">hello jQuery</div>
<button>click me</button>
<script type="text/javascript">
// $(document).ready(function(){
// $(\'button\').click(function(){
// $(\'.test\').animate({\'margin-left\':\'10px\',color:\'blue\',fontSize : \'30px\'});
// });
// });
$(\'.test\').append(\'<span>hello tomorrow</span>\');
$(\'.test\').after(\'<span>hello yesterday</span>\');
</script>
</body>
</html>
未追加前效果：
追加后效果：
插入后：hello tomorrow是使用append()：插入到div里面了，并与div里面的元素内容相联合；而hello yesterday是使用after()：插入待div外面，即div元素的后面。
3.jQuery 删除元素：
remove()：删除被选元素及子元素。ps：remove()可接受一个参数，对被删元素进行过滤。参数是jQuery选择器的语法。例如:$(\'p\').remove(\'.test1\');
empty()：从被选元素中删除子元素（被选元素没有被删除，相当于留了一个外壳）
4.获取/设置css类:
addClass()：向被选元素中添加一个或多个类；
removeClass()：向被选元素中删除一个或多个类；
toggleClass()：切换addClass()和removeClass()；
css()：设置或获取css属性。（有参数设置值；无参数获取值）；css有参数：css("propertyname":"value")，建议属性名和属性值都加上引号；如果属性名不加引号，要使用驼峰标记法：如margin-left变为marginLeft。
5.jQuery尺寸
- width()/height()：设置或获取当前元素的宽度/高度(不包括内边距，边框，外边距)
- innerWidth()/innerHeight()：设置或获取当前元素的宽度/高度(包括内边距)
- outerWidth()/outerHeight()：设置或获取宽度/高度(包括内边距和边框)；如果设置参数为true，则包括内边距，边框，外边距
第七部分：jQuery遍历
因为DOM其实就是树状结构，因此相关算法中树的概念可以很容易的引申过来。
1.遍历--祖先（父元素以上都是祖先元素）：
- parent()：返回被选元素的直接父元素
- parents()：返回被选元素的所有祖先元素，它会一直遍历到文档根元素（<html>）
- parentsUntil()：返回介于两个指定元素间的所有祖先元素。如：$(\'span\').parentsUntil(\'div\')：代表span与div之间所有的祖先元素。
2.遍历--后代（子元素一下都是后代元素）：
- children()：返回被选元素的直接子元素
- find()：返回被选元素的所有子元素（一直遍历到最后一个子元素）
3.遍历--同胞（siblings；兄弟元素，具有相同的父元素）
- siblings()：返回被选元素的所有同胞（兄弟）元素；可选参数可以用来进行过滤：$(\'h2\').siblings(\'p\')：返回与h2具有相同父元素的p元素
- next()：返回被选元素的下一个同胞元素（只返回一个元素）
- nextAll()：返回被选元素后面的同胞元素
- nextUntil()：介于两个参数之间的同胞元素
- prev()；prevAll()；prevUntil()：与上述类似，只不过遍历方向是向上走。
4.遍历--过滤
- first()：返回被选元素的第一个元素
- last()：返回被选元素的最后一个元素
- eq()：返回被选元素中带有指定索引号的元素；索引号从0开始；如：$(\'p\').eq(1)：返回第二个<p>元素
- filter()：如：$(\'p\').filter(\'.test\')：返回带有class="test"的<p>元素
- not()：返回不符合标准的所有元素，与filter()执行结果相反。
第八部分：jQuery AJAX
了解AJAX：Ajax之路。
其实jQuery Ajax就是将ajax实现代码封装，同时兼顾了不同浏览器的Ajax实现。
1.jQuery load()：从服务器加载数据，并将返回的数据放入被选元素中。
$(selector).load(url,data,callback);
- url：必须，希望加载的URL；ps：可以将url选择器添加到url中；
- data：可选参数，与请求一起发送的字符串键值对集合；
- callback：可选，load()完成后执行的回调函数；可设置的参数：
responseTxt：包含调用成功的结果内容；
statusTxt：包含调用的状态；"success"或"error"
xhr：XMLHttpResponse对象
2.get()与post()方法
$.get()：
$.get(url,callback);
url：必选；callback：可选；callback第一个参数存放请求页面的内容，第二个参数存放请求的状态。
如：
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\\n状态: " + status);
});
});
$.post()：
$.post(url,data,callback);
url：必须；其它可选参数。
$.post(\'test.php\',
{
name:\'a\',
url:\'www.b.com\'
}
function (data,status){
alert("数据 \\n"+data+"\\n 状态: "+status);
}
);
第九部分：jQuery noConflict()
jQuery使用$作为jQuery的简写。所以存在一个问题：如果其它js框架使用了$符号，或者书写的js代码中定义了$作为变量或者函数名，这时候就会产生冲突。
释放$，使用jQuery替代：
$.noConflict();
jQuery(document).ready(function(){
//some code
})
$.noConflict()返回的引用，可以存入变量。如：
var jq=$.noConflict();
jq(document).ready(function(){
//some code
})
当然，关于jQuery还有许多插件，比如验证表单，验证密码等等。
详情可参考菜鸟教程
以上是关于JQuery基础的主要内容，如果未能解决你的问题，请参考以下文章
Visual Studio 2012-2019的130多个jQuery代码片段。
markdown 在WordPress中使用jQuery代码片段