jQuery个人总结

Dreamer.He

于 2021-10-05 23:20:08 发布

阅读量1.3k

点赞数 5

分类专栏： Web前端文章标签： jquery javascript

本文链接：https://blog.csdn.net/qq_43406976/article/details/120607461

版权

Web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.查看jquery版本

 console.log(jQuery.fn.jquery)
  console.log(jQuery.prototype.jquery)
  console.log($.fn.jquery)
  console.log($.prototype.jquery)

引入多个js文件：$ 是后引入的文件中的

  console.log($.fn.jquery)

多库共存：

$.noConflict() // 后引入的jquery文件把 $符号 的控制权给释放了
  var _$ = $.noConflict()
  ( function($){
    // 在这个自执行文件中可以继续使用 $
  }(_$) )

2.插件：jquery插件库：https://www.jq22.com/

常用插件：颜色插件、省市区联动插件、jQueryUI
自定义插件：
给jquery添加方法的两种方式：

$.method = fn 静态方法
$.fn.method = fn 实例方法

增加一个静态方法：
  (function($){
    $.add = function(a,b){
      return a+b
    }
  }(jquery));

  $.add(1,2)

给jquery的原型上添加方法：
  (function($){
    $.fn.bgColor = function(yanse){
      <!-- this是调用这个bgColor方法的jquery对象 -->
      this.css('backgroundColor',yanse)

      <!-- 返回调用这个方法的jquery本身 -->
      return false
    }
  }(jquery));

3. 使用jquery

1.引入： <script src="jquery.js"></script>
2.写入口函数：$(document).ready(function(){...})
3.找到要操作的元素和选择器进行操作：添加属性、方法、样式等

jquery入口函数的两种写法：

 $(document).ready(function(){
    ...
  })

  $(function(){
    ...
  })

4.jQuery与js

jQuery：是封装了很多方法的js库，学习jquery，即学习jquery封装的方法：调用参数、返回值、方法…

jQuery的核心特性：
1.具有独特的链式语法和短小清晰的多功能接口
2.具有高效灵活的css选择器，且可对css选择器进行扩展
3.拥有便携的插件扩展机制和丰富的插件
4.jquery兼容各种主流浏览器

js与jQuery：
原生的js：
1.不能添加多个入口文件(window.onload),如果添加多个入口文件，后面的会把前面的覆盖掉
2.原生js的api名字太长，不易记
3.原生js有时候会出现代码冗余
4.原生js有些属性和方法，有浏览器兼容问题
5.原生js容错率较低，即前边的代码出现问题，后边的代码也会不能执行
jquery：
1.可以有多个入口文件
2.jquery的api名字容易记住
3.jquery代码简洁
4.jquery解决了浏览器兼容问题
5.容错率较高，即前面的代码出现问题，后边的代码不受影响

jquery入口函数和window.onload入口函数的区别：
1.window.onload入口函数不能写多个；jquery的入口函数可以有多个
2.执行时机：jquery的入口函数要快于window.onload
jquery的入口函数要等待页面上的dom树加载完毕后执行
window.onload要等页面上的所有资源（dom树，外部css，js链接，图片等）都加载完毕后执行

$(function(){
  ...
})

window.onload=function(){
  ...
}

jquery文件结构：是一个自执行函数；引入一个js文件，会执行这个js文件中的代码；这个自执行文件就是给 window对象添加一个jquery属性和$属性
$和jQuery等价，是一个函数

(function(){
    window.jQuery=window.$=jQuery
  })
  clog(window)
  clog(window.jQuery === window.$)  // true
  clog(Object.prototype.toString.call($)) // '[object Function]'

$ ：是一个函数，传递的参数不同，效果也不同
1.参数是一个匿名函数：则作为入口函数

 $(function(){
      ...
    })

2.参数是一个字符串：则作为选择器、或者是创建一个标签

$('#demo')
$('<div>demo</div>')

3.参数是一个dom对象：则会把dom对象转换为jquery对象

   $(dom对象)
   
  dom对象：原生js选择器获取到的对象。
  特点：只能调用dom方法或属性，不能调用jquery的属性和方法
  jquery对象：利用jquery选择器获取到的对象。
  特点：只能调用jquery的方法或属性，不能调用原生js dom对象的属性和方法

dom对象：

 var div1 = document.getElementById('demo')
  clog(div1)   // <div>demo</div>

jquery对象：

 var $div1 = $('#demo')
  clog($div1)  // jQuery.fn.init [...]

jquery对象是一个伪数组，是dom对象的一个包装集
console.log($div1.__proto__ === Array.prototype) // false

将 dom对象转换为 jquery对象：

 var div1 = document.getElementById('demo')
 var $div1 = $(div1)

将 jquery对象转换为 dom对象：

  <1>用下标取出来
    var $div1 = $('div')
    var div1 = $div1[0]
  <2>用jquery的 get()方法
    var div2 = $divs.get(1)

5.jQuery属性

attr()：获取或设置被选元素的属性值

attr( name | properties | key, value | fn)
获取图像的src属性值（若有多个元素，则获取第一个）：$("img").attr("src")
设置一个属性（若有多个元素，则设置所有）：$("img").attr("src","test.jpg")
设置多个属性：$("img").attr({ src: "test.jpg", alt: "Test Image" })
把src属性的值设置为title属性的值：$("img").attr("title", function() { return this.src })

removeAttr( name )：从每一个匹配的元素中删除一个属性

$("img").removeAttr("src")

prop()：获取在匹配的元素集中的第一个元素的属性值

prop( name | properties | key, value | fn( index, attr ) )
获取复选框的状态：$("input[type='checkbox']").prop("checked")  //  true / false
设置复选框的状态：
$("input[type='checkbox']").prop("checked", true)  // 选中
$("input[type='checkbox']").prop("disabled", false)  // 不可用
$("input[type='checkbox']").prop({
    disabled: false,
    checked:true
}) 
通过函数来设置所有页面上的复选框被选中：
$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val
})

attr()与prop()
参考：https://www.cnblogs.com/songdongdong/p/6340373.html
相同：attr()与prop()都可以用来设置或获取指定的属性
不同：
1.操作对象不同:
attr()操作的是html文档节点的属性
prop()操作的是js对象的属性
2.应用版本不同：prop()是jQuery 1.6 版本新增的函数
3.用于设置的属性值类型不同：
由于attr()函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法，将其转为字符串类型。
prop()函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型。
4.对于表单元素的checked、selected、disabled等属性，在jQuery 1.6之前，attr()获取这些属性的返回值为Boolean类型：如果被选中(或禁用)就返回true，否则返回false。但是从1.6开始，使用attr()获取这些属性的返回值为String类型，如果被选中(或禁用)就返回checked、selected或disabled，否则(即元素节点没有该属性)返回undefined。并且，在某些版本中，这些属性值表示文档加载时的初始状态值，即使之后更改了这些元素的选中(或禁用)状态，对应的属性值也不会发生改变。
因为jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。
因此，在jQuery 1.6及以后版本中，请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作，也尽量使用prop()函数

removeProp()：用来删除由.prop()方法设置的属性集

$('input').removeProp('checked')

addClass()：为每个匹配的元素添加指定的类名

 addClass(class|fn(index,class))
 (函数必须返回一个或多个空格分隔的class名)
 添加一个类：$("p").addClass("selected")
添加多个类：$("p").addClass("selected1 selected2")

removeClass()：从所有匹配的元素中删除全部或者指定的类

removeClass([ class | fn(index, class) ])
删除一个指定的类：$("p").removeClass("selected")
删除匹配元素的所有类：$("p").removeClass()

toggleClass()：如果存在（不存在）就删除（添加）一个类。

toggleClass( calss | fn(index, class, switch))
class,switch：class:要切换的css类名；switch：用于决定元素是否包含class的布尔值
每点击三峡，加上一次high lignt类：
$("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
 })

html()：获取第一个匹配元素的html内容

获取div元素的内容：$('div').html()
设置div元素的内容：$('div').html('hello <b>world</b>')

在这里插入图片描述

text()：取得所有匹配元素的内容，结果是由所有匹配元素包含的文本内容组合起来的文本

获取div元素的内容：$('div').text()
设置div元素的内容：$('div').text('hello <b>world</b>')

在这里插入图片描述

val() ：获取或设置匹配元素的当前值

获取文本框中的当前值：$("input").val()
设置文本框的值：$("input").val("hello world!")
$('input:text.items').val(function() {
  return this.value + ' ' + this.className;
})

6.选择器

#id:$('#idName')
.class:$('.className')
element:$('div')
并集选择器:$('div, span, p.className')，将每一个选择器匹配到的元素合并后一起返回
在给定的祖先元素下匹配所有的后代元素：$('from input')，匹配from下的所有input元素，input元素是from的后代元素
在给定的父元素下匹配所有的子元素（只有子元素，不包括后代元素）：$('from > input')
匹配所有紧接在 prev 元素后的 next 元素：$('div + input')
匹配 prev 元素之后的所有指定的兄弟元素：$('div ~ input')
获取第一个元素( :first )：$('li:first')
获取匹配的最后个元素( :last ):$('li:last')
去除所有与给定选择器匹配的元素:$("input:not(:checked)")
匹配所有索引值为偶数的元素，从 0 开始计数:$("tr:even")
匹配所有索引值为奇数的元素，从 0 开始计数:$("tr:odd")
匹配一个给定索引值的元素:$("tr:eq(1)")
匹配如 h1, h2, h3之类的标题元素:$(":header")
选择该文档的根元素:$(":root")
匹配所有不包含子元素或者文本的空元素:$("td:empty")
匹配含有选择器所匹配的元素的元素：$("div:has(p)")，匹配所有含有p元素的div元素
匹配含有子元素或者文本的元素：$("td:parent")
匹配所有不可见元素，或者type为hidden的元素：$("tr:hidden")
匹配所有的可见元素：$("tr:visible")
匹配包含给定属性的元素:$("div[id]")
匹配第一个子元素:$("ul li:first-child")
匹配最后一个子元素:$("ul li:last-child")
匹配所有 input, textarea, select 和 button 元素:$(":input")

7.筛选

eq()：获取第N个元素。n：从第一个元素算起，-n：从最后一个元素算起。$('p').eq(1)、$('p').eq(-1)
first():获取匹配的第一个元素，$('li').first()
last():获取最后个元素，$('li').last()
hasClass()：检查当前的元素是否含有某个特定的类，如果有，则返回true，$('div').hasClass("protected")
filter()：筛选出与指定表达式匹配的元素集合，$("p").filter(".selected")
is()：根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true,$("input[type='checkbox']").is("form")
map():将一组元素转换成其他数组（不论是否是元素数组
has()：保留包含特定后代的元素，去掉那些不含有指定后代的元素，$('li').has('ul')
not()：删除与指定表达式匹配的元素，$("p").not( $("#selected")[0] )
slice()
children()：取得一个包含匹配的元素集合中每一个元素的所有指定子元素的元素集合，$("div").children()、$("div").children(".selected")
find()：搜索所有与指定表达式匹配的元素，$("p").find("span")
next()：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合，$("p").next()
nextAll()：查找当前元素之后所有的同辈元素,$("p").nextAll()
nextUntil()
parent()：取得一个包含着所有匹配元素的唯一父元素的元素集合，$("p").parent()
parents()：取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素），$("span").parents()
parentsUntil()
prev()：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合，$("p").prev()
prevAll()：查找当前元素之前所有的同辈元素，$("p").prevAll()
prevUntil()
siblings()：获取兄弟元素，$("div").siblings()
add()
andSelf()
contents()：查找匹配元素内部所有的子节点（包括文本节点）
end()：匹配的元素列表变为前一次的状态

8.CSS

css()：获取或设置匹配元素的样式属性

取得第一个段落的color样式属性的值：$("p").css("color")
设置属性：
$("p").css("color","red")
$("p").css({ "color": "#ff0011", "background": "blue" })
$("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2
      }
    })
  })

offset([coordinates])：获取匹配元素在当前视口的相对偏移
coordinates{top,left}：规定以像素计的 top 和 left 坐标。可能的值：
值对，比如 {top:100,left:0}
带有 top 和 left 属性的对象
获取指定元素的相对偏移：

设置指定元素的相对偏移：
position()：获取匹配元素相对父元素的偏移
scrollTop()：获取匹配元素相对滚动条顶部的偏移，此方法对可见和隐藏元素均有效

 获取相对滚动条顶部的偏移：$("p:last").scrollTop()
 设置相对滚动条顶部的偏移：$("p:last").scrollTop(300)

scrollLeft()：获取匹配元素相对滚动条左侧的偏移，此方法对可见和隐藏元素均有效。

 获取相对滚动条左侧的偏移：$("p:last").scrollLeft()
 设置相对滚动条左侧的偏移：$("p:last").scrollLeft(300)

height()：获取或设置指定元素的高度( px )

获取高度：$("p").height()
设置高度：$("p").height(20)

width()：获取或设置指定元素的宽度( px )

获取宽度：$("p").width()
设置宽度：$("p").width(20)

innerHeight()：获取第一个匹配元素内部区域高度（包括补白、不包括边框），此方法对可见和隐藏元素均有效
innerWidth()：获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效
outerHeight([options])：获取第一个匹配元素外部高度（默认包括补白和边框）。此方法对可见和隐藏元素均有效
当options为true时，计算边距
outerWidth([options]) ：获取第一个匹配元素外部宽度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。
当options为true时，计算边距

9.事件

ready()：当DOM载入就绪可以查询及操纵时绑定一个要执行的函数

$(document).ready(function(){...})

on()：在选择元素上绑定一个或多个事件的事件处理函数

$('.btn').on('click',function(){...})
$('.btn').on('click',{foo:'bar'},function(){...})

off()：在选择元素上移除一个或多个事件的事件处理函数。off() 方法移除用.on()绑定的事件处理程序

移除所有事件：$("p").off()
移除指定事件：$("p").off( "click")

bind()：为每个匹配元素的特定事件绑定事件处理函数

$("p").bind("click", function(){
  alert( $(this).text() )
})
$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered')
})
$("button").bind({
  click:function(){$("p").slideToggle();},
  mouseover:function(){$("body").css("background-color","red");},  
  mouseout:function(){$("body").css("background-color","#FFFFFF");}  
})
通过使用 preventDefault() 方法只取消默认的行为:
$("form").bind("submit", function(event){
  event.preventDefault();
})
通过使用 stopPropagation() 方法只阻止一个事件起泡:
$("form").bind("submit", function(event){
  event.stopPropagation();
})
通过返回false来取消默认的行为并阻止事件起泡:
$("form").bind("submit", function() { return false; })

one()：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次

$("p").one("click", function(){
  alert( $(this).text() );
})

trigger(type)：在每一个匹配的元素上触发某类事件。
triggerHandler()：这个方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。
unbind()：bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

取消所有的事件绑定：$("p").unbind()
取消指定的事件绑定：$("p").unbind('click')

hover()：当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
)

10.toggle(fn,fn1,…):用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
)

11.blur()：当元素失去焦点时触发 blur 事件

$("p").blur()
$("p").blur( function () { alert("Hello World!"); } )

12.change()：当元素的值发生改变时，会发生 change 事件。该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。

触发被选元素的 change 事件：
$(selector).change()
给所有的文本框增加输入验证：
$("input[type='text']").change( function() {
  ...
});

13.click()
14.dbclick()
15.focusin()
16.focusout()
17.keydown()
18.keypress():当键盘或按钮被按下时，发生 keypress 事件
19.keyup()
20.mousedown()：当鼠标指针移动到元素上方，并按下鼠标按键时
mouseup()：当在元素上放松鼠标按钮时
21.mouseenter() & mouseleave()
22.mousemove()：当鼠标指针在指定的元素中移动时
23.mouseout()：当鼠标指针从元素上移开时
24.mouseover()：当鼠标指针位于元素上方时
25.resize()：当调整浏览器窗口的大小时

$(window).resize(function(){
  //...
})

26.scroll()：当用户滚动指定的元素时

$(window).scroll( function() { ...} )

27.select()：当 textarea 或文本类型的 input 元素中的文本被选择时
28.submit()：当提交表单时
29.unload()：在当用户离开页面时，会发生 unload 事件：点击某个离开页面的链接、在地址栏中键入了新的 URL 、使用前进或后退按钮、关闭浏览器、重新加载页面

10.效果

show()：显示隐藏的匹配元素
hide()：隐藏显示的元素
jquery三组动画：
1.展示show()与隐藏hide()
2.滑入slideDown、滑出slideUp、切换slideToggle，效果类似于卷帘门
3.浅入fadeIn 、浅出fadeOut、切换fadeToggle

  $obj.show([speed],[callback])
  
   speed:动画执行的时间；不传：没有动画效果；slide和fade系列默认是normal
         ms；slow(600)、normal(400)、fast(200)
   callback:动画执行完毕后的回调函数

自定义动画： animate:

  $(selector).animate({params},[speed],[easing],[callback])
    {params}:要执行动画的css属性，带数字，必选
    speed:执行动画的时长，可选
    easing:执行效果，默认为swing(缓动)，可以是linear（匀速）
    callback：动画执行完毕后立即执行的回调函数

  $('#show').click(function(){
    $('#div1').show()
    $('#div1').show(2000)
    $('#div1').show('fast')
    $('#div1').show('normal')
    $('#div1').show('slow')
    $('#div1').show('error-name') 代表时长的单词写错，相当于normal
    $('#div1').show(2000,function(){
      ...
    })
  $('#hide').click(function(){
    $('#div1').hide()
    $('#div1').hide(2000)
    $('#div1').hide(2000,function(){
      ...
    })
  切换：显示<-->隐藏
  $('#toggle').click(function(){
    $('#div1').toggle(1000)
  })

 滑入：slideDown(speed,cakkback)
  $('#slideDown').click(function(){
    $('#div1').slideDown() 默认是normal，400ms
    $('#div1').slideDown(2000)
  })
  滑出：slideUp(speed,cakkback)
  $('#slideUp').click(function(){
    $('#div1').slideUp(2000)
    $('#div1').slideUp(2000，function(){
      ...
    })
  })
  切换：slideToggle()
  $('#slideToggle').click(function(){
    $('#div1').slideToggle(2000)
  })

  淡入：fadeIn()
  $('#fadeIn').click(function(){
    $('#div1').fadeIn() 不传参，默认是normal，400ms
    $('#div1').fadeIn(2000)
  })
  淡出：fadeOut()
  $('#fadeOut').click(function(){
    $('#div1').fadeOut(2000)
    $('#div1').fadeOut(2000,function(){
      ...
    })
  })
  切换：fadeToggle()
  $('#fadeToggle').click(function(){
    $('#div1').fadeToggle(1000)
  })

  淡入到哪：fadeTo()
  $('#fadeTo').click(function(){
    $('#div1').fadeTo(2000,0.5)
  })

自定义动画：animate() ：自定义动画不会改变背景颜色，若需改变，使用颜色插件

 $('#animate').click(function(){
      $('#div1').animate({
        left:800
      },2000,'linear')

  $('#div2').animate({
    left:800,
    width:200
    height:400
    opacity:0.7
  },2000,'swing',function(){
    alert('animate')
  })
})

动画队列与停止动画：在同一个元素上执行多个动画，对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画完成了才执行
stop()：停止动画效果
stop(clwarQueue,jumpToEnd)
clwarQueue：是否清除队列
jumpToEnd：是否跳转到最终效果

   $('#start').click(function(){
    $('#div').slideDown(2000).slideUp(2000)
   })
   $('#stop').click(function(){
    $('div').stop(false,true)  如果不写参数，默认是两个false
   })

   $('.wrap>ul>li').mouseenter(function(){
    $(this).children('ul').stop(true,false).slideUp(300)
   })
    $('.wrap>ul>li').mouseleave(function(){
    $(this).find('ul').stop(true,false).slideUp(300)
   })

4.finish()：停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画

$("#complete").click(function(){   $("div").finish()   })

11.Ajax

12.核心

1.each()：以每一个匹配的元素作为上下文来执行一个函数。意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。返回 ‘false’ 将停止循环 (就像在普通的循环中使用 ‘break’)。返回 ‘true’ 跳至下一个循环(就像在普通的循环中使用’continue’)。
2.size()：jQuery 对象中元素的个数。$("img").size()
3.length：jQuery 对象中元素的个数。$("img").length
4.get(num)：取得其中一个匹配的元素。 num表示取得第几个匹配的元素。$("img").get(0)
5.index()：搜索匹配的元素，并返回相应元素的索引值，从0开始计数

$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的索引位置
$('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。

6.data()：在元素上存放数据,返回jQuery对象。

$("div").data("test", { first: 16, last: "pizza!" })
$("div").data("test").first  //16
$("div").data("test").last  //pizza!

7.removeData()：在元素上移除存放的数据

$("div").removeData("test")

13.文档处理

1.append()：向每个匹配的元素内部追加内容。
在这里插入图片描述
2.appendTo()：把所有匹配的元素追加到另一个指定的元素元素集合中。
把p元素追加到div元素中：

3.prepend()：向所有匹配元素内部的开始处插入内容
4.prependTo()：把所有匹配的元素前置到另一个指定的元素集合中

$(A).prependTo(B)：把A前置到B中

在这里插入图片描述

5.after()：在每个匹配的元素之后插入内容

$(A).after(B)：把B插入到A后边

6.before()：在每个匹配的元素之前插入内容
7.insertAfter():把所有匹配的元素插入到另一个、指定的元素元素集合的后面

$(A).insertAfter(B)：把A插入到B后边

8.insertBefore()：把所有匹配的元素插入到另一个、指定的元素元素集合的前面

$(A).innerBefore(B)：把A插入到B前边

9.wrap()：把所有匹配的元素用其他元素的结构化标记包裹起来
在这里插入图片描述

在这里插入图片描述

10.unwrap()：将匹配元素移出它的父元素
在这里插入图片描述
11.wrapAll()：将所有匹配的元素用指定元素包裹起来

12.wrapInner()：将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
在这里插入图片描述

在这里插入图片描述

13.replaceWith()：将所有匹配的元素替换成指定的HTML或DOM元素。
在这里插入图片描述

14.replaceAll()：用匹配的元素替换掉所有 selector匹配到的元素

15.empty()：删除匹配的元素集合中所有的子节点。
在这里插入图片描述

16.remove()：从DOM中删除所有匹配的元素
在这里插入图片描述

17.detach()：从DOM中删除所有匹配的元素
在这里插入图片描述

18.clone()：克隆匹配的DOM元素并且选中这些克隆的副本。$("p").clone()

Dreamer.He

关注

5
点赞
踩
19

收藏

觉得还不错? 一键收藏
2
评论
jQuery个人总结

1.查看jquery版本 console.log(jQuery.fn.jquery) console.log(jQuery.prototype.jquery) console.log($.fn.jquery) console.log($.prototype.jquery)引入多个js文件：$ 是后引入的文件中的 console.log($.fn.jquery)多库共存：$.noConflict() // 后引入的jquery文件把 $符号的控制权给释放了 var _$ =
复制链接

扫一扫