jquery入门

说说库和框架的区别？

库：是一个很多小工具的集合，可以用此工具简化你的代码。
框架：为解决一个(一类)问题而开发的产品，开发者按照框架的设计去做一些事

jQuery 能做什么？

可以做和原生js相同的事情，可以简化js代码
可以解决ie的兼容性问题
jQuery库容易扩展而且不断有新插件面世增强它的功能

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

jquery对象就是用jQuery的方法进行获取的对象，而原生DOM对象就是用javaScript的方法进行获取的对象。
jQuery对象就只能使用jQuery的方法，原生DOM对象只能使用原生DOM的方法
如何转换

获取jQuery对象
$('#btn')
获取DOM对象
document.getElementById('btn')
jQuery转换成DOM
$('#btn')[0]
DOM转换成jQuery
$('dom对象')

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

bind：为一个元素绑定一个或多个事件，并规定当这些事件发生时运行的函数。
unbind：为一个元素解绑其身上所绑定的事件，并规定当这些事件发生时运行的函数。
delegate：为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
live：为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
on和off是以上四种方法的替代品，该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
on替代了bind，delegate，live
off替代了unbind

<body>
  <button id="btn">submit</button>
  <script src="jquery-3.2.1.min.js"></script>
  <script>
    $('#btn').on('click',function(){
      console.log(this)
    })
  </script>
</body>

事件代理：事件委托或者事件代理，想让div 下面所有的span绑定事件，可以把事件绑定到div上

$('div').on('click', 'span', function(e){
    console.log(this);
    console.log(e);
});

jquery 如何展示/隐藏元素？

<body>
  <p>nihao</p>
  <button id='show'>show</button>
  <button id="hide">hide</button>
  <script src="jquery-3.2.1.min.js"></script>
  <script>
    var $p=$('p')
    $('#show').on('click',function(){
      $p.show();
    })
    $('#hide').on('click',function(){
      $p.hide();
    })
  </script>
</body>

jquery 动画如何使用？

$(selector).animate(styles,speed,easing,callback)

<body>
  <p style="border:1px solid red";>nihao</p>
  <script src="jquery-3.2.1.min.js"></script>
  <script>
    var $p=$("p")
    $p.on('click',function(){
      $p.animate({
        height:'100px'
      },1000)
    })
  </script>
</body>

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

使用$().html()获取html内容，$().text()获取文本内容
括号里如果有内容则为设置
如果括号内没有内容则为获取

<body>
  <button id="htm">htm</button>
  <button id="text">text</button>
  <p><span>hello</span>world</p>
  <script src="jquery-3.2.1.min.js"></script>
  <script>
    $('#htm').on('click',function(){
      console.log($('p').html())
      $('p').html('<span>world</span>')
    })
    $('#text').on('click',function(){
      console.log($('p').text())
      $('p').text('nihao world')
    })
  </script>
</body>

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

$().val():获取表单用户输入的值，val()中可以更改值
使用attr()可以设置元素的属性，attr接受两个值，第一个值为元素的属性，第二个是属性的值

<head>
  <style>
    .col{
      border: 2px solid red;
    }
  </style>
</head>
<body>
  <input type="text">
  <button id="btn">submit</button>
  <button id="add">add</button>
  
  <script src="jquery-3.2.1.min.js"></script>
  <script>
    $('#btn').on('click',function(){
      console.log($('input').val())
      $('input').val('')
    })
    $('#add').on('click',function(){
      $('input').attr('class','col')
    })

  </script>
</body>