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代码片段