jQuery与ajax

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

  • ready(handler)
    当DOM准备就绪时, 指定一个函数来执行; 虽然js提供了load事件, 当页面呈现时用来执行这个事件, 直到所有东西, 如图像已被完全接收前, 此事件不会被触发;
  • 大多数情况下, 只要DOM结构已完全加载时, 脚本就可以运行, 传递处理函数给.ready()方法, 能保证DOM准备好后就执行这个函数, 因此, 这里是进行所有其它事件绑定及运行其它jQuery代码的最佳地方
  • 如果执行的代码需要在元素被加载之后才能使用时, (如取得图片的大小需要在图片被加载完后才能知道), 就需要将这样的代码放到load事件中
  • 下面两种语法等价:
$(document).ready(handler)
$(handler)

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

  • $node.html()
    这是一个读写两用的方法, 用于获取/修改元素的innerHTML,包含html标签和文本内容;
    • 当没有传递参数的时候, 返回元素的innerHTML
    • 当传递了一个string参数的时候, 修改元素的innerHTML为参数值
$('div').html()  
$('div').html('123')  
//如果结果是多个进行赋值操作的时候会给每个结果都赋值
//如果结果是多个获取值得时候, 返回结果集中的第一个对象的相应值
  • $node.text()
    和html方法类似, 操作的是DOM的innerText值,不包含html标签, 只包含文本内容

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

jQuery.extend([deep], target, object1[, objectN..])(把两个或更多的对象合并到第一个当中)

  • deep: 可选Boolean类型, 指是否深度合并对象, 默认为false(可以明确指定为true, 但不能明确指定为false), 如果该值为true, 且多个对象的某个同名属性也都是对象, 则该"属性对象"的属性也将进行合并;
    target: Object类型, 目标对象, 其他对象的成员属性将被赋值到该对象上;
    Object1: 可选Object, 第一个被合并的对象
    ObjectN: 可选, 第N个被合并的对象
  • 如果参数为null或undefined, 则该参数将被忽略
  • 如果只为$.extend()指定了一个参数, 则意味着参数target被省略. 此时, target就是jQuery本身; 通过这种方式, 我们可以为全局对象jQuery添加新的函数
  • 如果多个对象具有相同的属性, 后者会覆盖前者的属性值

jQuery.fn.extend()把对象挂载到jQuery的prototype属性, 来扩展一个新的jQuery实例方法

简单来说: $.extend() 是用来扩展jQuery静态方法; $.fn.extend()是用来扩展jQuery实例方法

$.extend({
  sayName: function(){
    console.log("My name is jQuery");
  }
}); 
$.sayName(); //扩展静态方法

$.fn.extend({
  check: function() {
    return this.each(function() {
        this.checked = true;
    });
  }
});
$("input[type='checkbox']").check(); //扩展实例方法:所有的checkbox都会被选择
// 扩展的静态方法, 直接使用$调用; 扩展的实例方法, 要用$()调用

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

  • 链式调用就是分步骤的对jQuery对象使用方法后继续调用方法, 而不用再次选择jQuery对象
$("#Test").addClass('style').find("div").eq(0).fadeOut(200);
  • 原理: 实际上链式操作仅仅是通过对象上的方法最后return this 把对象再返回回来, 对象当然可以继续调用方法
  • 优点:
    • 链式操作能够让代码变得简洁, 排版清晰, 代码优雅
    • 链式操作最值得称赞的还是其解决了异步编程模型的执行流程不清晰的问题. jQuery中$(document).ready就非常好的阐释了这一理念, DOMContentLoaded是一个事件, 在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对象所匹配的每一个元素; 所有"读取数据操作只针对第一个匹配的元素"

返回值

  • data()函数的返回值是任意类型, 返回值的类型取决于当前data()函数执行的是"存储数据"操作(返回当前jQuery对象本身)还是"读取数据"操作(返回读取到的数据)
  • 如果当前jQuery对象匹配多个元素, 读取数据时, data()函数只以其中第一个匹配的元素为准
  • 如果执行data(key)函数时找不到相应的数据, 则放回undefined; 如果执行data()函数找不到相应的数据, 则返回一个空的对象(没有任何属性)

题目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.('src');
$node.attr.('title'); //获得

$node.attr.('id', 'newpp');
$node.attr.('src', 'newsrc');
$node.attr.('title', 'newtitle'); //修改

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

$node.attr('data-src', 'src')

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

$ct.prepend($node)

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

$ct.append($node)

删除$node

$node.remove()

把$ct里内容清空

$ct.empty()

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

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

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

//不包括内边距
$node.width();//获取宽度
$node.height();//获取高度
$node.width('value');//设置宽度
$node.height('value');//设置高度
//包括内边距
$node.innerWidth();//获取包括内边距的宽度
$node.innerHeight();//获取包括内边距的高度
$node.innerWidth('value');//设置包括内边距的宽度
$node.innerHeight('value');//设置包括内边距的高度
//包括边框
$node.outerWidth();//获取包括边框宽度
$node.outerHeight();//获取包括边框高度
$node.outerWidth('value');//设置包括边框宽度
$node.outerHeight('value');//设置包括边框高度
//包括外边距
$node.outerWidth(true);//获取包括外边距宽度
$node.outerHeight(true);//获取包括外边距高度

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

$(window).scrollTop()

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

$node.offset().left
$node.offset().top

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

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

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

$node.each(function(){
  var $str = $(this).text();
  $(this).text($str + $str);
})

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

$ct.find('.item')

获取$ct 里面的所有孩子

$ct.children()

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

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

获取选择元素的数量

$Node.length();

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

$node.index()

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

  • 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
    地址
  • 当窗口滚动时，获取垂直滚动距离
    地址
  • 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
    地址
  • 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
    地址
  • 当选择 select 后，获取用户选择的内容
    地址

题目8：

用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面效果预览500
地址

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 进阶15 jQuery与ajax
    题目一：jQuery 中， $(document).ready()是什么意思？ $(document).ready...
    Maaaax阅读 244评论 0赞 0
  • jQuery动画与ajax
    题目1： jQuery 中， $(document).ready()是什么意思？ ready( handler )...
    南山码农阅读 361评论 0赞 2
  • jQuery动画与ajax
    1. jQuery 中， $(document).ready()是什么意思？ 当DOM准备就绪时，指定一个函数来执...
    _李祺阅读 215评论 0赞 1
  • jQuery动画与ajax
    1： jQuery 中， $(document).ready()是什么意思？ 所有包括在$(document).r...
    任少鹏阅读 320评论 0赞 1
  • jQuery动画与ajax
    一、 jQuery 中， $(document).ready()是什么意思？ 为了防止文档在完全加载（就绪）之前运...
    婷楼沐熙阅读 336评论 2赞 1