本文共 6278 字，大约阅读时间需要 20 分钟。
点击上方“程序IT圈”，选择“置顶公众号”
每天早晨IT圈的推文，进来留言打卡
背景
在现在就业的过程中，会运用JQuery是你的加分项，那么什么是JQuery，嗯，jquery是JavaScript的函数库，是一种轻量级的JavaScript库，写得少，做的多，导致jQuery有很多技术人员在使用它做项目。
jQuery库包含：
HTML元素的获取，HTML元素操作，css的操作，HTML事件函数，JavaScript特效和动画，HTML dom的遍历和修改，ajax，utilities。
jQuery 安装：
下载jQuery库，下载地址
production version
用于实际的网站中development version
用于测试和开发jQuery库是一个JavaScript文件
JavaScript是HTML5以及所有现代浏览器中的默认脚本语言。
从CDN中载入jQuery
// 百度 // 谷歌 // 微软
jQuery目录
jQuery语法
基础语法：
美元符号定义 jQuery
选择符() "查询"和"查找" HTML 元素
jQuery 的方法执行对元素的操作
jQuery代码
$(document).ready(function(){ //这里是jQuery代码 }); $(function(){ // 这里是jQuery代码 }); $( function() {} ); DOM加载完成后才可以对DOM进行操作，如果文档没有完全加载之前运行函数，会导致操作失败。
jQuery 选择器
元素选择器，#id选择器，.class选择器
$("p:first") 选取第一个 元素 $("ul li:first") 选取第一个
- 元素的第一个
- 元素 $("ul li:first-child") 选取每个
- 元素的第一个
- 元素 $("[href]") 选取带有 href 属性的元素 $("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 元素
jQuery 事件
jQuery事件处理方法是jQuery中的核心函数。
jQuery名称冲突$符号
jQuery使用名为noConflict()方法来解决该问题
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件 $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
jQuery 隐藏/显示
hide()和show()方法来隐藏和显示HTML元素
$("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); $(selector).hide(speed,callback); $(selector).show(speed,callback); $("button").click(function(){ $("p").hide(1000); }); toggle()方法来切换hide()和show()方法
显示被隐藏的元素，隐藏已显示的元素
$("button").click(function(){ $("p").toggle(); }); $(selector).toggle(speed,callback); jQuery 淡入淡出
fadeIn()
jQuery fadeIn()用于淡入已隐藏的元素fadeOut()
jQuery fadeOut() 方法用于淡出可见元素fadeToggle()
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换fadeTo()
jQuery fadeTo() 方法允许渐变为给定的不透明度$(selector).fadeIn(speed,callback); $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); $(selector).fadeOut(speed,callback) $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); $(selector).fadeToggle(speed,callback); $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); $(selector).fadeTo(speed,opacity,callback); $("button").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7); }); jQuery 滑动
slideDown()
用于向下滑动元素slideUp()
用于向上滑动元素slideToggle()
可以在 slideDown() 与 slideUp() 方法之间进行切换$(selector).slideDown(speed,callback); $("#flip").click(function(){ $("#panel").slideDown(); }); $(selector).slideUp(speed,callback); $("#flip").click(function(){ $("#panel").slideUp(); }); $(selector).slideToggle(speed,callback); $("#flip").click(function(){ $("#panel").slideToggle(); }); jQuery 动画
animate()方法用于创建自定义动画
$(selector).animate({params},speed,callback); $("button").click(function(){ $("div").animate({left:'250px'}); }); $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); $("button").click(function(){ $("div").animate({ height:'toggle' }); }); $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); jQuery 停止动画
Stop()方法适用于所有jQuery效果函数
$(selector).stop(stopAll,goToEnd); $("#stop").click(function(){ $("#panel").stop(); }); jQuery Callback函数
$("p").hide(1000,function(){ alert("The paragraph is now hidden"); }); jQuery 链
许在一条语句中运行多个jQuery方法
$("#p1").css("color","pink").slideUp(2000).slideDown(2000); jQuery 获取和jQuery 设置
text()--设置或返回所选元素的文本内容
html()--设置或返回元素的内容（包括HTML标记）
val()--设置或返回表单字段的值
jQuery 添加元素
append()--在被选元素的结尾插入内容
prepend()--在被选元素的开头插入内容
after()--在被选元素之后插入内容
before()--在被选元素之前插入内容
jQuery 删除元素
remove()
删除被选元素（及其子元素）也可以接受一个参数，允许对被删除元素进行过滤empty()
从被选元素中删除子元素jQuery CSS
addClass()--向被选元素添加一个或多个类
removeClass()--从被选元素删除一个或多个类toggleClass()--对被选元素进行添加、删除类的切换操作
css()--设置或返回样式属性jQuery 尺寸
width()--设置或返回元素的宽度（不包括内边距、边框或外边距）
height()--设置或返回元素的高度（不包括内边距、边框或外边框）innerWidth()--返回元素的宽度（包括内边距）
innerHeight()--返回元素的高度（包括内边距）outerWidth()--返回元素的宽度（包括内边距和边框）
outHeight()--返回元素的高度（包括内边距和边框）jQuery 遍历
jQuery 祖先
parent()
返回被选元素的直接父元素只会向上一级对DOM数进行遍历parents()
返回被选元素的所有祖先元素所有祖先parentsUntil()
返回介于两个给定元素之间的所有祖先元素jQuery 后代
children()
返回被选元素的所有直接子元素find()
返回被选元素的后代元素jQuery 同胞
siblings()
返回被选元素的所有同胞元素$("h2").siblings(); next()
返回被选元素的下一个同胞元素nextAll()
返回被选元素的所有跟随的同胞元素nextUntil()
返回介于两个给定参数之间的所有跟随的同胞元素prev() prevAll() prevUntil()
返回前面的同胞元素jQuery 过滤
first()
返回被选元素的首个元素last()
回被选元素的最后一个元素eq()
返回被选元素中带有指定索引号的元素索引号从0开始，因此首个元素的索引号是0而不是1Filter()方法 Not()方法
不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回Not()方法返回不匹配标准的所有元素jQuery AJAX
AJAX是与服务器交换数据的技术
在不重载全部页面的情况下，实现了对部分网页的更新AJAX = 异步 JavaScript 和 XML
Load()方法
$(selector).load(URL,data,callback); $("#div1").load("demo_test.txt"); $("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("外部内容加载成功！"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); }); $.get(URL,callback); $("button").click(function(){ $.get("demo_test.asp",function(data,status){ alert("数据: " + data + "\n状态: " + status); }); }); $.post(URL,data,callback); $("button").click(function(){ $.post("demo_test_post.asp", { name:"", url:"http://www..com" }, function(data,status){ alert("数据: " + data + "\状态: " + status); }); }); jQuery noConflict()方法
$.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery 仍在运行"); }); }); var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery 仍在运行"); }); }); $.noConflict(); jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("jQuery 仍在运行"); }); }); 如果你喜欢，欢迎转发出去，让更多的同学可以看到这篇文章吧~
点个"在看"，再走吧转载地址：https://cxydev.blog.csdn.net/article/details/96795010 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
