jQuery动画与ajax

题目1： jQuery 中， $(document).ready()是什么意思？

  • ready( handler )

当DOM准备就绪时，指定一个函数来执行。

虽然JavaScript提供了load事件，当页面呈现时用来执行这个事件，直到所有的东西，如图像已被完全接收前，此事件不会被触发。

在大多数情况下，只要DOM结构已完全加载时，脚本就可以运行。传递处理函数给.ready()方法，能保证DOM准备好后就执行这个函数，因此，这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。

如果执行的代码需要在元素被加载之后才能使用时，（例如，取得图片的大小需要在图片被加载完后才能知道），就需要将这样的代码放到 load 事件中。

下面两种语法全部是等价的：

$(document).ready(handler)
$(handler)

我们经常这么使用

$(function(){
    console.log('ready');
});

题目2：$node.html()和$node.text()的区别?

  • html([string])

这是一个读写两用的方法，用于获取/修改元素的innerHTML

当没有传递参数的时候，返回元素的innerHTML
当传递了一个string参数的时候，修改元素的innerHTML为参数值
看个例子

$('div').html()
$('div').html('123')

后续这种读写两用的方法很多，原理都类似

如果结果是多个进行赋值操作的时候会给每个结果都赋值
如果结果多个，获取值的时候，返回结果集中的第一个对象的相应值

  • text()

和html方法类似，操作的是DOM的innerText值

题目3： $.extend 的作用和用法?

jQuery.extend([deep,] target [, object1 ] [, objectN ] )

  • 1.当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。

  • 2.如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的

目标对象（第一个参数）将被修改，并且将通过$.extend()返回。然而，如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象：

var object = $.extend({}, object1, object2);
在默认情况下，通过$.extend()合并操作不是递归的;

如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并，而是被覆盖。如果将 true作为该函数的第一个参数，那么会在对象上进行递归的合并。

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1
$.extend( object1, object2 );//f返回Object1 {apple: 0, banana: {price：200}, cherry: 97, durian: 100}，banana属性被object2覆盖。

题目4： jQuery 的链式调用是什么？

链式调用实例：

    $("#mybtn").css("width","100px")
            .css("height","100px")
            .css("background","red");

链式调用就是jQuery对象使用方法后继续调用方法，而不用再次选择jQuery对象。
原理：实际上链式操作仅仅是通过对象上的方法最后 return this 把对象再返回回来，对象当然可以继续调用方法。
优点：
1.当然是省代码啦，虽然jQuery对象选择比DOM对象要方便很多，但是，能省一行是一行，能省一句是一句，并且排版清晰，代码优雅。
2.链式操作最值得称赞的还是其解决了异步编程模型的执行流程不清晰的问题。jQuery中$(document).ready就非常好的阐释了这一理念。DOMCotentLoaded是一个事件，在DOM并未加载前，jQuery的大部分操作都不会奏效，但jQuery的设计者并没有把他当成事件一样来处理，而是转成一种“选其对象，对其操作”的思路。$选择了document对象，ready是其方法进行操作。这样子流程问题就非常清晰了，在链条越后位置的方法就越后执行。

题目5： jQuery 中 data 函数的作用

data()函数用于在当前jQuery对象所匹配的所有元素上存取数据。
通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。该函数属于jQuery对象(实例)。如果需要移除通过data()
函数存放的数据，请使用removeData()函数。

data()函数有以下两种用法：

  • 用法一：
jQueryObject.data( [ key [, value ] ])

以指定的键名key存取数据。如果指定了value参数，则表示以键名key存放值为value的数据；如果没有指定value参数，则表示读取之前以键名key存放的数据；如果没有指定任何参数，则以对象形式返回之前存储的所有数据。

  • 用法二：
jQueryObject.data( object )

以对象形式同时传入任意多个key-value形式的数据，对象的每个属性就是键名key，属性值就是value。

注意：data()函数的所有"存储数据"操作针对当前jQuery对象所匹配的每一个元素；所有"读取数据"操作只针对第一个匹配的元素。

Paste_Image.png

返回值

data()函数的返回值是任意类型，返回值的类型取决于当前data()函数执行的是"存储数据"操作还是"读取数据"操作。

如果data()函数执行的是"存储数据"操作，则返回当前jQuery对象本身；如果是"读取数据"操作，则返回读取到的数据。

如果当前jQuery对象匹配多个元素，读取数据时，data()函数只以其中第一个匹配的元素为准。

如果执行data(key)函数(仅传入一个参数key)时找不到相应的数据，则返回undefined。如果执行data()函数(不带任何参数)时找不到相应的数据，则返回一个空的对象(没有任何属性)。

题目6：写出以下功能对应的 jQuery 方法：

  • 给元素 $node 添加 class active
    $node.addClass( "active" );

  • 给元素 $noed 删除 class active
    $node.removeClass( "active" );

  • 展示元素$node, 隐藏元素$node
    $node.show();$node.hide();

  • 获取元素$node 的 属性: id、src、title， 修改以上属性
    $node.attr('src');$node.attr('id','value');
    $node.attr('id');$node.attr('src','value');
    $node.attr('title');$node.attr('title','value');

  • 给$node 添加自定义属性data-src

  • 在$ct 内部最开头添加元素$node
    $node.prepend('content')

  • 在$ct 内部最末尾添加元素$node
    $node.append('content')

  • 删除$node
    $node.remove

  • 把$ct里内容清空
    $node.empty()

  • 在$ct 里设置 html <div class="btn"></div>
    $ct.html('<div class="btn"></div>')

  • 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
    $node.width()和$node.height()//content的宽和高
    $node.innerWidth()和$node.innerHeight()//content，padding的宽和高
    $node.outerWidth()和$node.outerHeight;//content,padding,border的宽和高
    $node.outerWidth(true)和$node.outerHeight(true);//content,padding,border,margin的宽和高

  • 获取窗口滚动条垂直滚动距离
    $node.scrollTop()

  • 获取$node 到根节点水平、垂直偏移距离
    $node.offset().left;
    $node.offset().top;

  • 修改$node 的样式，字体颜色设置红色，字体大小设置14px
    $node.css({
    color:red,
    font-size:14px,
    })

  • 遍历节点，把每个节点里面的文本内容重复一遍
    $node.each(function(){
    $(this).text($(this)+$(this))
    })

  • 从$ct 里查找 class 为 .item的子元素
    $ct.find('.item')

  • 获取$ct 里面的所有孩子
    $ct.children()

  • 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
    $node.parent('.ct').children('.panel')

  • 获取选择元素的数量
    $node.length()

  • 获取当前元素在兄弟中的排行
    $node.index()

题目7：用jQuery实现以下操作

  • 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色

  • 当窗口滚动时，获取垂直滚动距离

  • 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色

  • 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时- 把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字

  • 当选择 select 后，获取用户选择的内容

效果
demo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    body{
        height: 900px;
        background-color: #999;
        font-size: 24px;
    }
    div{
        margin: 30px auto;
        padding: 30px;
        width: 500px;
        background-color: #ddd;
        text-align: center;
    }
    #btn{
        width: 90px;
        height: 40px;
        font-size: 18px;
        line-height: 20px;
        background-color: orange;
        color: white;
        border-radius: 3px;
        border:none;
    }
    #input{
        width: 200px;
        height: 40px;
        padding: 0 10px;
        border-radius: 3px;
    }
    #select{
        padding: 0 10px;
        margin-bottom: 20px;
        width: 120px;
        height: 40px;
        font-size: 24px;
        border-radius: 3px;
    }
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<div>
    <button id="btn">点一下</button>
</div>
<div>垂直滚动距离<span class="scroll">0</span>px</div>
<div class="bk"></div>
<div>
    <input id="input" type="text" name="" placeholder="在这里输入">
</div>
<div>
    <label name="你的爱车">dreamcar</label>
    <select id="select" name="你的爱车">
        <option value="奔驰">奔驰</option>
        <option value="宝马">宝马</option>
        <option value="奥迪">奥迪</option>
    </select>
    <h2></h2>
</div>
<script type="text/javascript">

//当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
$('#btn').on('click',function(){
    $('#btn').css("background-color", "red")
    setTimeout(function() {
        $('#btn').css("background-color","blue")
    }, 1000)
}) 

//当窗口滚动时，获取垂直滚动距离
$(window).on('scroll', function() {
    $('.scroll').text( $(window).scrollTop() )
})

//当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
$('.bk').on('mouseenter',function(){
    $('.bk').css("background-color","red")
})
$('.bk').on('mouseout',function(){
    $('.bk').css("background-color","#eee")
})

//当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
$('#input').on('focus',function(){
    $('#input').css("border-color","blue")
})
$('#input').on('keyup',function(){
    $('#input').val($('#input').val().toUpperCase())
})
$('#input').on('blur',function(){
    $('#input').css("border","none")
    console.log($('#input').val())
})

//当选择 select 后，获取用户选择的内容
$('#select').on('change',function(){
    console.log($('#select').val())
    $('h2').text("你的dreamcar是"+$('#select').val())
})

</script>
</body>
</html>

题目8： 用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面效果预览345

效果
demo

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加载新闻</title>
<style type="text/css">
*{margin: 0;padding: 0;}
ol,ul{list-style: none;}

ul > li{
    margin:10px;
    border:1px solid #eee;
    padding: 10px;
    font-size: 20px;
}
ul > li:hover{
    background-color: green;
    color: white;
}   
button{
    display: block;
    margin: 40px auto;
    padding: 15px;
    font-size: 24px;
    color: white;
    background-color: orange;
    border-radius: 3px;
    border:none; 
    cursor: pointer;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<ul>
    <li>新闻0</li>
    <li>新闻1</li>
</ul>
<button>加载更多新闻</button>
<script type="text/javascript">
    var isLoading = false

    $('button').on('click',function(e){
        e.preventDefault();
        if (isLoading) {
            return ;
        }
        isLoading = true;
        $.ajax({
            url:'http://localhost:8080/getNews?',
            method:'get',
            data:{length:5,
                  index:$('li').last().index()
            }
            }).done(function(data){
                append(data)
                isLoading = false;
            })
              .fail(function(jqXHR, textStatus){
                 console.log(textStatus);
            })
            console.log(data)
        })
    function append(arr){
        arr.forEach(function(e,i,arr){
            var $xxx = $('<li></li>')
            $xxx.text(arr[i]).appendTo($('ul'))
        })
    }
</script>
</body>
</html>

router.js

router.get('/getNews', function(req, res) {
  var length = req.query.length // 通过 req.query获取请求参数
  var index = parseInt(req.query.index) // 通过 req.query获取请求参数
  var result = []
  console.log(typeof(index))
  console.log(index)
  for(var i = 0;i < length ;i++){
    result.push("新闻"+(index+i+1))
  }

  res.send(result)
})

题目9(选做)： 实现一个天气预报页面，UI 如下图所示(可自由发挥)。数据接口:

获取当前用户所在城市接口：//jirenguapi.applinzi.com/city.php
服务端支持 CORS 跨域调用，前端可直接使用 ajax 获取数据

获取某城市对应的天气接口：//jirenguapi.applinzi.com/weather.php?city=北京
服务端支持 CORS 跨域调用，前端可直接使用 ajax 获取数据, 如果不传递参数默认获取当前用户所在城市的天气

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

推荐阅读更多精彩内容

  • jQuery动画与ajax
    1： jQuery 中， $(document).ready()是什么意思？ 所有包括在$(document).r...
    任少鹏阅读 297评论 0赞 1
  • jQuery动画与ajax
    1. jQuery 中， $(document).ready()是什么意思？ 当DOM准备就绪时，指定一个函数来执...
    _李祺阅读 194评论 0赞 1
  • jQuery动画与ajax
    一、 jQuery 中， $(document).ready()是什么意思？ 为了防止文档在完全加载（就绪）之前运...
    婷楼沐熙阅读 294评论 2赞 1
  • jQuery动画与ajax
    题目1： jQuery 中， $(document).ready()是什么意思？ 相当于window.onload...
    漂于行阅读 254评论 0赞 0
  • jQuery动画与ajax
    题目1： jQuery 中， $(document).ready()是什么意思？ $(document).read...
    peaceChierdo阅读 310评论 0赞 1