脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScript编程开发基础教程之Jquery简介，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 JavaScript编程开发基础教程之jquery简介。jQuery 是一个JavaScript函数库。支持HTML元素选取和操作、CSS操作、JS特效与动画、DOM处理、Ajax等。 导入jQuery就像导入一段外部js代码一样简单，可以使用MS或GOOGLE的CDN进行加载。
1 jQuery基础 jQuery采用了CSS选择器的语法来选择HTML元素，基础语法为$(selector).action() 示例 $(document).ready(function(){ //当文档加载完毕后执行... }); 选择器使用了CSS的各种选择器，如元素选择器、类选择器、ID选择器、属性选择器。
在选择到元素后设置CSS只需要使用css()方法即可。
jQuery专门为事件处理进行了封装，只需要调用选择器上定义的事件方法即可。示例 ${"#id"}.click(function() {...})
除此以处，jQuery定义了一系列方法对浏览器进行抽象，对各种常用操作进行封装。
2 jQuery效果 2.1 隐藏与显示 hide(sPEed,callback) 隐藏一个元素，speed为slow,fast或毫秒 show(speed,callback) 显示一个元素 toggle(speed,callack) 让元素在隐藏与显示之间切换
2.2 淡入淡出 fadein(speed,callback) 设置隐藏元素淡入 fadeOut(speed,callback) 设置显示元素淡出 fadeToggle(speed,callback) 设置元素自动切换淡入淡出 fadeTo(speed,opacITy,callback) 设置元素渐变为给定的不透明度，值在0-1间
2.3 滑入滑出 slideDown() slideUp() slideToggle()
2.4 动画 aniMATE({params},speed,callback) 设置动画，参数设置形成动画的CSS属性，其中可以设置多个属性。 jQuery提供针对动画的队列功能，对于编写的多个animate调用，jQuery会创建包含这些方法调用的内容队列，然后逐一执行。 示例1: p.animate({left:'100px'},"slow"); 示例2： $("button").click(function(){ $("p").animate({ height:'+=150px', width:'+=150px' }); });
stop(all,toEnd) 用于停止相应的变化。all表示清除动画队列，默认为FALSE，toEnd规定是否完成当前动画，默认为False。

2.5 杂项 如果想在变化完成后执行操作，则应该定义callback函数，而不能在执行动作之后，接着执行那个操作，这种情况下，有可能会先执行变化后的动作，而不是先执行变化。
如果对一个元素要执行多个操作，jQuery支持链式语法，可以节约每都查找元素的开销。示例： $("#p1").css("color","red") .slideUp(2000) .slideDown(2000);
3 jQuery操作HTML 3.1 获取与设置元素相关文本与属性 text() 获取或设置选择元素的文本，会将其中的html标签删除，当无参数时为获取，有参数时为设置 html() 获取或设置选择元素的文本，可以包含html标签 val() 获取或设置表单字段的值 attr(key) 获取指定属性的值。可以一次设置多个值。放到一个json对象中即可。 上面4个函数，也可以传递一个函数来进行新值的设定，回调函数有两个参数，选定元素在当前选择集合中的索引下标，以及旧值。新值通过函数返回值返回。示例： $("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });
3.2 添加 append(str) 在被选中元素结尾插入内容，块内插入。 after(str) 在被选中元素后插入内容，块外插入。 PRepend(str) 在被选中元素头前插入内容，块内插入。 before(str) 在被选中元素前插入内容，块外插入。 示例：$("p").append("Some appended text.");
3.3 删除 remove() 删除被选元素及子元素，允许接收一个选择器，进行过滤删除 empty() 删除被选元素的子元素 示例：$("p").remove(".italic");
3.4 操作类 addClass() 向选中元素添加类，可多个 removeClass() 从选中元素删除类，可多个 toggleClass() 对被中元素进行添加/删除类的切换操作
$("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });
3.5 css()方法 css(key) 获取选择元素的指定css属性 css(key,value) 设置选择元素指定的css属性，可多个 $("p").css({"background-color":"yellow","font-size":"200%"});

3.6 尺寸 width() 设置或返回元素的宽度，不包括内边距、边框和外边距 height() innerHeight() 返回元素的宽度，包含内边距 innerWidth() outerWidth() 返回元素的宽度，包含内边距和边框 outerHeight() outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距） outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）
4 jQuery遍历DOM 最常用的遍历是利用DOM的树形结构来进行。 parent() 返回元素的直接父元素 parents() 返回元素的所有父辈元素，参数可以指定元素的标签名以过滤 parentsUntil(tag) 返回元素的父辈元素，同时是tag的后辈的元素 示例： $(document).ready(function(){ $("span").parents("ul"); });
children() 返回元素的所有后代元素，参数也可以指定过滤器 find(tag) 查找元素的所有后代元素，参数也可以指定过滤器 示例： $(document).ready(function(){ $("p").children("p.1"); });
siblings() 返回元素的所有兄弟元素，参数可使用过滤器 next() 返回元素的下一个兄弟元素 nextAll() 返回元素的所有后续兄弟元素 nextUntil() prev() prevAll() prevUntil()
First() 返回选中元素集中第1个 last() 返回选中元素集中第-1个 eq(n) 返回选中元素中索引位置为n的元素 filter() 对选中元素进行过滤，返回匹配的元素 $(document).ready(function(){ $("p").filter(".intro"); }); not() filter的反义方法，返回不匹配的元素
5 jQuery for Ajax 5.1 基本ajax VAR XMlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject(";microsoft.XMLHTTP"); }
xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","test1.txt",true); xmlhttp.send();
准备状态有5个值，分别为 0:请求未初始化，1：服务器已经连接 2：请求已接收 3：请求处理中 4：请求已经完成响应就绪
5.2 使用jQuery的Ajax load(url,data,callback) 用于异步加载数据，可设置回调函数，callback(resp,status,xhr) $.get(url,callback) 用于异步发送get请求，回调函数：callback(data,status) $.post(url,data,callback) 用于异步发送post请求，回调函数：callback(data,status) 示例： $("button").click(function(){ $.post("demo_test_post.asp", { name:"Donald Duck", city:"Duckburg" }, function(data,status){ alert("Data: " + data + "/nStatus: " + status); }); });
6 杂项 $变量表示jquery对象，如果遇到命名冲突，noConflict()方法用于释放对$符号的占用。 但依然可以使用jQuery全名来使用jQuery库，同时可以创建自己的简写。如var jq = $.noConflict();
7 jQuery参考手册 https://api.jquery.COM/ https://www.w3school.com.cn/jquery/jquery_reference.asp

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScript编程开发基础教程之Jquery简介全部内容，希望文章能够帮你解决javascript代码实例教程-JavaScript编程开发基础教程之Jquery简介所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。