jQuery选择器、Dom操作、样式、事件处理

1.说说库和框架的区别？

• 库相当于工具箱，里面有各种已经做好的工具，当你需要的时候，就可以直接使用

• 框架就相当于一栋刚建好的房子，房子里面的空间已经给你规定好规则做什么用，你只能按照这个规则去填充使用这个空间

• 框架和类库最重要的区别是控制权的反转。框架就像一个模具，它需要你把原材料放在模具里面，然后成品就出来了，由于模具已经造好，所以原材料不能乱加，人家要什么你就给什么，控制权在模具。但是类库就不一样了，控制权在你手中，想实现什么功能就实现什么功能，类库只是帮你封装好了大量实用的函数，帮助你实现自己的目的，你要做的只是根据自己的需要合适地调用这些函数。

2. jquery 能做什么？

• 将原生DOM元素的功能实现并且满足良好的兼容性，最重要的是，可以简化代码。

• jquery是一个丰富的js库，内部对js的很多复杂的方法进行了封装和加工，比如js很多方法名很冗长，jquery封装后方法就变得简便了，也考虑到了跨浏览器兼容问题，这样我们用js时需要考虑的很多问题它都帮我们解决了，这样我们使用时就比js代码要方便，高效的多。

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

• jquery 对象和 DOM 原生对象的区别在于：

• jquery对象是一个类数组对象只能使用jquery对象方法，而DOM原生对象则是Object，可以使用原生Js方法和属性

• DOM原生对象转jquery对象：

  • dom = document.querySelector('div');

  • $dom = $(dom);

• jquery对象转DOM原生：

  • dom = $dom[0]

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

• bind()向匹配元素添加一个或多个事件处理器

• unbind()向匹配元素移除一个或多个事件处理器

• delegate() 为指定的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

• live() 向当前或未来的匹配元素添加一个或多个事件处理器

• on() 为指定的元素,添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）

• off() 为指定的元素,移除一个或多个事件处理程序
  浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式

• 推荐使用on()、off()方法因为这两个方法更高效、简洁、灵活。如果项目中引用jquery版本为低版本，推荐用delegate(),高版本jquery可以使用on()来代替

    on代理事件写法：  
    <ul class="ct">
        <li>a-1</li>
        <li>a-2</li>
        <li>a-3</li>
        <li>b-1</li>
        <li>b-2</li>
    </ul>
    <script type="text/javascript">
        $('.ct').on('click','li',function(){alert('1')})  </script>

5.jquery 如何展示/隐藏元素？

    $(selector).hide() //隐藏元素
    $(selector).show() //展示元素

6.jquery 动画如何使用？

   $('#clickme').click(function() {
    $('#book').animate({        opacity: 0.25,        left: '+=50',        height: 'toggle'
    }, 5000, function() {        // Animation complete.
    });
  });

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

    $(selector).html()   //获取元素内部HTML内容
    $(selector).html('<span></span>')   //设置元素内部HTML内容

    $(selector).text()   //获取元素内部内容文本
    $(selector).text('jquery选择器')   //设置元素内部内容文本

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

    $(selector).val()  //获取表单内容
    $(selector).val('jquery')  //设置表单内容

    $(selector).attr()  //获取元素属性
    $(selector).attr('data-username','jquery')  //设置元素属性

9.实现如下效果

效果
gitHub代码

10.使用 jquery 实现如下效果

效果
gitHub代码

11.实现如下效果

效果
gitHub代码

作者：饥人谷_米弥轮
链接：https://www.jianshu.com/p/2ab35a978a92