jquery DOM&事件

作者: 进击的阿群 | 来源:发表于2016-09-16 20:00 被阅读70次

Q&A

1. 库和框架的区别？

库（library）：将代码集合成一个产品，供开发者调用，面向对象的代码组织而成的是类库，面向过程组织而成的是函数库。
框架（framework）：为了解决一个（一类）问题而开发的产品，开发者只需要使用框架提供的类或函数就可实现全部功能。
区别：框架和库比较类似，都是代码的集合，不过框架更加具有针对性，可以说是库的升级版，提供一套完整的代码，而不需要自己重组。

2. jquery 能做什么？

动态操作CSS样式
用css()方法直接设置样式

  <body>
    <p>
      这是一个段落
    </p>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      $("p").css("color", "red");
    </script>
  </body>

jQuery——css

用添加删除class更改样式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task25</title>
    <style type="text/css">
      .test {
        color: red;
      }
      .modify {
        color: green;
      }
    </style>
  </head>
  <body>
    <p class="test">
      这是一个段落
    </p>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      $("p").addClass("modify");
    </script>
  </body>
</html>

jQuery——addClass

操作DOM
选择器强大，方便快捷获取DOM元素
动态改变DOM内容

  <body>
    <p class="test">
      这是一个段落
    </p>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      $("p").text("modify");
    </script>
  </body>

动态操作DOM

接受并响应事件

  <body>
    <p class="test">
      这是一个段落
    </p>
    <button type="button">改内容</button>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      $('button').on('click', function(){
        $('p').text('更改内容');
      });
    </script>
  </body>

事件

实现动画效果
可以实现动画队列
统一Ajax操作
简化JavaScript代码

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

DOM对象：DOM是Document object model的缩写，即文档对象模型，是W3C标准的用于操作文档的API。
jQuery对象：是通过jQuery包装DOM对象后所产生的对象。
区别：

两者的原理截然不同，并不是同一类的对象；
两者拥有不同的方法，不能够混用，否则会出错；

转换：

DOM对象转换成jQuery对象：在DOM对象外包装$()即可。

  <body>
    <p class="test">
      这是一个段落
    </p>
    <button type="button">改内容</button>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      var test = document.getElementsByClassName('test');
      var $test = $(test);
      console.log($test);
    </script>
  </body>

DOM对象转换成jQuery对象

jQuery对象转换成DOM对象：[index]或get(index)。

  <body>
    <p class="test">
      这是一个段落
    </p>
    <button type="button">改内容</button>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      var test = document.getElementsByClassName('test');
      var $test = $(test);
      console.log($test[0]);              // console.log($test.get(0));
    </script>
  </body>

jQuery对象转换成DOM对象

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

jQuery中可以用一些方法绑定事件，其中包括bind、live、on等：

<body>
    <p class="test">
      这是一个段落
    </p>
    <button type="button">改内容</button>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      $('button').on('click', function(){
        $('p').text('新段落');
      });
    </script>
  </body>

on绑定事件

bind：为一个元素一个或多个事件，绑定一个事件处理程序；

  <body>
    <p class="test">
      这是一个段落
    </p>
    <button type="button">改内容</button>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      $('button').bind('click', function() {
        $('p').text('改内容');
      });
    </script>
  </body>

bind

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>task25</title>
    <style type="text/css">
      p {
        background-color: yellow;
      }
      .test {
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <p>
      这是一个段落
    </p>
    <button type="button">改内容</button>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      $('p').bind('mouseenter mouseleave', function() {
        $(this).toggleClass('test');         // 多个事件
      });
    </script>
  </body>
</html>

bind多个事件

bind多个事件2

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

    <script>
      $("body").delegate("p", "click", function() {
        $(this).after('<p>这是一个新段落</p>');
      });
    </script>

delegate

live：附加一个事件处理器到匹配目前选择器的所有元素，现在和未来，1.7以后弃用；
on：在选定的元素上绑定一个或多个事件处理函数，提供绑定事件处理的所有功能；
off：移除一个事件处理函数；

    <script>
      $("body").on("click", "p", function() {
        $(this).after('<p>这是一个新段落</p>');
      });
      $('body').off();
    </script>

推荐使用：1.7版本以后，推荐on方法，可以替代之前所有方法。
on事件代理，用法：

  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <button type="button">增加</button>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script>
      $('button').on('click', function() {
        $('ul').append('<li>新增</li>');
      });
      $('ul').on('mouseenter', 'li', function() {
        $(this).css('background-color', 'yellow');
      });
    </script>
  </body>

on事件代理

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

使用hide()和show()方法实现展示隐藏元素；

  <body>
    <p>段落</p>
    <button class="show" type="button">显示</button>
    <button class="hide" type="button">隐藏</button>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $('.show').on('click', function() {
          $('p').show();
        });
        $('.hide').on('click', function() {
          $('p').hide();
        });
      });
    </script>
  </body>

hide

show

可以使用 toggle() 方法来切换 hide() 和 show() 方法；

    <script>
      $(document).ready(function() {
        $('.toggle').on('click', function() {
          $('p').toggle();
        });
      });
    </script>

6. jquery 动画如何使用？

jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
{params}：设置动画效果；
speed：设置动画速度；
callback：设置回调函数；
eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #ct {
            border: 1px solid;
            width: 100px;
            height: 100px;
            position: relative;
        }
    </style>
</head>
<body>
  <div id="ct">jQuery</div>
  <button type="button">动画</button>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('button').on('click', function() {
        $('#ct').animate({left: '100px'});
        $('#ct').animate({top: '100px'});
        $('#ct').animate({left: '0'});
        $('#ct').animate({top: '0'});
      });
    });
  </script>
</body>
</html>

动画效果不仅能够随时显示，还能够随时停止，并且支持队列功能，如代码中所示，div块将会移动4次回到原位置。

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

设置和获取元素内部HTML内容：用html()方法可以获取，如果在()中写入文本，可以设置HTML内容：

  <body>
    <div id="ct"><b>jQuery</b></div>
    <button type="button">更改</button>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        console.log($('#ct').html());
        $('button').on('click', function() {
          $('#ct').html('<b>更改的内容</b>');
        });
      });
    </script>
  </body>

设置HTML内容

获取HTML内容

设置和获取元素内部文本：用text()方法就可以设置和获取元素内部文本内容，用法和html()一样：

    <script>
      $(document).ready(function() {
        console.log($('#ct').text());
        $('button').on('click', function() {
          $('#ct').text('<b>更改的内容</b>');
        });
      });
    </script>

设置的文本内容

获取的文本内容

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

设置和获取表单用户输入内容：
通过val()方法，就可以设置和获取表单用户输入内容；

  <body>
    <input type="text" value="123">
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        console.log($('input').val());
      });
    </script>
  </body>

val()方法

val设置值

设置和获取属性：attr()方法就可以实现设置和获取属性；

attr()方法

网友评论

饥人谷技术博客

本文标题：jquery DOM&事件

本文链接：https://www.haomeiwen.com/subject/xdubettx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！