jQuery动画与ajax

题目1： jQuery 中， $(document).ready()是什么意思？
$(document).ready()方法：为防止文档在完全加载之前运行Jquery代码,若在文档未完全加载前就运行函数,操作可能失败.必须在文档加载完后执行操作,可使用ready事件,作用相当于把js写到body末尾.

$(document).ready(function(){
});
可简写为:
$(function(){
})

window.onload：必须等网页中所有的元素全部加载完毕，才能执行
不能同时写多个，否则后面覆盖前面

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

$node.html()，返回所选择元素内的html内容，包含html标签和文本内容
$node.text()，返回所选择元素内的文本内容，不包含html标签，只包含文本内容

**题目3： $.extend 的作用和用法? **
$.extend()将多个对象合并到一起，可以传入多个参数。$.extend([deep,] target,…)[deep,]为布尔值默认情况不是深拷贝，可设置true为深拷贝。

//定义一个对象
var obj={
    name:'lulu',
    age:27,
    sex:'woman'
    };
//定义一个新对象
var newObj={
    name:'xuxu',
    age:20
};
//extend方法接受多个参数,并且第一个对象被覆盖
$.extend(obj,newObj,{
    name:'maomao',
    age:25,
    like:'eat'
});
console.log(obj);
//object{
//age:25,
//like:"eat",
//name:"maomao",
//sex:"woman"

题目4： jQuery 的链式调用是什么？
当jQuery的方法的返回值仍为当前对象时可以继续调用该对象的方法，这样就形成一种链式调用。

$(#ct).css('color','blue').show(400).hide();

题目5： jQuery 中 data 函数的作用
第一种用法：
.data(key,value)：在匹配元素上存储任意相关数据

$("div").data("people",{age:16,sex:"男"});
console.log( $("div").data("people").age    );  //16

第二种用法：
.data(key):返回匹配元素集合中的第一个元素给定成名的数据存储的值，通过.data(name,value)或HTML 5 data-*属性（着重）的设置。

<div data-role="page" data-last-value="43" data-hidden="true" ></div>

下面通过data()函数获取里面的值

$("div").data("role") === "page";
$("div").data("lastValue") === 43;

以上代码的第二条语句正确是表述了该元素的data-last-value属性。如果没有传递key参数的数据存储， jQuery将在元素的属性中搜索，将驼峰式字符串转化为中横线字符串，然后在结果前面加上data-。所以，该字符串lastValue将被转换为data-last-value。

题目6：

写出以下功能对应的 jQuery 方法：
给元素 $node 添加 class active，给元素 $noed 删除 class active

$node.addClass('active');//添加
$node.removeClass('active');//删除

展示元素$node, 隐藏元素$node

$node.show();//展示
$node.hide();//隐藏

获取元素$node 的属性: id、src、title，修改以上属性

$node.attr('id');//获取
$node.attr('id’,'值'); //修改
$node.attr('src');//获取
$node.attr('src’,'值');//修改
$node.attr('title');//获取
$node.attr('title’,'值');//修改

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

$node.data("src",str)

在$ct 内部最开头添加元素$node

$(".ct").prepend(node);

在$ct 内部最末尾添加元素$node

$(".ct").append(node);

删除$node

$(node).remove();

把$ct里内容清空

$node.empty();

在$ct 里设置 html <div class="btn"></div>

$ct.html('<div class="btn"></div>')

取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

$node.width();//不包括内边距宽度,仅包括内容
$node.height();//不包括内边距高度,仅包括内容
$node.innerWidth();//包括内容和内边距宽度
$node.innerHeight();//包括内容和内边距高度
$node.outerWidth();//包括内容,内边距,边框宽度
$node.outerHeight();//包括内容,内边距,边框高度
$node.outerHeight(true);//包括内容,内边距,边框,外边距高度
$node.outerWidth(true);//包括内容,内边距,边框,外边距宽度

获取窗口滚动条垂直滚动距离

$(window).scrollTop()

获取$node 到根节点水平、垂直偏移距离

$node.offset()

修改$node 的样式，字体颜色设置红色，字体大小设置14px

$node.css({"color":"red","font-size":"14px"})

遍历节点，把每个节点里面的文本内容重复一遍

$node.each(function(){
    console.log($(this).text())
})

从$ct 里查找 class 为 .item的子元素

$(".ct").find(".item")

获取$ct 里面的所有孩子

$(".ct").children()

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

$node.parents(".ct").find(".panel")

获取选择元素的数量

$node.length;
$node.size();

获取当前元素在兄弟中的排行

$node.index();

题目7：

用jQuery实现以下操作
当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色

$("#div1 .btn").on("click",function(){
        $(this).css("background-color","red");
        setTimeout(function(){
            $("#div1 .btn").css("background-color","blue");
        },500);
    });

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

$(document).on("scroll",function(){
        console.log($(this).scrollTop());
    });

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

$("div").on('mouseover',function(){
  $(this).css('background-color','red')
})
$("div").on('mouseout',function(){
  $(this).css('background-color','#fff')
})

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

$("input").on("focus",function(){
    $(this).css("border","1px solid blue");
});
$("input").on("change",function(){
    $(this).val($(this).val().toUpperCase());
});
$("input").on("blur",function(){
    $(this).css("border","");
    if($(this).val()!==""){
        console.log($(this).val());
    }
});

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

        <h3>5.当选择 select 后，获取用户选择的内容</h3>
        <select name="">
            <option value="1">美术</option>
            <option value="2">舞蹈</option>
            <option value="3">吉他</option>
            <option value="4">书法</option>
        </select>
        <p>用户选择的内容是:<span></span></p>
               
             $("select").on("change",function(){
                $("span").text($("select option:selected").text());
            });

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

jQuery动画与ajax

推荐阅读更多精彩内容