jQuery相关

2017-07-18 本文已影响0人虚玩玩TT

1. jQuery 能做什么？

首先jQuery是一个简单、精简、功能丰富的JavaScrip工具库，他提供了易于使用且兼容性好的API，使用jQuery可以更加简单的操作例如HTML文档遍历和操作、事件处理、Ajax、动画等。

2. jQuery 对象和 DOM 原生对象有什么区别？如何转化？

区别：

直接利用“===”进行判断，结果为false
选择的不同，jQuery对象要用jQuery方法选择，DOM对象要用原生JS方法选择
操作方法不同，jQuery对象要用jQuery方法操作，DOM对象要用原生JS方法操作

转化：

对jQuery对象使用下标选择可得到DOM原生对象，
例：$('xxx')[0] === document.querySelector('xxx')，结果为true
对DOM原生对象使用$()可得到jQuery对象，虽然都是指向同一个对象，但是得到的jQuery对象和直接用jQuery方法选择的对象不同
例：$(document.querySelector('xxx')) === $('xxx')，结果为false

3. jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

jQuery可以使用bind,live,delegate,on这四种方式进行事件监听,还可以直接绑定例如a.click(function(){}); a.change(function(){})

对应的，移除一个事件的处理函数的方法：unbind,die,undelegate,off

用法：

$(selector).bind(events,[data],fn); 对单个目标元素进行监听
$(selector).live(events,[data],fn); 效果和bind相同，但是运用到事件委托机制
$(selector).delegate(childSelector,events,[data],fn); 实现事件代理
$(selector).on(events,[childSelector],[data],fn); 可以实现以上所有功能，如单个目标元素的监听，监听多个目标

所以，推荐使用on

<!DOCTYPE html>
<html>
<head>
  <title>demo</title>
  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
  <ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
    <li>test4</li>
    <li>test5</li>
  </ul>

  <script>
    $('ul').on('click','li',function(){
      console.log(this)
      })
  </script>  //对ul进行监听，使用childSelector这个参数，对子元素进行事件绑定
</body>
</html>

4. jQuery 如何展示/隐藏元素？

可以使用添加删除元素实现，可用的函数有append,appendTo,prepend,prependTo,before,insertBefor,after,insertAfter, 例：在div添加$('div').append('<h1>title</h1>')；删除div$('div').remove()
使用jQuery动画相关的函数，hide,show,toggel,fadeIn,fadeOut,fadeToggle,slideDown,slideUp,slideToggle, 例：隐藏div，$('div').hide(), 展示div，$('div').show(); 或者直接使用$('div').toggle()即可实现展示和隐藏的切换
写CSS，然后给目标元素添加相应的class达到展示/隐藏效果，$('div').addClass()

5. jQuery 动画如何使用？

写一个demo展示jQuery动画用法

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
  <style>
    .cnt {
      width: 100px;
      height: 100px;
      background: red;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
  <div class="cnt"></div>
  <button class="hide">hide</button>
  <button class="show">show</button>
  <button class="toggle">toggle</button>
  <button class="animate">自定义动画</button>

  <script>
    var $cnt = $('.cnt')

    $('.hide').click(function(){
      $cnt.hide(4000,function(){
        elart('已隐藏')
        })
      })

    $('.show').click(function(){
      $cnt.show(4000,fucntion(){
        elart('已展示')
        })
      })

    $('.toggle').click(function(){
      $cnt.toggle(4000,function(){
        elart('切换隐藏或展示')
        })
      })

    $('.animate').click(function(){
      $cnt.animate(
        {
          width: '+=100px',
          height: '+=100px',
          opacity: 0.25
        })
          .animate({
            left: '+=200px'
          })
          .animate({
            top: '+=200px'
          })
          .animate({
            width: '-=100px',
            height: '-=100px',
            opacity: 1,
            left: '-=200px',
            top: '-=200px'
          },4000)
      })

    $('.finish').click(function(){
      $cnt.finish()
    })

    $('.stop').click(function(){
      $cnt.stop(true,true)
    })
  </script>
</body>
</html>

6. 如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

$('xxx').html(),不传递参数时获取所选元素的HTML，当传递参数时，$('xxx').html(string), 则会替换原HTML内容。

$('xxx').text(),不传递参数时获取所选元素的innerText,当传递参数时，$('xxx').text(string), 则会替换原元素下的innerText。

7. 如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

$('input').val(),不传递参数时，获取表单用户输入或选择的内容，当传递参数时，$('input').val(string), 会修改input的value值为参数值。

获取元素特定属性的值 .attr(attributeName)

为元素属性赋值 .attr(attributeName,value) / .attr(attributesJson) / .attr(attributeName,function(index,attr))