jQuery动画与ajax

字数 652阅读 28

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>

推荐阅读更多精彩内容