zoukankan      html  css  js  c++  java
  • jQuery的常用方法

    DOM操作

    增加:

    一、append(),在被选中元素的结尾(仍然在内部),插入指定内容;

    1. 可以一次添加多个内容,内容可以是DOM对象、HTML string、 jQuery对象。
    2. 如果参数是function,function可以返回DOM对象、HTML string、 jQuery对象,参数是集合中的元素位置与原来的html值。
    <body>
        <div class="container">hello</div>
        <p class="text">world</p>
    </body>
     <script>
            $('div.container').append($('p.text')) 
     </script>
    

    执行前:

    image.png

    执行后:

    image.png

    • .appendTo(target)作用是把指定内容插入到目标元素尾部。

    二、prepend()在被选元素的开头插入内容

    <div class="container">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
        </div> 
     <script>
            $('div.container').prepend('<h1>hello</h1>')
       </script>
    

    执行前:

    image.png

    执行后:

    image.png

    三、.before()在被选元素之前插入内容,同级

    <div class="container">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
        </div>
      <script>
            $('div.container').before('<h1>hello</h1>')
        </script>
    

    执行后:

    image.png

    • after()在被选元素之前插入内容,同级
    <div class="container">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
        </div>
      <script>
            $('div.container').after('<h1>hello</h1>')
        </script>
    

    执行后:

    image.png


    删除:

    一、.remove()删除被选元素(及其子元素)

    
    <div class="container">
            <p >1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
    </div>
     <script>
            $('div.container').remove()
        </script>
    

    运行前:

    image.png

    运行后:

    image.png

    remove() 方法也可接受一个参数,允许您对被删元素进行过滤。

     <div class="container">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
        </div>
        <div class="box">hello</div>
      <script>
            $('div').remove('.box')
        </script>
    

    执行后:

    image.png

    二、empty()从被选元素中删除子元素

    执行后:

    image.png


    设置:

    一、html() - 设置或返回所选元素的内容(包括 HTML 标记)

     <div class="container">
           
        </div>
        <button id="btn">设置</button>
        <script>
            $('#btn').on('click',function(){
                $('.container').html('<h1>hello</h1>')
            })
        </script>
    

    运行前:

    image.png

    运行后

    image.png

    二、text() - 设置或返回所选元素的文本内容

     <div class="container">
           
        </div>
        <button id="btn">设置文本</button>
        <script>
            $('#btn').on('click',function(){
                $('.container').text('haha')
            })
        </script>
    

    运行后:

    image.png

    三、val() - 设置或返回表单字段的值

     <input type="text">
        <script>
        //    $('input').val('name');
        </script>
    

    运行前:

    image.png

    运行后:

    image.png

    上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。


    属性操作:

    一、attr() 方法设置或返回被选元素的属性值。

    语法:
    返回属性的值:
    $(selector).attr(attribute)

    设置属性和值:
    $(selector).attr(attribute,value)

    使用函数设置属性和值:
    $(selector).attr(attribute,function(index,currentvalue))

    设置多个属性和值:
    $(selector).attr({attribute:value, attribute:value,...})

      <div class="box">haha</div>
        <script>
    
          console.log($('.box').attr('class'))  //box
          $('.box').attr('id','show');
     
        </script>
    

    执行后:

    image.png

    二、.removeAttr() 方法从被选元素中移除属性。

      <div class="box" id="show">haha</div>
        <script>
        
       $('div').removeAttr('id')
        </script>
    

    执行后:

    image.png

    三、prop() 方法设置或返回被选元素的属性和值。对应的,如需移除属性,请使用 removeProp()方法

     <input type="checkbox" id="test" abc="111">
        
        <script>
    
        console.log($('#test').attr('style'));  //undefined
        console.log($('#test').prop('style'));  //CSSStyleDeclaration
            
        $('#test').attr('abc','222');  //用attr给abc属性设置值,会改变html结构
        $('#test').prop('abc','333');  //用prop不会
    
        console.log($('#test').attr('abc'));  //222
        console.log($('#test').prop('abc'));    //333,如果不用prop设置333,这里获取到的就是undefined
        
        
        </script>
    

    CSS相关:

    一、css()设置或返回样式属性

     <div class="box" style="border:1px solid">hello</div>
    
        <script>
       $('.box').css('width','300')
       $('.box').css({
           height:'100px',
           backgroundColor:'pink',
           color:'#000',
           fontSize:'50px'
       })
    
        </script>
    

    运行后:

    image.png

    二、.addClass()向被选元素添加一个或多个类

      <style>
            .active{
                font-size: 50px;
                color:green;
            }
            .size {
                200px;
                height:300px;
                margin-left:100px;
            }
        </style>
    </head>
    <body>
       <div class="box" style="border:1px solid red">hello</div>
    
        <script>
         $('.box').addClass('active size')
    
        </script>
    </body>
    

    运行后:

    image.png

    • .removeClass()从被选元素删除一个或多个类

    三、hasClass()备选元素是否包含某个类,返回布尔值

     <div class="box" style="border:1px solid red">hello</div>
    
        <script>
         $('.box').addClass('active size')
         console.log($('.box').hasClass('size'));  //true
            
        </script>
    

    四、.toggleClass()对被选元素进行添加/删除类的切换操作

      <style>
           .active{
               font-size: 50px;
               color:green;
           }
           .size {
               200px;
               height:300px;
               margin-left:100px;
           }
       </style>
    </head>
    <body>
      <div class="box" style="border:1px solid red">hello</div>
    
       <script>
        $('.box').toggleClass('size');
     
       </script>
    

    执行后:

    image.png

    再执行一次

    <script>
         $('.box').toggleClass('size');
         $('.box').toggleClass('size');
        </script>
    

    执行后:

    image.png


     

  • 相关阅读:
    CSS之旅——第二站 如何更深入的理解各种选择器
    CSS之旅——第一站 为什么要用CSS
    记录一些在用wcf的过程中走过的泥巴路 【第一篇】
    asp.net mvc 之旅—— 第二站 窥探Controller下的各种Result
    asp.net mvc 之旅—— 第一站 从简单的razor入手
    Sql Server之旅——终点站 nolock引发的三级事件的一些思考
    Sql Server之旅——第十四站 深入的探讨锁机制
    Sql Server之旅——第十三站 对锁的初步认识
    Sql Server之旅——第十二站 sqltext的参数化处理
    Sql Server之旅——第十一站 简单说说sqlserver的执行计划
  • 原文地址:https://www.cnblogs.com/wjlbk/p/11783847.html
Copyright © 2011-2022 走看看