jquery DOM&事件

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()方法

最后编辑于：2017.12.04 03:30:43

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,547评论 6赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,399评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,428评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,599评论 1赞 274
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,612评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,577评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,941评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,603评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,852评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,605评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,693评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,375评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,955评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,936评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,172评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,970评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,414评论 2赞 342

jquery DOM&事件

Q&A

1. 库和框架的区别？

2. jquery 能做什么？

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

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

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

6. jquery 动画如何使用？

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

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

推荐阅读更多精彩内容