jQuery动画与ajax

1： jQuery $(document).ready()与window.onload的区别？

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。

1.执行时间

• window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
• $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕 .

2.编写个数不同

• window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
• $(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法

• window.onload没有简化写法
• $(document).ready(function(){})可以简写成$(function(){})。当$()不带参数时，默认参数就是document，因此还可以简写成：$().ready(function(){});

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

• $node.html()获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容。
• $node.text()得到匹配元素集合中每个元素的文本内容，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。

<div class="ct">  
    hello 
    <p>world</p>
</div>
<script>
console.log( $('.ct').html());   
/* hello
    <p>world</p>*/
console.log( $('.ct').text()); 
/* hello
    world*/
</script>      

Paste_Image.png

3. $.extend 的作用和用法

作用：将两个或更多对象的内容合并到第一个对象。

用法：

//用法1
jQuery.extend( target [, object1 ] [, objectN ] ) ;
//用法2
jQuery.extend( [deep ], target, object1 [, objectN ] );

用法一参数说明：

Paste_Image.png
用法二参数说明： Paste_Image.png

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

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

注意，目标对象（第一个参数）将被修改，并且将通过$.extend()返回。

<script>
    var a={name:'xuguojun'},b={name:'xuziqian',age:25},c={sex:'man'};
    //a被修改
    var object=$.extend(a,b,c);
    console.log(object);
    console.log(a);
</script> 

Paste_Image.png

如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象

var object = $.extend({}, object1, object2);

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

由于jQuery 对象上的方法最后会返回该对象，jQuery的链式调用就是可以在对象返回后再次调用该对象使用jQuery方法的一种操作。

举例：

$('.ct').find('.ipt').text('HelloWorld').end().find('.prh').text('ChainCalls');

链式调用的好处：

• 节省代码量，代码看起来更优雅；
• 返回的都是同一个对象，可以提高代码的效率。
• 让代码流程更清晰。

5. jQuery AJAX中缓存怎样控制

当使用GET方法发送数据时，ajax的参数cache默认设置为true，将缓存页面；将cache设置为false，浏览器将不会缓存页面，每当发起ajax请求时，都会向后台请求数据。
当使用POST方法时，则每次都会被认为是新的请求，不会缓存页面。

6. jQuery 中 data 函数的作用

作用：在匹配元素上存储任意相关数据， 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。该方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险。

用法1：在匹配元素上存储任意相关数据。

.data( key, value )
/*key，类型: String，一个字符串，用户存储数据的名称。
value，数据值，它可以是任意的Javascript数据类型，除了undefined。*/
.data( obj )
//obj，类型: Object，一个用于更新数据的 键/值对。

demo：

$("body").data("age", 35);
$("body").data("say", { input: "name", xiaoming});
$("body").data({ arr: [0, 1, 2]}); 

console.log($("body").data("age")); // 35
console.log($("body").data()); 
// { age: 35, say: { input: "name", xiaoming}, arr: [0, 1, 2] }

用法2：返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data( key )
/* key，类型: String，存储的数据名；如果那个元素上没有设置任何值，那么将返回undefined。*/
.data()

demo:

<script>
$("body").data("age", 35);
$("body").data("say", { input: "name"});
$("body").data({ arr: [0, 1, 2]}); 

console.log($("body").data("age")); // 35
console.log($("body").data("say")); //{ input: "name"}
console.log($("body").data());//{ age: 35, say: { input: "name", }, arr: [0, 1, 2] }
</script>  

Paste_Image.png

7：用jQuery方法实现一些功能

1.给元素 $node 添加 class active，给元素 $noed 删除 class active

$node.addClass("active");//为匹配元素添加class
$node.removeClass("active")为匹配元素删除class

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

$node.hide();//隐藏匹配元素
$node.show();//展示匹配元素

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

$node.attr("id");//获取匹配元素的id属性值
$node.attr("id","tab");//修改匹配元素的id属性值为tab
$node.attr("src");//获取匹配元素的src属性值
$node.attr("src","brush-seller.jpg");//修改匹配元素的src属性值为brush-seller.jpg
$node.attr("title");//获取匹配元素的title属性值
$node.attr("title","follow your heart");//修改匹配元素的title属性值为follow your heart
//还可以一次设置多个属性值
$node.attr({
  id: 'tab',
  src: 'brush-seller.jpg',
  title:'follow your heart'
});

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

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

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

$ct.prepend($node)

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

$ct.append($node)

7.删除$node

$ndoe.remove()

8.把$ct里内容清空

$ct.empty();//DOM中移除集合中匹配元素的所有子节点

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

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

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

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

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

$(window).scrollTop()

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

$node.offset()

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

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

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

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

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

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

16.获取$ct 里面的所有孩子

$(".ct").children()

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

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

18.获取选择元素的数量

$node.length;

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

$node.index();