JQuery中Dom的基本操作

Posted 2020-10-06

Dom基本操作

一.Dom元素的获取

1.var $allP = $(‘p‘);

  $allP.get(0)//第一个p

  $allP.get(-1)//最后一个p

  $allP.get()//所有的p

  $allP[0]//第一个p

2. $(‘p‘).toArray()//将jqure转化为Dom元素的数组

3. 获取第一个包含Dom元素的jquery对象
    var $firstp = $(‘p‘).first()
    等价于
     var $firstp1 = $(‘p:first‘)

4. 获取Dom元素的长度
     $(‘p‘).length

5.  获取第一个p的文本内容
     $(‘p:first‘).text()

6.  获取Dom元素索引（在同辈元素中）
     $(‘p:first‘).index()

7.  添加元素中的内容
     $(‘p:last‘).text(‘我是p文本‘)

8.  点击按钮获取input中的值
     $(‘button‘).click(function(){
     var ten = $(‘#inp‘).val()
     console.log(ten)
     })

9.  点击按钮添加input中的内容
     $(‘#btn‘).click(function(){
     var cen = $(‘#inp‘).val(‘点击内容‘)
     })

二.操作DOM元素
1 .创建元素
   $(‘<span>创建span元素</span>‘)
2. 向页面中追加元素 append appendTo
   var $p = $(‘<p></p>‘)
   $(‘body‘).append($p.text(‘段落‘))
   $(‘<div>div元素</div>‘).appendTo(‘body‘)
3. 插入元素 after before
   $(‘#p1‘).after(‘<h2>我是h2</h2>‘)
   $(‘#p1‘).before(‘<h3>我是h3</h3>‘)
4. 删除元素
   $(‘h2‘).remove()
5. 置空元素
    $(‘h2‘).empty()
6. 替换元素
   $(‘h3‘).replaceWith(‘<span>替换</span>‘)
   $(‘<span>替换p</span>‘).replaceAll(‘#p4‘)
7.克隆复制
   $(‘#p4‘).clone(true).appendTo(‘body‘)

三.操作元素样式
 1.给元素添加类名

   $(‘p:eq(1)‘).addClass(‘p2‘) 

 2. 删除元素的类名

 $(‘[class="p3"]‘).removeClass()

 3. 判断一个元素中是否有p2这个类名

   $(‘p:last‘).hasClass(‘p2‘)

 4.切换类

   $(‘p:last‘).toggleClass(‘p4‘)//
 5. 添加行内样式

   $(‘.p2‘).css({background: ‘purple‘, color: ‘#fff‘});

四.根据元素关系访问元素
1.获取直接父元素

   $(‘#w1‘).parent() 

2. 获取直接子元素

   $(‘.box1‘).children()

3. 获取上一个兄弟元素

   $(‘.box1‘).prev()

4. 获取上面所有的兄弟元素

   $(‘.box1‘).prevAll()

5. 获取下一个兄弟元素

  $(‘.box‘).next()

6. 获取下面的所有兄弟元素
    $(‘.box1‘).nextAll()

7. 获取所有的兄弟元素
    $(‘.box1‘).siblings()

五.给元素绑定方法
1.绑定
   $(‘.box2‘).on(‘click‘,{name:"李四",age:18},function(e){
      console.log(e.data.name)
   })
2.接触绑定
      $(‘.box2‘).off(‘click‘)
3.事件
  单击
     $(‘.box2‘).on(‘click‘,{name:"李四",age:18},function(e){
       console.log(e.data.name)
   })
双击
     $(‘.box2‘).on(‘ondblclick‘,{name:"李四",age:18},function(e){
       console.log(e.data.name)
   })
按下
    $(‘.box2‘).on(‘mousedown‘,{name:"李四",age:18},function(e){
     console.log(e.data.name)
    })
弹起
    $(‘.box2‘).on(‘mouseup‘,{name:"李四",age:18},function(e){
      console.log(e.data.name)
    })

六.自定义动画效果

1.淡入淡出自动切换
     $(‘#btn1‘).click(function(){
      $(‘.box4‘).fadeToggle()
     })
2.滑动效果（展开和闭合）
   $(‘#btn1‘).click(function(){
    $(‘.box4‘).slideToggle()
  })

七.获取和设置元素的大小
1. .highet .width 不包含padding & magin
   $(‘.box5‘).height(100);
   $(‘.box5‘).width(100);
2. .innerhighet 包含padding
   $(‘.box5‘).innerHeight(100);
   $(‘.box5‘).innerWidth(100);
3. .outerwidth包含magin和padding

    默认false不包含magin
    $(‘.box5‘).outerHeight(100);
    $(‘.box5‘).outerWidth(100);
    true 包含magin
    $(‘.box5‘).outerHeight(100,true);
    $(‘.box5‘).outerWidth(100,true);