jQuery
发布日期:2022-02-08 04:21:00 浏览次数:2 分类:技术文章

本文共 18528 字,大约阅读时间需要 61 分钟。

一、jQuery的下载方式

1、可以去官方网站下载,然后放到入库里,通过script引入的方式来使用。

2、简单的方式:
npm i jquery@版本号 //兼容版
npm i jquery //最新版

我的放在这儿了:  F:\js-exercise\node_modules\jquery ,然后用script引入: ""

二、jQuery的创建

1、先说说通过DOM方式创建的CSS样式,然后再看jQuery方式,作一下对比。

var div;init();function init() {
div = document.createElement("div"); div.style.width = "100px"; div.style.height = "100px"; div.style.backgroundColor = "red"; div.addEventListener("mouseover", mouseHandler); div.addEventListener("mouseout", mouseHandler); div.addEventListener("click", clickHandler); document.body.appendChild(div);}function clickHandler(e) {
div.style.width = "200px"; div.style.height = "200px";}function mouseHandler(e) {
if (e.type === "mouseover") {
div.style.backgroundColor = "blue"; } else if (e.type === "mouseout") {
div.style.backgroundColor = "red"; }}

2、通过jQuery方式,发现大量使用匿名函数,而且还使用点语法" . " 、" $ " 。

$("
").width(100).height(100).css("backgroundColor","red").appendTo("body").hover(function(){
$(this).css("backgroundColor","blue");},function(){
$(this).css("backgroundColor","red");}).click(function(){
$(this).width(200).height(200);})

3、连缀法,点 " . " 语法的使用,以对象为例,来看下是怎么使用的。

var obj={
a:function(){
console.log("aaa"); return this; //返回到该对象obj,就能使用点语法了 }, b:function(){
console.log("bbb"); return this; }, c:function(){
console.log("ccc"); return this; }}// obj.a(); //对象里面,obj的点语法一般是这样用的// obj.b();// obj.c();obj.a().b().c(); //现在就可以连用点语法了

4、再看看$符号的使用,作为变量,作为函数名。

(1)$特殊符号作为变量:	var $=2; //打印显示结果2(2)$特殊符号作为函数名:	function jQuery(){
console.log("aaa"); } var $=jQuery; //所以运行$,就相当于写了个jQuery函数并执行了 $(); //是可以打印出aaa的或者直接: function $() {
console.log("jquery"); } $(); //结果是jquery , 函数能执行(3)此时 $===jQuery ,看以下此时$的类型: console.log(typeof $,typeof jQuery,$===jQuery); //function function true

三、jQuery的简单选择器

1、先来简单看一下选择器的用法。

// $("div") //就可以把div都选中$("div").text("abc");//等同于给每一个div里面增加textContent值为abc$("div").html("超链接");//就相当于给每一个div放入一个超链接$("div").css({
width:50, height:50, backgroundColor: "tomato", margin:10});//相当于给每一个div设置css样式的宽高和背景色及margin值

2、获取

console.log($("div"));//选择器获取了所有div标签,这个列表就叫做jQuery对象,jQuery对象不能使用任何DOM的方法// $("div").addEventListener()//错误的如果希望使用DOM的方法,必须将jQuery转换为DOM对象://将jQuery列表中某个一个DOM获取出来,以下两种方法都行console.log($("div")[0]);console.log($("div").get(0));//将jQuery对象转换为DOM数组console.log(Array.from($("div")));  //(4) [div, div, div, div]将DOM元素转换为jQuery:var div=document.createElement("div");console.log($(div));  //$(DOM) 就可以将DOM元素转换为jQuery对象

看一下相关结果:

console.log($(“div”)) 获取的是一个jQuery对象,jQuery对象不能使用任何DOM的方法。
在这里插入图片描述
3、最常用选择器

console.log($("div"));//标签选择器console.log($(".div1"));//class选择器console.log($("#div0"));//id选择器$("div,span,a");//群组选择器$("div span");//后代选择器(包含选择器,选择所有span子元素标签)$("div>span");//子代选择器(只选择div下的子元素span,至于div子元素的子元素里面是不是有span,并不在意)$(".div1~span");//兄弟选择器(该class为div1的标签,其下面的兄弟span都被选中,上面的不选)$(".div1+span");//相邻兄弟选择器(该class为div1的标签,只有其下紧密相联的第一个span被选中,没有就不选)$("*");//通配符,所有的$(".div1>*");//class是div1的元素的所有子元素$(".div1 *");//class是div1的元素的所有后代元素$(".div1+*");//class是div1的元素的任何相邻元素console.log($(".div1").length);//class是div1这个元素的子元素数量$("div.div2");//class是div2的div$("div .div2");//div的后代中所有class是div2的元素使用jQuery方法比选择器更快:$(".div1").find("span");  //等同  $(".div1 span");$(".div1").children("span");//等同于  $(".div1>span");$(".div1").children();//等同于$(".div1>*");$(".div1").next("span");//等同于$(".div1+span");$(".div1").nextAll("span");//等同于$(".div1~span");$(".div1").nextUntil("span");//class是div1的元素向下选择到span元素之前的所有任何兄弟元素,不包含该元素$(".div1").prev("span");//向上选择相邻的上一个span元素$(".div1").prevAll("span");//向上选择所有span元素$(".div1").prevUntil("span");//向上选择到span元素的所有兄弟元素$(".div1").siblings();//可以选择.div1元素的向上和向下的所有兄弟元素,不包含该元素

四、jQuery属性选择器

这是用到的div标签元素,以他为例:

0
1
2
2.1
3
3.1
4
4.1
5
5.1
6
6.1
6.2

1、先来看下CSS的属性选择器,与jQuery属性选择器做个对比。

/* 以标签div示例 */div[property]{
/* 选中属性名为property的全部div */ width: 30px; height: 30px; background: cadetblue; display: inline-block; /*转成内联块,可以横向排列*/}/* 以下所有属性值,双引号可加可不加 */div[property=aaa]{
/* 选中属性值为aaa的div */ background: yellowgreen;}/* 以下^ $符号的使用有点像正则中的开头结束 */div[property^="b"]{
/* 属性值以b开头的的div */ background-color: violet;}div[property$="c"]{
/* 属性值以c结尾的div */ background-color: tomato;}div[property|=dd]{
/* | 的作用:如果值为 ab,或是ab后紧跟一个"-",都满足条件 */ background-color: yellow;}div:not([property="aaa"]){
/* not 伪类选择器 */ /* div中 不是property="aaa"的*/ color: white;}div[property~="eee"]{
/* 属性值必须是eee或者eee后面跟有空格 */ background-color: brown;}div[property*="f"]{
/* 属性值里存在f字符的div */ background-color: burlywood;}/* 复合写法 */div[property*="f"][class="div_fff"]{
/* 且 ;所有条件皆满足才可 */ color: chartreuse;}

在这里插入图片描述

2、再看一下用jQuery怎么写:

// jQuery中css样式写法// 首先要引入这个jQuery.js文件// 其实就是把css属性选择器拿进来,除了not伪类选择器的那个,我把上面的翻译了下来$("[property]").css({
width: 30, height: "30px", background: "cadetblue", display: "inline-block"});$("[property=aaa]").css({
background: "yellowgreen"})$("[property^=b]").css({
backgroundColor: "violet"})$("[property$=c]").css("backgroundColor","tomato");$("[property|=dd]").css("backgroundColor","yellow");$("div:not([property=aaa])").css("color","white");$("[property~=eee]").css("backgroundColor","brown");$("[property*=f]").css("backgroundColor","burlywood");$("[property*=f][class=div_fff]").css("color","chartreuse");

在这里插入图片描述

能够发现,jQuery的属性选择器的结果与css属性选择器的结果并无二致。

五、jQuery过滤器

以ul、li、a为例。

  • 1
  • 2
  • 3
  • 4
1、first、last、nth-child()、type…
// 以ul、li、a为例,先设置下横向排列以及间距$("li").css({
display: "inline-block", margin: 10}) $("li:first").css("backgroundColor","red");//全部li中的第一个// 等同于// $("li").first().css("backgroundColor","red");$("li:first-child").css("backgroundColor","blue");//li作为父容器当中第一个子元素时$("a:first-of-type").css("backgroundColor","orange");//a作为父容器当中的第一个a标签类型的子元素时$("li:last").css("backgroundColor","lightgreen");//全部li中的最后一个// 等同于// $("li").last().css("backgroundColor","lightgreen");$("li:last-child").css("backgroundColor","yellow");//li作为父容器当中最后一个子元素时$("a:last-of-type").css("backgroundColor","teal");//a作为父容器当中的最后一个a标签类型的子元素时$("li:nth-child(2)").css("backgroundColor","violet");//当前元素为父容器的第2个子元素 2不是索引值,从1开始$("a:nth-of-type(2)").css("backgroundColor","turquoise");//寻找当前元素的父容器中第二个是a类型的元素, 2不是索引值

在这里插入图片描述

2、元素奇数偶数的选中方法:
$("li:nth-child(2n)").css("backgroundColor","red");//偶数 元素$("a:nth-of-type(2n)").css("backgroundColor","orange");//偶数 元素类型// $("li:nth-child(even)").css("backgroundColor","red")//偶数 元素// $("a:nth-of-type(even)").css("backgroundColor","orange")//偶数// $("a:odd").css("backgroundColor","orange");//奇数  这是按照索引值设置 从0开始 把所有a放在一个列表中,奇偶获取  元素类型$("li:nth-child(2n-1)").css("backgroundColor","blue");//奇数 元素$("a:nth-of-type(2n-1)").css("backgroundColor","yellowgreen");//奇数 元素类型// $("li:nth-child(odd)").css("backgroundColor","blue");//奇数 元素// $("a:nth-of-type(odd)").css("backgroundColor","yellowgreen");//奇数 元素类型// $("a:even").css("backgroundColor","blue");//偶数  这是按照索引值设置 从0开始 把所有a放在一个列表中,奇偶获取  元素类型最后各一项有些特殊,还是自己动手练练比较好。

在这里插入图片描述

这里有一个小栗子: 。

3、not、eq、gt、lt
111
222
333
444
555
// $("div:not(.ab)").css("background","red");//不是什么内容// 等同于$("div").not(".ab").css("background","red");$("div:eq(1)").css("color","yellow");//是按照索引开始从第0个开始的// 等同于// $("div").eq(1).css("color","yellow");$("div:gt(1)").css("color","blue");//大于1$("div:lt(1)").css("color","violet");//小于1

在这里插入图片描述

4、header、animated、focus 用的不多
$(":header");//选择h1-h6标签$(':animated');//选择所有动画元素$(":focus");//获取焦距的元素  一般针对表单元素和超链接
5、子元素、父元素
919
333
444
ofo
$("div").css({
width:30, height:30, display:"inline-block"})$("div:empty").css("background","tomato");//没有子元素或者没有内容的空元素$("div:has(.ofo)").css("background","pink");//判断div元素中是否后代元素中有class是ofo的元素,返回被选中的元素// 等同于//$("div").has("#ofo").css("background","pink");//这里用的是ID选择器,但作用元素都是这个div$(".ab:parent").css("background","yellow");//class是ab的元素如果有子元素或者内容的被选中$("div:contains(1)").css("color","blue");//判断div的后代中是否包含文本内容1以上这几项的结果是页面上的几个方块的颜色字体展示。console.log($(".ofo").parent());//选择父容器console.log($(".ofo").parents());//选择所有父容器console.log($(".ofo").parentsUntil("html"));//选择所有父容器到html之前的这几项的结果是控制台的显示内容,这样就好理解的多了。

在这里插入图片描述

6、隐藏、显示
console.log($(":hidden"));//隐藏  // display:none这是隐藏的; visibility: hidden不属于隐藏; visibility: visibie是显示console.log($(":visibie"));//显示的内容
7、判断对错,结果为true、false;到目前为止,只有这两项返回值是true、false,其他都是返回被选中的元素。
console.log($("div").is(".ab")); //判断div中有没有class是ab的元素  返回值true或者falseconsole.log($("div").hasClass("ab")); //判断div中有没有class是ab的元素  返回值true或者false区别:is不单可以判断class,还可以判断其他选择器;而hasClass只能判断class
8、截取
console.log($("div").slice(2,4)); //将所有选中元素的列表截取第几个到第几个,不包含尾部,跟数组中的slice用法相同

六、text html value each

1、text

功能:填充文本。根据不同的选择器,不同的情况,填充文本。

<1> 直接填充文本$("p").text("the first").css("color","tomato");<2> 可以写匿名函数,有两个参数,index是从0开始的索引,item是标签中的内容$("div").text(function(index,item){
// return "div-"+item; // 根据内容有关 return "div-"+index; // 根据索引有关})<3> 获取console.log($("div").text());//获取元素内容,会将所有元素的textContent结果连在一起返回一个字符串

在这里插入图片描述

2、html

功能:可以往标签里填充另外的标签元素(innerHTML内容)。

<1> 设置innerHTML内容$(".three").html("超链接"); <2> 也可以给每一个div设置不同的内容$("div").html(function(index,item){
return `${
item}
`;//这样就可以根据div的呢内容设置超链接})<3> 下面方法获取的html结果只有第一个console.log($("div").html()); //在选择的列表中返回第一个元素的html的内容

在这里插入图片描述

value
<1> 可以给多个表单来写$("input").val("aaa");<2> 如果希望不一样$("input").val(function(index){
return index;});<3> 在选择列表中返回第一个元素的value值console.log($("input").val());

在这里插入图片描述

each

功能:遍历,可以遍历数组、对象、jQuery对象

<1> 遍历数组var arr=["a","b"];$.each(arr,function(index,item){
console.log(item);})<2> 遍历对象var data={
a:1,b:2}$.each(data,function(prop,value){
console.log(prop,value);})<3> 遍历jQuery的对象$.each($("div"),function(index,item){
console.log(item);//就是每一个元素内容})// 而元素自身就带一个each,自身可以遍历$("div").each(function(index,item){
console.log(index,item);})

在这里插入图片描述

综合小应用

要求实现:把网址一次添加进去,然后横向排列。

在上面先创建好6个div。var list = [    {
site: "网易", url: "http://www.163.com" }, {
site: "腾讯", url: "http://www.qq.com" }, {
site: "京东", url: "http://www.jd.com" }, {
site: "淘宝", url: "http://www.taobao.com" }, {
site: "CSDN", url: "http://www.csdn.com" }, {
site: "搜狐", url: "http://www.sohu.com" }];//第一种方法$("div").html(function (index) {
return `${
list[index].site}
`}).css("display","inline-block"); //第二种方法$.each(list, function (index, item) {
$("div").eq(index).html(`${
item.site}
`).css("display","inline-block"); })

在这里插入图片描述

七、attr data prop

attr 是给标签属性设置 。

prop 是给jQuery对象的所有DOM元素设置属性,不设置标签属性 。
data 是给所有jQuery对象的引用增加属性,并不设置DOM属性,亦不设置标签属性 。

attr

功能:操作属性。

<1> 设置一样的属性$("p").attr("property", "aaa"); //给所有属性设置值$(".abc").attr("property", "bbb");//给class为abc的p标签设置自定义属性property值为bbb//属性值得获取,下面这种方法只能获取第一个元素的这个属性值;//不可以获取多个属性值,只能获取某一个属性值console.log($("p").attr("property"));<2> 设置一个属性的多个不同值$("div").attr("div000", function (index, item) {
return index + 1;//index从0开始,现在是从1开始})<3> 以对象形式设置多个元素的多个相同属性值$("span").attr({
span001: 1, span002: 2})<4> 设置多个属性的不同属性值$("a").attr({
a001: function (index, item) {
return index + 1; }, a002: function (index, item) {
return index + 2; }})<5> 删除attr$("span").removeAttr("span001");//删除某个属性

在这里插入图片描述

prop

功能:给每一个DOM元素都设置了对象属性,不设置标签属性。

<1> 设置对象属性$("div").prop("ab","3");//尽管没有div有ab这个属性,照样可以设置console.log($("div").prop("ab"));//而且还可以得到这个属性  结果是3<2> 错误的方法$("div").ab=3;//增加一个console.log($("div").ab);//undefind// 但是已打印就undefined了,为什么会这样?// 因为如果直接给jQuery对象设置对象属性时,jQuery再重新选择时,这个对象和上一次选择的对象引用不同。// jQuery对象一般是若干个,每次使用选择器获取的jQuery对象的引用都不同。// 

console.log($("p").class);//undefind<3> 下面的设置方法是可以的var divs=$("div");divs.ab=30;console.log(divs.ab);//这就可以打印出来,因为对象引用一样 结果30$("div").prop("ab",300);//prop是给每一个DOM元素都设置了对象属性 // 所以用prop来存储属性ab等于300,这样就可以打印出console.log($("div").prop("ab"));//获取第一个jQuery对象的DOM元素的对象属性 结果300

在这里插入图片描述

data

功能:是给每个jQuery对象的引用增加属性,并不设置DOM属性,也不设置标签属性 。这样我们可以随时获取到这个属性了。

$("div").data("ab","3");//给jQuery引用对象增加了属性ab,没有给DOM增加属性// 获取一下看看console.log($("div").data("ab"));//也能打印出3,有点类似于prop,担又不一样console.log($(".div0").data("ab")); //给jQuery的引用关系都增加了属性// 这样可以避免冲突,比如说:$("input").data("value",300) //这样跟DOM属性名冲突时,不会改变DOM的,而会存储同样一个jQuery对象引用属性console.log($("input").data("value"));// 注意:多选框时,checkBox或者radio不能使用attr设置checked,必须使用prop设置checked $("[type=checkbox]").prop("checked",true);

在这里插入图片描述

jQuery中的css样式设置

1、样式设置,通过.css()
// 行内样式 $("div").css("color", "red");// 不同div单个style样式设置$("div").css("color", function (index) {
if (index === 0) return "red"; if (index === 1) return "green"; return "blue";})// 写多个样式$("div").css({
width: "50px", height: 50, backgroundColor: "tomato"})// 不同div多个style样式设置$("div").css({
width: function (index) {
return 200-(index + 1)*50; //返回不同的宽度 }, height:function(index){
return 200-(index+1)*50; }, backgroundColor: function (index) {
if (index === 0) return "tomato"; if (index === 1) return "yellowgreen"; return "teal"; }})//获取 $("div").css()console.log($("div").css("width"));//获取列表第一个元素的widthconsole.log($("div").css(["width","height"])) ;//获取列表第一个元素的宽高,数组式写法,以对象返回//除了获取行内样式,也可以获取css计算后样式console.log($("div").css("backgroundColor"));var div=document.querySelector("div");console.log(getComputedStyle(div).backgroundColor);//计算后样式

在这里插入图片描述

2、class属性的增加删除
$("div").addClass("div0 div1") //增加class属性$("div").removeClass("div0") //删除class属性
3、toggleClass 切换样式

toggleClass 切换样式 只能用于操作交互,鼠标点击,飘过啥的.

.div0{
width:50px; height: 50px; color: blue; background-color: red;}.div1{
width: 100px; height: 100px; background-color: gold; /* border: 1px solid #000; */}
$("div").addClass("div0").click(function () {
$(this).toggleClass("div1"); //把DOM元素变成jQuery元素,再点一次就切换回DOM了 往返切换 点击切换 开关切换 // 效果是:点击div,从样式.div0变成.div1;再点一下,又变回.div0的样式 $(this).toggleClass("div1", true); // 只可以切换成jQuery元素,不能切换回去 // 效果是:只能从样式.div0变成样式.div1 $(this).toggleClass("div1", false); //不能切换 // 效果是:不管你怎么点,div始终是.div0的样式})
4、直接设置样式,不必通过.css()
<1> 高度height()与宽度width()用法等同,下面只演示width的://可以直接设置div的宽度$("div").width("50px");//数值、字符串都行$("div").width(50);//可以设置不同的宽度$("div").width(function(index){
return (index+1)*50;})// 获取宽度console.log($("div").width());<2> innerWidth、outerWidthconsole.log($("div").innerWidth()) //width+padding的值$("div").innerWidth(100)//会重新自动设置这个宽度,并且会将100-padding后再设置console.log($("div").innerWidth()) //width+padding的值console.log($("div").outerWidth()) //width+padding+border$("div").outerWidth(100) //设置时,也会自动减去border//如果设置了参数true,则只能获取而不能设置console.log($("div").outerWidth(true)) //占位宽度 width+padding+border+marign
5、定位 元素偏移方法
.div0{
width: 100px; height: 100px; background-color: tomato; position: absolute; left: 100px; top: 100px;}.div1{
width:50px; height: 50px; background-color: gold; }
<1> 用css样式直接设置,不过这种设置出来的位置不能与offset设置出来的同时存在,毕竟这只是旁门左道,算不得正统,offset才是唯一可以设置定位位置的王。如果,把position去掉,只写left、top,是不能设置的。$(".div0").css({
position:"absolute", left:30, top:80});console.log($("div").offset());//获取 {top: 30, left: 80}<2> 只有offset可以设置 “定位位置” ;position只能用来获取,不能设置值$(".div1").offset({
left:100,top:100});console.log($(".div1").offset());//获取 {top: 100, left: 100}console.log($(".div1").position()) //获取 {top: 100, left: 100}不过offset与position还是有区别的,获取的结果不一样。offset相对于页面左上角的位置,而position定位时相对于父容器。var div=document.querySelector(".div0");console.log(div.getBoundingClientRect());//相对视口console.log(div.offsetLeft);//结果是100console.log($(".div1").position().left)//定位时相对于父容器console.log($(".div1").offset())//相对于页面左上角的位置<3> 可以设置窗口的滚动条位置$(document).scrollTop(30);//针对窗口设置滚动条位置console.log($(window).scrollTop());//同样能获取滚动条位置

在这里插入图片描述

6、事件
$(".div").on("click",clickHandler);function clickHandler(e){
$(".div").off("click",clickHandler);}

jQuery与DOM

1、DOM元素的创建&添加
body里先手动创建一个div:
<1> DOM元素的创建、添加var div = $("
");//创建DOM元素$("body").append(div);// 等同于var div = document.createElement("div");document.body.appendChild(div);// 创建简单的方法$("body").append("
");//针对body;这种append的结果,如果没有特别强调的,必然是调用这个方法的对象$("
").appendTo("body").css({
width: 50, height: 50, backgroundColor: "red"});//也会返回一个对象,但此时的css是针对div标签的了append 父容器添加子元素 父容器.append(子元素)appendTo 子元素向父元素里添加 子元素.appendTo(父容器)主动性不同。<2> DOM元素的插入// 将子元素插入在父元素的最前面(第一位)// 给body的前面插入$("body").prepend("
");//插入到最前面了$("
").prependTo("body");//也会插入到body最前面// 插入到某元素的兄弟节点后$(".div1").after("
");$("
").insertAfter(".div1");// 插入到某元素的兄弟节点前$(".div1").before("
");$("
").insertBefore(".div1");

在这里插入图片描述

2、包裹节点wrap
$("span").wrap("
");//所有的span外包了一层div//所有的span外包了一层a标签let arr=["http://www.qq.com","http://www.taobao.com","http://www.jd.com","http://www.163.com"]$("span").wrap(function(index,item){
return ``; //这样就可以给不同的span添加不同的超链接});// 去掉包裹$("span").unwrap();//删除父容器,取消包裹// 把所有东西包裹在一起$("span").wrapAll("
");//把所有的元素包裹在一个div中// 在里层包裹,将该标签里面的内容包裹$("span").wrapInner("");

在这里插入图片描述

克隆clone

jQuery里的克隆都是深复制,没有浅复制。

$("div").clone(true).appendTo("body"); //true意为是否复制事件

在这里插入图片描述

clone方法得到的结果是被克隆的元素,然后之后的所有操作都是针对被克隆出的元素 。clone(true)里的参数意为是否复制事件,为true赋值,否则不复制。

$("
").appendTo("body").css({
width:50, height:50, backgroundColor:"red"}).on("click",function(){
$(this).css({
backgroundColor:"green" })}).clone(false).appendTo("body");// }).clone(true).appendTo("body");

没有复制事件时,怎么点击也不会改变克隆出的元素,说明没有复制事件。

在这里插入图片描述

删除节点&事件

$(".div1").remove(); //删除节点及事件

$(".div1").detach(); //删除节点,但不删除事件
$(".div1").empty(); //清空该元素的所有与子元素或内容

举个小栗子:(自己试一下)

var divs=$("
").appendTo("body").css({
width:50, height:50, backgroundColor:"red"}).on("click",function(){
$(this).css({
backgroundColor:"green" }) // remove删除元素,并且删除该元素的事件 // $(this).remove(); // detach 删除元素,但是不删除事件,下一次将这个元素重新放在页面上时,元素仍然有事件 $(this).detach(); $("").appendTo("body").on("click",function(){
divs.appendTo("body"); }) // $(this).empty();//清空该元素的所有子元素或者内容})

在这里插入图片描述

替换

举个例子:用span替换掉div1

$("").replaceAll(".div1");// 新的来替换旧的$(".div1").replaceWith("");// 旧的被替换成新的

jQuery事件机制、动画、插件、通信

转载地址:https://blog.csdn.net/weixin_43297321/article/details/104290550 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:js 对象深复制
下一篇:啊,万恶的this

发表评论

最新留言

路过,博主的博客真漂亮。。
[***.116.15.85]2024年03月26日 11时40分51秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

python基础装饰器_Python基础 装饰器及练习 2019-04-21
python导出csv不带引号的句子_不带双引号写入CSV文件 2019-04-21
python爬虫代码模板_Python:学习Python爬虫的第一天 2019-04-21
springboot获取原生js请求_springboot跳转原生html 2019-04-21
java buffer nio_Java NIO之Buffer(缓冲区)入门 2019-04-21
android java加密_android 和java平台通用的AES加密解密 2019-04-21
java导出类_java导出excel工具类 2019-04-21
java学习手册下载_Java学习手册 2019-04-21
axios delete有请求体吗_关于axios请求——delete方法 2019-04-21
java 自助更改密码 api_搭建ldap自助修改密码系统--Self Service Password 2019-04-21
php继承exten,stylus中文文档 » 继承(@extend) » 张鑫旭-鑫空间-鑫生活 2019-04-21
mysql函数大全 pdf,MySQL函数大全 2019-04-21
php 常用文件系统函数,php 文件系统函数整理介绍 2019-04-21
android pm.java,java – AM / PM的Android DateFormat因设备而异 2019-04-21
oracle存储过程调用sql文件,oracle - 在SQL Developer中运行存储过程? 2019-04-21
oracle同时报604和12507,V$SES_OPTIMIZER_ENV 查不到刚修改的隐含参数, 2019-04-21
zblog的php更换域名,zblogphp更换域名后,原zblog里使用了固定域名,登录不进去怎么办... 2019-04-21
oracle dnfs 配置,Source of Oracle参数解析(dnfs_batch_size) - django-\/\/ i K | 2019-04-21
oracle所需的环境,转:面对一个全新的oracle环境,首先应该了解什么? 2019-04-21
linux 小数四则运行,shell四则运算(整数及浮点数)的方法介绍 2019-04-21