锐客网

  1. 首页 > 生活百科 > it技术 > >

#yyds干货盘点#--30分钟上手jQuery

IT知识JQuery

胸怀万里世界， 放眼无限未来。这篇文章主要讲述#yyds干货盘点#--30分钟上手jQuery相关的知识，希望能为你提供帮助。
一、jQuery的介绍

  • jQuery是什么
jQuery是一个快速、简洁的javascript框架，是继Prototype之后又一个优秀的javaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化html文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
  • jQuery的版本
目前在市场上, 1.x , 2.x, 3.x 功能的完善在1.x, 2.x的时候是属于删除旧代码,去除对于旧的浏览器兼容代码。3.x的时候增加es的新特性以及调整核心代码的结构
  • jQuery的引入
根本上jquery就是一个写好的js文件,所以想要使用jQuery的语法必须先引入到本地
< script src="http://img.readke.com/220531/200K13192-0.jpg"> < /script>

  • jQuery的基本语法
    $().方法()

  • jQuery对象和dom对象的关系
< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < title> Title< /title> < !--远程导入--> < !--< script src="http://img.readke.com/220531/200K11M8-1.jpg"> < /script> --> < !--本地导入--> < script src="https://www.songbingjia.com/android/jquery3.6.js"> < /script> < /head> < body> < ul class="c1"> < li> 123< /li> < li> 234< /li> < li> 345< /li> < /ul> < script> // $(".c1 li").css("color","red"); console.log($(".c1 li")); //jQuery类型 是dom集合对象[dom1,dom2,...]// 如何将jQury对象转换为Dom对象 console.log($(".c1 li")[1].innerHTML); // 如何将Dom对象转换为jQuery对象; var ele = document.querySelector(".c1 li"); // console.log(ele); // ele.style.color = "red"; $(ele).css("color","orange")// [ele]< /script> < /body> < /html>

二、jQuery的选择器 2.1 直接查找
  • 基本选择器
/* #id# id选择符 element# 元素选择符 .class# claw43ss选择符 selector1, selector2, selectorN# 同时获取多个元素的选择符 $("#id") $(".class") $("element") $(".class,p,div") */

  • 组合选择器
/* ancestor descendant// 包含选择符 parent > child// 父子选择符 prev + next// 下一个兄弟选择符 prev ~ siblings// 兄弟选择符 $(".outer div")//outer 选择outer下所有div标签 $(".outer> div")//outer 选择outer下儿子是div的标签 $(".outer+div")//outer 的所有兄弟标签 $(".outer~div")//outer 的下一个兄弟标签 */

  • 属性选择器
/* [attribute=value]// 获取拥有指定数据attribute,并且置为value的元素 $([type="checked"]) $([class*="xxx"]) */// 3、属性选择器例子 // $(".links [href]").css("color","red"); // $(".links [href$=png]").css("color","red"); // $("[type=text]").css("border","1px solid red");

  • 表单选择器
/* $("[type=text]") 表单选择器还可以简写成$(":text")注意只适用于input标签: $("input:checked") 同样适用表单的以下属性 :enabled :disabled :checked :selected */

  • 筛选器
/*// 筛选器 :first//从已经获取的元素集合中提取第一个元素 :even//从已经获取的元素集合中提取下标为偶数的元素 :odd//从已经获取的元素集合中提取下标为奇数的元素 :eq(index)//从已经获取的元素集合中提取指定下标index对应的元素 :gt(index)//从已经获取的元素集合中提取下标大于index对应的元素 :last//从已经获取的元素集合中提取最后一个元素 :lt(index)//从已经获取的元素集合中提取下标小于index对应的元素 :first-child//从已经获取的所有元素中提取他们的第一个子元素 :last-child//从已经获取的所有元素中提取他们的最后一个子元素 :nth-child//从已经获取的所有元素中提取他们的指定下标的子元素 // 筛选器方法 $().first()//从已经获取的元素集合中提取第一个元素 $().last()//从已经获取的元素集合中提取最后一个元素 $().eq()//从已经获取的元素集合中提取指定下标index对应的元素*/例子： // $(".c1 li").css("color","red"); // $(".c1 li:first").css("color","red"); // $(".c1 li:last").css("color","red"); // $(".c1 li:eq(3)").css("color","red"); // $(".c1 li:gt(1)").css("color","red"); // $(".c1 li:lt(4)").css("color","red"); // $(".c1 li:even").css("color","red"); // $(".c1 li:odd").css("color","red"); var index = 2; // $(".c1 li:eq(index)").css("color","red"); $(".c1 li").eq(index).css("color", "red"); $(".c1 li").first().css("color", "red"); $(".c1 li").last().css("color", "red");

2.2 导航查找
/* // 查找子代标签： $("div").children(".test") // 查找儿子标签 $("div").find(".test")//查找所有后代标签 // 向下查找兄弟标签 $(".test").next() // 下一个兄弟标签 $(".test").nextAll()//下边所有的兄弟标签 $(".test").nextUntil("#i1") // 查找.test所有的兄弟标签，直到#i1为止 // 向上查找兄弟标签 $("div").prev() $("div").prevAll() $("div").prevUntil() // 查找所有兄弟标签 $("div").siblings()// 查找父标签： $(".test").parent() $(".test").parents() $(".test").parentUntil() */

三、jQuery的事件绑定
/* 三种用法: 1. on 和 off // 绑定事件 $().on("事件名",匿名函数)// 解绑事件,给指定元素解除事件的绑定 $().off("事件名")2. 直接通过事件名来进行调用 $().事件名(匿名函数)3. 组合事件,模拟事件 $().ready(匿名函数)// 入口函数 $(document).ready(function ()//等整个文档执行完了在执行read事件里边的代码); $().hover(mouseover, mouseout)// 是onmouseover和 onmouseout的组合 $(".c1").hover(mouserover,mouserout); function mouserover() $(this).css("background-color","#6f5499")function mouserout() $(this).css("background-color","#2b542c")$().trigger(事件名)// 用于让js自动触发指定元素身上已经绑定的事件，模拟用户操作*/

四、jQuery的操作标签 4.1 文本操作
/* $("选择符").html()// 读取指定元素的内容,如果$()函数获取了有多个元素,则提取第一个元素 $("选择符").html(内容) // 修改内容,如果$()函数获取了多个元素, 则批量修改内容$("选择符").text()// 效果同上,但是获取的内容是纯文本,不包含html代码 $("选择符").text(内容)// 效果同上,但是修改的内容中如果有html文本,在直接转成实体字符,而不是html代码 */

4.2 value操作
$().val()

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < title> Title< /title> < script src="https://www.songbingjia.com/android/jquery3.6.js"> < /script> < script> $(function () $("#i1").blur(function () // 获取jquery对象的value属性值 console.log(this.value); console.log($(this).val()); // 设置value属性值 $(this).val("hello world")); $("#i3").change(function () console.log(this.value); console.log($(this).val()); $(this).val("guangdong"); ); console.log($("#i2").val()); console.log($("#i2").val("hello pig!")))< /script> < /head> < body> < input type="text" id="i1"> < selectid="i3"> < option value="https://www.songbingjia.com/android/hebei"> 河北省< /option> < option value="https://www.songbingjia.com/android/hubei"> 湖北省< /option> < option value="https://www.songbingjia.com/android/guangdong"> 广东省< /option> < /select> < p> < textarea name="" id="i2" cols="30" rows="10"> 123< /textarea> < /p> < /body> < /html>

4.3 属性操作
/* //读取属性值 $("选择符").attr("属性名"); // 获取非表单元素的属性值,只会提取第一个元素的属性值 $("选择符").prop("属性名"); // 表单元素的属性,只会提取第一个元素的属性值//操作属性 $("选择符").attr("属性名","属性值"); // 修改非表单元素的属性值,如果元素有多个,则全部修改 $("选择符").prop("属性名","属性值"); // 修改表单元素的属性值,如果元素有多个,则全部修改$("选择符").attr(属性名1:属性值1,属性名2:属性值2,.....) $("选择符").prop(属性名1:属性值1,属性名2:属性值2,.....) */

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < title> Title< /title> < script src="https://www.songbingjia.com/android/jquery3.6.js"> < /script> < /head> < body> < button class="select_all"> 全选< /button> < button class="cancel"> 取消< /button> < button class="reverse"> 反选< /button> < hr> < table border="1"> < tr> < td> 选择< /td> < td> 姓名< /td> < td> 年龄< /td> < /tr> < tr> < td> < input type="checkbox"> < /td> < td> 张三< /td> < td> 23< /td> < /tr> < tr> < td> < input type="checkbox"> < /td> < td> 李四< /td> < td> 23< /td> < /tr> < tr> < td> < input type="checkbox"> < /td> < td> 王五< /td> < td> 23< /td> < /tr> < /table> < script> $(".select_all").click(function () $("table input:checkbox").prop("checked",true); ); $(".cancel").click(function () $("table input:checkbox").prop("checked",false); ); $(".reverse").click(function () $("table input:checkbox").each(function () $(this).prop("checked",!$(this).prop("checked")))); < /script> < /body> < /html>

4.4 补充jQuery的each的循环
// 类方法，循环一个类 vararr = [11,22,33,444,555,666]$.each(arr,function (i,j)//会将arr数组的索引赋值给i,元素赋值给j console.log(i,j)) //实力方法，循环一个具体的标签对象 < ul> < li> 111< /li> < li> 2222< /li> < li> 33333< /li> < /ul> $("ul li").each(function () console.log(this) )

4.5 css样式操作
/* 获取样式 $().css("样式属性"); // 获取元素的指定样式属性的值,如果有多个元素,只得到第一个元素的值操作样式 $().css("样式属性","样式值").css("样式属性","样式值"); $().css("样式属性1":"样式值1","样式属性2":"样式值2",....)$().css("样式属性":function()// 其他代码操作 return "样式值"; ); */

4.5 class属性操作
$().addClass("class1class2 ... ...")// 给获取到的所有元素添加指定class样式 $().removeClass() // 给获取到的所有元素删除指定class样式 $().toggleClass() // 给获取到的所有元素进行判断,如果拥有指定class样式的则删除,如果没有指定样式则添加

4.6 节点操作
/* //创建一个jquery标签对象 $("< p> ")//内部插入$("").append(content|fn)//追加到最后 $("p").append("< b> Hello< /b> "); $("").appendTo(content)//$("p").appendTo("div"); $("").prepend(content|fn)// 添加到最前面$("p").prepend("< b> Hello< /b> "); $("").prependTo(content)// $("p").prependTo("#foo"); //外部插入$("").after(content|fn)//添加到某个标签的后边("p").after("< b> Hello< /b> "); $("").before(content|fn)//添加到某个标签的前面$("p").before("< b> Hello< /b> "); $("").insertAfter(content)// $("p").insertAfter("#foo"); $("").insertBefore(content)// $("p").insertBefore("#foo"); //替换 $("").replaceWith(content|fn) // $("p").replaceWith("< b> Paragraph. < /b> "); //删除$("").empty() $("").remove([expr])//复制 $("").clone([Even[,deepEven]]) */

4.7 事件委派【#yyds干货盘点#--30分钟上手jQuery】所谓事件委派就是在向一个父标签创建子标签的时候，新创建的标签会没有原有子标签的事件，这时候就需要通过事件委派将事件绑定到父标签上
标签克隆案例：< div class="outer"> < div class="item"> < input type="button" value="https://www.songbingjia.com/android/+" class="add"> < input type="text"> < /div> < /div> < script src="http://img.readke.com/220531/200K13192-0.jpg"> < /script> < script> $(".add").click(function () var $clone=$(this).parent().clone() $clone.children(".add").attr("value":"-","class":"rem") $(".outer").append($clone); ); $(.rem).click(function () $(this).parent().remove() ); // 事件委派 $(".outer").on("click",".item .rem",function () $(this).parent().remove() )< /script>

4.8 jQuery的css尺寸
/* $("").height([val|fn]) //获取盒模型内容的高度 $("").width([val|fn])//获取盒模型内容的宽度 $("").innerHeight()//获取盒模型的内边距和内容的高度 $("").innerWidth()//获取盒模型的内边距和内容的宽度 $("").outerHeight(true]) 加上true//获取整个模型的高度 $("").outerWidth(true)//获取整个模型的宽度 */

五、css位置
/* $("").offset([coordinates])// 相对窗口偏移。 $("").position()// 相对于已经定位的父标签偏移 $("").scrollTop([val])// 获取匹配元素相对滚动条顶部的位置。加参数是设置位置 */#例子：// offset:相对于窗口偏移position：相对于已经定位的父标签偏移量var $offset = $(".c2").offset(); var $position = $(".c2").position(); console.log("$offset top:",$offset.top); console.log("$offset left:",$offset.left); console.log("$position top:",$position.top); console.log("$position left:",$position.left); // 设置偏移量offset$(".c2").click(function () $(this).offset(top:500,left:500))

  • 例子：返回顶部
< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < title> Title< /title> < style> * margin: 0; .content height: 2000px; background-color: lightgray; .return_top width: 120px; height: 50px; background-color: lightseagreen; color: white; text-align: center; line-height: 50px; position: fixed; bottom: 20px; right: 20px; .hide display: none; < /style> < script src="https://www.songbingjia.com/android/jquery.js"> < /script> < /head> < body> < div class="content"> < h3> 文章...< /h3> < /div> < div class="return_top hide"> 返回顶部< /div> < script> console.log($(window).scrollTop()); $(".return_top").click(function () $(window).scrollTop(0)); $(window).scroll(function () console.log($(this).scrollTop()); var v =$(this).scrollTop(); if (v > 100) $(".return_top").removeClass("hide"); else $(".return_top").addClass("hide"); ) < /script> < /body> < /html>

六、jQuery的动画效果
/* //基本 show([s,[e],[fn]])显示元素 hide([s,[e],[fn]])隐藏元素//滑动 slideDown([s],[e],[fn])向下滑动 slideUp([s,[e],[fn]])向上滑动//淡入淡出 fadeIn([s],[e],[fn])淡入 fadeOut([s],[e],[fn])淡出 fadeTo([[s],opacity,[e],[fn]])让元素的透明度调整到指定数值//自定义 animate(p,[s],[e],[fn])自定义动画 stop([c],[j])暂停上一个动画效果,开始当前触发的动画效果*/

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < title> Title< /title> < style> .c1 width: 250px; height: 250px; background-color: black; .hide display: none; < /style> < script src="https://www.songbingjia.com/android/jquery.js"> < /script> < /head> < body> < p> < button class="show01"> 显示< /button> < button class="hide01"> 隐藏< /button> < /p> < p> < button class="show02"> 显示< /button> < button class="hide02"> 隐藏< /button> < /p> < p> < button class="show03"> 显示< /button> < button class="hide03"> 隐藏< /button> < /p> < p> < button class="show04"> 显示< /button> < button class="hide04"> 隐藏< /button> < /p> < hr> < div class="c1"> < /div> < script> // 自己实现的隐藏与显示$(".show01").click(function () $(".c1").removeClass("hide") ); $(".hide01").click(function () $(".c1").addClass("hide") ); // (1) show与hide方法$(".show02").click(function () $(".c1").show(1000,function () alert("显示成功") ); ); $(".hide02").click(function () $(".c1").hide(1000,function () alert("隐藏成功") )); // (2) slideDown与slideUp$(".show03").click(function () $(".c1").slideDown(1000,function () alert("显示成功") ); ); $(".hide03").click(function () $(".c1").slideUp(1000,function () alert("隐藏成功") )); // (3) fadeIn与fadeOut$(".show04").click(function () $(".c1").fadeIn(1000,function () alert("显示成功") ); ); $(".hide04").click(function () $(".c1").fadeOut(1000,function () alert("隐藏成功") )); < /script> < /body> < /html>

  • 自定义动画效果
$(".box").animate(动画最终效果,动画完成的时间,动画完成以后的回调函数)

$(".animate").click(function () $(".c1").animate( "border-radius":"50%", "top":340, "left":200 ,1000,function () $(".c1").animate( "border-radius":"0", "top":240, "left":120 ,1000,function () $(".animate").trigger("click") ) ))

七、jQuery的扩展机制
  • jQuery.extend(object)
扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。 在jQuery命名空间上增加两个函数:< script> jQuery.extend( min: function(a, b)return a < b ? a : b; , max: function(a, b)return a > b ? a : b; ); $.min(2,3); // => 2 $.max(4,5); // => 5 < /script>

  • jQuery.fn.extend(object)
扩展 jQuery 元素集来提供新的方法（通常用来制作插件）增加两个插件方法：< body> < input type="checkbox"> < input type="checkbox"> < input type="checkbox"> < script src="https://www.songbingjia.com/android/jquery.min.js"> < /script> < script> jQuery.fn.extend( check:function() $(this).attr("checked",true); , uncheck: function() $(this).attr("checked",false); ); $(":checkbox").check() //调用自定义的checked方法 < /script> < /body>


    推荐阅读


    上一篇：#yyds干货盘点# Next.js通配符子域

    下一篇：#yyds干货盘点#iOS 15 中的前端开发快捷方式