jquery DOM&事件

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

库主要是封装了某些函数的集合。框架也是。
使用库是指，你的代码决定什么时候从库中调用一个特定的方法；使用框架则是，你实现了一些回调方法，到了特定的时候框架会去调用这些方法。
当你在调用库的时候，你按照自己的意愿来操作它（比如jQuery）。
而，对于框架，那么操作就是倒转过来了，是它在调用你（比如bootstrap)。
常见的库：jQuery等
常见的框架：AngularJS,Bootstrapc，React等。

2.jquery 能做什么？

一、取得页面中的元素。
如果不使用JavaScript库，遍历DOM树，以及查找HTML文档结构中某个特殊的部分，必需编写很多代码。jQuery为准确获取需要操纵的文档元素，提供了可靠而富有效率的选择符机制。
二、修改页面的外观。
CSS虽然为呈现方式提供了一种强大的手段，但当所有浏览器不完全支持相同的标准时，单纯使用CSS就会显得力不从心。jQuery可以弥补这一不足，它提供了跨浏览器的标准来解决方案。而且即使在页面已经呈现之后，jQuery仍然能够改变文档中某个部分的类或都个别的样式属性。
三、改变页面的内容。
jQuery能够影响的范围并不局限于简单的外观变化，使用少量的代码，jQuery就能改变文档的内容，可以改变文本、插入或都翻转图像、对列表重新排序，甚至对HTML文档的整个结构都能重写和扩充——所有这些只需要一个简单易用的API。
四、响应用户的页面操作。
即使是最强大和最精心的设计的行为，如果我们无法控制它何时发生，那它也毫无用处。jQuery提供了截取形形色色的页面事件（比如用户单击一个链接）的适当方式，而不需要使用事件处理程序搞乱HTML代码。此外，它的事件处理API也消除了经常困扰Web开发人员的浏览器不一致性。
五、为页面添加动态效果。
为了实现某种交互式行为，设计者也必须向用户提供视觉上的反馈。jQuery中内置的一批淡入、擦除之类的效果，以及制作新效果的工具包，为此提供了便利。
六、无需刷新页面。
即可从服务器获取信息，这种编程模式就是从所周知的AJAX（Asyynchoronous JavaScript and XML），它能辅助Web开发人员创建出反应灵敏、功能丰富的网站。jQuery通过消除这一过程中的浏览器特定的复杂性，使开发人员得以专注于服务器端的功能设计。
七、简化常见的JavaScript任务。
除了这些完全针对文档的特性之外，jQuery也提供了对基本的JavaScript结构（例如迭代和数组操作等）的增强。

参考JQuery的用途和功能

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

jquery对象是伪数组，DOM原生对象如果只有一个，表示出来就不是伪数组。
jQuery对象转化成DOM原生对象，提取数组中的单个元素:[xx](n)。
DOM原生对象转化为jQuery对象，加上$()。
举例：

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
    <h1>标题</h1>
    <p>段落0</p>
    <p>段落1</p>
    <ul>
        <li class="list">0</li>
        <li class="list">1</li>
        <li class="list">2</li>
    </ul>
</body>
</html>

可以看到，jQuery对象是一个伪数组

就算只有一个元素，也是个伪数组。数组加上序号可以提取到具体DOM元素。

DOM对象加上$()得到伪数组。

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

类似于原生JavaScript，用xx.xxx('xxxx',function(){})来绑定事件。其中，xxx方法有很多种，例如bind、unbind、delegate、live、on、off等。

1..bind()
.bind()只能对已有的元素绑定事件。是从1.0版开始就已经提供了的，这是对事件绑定提供一个统一的接口。
写法：

.bind( eventType [, eventData ], handler(eventObject) )

eventType一个包含一个或多个DOM事件类型的字符串，比如"click"或"submit,"或自定义事件的名称。
eventData一个对象，它包含的数据键值对映射将被传递给事件处理程序。
handler(eventObject)当事件触发时执行的函数。
举例：

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/1.7.1/jquery.js"></script>
  <meta charset="utf-8">
  <title>哈哈</title>
</head>
<body>
    <div>
        <h1>事件绑定</h1>
        <p>
        <span>这是一个链接</span>
        <a href="#">点我</a>
        </p>
        <h2>下面是一个表格</h2>
        <form>
            <input type='text' name='sex'>
            <input type="submit" name='submit'>
        </form>
        <script>
        $('a').bind('click', function() { alert("That tickles!") });
        $('h2').append('<a href="#">再点一次</a>');
        </script>
    </div>
</body>
</html>

效果
点击第一个链接弹出That tickels!，点击第二个链接没反应。
2.unbind()
unbind()从元素上移除一个之前附加的事件处理器。
写法：

.unbind( [eventType ] [, handler(eventObject) ] )

上例中可以把js部分改成：

<script>
     $('a').bind('click', function() { alert("That tickles!") });
     $('a').bind('mouseenter', function() { console.log("That tickles!") });
     $('a').unbind('click');
</script>

.unbind()阻止了鼠标的点击事件。点击第一个链接没有反应，鼠标滑过跳出That tickels!。

3..delegate()
.delegate()用于为指定元素的一个或多个事件绑定事件处理函数。即使是执行.delegate()之后新添加的元素，只要它符合条件，绑定的事件处理函数仍然对其有效。.delegate()从1.4.2版本开始使用。
写法：

.delegate( selector, eventType, handler(eventObject) )

把1中的js代码改为：

<script>
    $('p').delegate('a','click', function() { 
     $(this).after('<br/><a href="#">Another paragraph!</a>')
    });
</script>

结果
点击第一个链接时，页面显示链接又一个链接。点击又一个链接，还会出现又一个链接。.delegate()之后新添加的元素，只要它符合条件，绑定的事件处理函数仍然对其有效。
4..live()
.live()不仅能对能对已有的元素绑定事件，还能对未来插入的元素绑定事件。但是在1.7版本被.on()取代，在1.9版本被废弃了，以后的版本就不能使用了。
我们上面举的例子中用到的是1.7版本，.live()还可以使用。
写法：

.live( events, handler(eventObject) )

将上面的js部分改为：

<script>
     $('a').live('click', function() { console.log("That tickles!") });
</script>

结果，点击两个链接控制台都That tickles输出。

5..on()
.on()是1.7版本以后增加的方法。这以后.bind()，.delegate()几种方法都可以用.on()代替。
写法：

.on( events [, selector ] [, data ], handler )

主要区别是：

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );

把.delegate()中的js代码改为：

<script>
$('p').on('click','a', function() { 
     $(this).after('<br/><a href="#">又一个链接 </a>')
    });
</script>

效果
和.delegate()相同。
6..off()
.off()是移除一个事件处理程序。和.on()对应。
写法：

.off( events [, selector ] [, handler ] )

将.unbind()的js代码改成：

<script>
     $('a').on('click', function() { alert("That tickles!") });
     $('a').on('mouseenter', function() { console.log("That tickles!") });
     $('a').off('click');
</script>

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

1.jquery用show()展示元素，用hide()隐藏元素，.toggle()显示或隐藏匹配元素，如果当前元素是隐藏的，用.toggle()可以显示出来；如果当前元素是显示的，用.toggle()可以隐藏起来。
1.1 简单的隐藏:

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/1.7.1/jquery.js"></script>
  <meta charset="utf-8">
  <title>显示/隐藏元素</title>
</head>
<body>
    <div>
        <h1>标题1</h1>
        <p>这是一段文字。</p>
        <button id="close" name="openbutton">隐藏标题</button>
        <button id="open" name="closebutton">显示标题</button>
      <button id="oc" name="button">显示/隐藏标题</button>
        <script>
            $("#close").on('click',function(){
                $("h1").hide();
            })
            $("#open").on('click',function(){
                $("h1").show();
            })
            $("#oc").on('click',function(){
                $("h1").toggle();
            })
        </script>
    </div>
</body>
</html>

效果
1.2 .show()，.hide()，.toggle()还有以下用法：

.show( duration [, easing ] [, complete ] )
.hide( duration [, easing ] [, complete ] )
.toggle( [duration ] [, complete ] )

其中，duration设置显示/隐藏经过的时间，可以用毫秒，fast，slow等。
** [, easing ]设置显示/隐藏时元素的速度。默认值为 swing（在开头/结尾移动慢，在中间移动快）。还可以是linear（匀速移动）。
** [, complete ]设置显示/隐藏元素后的操作。
举例：

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/1.7.1/jquery.js"></script>
  <meta charset="utf-8">
  <title>显示/隐藏元素</title>
</head>
<body>
    <div>
        <h1>标题1</h1>
        <p>这是一段文字。</p>
        <h3>标题2</h3>
        <button id="close" name="openbutton">隐藏标题</button>
        <button id="open" name="button">显示标题</button>
      <button id="oc" name="button">显示/隐藏标题</button>
        <script>
            $("#close").on('click',function(){
                $("h1").hide(400,function(){
                  $("p").hide(200);
                })
            })
            $("#open").on('click',function(){
                $("h1").show(400,function(){
                  $("p").show(200);
                })
            })
            $("#oc").on('click',function(){
                $("h1").toggle(400,function(){
                  $("p").toggle(200);
                })
            })
        </script>
    </div>
</body>
</html>

效果

2.还可以用.fadeIn()淡入效果显示元素,.fadeOut淡出效果隐藏元素，.fadeToggle()淡入或者淡出显示或者隐藏元素。
将1.1中的.hide()换成.fadeOut()，.show()换成fadeIn(),.toggle()换成.fadeToggle()。也可以隐藏或者显示元素。
效果
也有以下用法，和.show() ，.hide()类似。

.fadeIn( [duration ] [, easing ] [, complete])
.fadeOut( [duration ] [, easing ] [, complete]) 
.fadeToggle( [duration ] [, easing ] [, complete])

3..slideDown()方法用于向下滑动显示元素,.slideUp()方法用于向上滑动隐藏元素,.slideToggle()方法可以在. slideDown()与 .slideUp()方法之间进行切换。
如果元素向下滑动，则. slideToggle() 可向上滑动隐藏它们。
如果元素向上滑动，则. slideToggle() 可向下滑动显示它们。

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/1.7.1/jquery.js"></script>
  <meta charset="utf-8">
  <title>显示/隐藏元素</title>
</head>
<body>
    <div>
        <h1>标题1</h1>
        <p>这是一段文字。</p>
        <button id="close" name="openbutton">隐藏标题</button>
        <button id="open" name="closebutton">显示标题</button>
        <script>
            $("#close").on('click',function(){
                $("h1").slideUp(400);
            })
            $("#open").on('click',function(){
                $("h1").slideDown(400);
            })
        </script>
    </div>
</body>
</html>

效果
把.slideDown()和slideUp()都换成.slideToggle()是一样的效果。
效果
关于这几个用法，也有

.slideDown( [duration ] [, easing ] [, complete ] )
.slideUp( [duration ] [, easing ] [, complete ] )
.slideToggle( [duration ] [, easing ] [, complete ] )

这几个方法，用法同.hide()。

6.jquery 动画如何使用？

jQuery动画用.animate()实现。表示根据一组 CSS 属性，执行自定义动画。
写法：
.animate( properties [, duration ] [, easing ] [, complete ] )
中括号中的属性是可选的。properties是必须的，设置一些CSS属性。
duration可选。设置动画运行的时间。可以是normal，fast，slow或者数字表示毫秒数。
easing可选。设置动画的过渡方式。jQuery提供swing和linear两种方式。
complete可选。在动画完成时执行的函数。
举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.7.1/jquery.js"></script>
    <style>
        #container {
            position: relative;
            width: 100px;
            height: 100px;
            background: red;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <button id="move">动起来</button>
<script>
    $('#move').on('click',function(){
        $('#container').animate({width:200,height:200,top: 100,left:0});
        $('#container').animate({width:200,height:200,top: 100,left:100});
        $('#container').animate({width:150,height:150,top: 0,left:100});
        $('#container').animate({width:100,height:100,top: 0,left:0});
    })
</script>
</body>
</html>

效果
在动画运行过程中可以停止运行。上面的代码相当于每个动画动作排在一个队列中。
.finish()会停止当前动画动作，并会导致所有排队的动画的CSS属性跳转到他们的最终值。即停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
.stop()停止匹配元素当前正在运行的动画。
.stop( [queue ] [, clearQueue ] [, jumpToEnd ] )
queue (默认: false)设置停止动画队列的名称。
clearQueue一个布尔值，指示是否取消当前列队动画。默认 false，表示不取消。为true时表示取消，而且队列中的其余的动画也被删除并且永远不会运行。
jumpToEnd 一个布尔值指示是否当前动画立即完成。默认false,表示当前动画立即完成。true表示当前动画停止，并且立刻移动到当前动画的目标位置。
.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>finish demo</title>
    <style>
        .box {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 15px;
            height: 15px;
            background: black;
        }
        #path {
            height: 280px;
            font-size: 70%;
            border-left: 2px dashed red;
            border-bottom: 2px dashed green;
            border-right: 2px dashed blue;
        }
        button {
            width: 12em;
            display: block;
            text-align: left;
            margin: 0 auto;
        }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/1.7.1/jquery.js"></script>
</head>
<body>

<div class="box"></div>
<div id="path">
    <button id="go">Go</button>
    <br>
    <button id="bstt" class="b">.stop( true,true )</button>
    <button id="bcf" class="b">.clearQueue().finish()</button>
    <br>
    <button id="bstf" class="b">.stop( true, false )</button>
    <button id="bcs" class="b">.clearQueue().stop()</button>
    <br>
    <button id="bsff" class="b">.stop( false, false )</button>
    <button id="bs" class="b">.stop()</button>
    <br>
    <button id="bsft" class="b">.stop( false, true )</button>
    <br>
    <button id="bf" class="b">.finish()</button>
</div>

<script>
    var horiz = $( "#path" ).width() - 5,
            vert = $( "#path" ).height()-7;

    var btns = {
        bstt: function() {
            $( "div.box" ).stop( true, true );
        },
        bs: function() {
            $( "div.box" ).stop();
        },
        bsft: function() {
            $( "div.box" ).stop( false, true );
        },
        bf: function() {
            $( "div.box" ).finish();
        },
        bcf: function() {
            $( "div.box" ).clearQueue().finish();
        },
        bsff: function() {
            $( "div.box" ).stop( false, false );
        },
        bstf: function() {
            $( "div.box" ).stop( true, false );
        },
        bcs: function() {
            $( "div.box" ).clearQueue().stop();
        }
    };

    $( "button.b" ).on( "click", function() {
        btns[ this.id ]();
    });

    $( "#go" ).on( "click", function() {
        $( ".box" )
                .clearQueue()
                .stop()
                .css({
                    left: 10,
                    top: 10
                })
                .animate({
                    top: vert
                }, 3000 )
                .animate({
                    left: horiz
                }, 3000 )
                .animate({
                    top: 10
                }, 3000 );
    });
</script>

</body>
</html>

效果

参考.finish()

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

1.设置和获取元素内部HTML内容用到.html()方法。
.html()没有参数。获取集合中第一个匹配元素的HTML内容。
.html(htmlstring/function)有参数。设置每一个匹配元素的html内容。里面可以是HTML内容或者是函数。
2.设置和获取元素内部文本用到.text()方法。
.text()没有参数。得到匹配元素集合中每个元素的文本内容结合，包括他们的后代。
.text(textstring/function)有参数。设置匹配元素集合中每个元素的文本内容为指定的文本内容。
举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取、设置元素</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.7.1/jquery.js"></script>
</head>
<body>
        <h1 id="header">标题</h1>
        <p id="description">这是<b>粗体</b>文字</p>
        <button id="get">获取</button>
        <button id="set">设置</button>
        <button id="gettext">获取文本</button>
        <button id="settext">设置文本</button>
<script>
    $('#get').on('click',function(){
        alert($('p').html());
    })
    $('#set').on('click',function(){
        $('p').html('字体变<i>斜</i>了');
    })
    $('#gettext').on('click',function(){
        alert($('p').text());
    })
    $('#settext').on('click',function(){
        $('p').text('字体变<i>斜</i>了？');
    })
</script>
</body>
</html>

效果

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

1.设置和获取表单用户输入或者选择的内容用到.val()方法。
.val()没有参数。获取集合中第一个匹配表单的内容。
.val(htmlstring/function)有参数。设置每一个匹配表单的内容。里面可以是HTML内容或者是函数。
2.设置和获取元素属性用到.attr()方法。
.attr(attributeName )获取匹配的元素集合中的第一个元素的属性的值
.attr(attributeName，value ) 设置每一个匹配元素的一个或多个属性。
举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <style>
        button {
            margin-top: 10px;
        }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/1.7.1/jquery.js"></script>
</head>
<body>
   <h3>表单</h3>
    <input type="text" id="content">
   <img data-img="http://js.jirengu.com/images/dave.min.svg"><br/>
    <button id="get">获取表单</button>
   <button id="set">设置表单</button>
   <button id="getvalue">获取属性</button>
   <button id="setvalue">设置属性</button>
<script>
    $('#get').on('click',function(){
        alert($('#content').val());
    })
    $('#set').on('click',function(){
        $('#content').val('123<i>456</i>')
    })
    $('#getvalue').on('click',function(){
        alert($('img').attr('data-img'));
    })
    $('#setvalue').on('click',function(){
        $('img').attr('src',$('img').attr('data-img'));
    })
</script>
</body>
</html>

效果
本文版权归本人和饥人谷所有，转载请注明出处。

最后编辑于：2017.12.04 05:07:07

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