【JavaScript进阶学习】jQuery的DOM操作

最新推荐文章于 2023-04-24 11:37:08 发布

草率怪199888

最新推荐文章于 2023-04-24 11:37:08 发布

阅读量1k

点赞数

分类专栏： javascript的进阶学习文章标签： javascript 前端 jquery 学习

本文链接：https://blog.csdn.net/qq_66972523/article/details/123956436

版权

javascript的进阶学习专栏收录该内容

15 篇文章 3 订阅

订阅专栏

这篇博客详细介绍了jQuery中的DOM操作，包括选择器的使用，如ID、类和CSS选择器，以及群组、后代、可见性和过滤器选择器。此外，还涵盖了内容操作、class操作、属性操作、样式操作、尺寸类操作和元素操作等，涉及添加、删除、切换class，获取和设置属性、样式，以及元素的创建、插入、删除等操作。

摘要由CSDN通过智能技术生成

                    
                        
                    
                    jQuery的DOM操作 
jq的选择器（jQuery最有用的部分：jQuery选择器引擎！jQuery的选择器依赖css1~css3的选择器。） 
  jq的使用方式：作为函数执行。功能：DOM操作
 $();
jq的使用方式：作为对象使用；功能：非DOM操作，工具类功能
$.xxx();
根据css样式来进行选取。css叫做添加样式，但是jQuery叫做添加行为。
获取所有div标签的DOM元素：$('div')
获取一个ID为box的DOM对象：$('#box')
获取所有class名为box的DOM对象：$('.box')
id选择器的失明特性(多个id重名只能选择一个)：$('#cont')
群组选择器： 
    选中div,span，p元素：$('div,span,p')
 
后代选择器 
    选中list里所有li:$('.list li')
选中msg里子h2:$('.msg>h2')
选中list里中第一个li:$('.list li:first')
选中list里中最后一个li:$('.list li:last')
选中list里第5个li:$('.list li:eq(5)')
选中list的奇数（从0开始索引，所以是奇数）：$('.list li:odd')
选中list的偶数（从0开始索引，所以是偶数）:$('.list li:even')
选中list的下一个兄弟:$('.list+span')
选中list的下所有兄弟span:$('.list~span')
选中list里li里为空的标签:$('.list li:empty')
 
可见性选择器：是否可见的判定因素为display：block & display :none 
    不可见性选择器。（专门选择看不见的元素p）: $('p:hidden')
可见性选择器.(只选中看得见的):$('li:visible')
 
选中list里不带有…的元素:例如：不带red:$('.list li:not(.red')
选择list里带有…的子元素的父元素（同名情况下）例如：带red:$('.list:has(.red)')
添加或删除  document.onclick = function () {
  //判断#box里有没有red属性
  if ($('#box').is('.red')) {
      $('#box').removeClass('red'); //有就删除
  } else {
      $('#box').addClass('red');    //没有就增加
  }
   }
 
获取具有这个属性的DOM元素:$('input[name]')
获取具有属性且属性值为XXX的DOM元素:$('input[name=XXX]')
获取有value 属性且name为XXX的DOM元素:$('input[value][name=XXX]')
 
jq的过滤器(更节省性能) 
  在选中某些元素后，通过执行其方法，过滤出指定的元素
jQuery为后代选择器提供了一个方法find()这个find方法里面有一个参数，就是想要找到的后代（可以是标签，类名，ID） 
    选中msg里所有h2:$('.msg').find('h2')
选中msg里子h2:$('.msg').children('h2')
过滤器选择第一个:$('.list li').first()
过滤器选择最后一个:$('.list li').last()
选中list的下一个兄弟span:$('.list').next('span')
选中list的下所有兄弟span:$('.list').nextAll('span')
过滤兄弟元素 (list的所有兄弟div元素): $('.list').siblings('div')
指定范围的下一个兄弟 
      过滤list的下一个兄弟一直到指定的aa,不包括aa: $('.list').nextUntil('span')
list里的上一个兄弟div:$('.list').prev('div')
list里的上所有兄弟div:$('.list').prevAll('div')
list里的指定到p范围的,不包括p,包括list本身:$('.list').prevUntil('p')
 
 
删除当前选中元素的所有子元素的内容(不属于过滤器，属于方法) 
     $('.list li').empty();
 
过滤器(除了…属性的元素，都被选中了) 
    除了red: $('.list li').not('.red')
选择list里带有red属性的子元素的父元素（同名情况下） 
      $('.list').has('.red')
 
 
内容选择器(选择list里li内容里带有s字母的元素，更改样式)根据内容选择标签 
    $('.list li:contains(s)')
 
子选父过滤器: $('.bt2').parent()
子选父(多级):$('.bt2').parents()
指定范围的父-选择bt2父级直到body(不包含body):$('.bt2').parentsUntil('body')
end()方法返回上一步选择器的操作:方法会执行上一个方法结束后停留的元素上
 
内容操作 
  等同于innerHTML(不加参数是获取，加参数是设置)既可以获取文字，也可以解析标签 
    $('.box1').html('<mark>哈哈哈</mark>')
 
等同于innerText(不加参数是获取，加参数是设置)只能获取文字，不能解析标签 
    $('.box1').text('<mark>哈哈哈</mark>')
 
等同于value(不能解析标签) 
    $('input').val('<mark>哈哈哈</mark>');
 
 
class操作 
  添加class(可以同时操作删除多个class) 
    $('.box1').addClass('border red');
 
删除class(可以同时操作删除多个class) 
    $('.box1').removeClass('red');
 
切换class(如果有就添加，没有就删除) 
     $('.box1').toggleClass('red');
 
 
属性操作 
  获取属性 
    一个字符参数是获取:$('.box').attr('abc')
设置单个属性：两个字符参数设置（相同的名字不同的值为更改）:$('.box').attr('qwe', '呵呵');
设置多个属性:一个参数(没有就增加，有就删除)
 $('.box').attr({
  a: 11,
  b: 22,
  c: 33
 })
 
    删除属性:$('.box').removeAttr('a');
 
 
样式操作 
  获取样式 
    一个字符参数(行内样式和非行内都能获取):$('.box').css('width');
设置单个样式：两个字符参数:
 $('.box').css('border', 'solid 10px black')
$('.box').css('width', '200px')
 
    设置多个样式:一个对象参数（有就修改，没有就设置）
 $('.box').css({
  padding: '20px',
  margin: '100px',
  lineHeight: '100px',
  color: ' yellow'
})
 
    不能删除样式：只能清空或重置样式
获取多个样式：一个数组参数
 console.log($('.box').css(['width', 'background', 'padding']));
 
 
尺寸类操作 
  获取尺寸类数据(cont)（不传参获取） 
    $('.box').width();
$('.box').height();
 
获取尺寸类数据(cont+padding) 
    $('.box').innerWidth()
$('.box').innerHeight()
 
获取尺寸类数据(cont+padding+border) 
    $('.box').outerHeight()
$('.box').outerWidth()
 
获取位置类数据(行对于包含块偏移的位置) 
    $('.box').offset()
$('.box').offset().top
$('.box').offset().left
 
定位的位置 
    $('.box').position()
$('.box').position().top
$('.box').position().left
 
滚动的位置 
    $('.box').scrollLeft()
   document.onclick = function () {
  //获取滚走了的距离
  console.log($('.box').scrollTop());
  console.log($('.box').scrollLeft());
 }
 
设置尺寸类数据(传参设置) 
    $('.box').width(300);
$('.box').innerWidth(300); 300是要减去了padding的尺寸
$('.box').outerWidth(300) 300是要减去了border+padding的尺寸
$('.box').offset({ top: 100, left: 100 });去掉margin的值
$('.box').scrollTop(231);
position不能设置，只能获取
 
 
元素操作 
  创建:$("<p></p>")
插入到指定父级的最后一个子:$(".box").append(p);
插入到指定父级的最后一个子:p.appendTo($(".box"));
插入到指定父级的第一个子:p.prependTo($(".box"));
插入到指定元素的后一个兄弟:$(".box").after(p);
插入到指定元素的前一个兄弟:$(".box").before(p);
删除自身:$(".box").remove();
清空子:$(".box").empty();
克隆元素的结构:$(".box").after($(".box").clone());
克隆元素的结构+事件流…:$(".box").after($(".box").clone(true));
 

                