zoukankan      html  css  js  c++  java
  • jquery DOM 操作

    1:jquery的对DOM节点的基本操作

        1)获取和设置HTML
            $('#id').html();    //()中没有值时为获取,有值时为设置   

        2)获取和设置文本(text)
            $('.class').text();  //()中没有值时为获取,有值时为设置  

        3)获取和设置value值
            $('input[name=uname]').val();  //()中没有值时为获取,有值时为设置  

        4)属性操作:获取,设置,删除
            $('#id').attr('属性名','属性值');   //()中只有属性名是为获取,有属性名+属性值为设置
            $('#id').removeAttr('属性名')  //删除属性

            $('checkbox').prop('checked',,ture/false);     //设置属性
             //对于本身就带有的固有属性,使用prop方法。
                //对于自定义的DOM属性,使用attr方法。
     

    2.jquery对DOM节点的CSS样式操作

        1)获取、设置CSS样式
            $('#id').css('属性名','属性值');  // ()中只有属性名是为获取,有属性名+属性值为设置
            $('#id').css({

                    '30px',
                    height:'30px',

            }); // ()设置多个属性

         2) 添加、删除、切换、判断class
             $('#id').addClass('pad');  //添加class
             $('#id').removeClass('pad') //删除class

             $('#id').toggleClass('pad'); //切换class,有就删除。没有就添加
             $('#id').hasClass('pad'); //判断是否存在class命名

      3.获取偏移值及获取设置滚动值
         1)获取元素偏移量
            $('#id').offset().left  //获取元素左偏移量
            $('#id').offset().top //获取元素上偏移量
     

           2)获取position元素偏移量
            $('#id').position().left  //获取position元素的左偏移量
            $('#id').position().top  //获取position元素的上偏移量
            
          3)获取和设置滚动值
            $('#id').scrollTop(); //()中没有值时为获取上滚动卷入值,有值时为设置上滚动卷入值
            $('$id').scrollLeft(); //()中没有值时为获取左滚动卷入值,有值时为设置左滚动卷入值

        4.DOM元素的获取有操作
           $('#id').parent();  //获取直系父级的节点
           $('#id').parents('节点'); //获取父级的节点,或一直向父级找,()为空时直到找到html节点,()有值时会找到设置的节点后会停止
           $('#id').parentsUntil('.class'); //获取#id 到 .class 之间的#id 的父级节点
           $('#id').children(); //()为空时获取#id 的所以直系子集,()不为空时,为获取条件,获取满足条件的子集
           $('#id').find('条件');//()不能为空,find会一直向子集(子集的子集···)寻找直到满足条件为止
           $('#id').siblings('条件');  //()为空时获取#id 所有同级节点,()有条件是获取满足条件的同级节点
           $('#id').next('条件'); //()为空是获取下一个同级Dom节点,()有条件时下一个同级Dom满足条件可以获取到,不满足获取不到
           $('#id').prev('条件');  //获取上一个同级Dom节点,用法和next相同
           $('#id').nextAll('条件');   //()为空是获取#id之后所有同级Dom节点,()有条件时获取之后所有同级Dom满足条件的
           $('#id').prevAll('条件');  //获取#id之后所有同级Dom节点,用法和next相同
           $('#id').nextUntil('.class');  //获取#id之后到.class之间的所有节点
           $('#id').prevUntil('.class'); //获取#id之前到.class之间的所有节点
           $('div').first(); //获取第一个div节点
           $('div').last();  //获取最后一个div节点
           $('div').eq(index); //获取第index+1个div节点 ,index为索引值从0开始
           $('div').filter('.class'); //获取所有类名为class的div节点
           $('div').not('.class'); //获取所有类名不为class的div节点

       5.添加、修改、删除DOM元素
         1) 添加Dom节点
           $('#id').append($('.appendDom'));   //在#id的最后添加.appendDom元素节点
           $('#id').prepend($('appendDom')); //在#id的最开始添加.appendDom元素节点
           $('#id').after($('appendDom')); //在#id节点之后添加.appendDom元素节点
           $('#id').before($('appendDom')); //在#id节点之前添加.appendDom元素节点
           $('.appendDom').appendTo('#id'); //把.appendDom元素节点插入到#id节点的最后(内部)  (和append效果相同)
           $('.appendDom').prevpendTo('#id'); //把.appendDom元素节点插入到#id节点的最开始(内部)  (和prevpend效果相同)
           $('.appendDom').insertAfter('#id'); //把.appendDom元素节点插入到#id节点之后(同级)(和after效果相同)
           $('.appendDom').insertBefore('#id'); //把.appendDom元素节点插入到#id节点之前(同级)(和before效果相同)
           $('div').warp('<b></b>');  //使用b标签包裹所有的div节点,所有的div标签用一个b标签包裹
           $('div').warpInner('<b></b>'); //使用b标签包裹所有的div节点,每一个div标签都用一个b标签包裹

         2) 删除Dom节点
            $('div').remove('条件'); //删除元素,可以添加条件   连节点一起删除
            $('div').empty();  //清楚元素  遗留节点
    ————————————————
    版权声明:本文为CSDN博主「木小蛮」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/xiaoxiaoshuai__/article/details/79509154

  • 相关阅读:
    【LeetCode每日一题】2020.6.28 209. 长度最小的子数组
    【《你不知道的JS(中卷①)》】三、原生函数
    【《你不知道的JS(中卷①)》】二、值
    【《你不知道的JS(中卷①)》】一、类型
    【LeetCode每日一题】2020.6.26 面试题 02.01. 移除重复节点
    【LeetCode周赛】第194场周赛
    【LeetCode每日一题】2020.6.25 139. 单词拆分
    ios网络编程(HTTP socket)
    objective c 代码块blocks完整总结二
    objective c 代码块blocks完整总结一
  • 原文地址:https://www.cnblogs.com/cuner/p/13338303.html
Copyright © 2011-2022 走看看