jquery常用方法&ajax

一些小问题

Jquery 中， $(document).ready()是什么意思？和window.onload 的区别？ 还有其他什么写法或者替代方法？

• $(document).ready()：在所有DOM节点加载完成后运行括号内的内容，此时图片、视频、音频可能还没加载完成。可以同时写多个该函数。其他写法还有：$().ready(function(){})或`$(function(){})
• window.onload：当页面所有内容加载完成后运行后面的代码，此时图片、视频等必须加载完毕，只能写一个window.onload，后写的会覆盖之前的。

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

• $node.html()：获取节点内所有内容，包括文本和html标签。
• $node.text()：获取节点内所有文本内容，只包括文本。

$.extend 的作用和用法?

• 当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。
• 如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的
• 例子：将一个或多个对象合并到目标对象中：

var obj1 = {a:0,b:10};
var obj2 = {a:100,c:200};
var obj3 = $.extend(obj1,obj2);
console.log(obj1);  //  {a:100,b:10,c:200}
console.log(obj3);  //  {a:100,b:10,c:200}

• extend()会修改目标对象，如果我们不希望改动对象，，则可以将目标对象设为空对象，例子：

var obj1 = {a:0,b:10};
var obj2 = {a:100,c:200};
var obj3 = $.extend({},obj1,obj2);
console.log(obj1);  //  {a:0,b:10}
console.log(obj3);  //  {a:100,b:10,c:200}

• extend()所进行的合并操作是浅拷贝，如果对象的属性中有对象和数组，需要使用深拷贝，则可以给其加一个参数true，例子：

// 不使用true参数，浅拷贝，将obj2.banana的指针复制给obj1.banana，只有price属性
var obj1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var obj2 = {
  banana: { price: 200 },
  durian: 100
};

$.extend( obj1, obj2 );  // {apple: 0, banana: { price: 200 }, cherry: 97, durian: 100}

// 使用true参数，深拷贝，将obj2.banana的属性再添加给obj1.banana，即有新的新的price属性，也有原来的weight属性
var obj1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var obj2 = {
  banana: { price: 200 },
  durian: 100
};

$.extend( obj1, obj2 );  // {apple: 0, banana: { price: 200 }, cherry: 97, durian: 100}

JQuery 的链式调用是什么？

• 当JQuery的方法的返回值仍然为当前对象的时候，可以继续调用该对象的方法，就叫做链式调用，如$(ele).parents().find().addClass().hide();就是典型的链式调用

JQuery ajax 中缓存怎样控制?

• 通过cache属性进行控制，其值默认为true(dataType为”script”和”jsonp”时默认为false)，如果将其设置为false，浏览器将不会缓存此页面。
• 它的工作原理是在GET请求参数中附加_={timestamp}

jquery 中 data 函数的作用

• .data(key,value)函数匹配的JQ对象上储存任意相关数据，或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值
• 通过data()函数存储的数据都是临时数据，页面刷新后，之前存放的数据都将不存在。
• 例子如下：

    $("body").data("ReedSun", "shuai");
    console.log($("body").data("ReedSun"));

常用Jq 方法：

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

//添加class
$node.addClass("active");
//删除class
$noed.removeClass("active");

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

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

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

• 获取元素属性：

var id = $node.attr("id");
var src = $node.attr("src");
var title = $node.attr("title");

• 修改元素属性：

$node.attr({
    id: "header",
    src: "www.jirengu.com",
    title: "ReedSun"
});

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

//添加自定义属性
$node.attr("data-src", "www.jirengu.com");

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

//开头添加元素
$ct.append($node);

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

//末尾添加元素
$ct.prepend($node);

删除$node

//删除元素
$node.remove();

把$ct里内容清空

//清空元素
$ct.empty();

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

//设置html
$ct.html("<div class="btn"></div>);

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

//获取宽度（不包括内边距、边框、外边距）
$node.width();
//获取宽度（包括内边距）
$node.innerWidth();
//获取宽度（包括内边距和边框）
$node.outerWidth();
//获取宽度（包括内边距、边框和外边距）
$node.outerWidth(true);
//获取高度（不包括内边距、边框、外边距）
$node.height();
//获取高度（包括内边距）
$node.innerHeight();
//获取高度（包括内边距和边框）
$node.outerHeight();
//获取高度（包括内边距、边框和外边距）
$node.outerHeight(true);

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

$(window).scrollTop();

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

$node.offset();

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

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

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

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

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

$ct.find(".item");

获取$ct 里面的所有孩子

$ct.children();

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

$node.parents(".ct").find(".penel");

获取选择元素的数量

$ct.size();

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

$ct.index();

一些小demo

当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色

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

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

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

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

• 演示、代码

使用Jq的ajax实现的例子：

（拷贝html和php到本地，开启服务器后即可演示）

• 演示、代码