jQuery动画与ajax

1: jQuery 中, $(document).ready()是什么意思?
$(document).ready()是当文档中的DOM节点加载完成后,在加载外部图片和资源前,执行ready()里面的操作。

$(document).ready(function(){
    //do something
});
等价于
$(function(){
    //do something
});

window.onload是整个页面加载完成(包括图片、CSS、脚本等)后,执行onload()中的操作。
网页加载步骤:

1.解析HTML结构
2.加载外部脚本和样式表文件。
3.解析并执行脚本代码
4.构造HTML DOM结构 //ready()在此步完成后触发
5.加载图片等外部文件
6.页面加载文件 //load()在此步完成后触发

2: $node.html()和$node.text()的区别?

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

3: $.extend 的作用和用法?

$.extend()将多个对象合并到一起,可以传入多个参数。$.extend([deep,] target,…)[deep,]为布尔值默认情况不是深拷贝,可设置true为深拷贝

var obj = {}
var obj1 = {
    name:'gaojin',
    age:21
}
$.extend(obj,obj1); 
//也可以写为
var obj = $.extend({},obj1);
console.log(obj) //{name:'gaojin',age:21}

那这样的拷贝是深拷贝还是浅拷贝呢

var obj = {}
var obj1 = {
    name:'gaojin',
    age:21,
    arr:[1,2,3]
}
$.extend(obj,obj1);
obj.arr[0] = 'changed';
console.log(obj1.arr[0]) //changed

可以发现是浅拷贝,都是同一个引用,那如何深拷贝呢?

$.extend(true,obj,obj1);
obj.arr[0] = 'changed';
console.log(obj1.arr[0])

只需传入一个参数true就可以实现深拷贝了
当然拷贝的对象可以不只一个可以是多个,那它就会将所有对象的属性都拷贝到目标对象上,且如果重复就会发生覆盖。

var obj = {}
var obj1 = {
    name:'gaojin',
    age:21,
    arr:[1,2,3]
}
var obj2 = {
    name:'dushen',
    age:21,
    sex:'female'
}
$.extend(obj,obj1,obj2)
console.log(obj) //Object {name: "dushen", age: 21, arr: Array[3], sex: "female"}

可以发现相同的属性被覆盖,不同的添加到目标对象。那在日常的使用场景是什么呢?
当我们定义一个函数,如果用户传入参数就安装参数来执行,如果没有参数就用默认参数

function getPeople(obj) {
    var def = {
        name:'gaojin',
        age:21
    }
    var opts = {};
    $.extend(opts,def,obj);
    //再对opts进行操作
}

4: jQuery 的链式调用是什么?

链式调用:使用jQuery方法时,对象方法返回的是对象本身,可以调用对此对象的其他jQuery方法,实现连续调用多个方法
例:$(this).siblings().removeClass('active');

5: jQuery 中 data 函数的作用

jQuery.data( element, key, value ),存储任意数据到指定的元素,返回设置的值。
element
类型: Element
要存储数据的DOM对象
key
类型: string
存储的数据名
value
类型: Object
新数据值
jQuery.data() 方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。如果 DOM 元素是通过 jQuery 方法删除的或者当用户离开页面时,jQuery 同时也会移除添加在上面的数据。我们可以在一个元素上设置不同的值,并获取这些值
详细参考:http://api.jquery.com/jQuery.data/

##6. 写出以下功能对应的 jQuery 方法:
 <script>
    //给元素 $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", value);
    $node.attr("src", value);
    $node.attr("title", value);
    //给$node 添加自定义属性data- src
    $node.data("src", "address");
    //在$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();                // width
    $node.height();               // height
    $node.innerWidth();       // width+ padding
    $node.innerHeight();      // height+ padding
    $node.outerWidth();       // width+ padding + border
    $node.outerHeight();      // height + padding + border
    $node.outWidth(true);    // width + padding + border + margin
    $node.outHeight(true);   // height + padding + border + margin

    //获取窗口滚动条垂直滚动距离
    .scrollTop();
    //获取$node 到根节点水平、垂直偏移距离
    $node.offset();
    //修改$node 的样式,字体颜色设置红色,字体大小设置14px
    $node.css("color":"red", "font-size":"14px");
    //遍历节点,把每个节点里面的文本内容重复一遍
    $node.each(function () {
      var text=$(this).text();
      text+=text;
    });
    //从$ct 里查找 class 为 .item的子元素
    $ct.hasClass(".item");
    //获取$ct 里面的所有孩子
    $ct.children();
    //对于$node,向上找到 class 为'.ct'的父亲,在从该父亲找到'.panel'的孩子
    $node.parent(".ct").find(".panel");
    //获取选择元素的数量
    $node.length;
    //获取当前元素在兄弟中的排行
    $node.index();
  </script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容