jQuery选择器_Dom操作_样式_事件处理

2017-05-14 本文已影响0人 LINPENGISTHEONE

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

库
库是一个数据仓库，里面放了各种可以利用的API，由于库的内部已经做了各种底层的封装和各种兼容实现，因此可以调用提供的API接口来实现我们需要的功能，而不需要复杂的代码和加工，因此使代码得到优化，效率提高。
框架
框架相当于一个模板，用来搭建一个项目的最基层的部分，框架内部可以根据不同项目的需要填入不同的内容。
另外一种解释是：
库是跟着你的思维走；
框架是牵着你的思维跟他走；

2： jquery 能做什么？

选择网页元素
改变结果集
元素的操作：取值和赋值
元素的操作：移动
元素的操作：复制、删除和创建
工具方法
事件操作
特殊效果
AJAX

JQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互，特点是兼容性好，API友好，能写更少的代码做更多的事情。

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

区别：
Dom是文档对象模型，通过dom节点能构建成一个基本的网页，jQuery对象是通过对dom对象的包装后产生的对象，jQuery对象能使用jQuery里的方法，如$("#ct").html();这段代码等同于document.getElementById("foo").innerHTML,jQuery对象无法使用Dom对象的任何方法，同理Dom对象也不能使用jQuery的方法。
转化：
1.jQuery对象是一个类似数组的独享，可以通过[index]得到相应的Dom对象。
例如$("#cr")是一个jQuery对象，$("#cr")[0]就能得到dom对象
2.通过jQuery的get()方法，$("#cr").get(0)。
3.Dom对象转化成jQuery对象，在dom对象外面用$()包裹起来就得到相应的jQuery对象。

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

用bind,delegate,live,on方法绑定事件。
bind，delegate,live,on都是事件绑定方法，bind是最早期的适用于所有版本的事件绑定方式，和其他三种绑定方法不同的是，bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置。off() 方法移除用.on()绑定的事件处理程序，unbind() 方法移除用.bind()绑定的事件处理程序是解除绑定事件。
推荐使用on和off
使用on绑定事件使用事件代理的写法：

$('list').on('click','li',function(){
    console.log($(this));
})

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

显示元素:$.show()
隐藏元素:$.hide()

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p class="content">我是HARRISKING!</p>
    <button class="btn1">点我变消失</button>
    <button class="btn2">点我变出现</button>
    <button class="btn3">点我就切换</button>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" charset="utf-8"></script>
    <script>
    $('.btn1').on('click',function(){
      $('.content').hide(1000);
    });
    $('.btn2').on('click',function(){
      $('.content').show(1000);
    })
    $('.btn3').on('click',function(){
      $('.content').toggle(1000);
    })
    </script>
  </body>
</html>

6： jquery 动画如何使用？

简单的动画：通过hide()和show()，fadeIn()，fadeOut()，函数并添加以毫秒为单位的参数来实现动画效果。
复杂的动画：通过animate()方法来实现。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>animate</title>
    <style>
      .ct{
        border:1px solid #ccc;
        border-radius: 50%;
        display: inline-block;
        background-color: red;
        width:100px;
        height:100px;
        position: relative;
      }
    </style>
  </head>
  <body>
    <div class="ct"></div>
    <button class="btn">点我</button>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" ></script>
    <script type="text/javascript">
    $('.btn').on('click',function(){
      $('.ct').animate({top: '0px',left:'200px'},500)
              .animate({top:'200px',left:'200px'},1000)
              .animate({top:'200px',left:'0px'},2000)
              .animate({top:'0px',left:'0px'},500)
    })
    </script>
  </body>
</html>

动画有队列的概念，即当需要连续执行多个动画时，不需要一层层的放入函数中，而是直接下列即可，每次点击（操作）时，会向队列中添加这些操作，点击n次，则添加n次，执行n次。
解决方法具体请点击这里！