jquery 常用方法&ajax 基础知识问答

一、问答

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

意思是当document准备就绪时就执行某个指定的函数；
区别：
1、window.onload只能编写一个，即使编写多个也只执行一个，而$(document).ready()则可编写多个并且都可得到执行；
2、window.onload需要等到页面所有的元素（含图片的加载）加载完成后才执行，而$(document).ready()只需等到DOM准备就绪时就执行（不必等待所有元素加载完后再执行）；
3、window.onload是原生js中的，而 $(document).ready()需在调用jquery库后才能使用；
4、window.onload不可简写，而$(document).ready()可简写成

$(function(){})

或者

$().ready(function(){})

下面举个例子：

window.onload = function() {
  init();
  doSomethingElse();
};

其实jQuery里也load方法

$("img").load(function(){
console.log("hello")
})
// 或者这样
$(window).load(function () {
  // run code
});

（二）、$node.html()和$node.text()的区别?

$node.html()是获取集合中第一个匹配元素的html内容;当()里面含有参数时则表示设置每个匹配元素的html内容；
$node.text()是获取匹配集合中每个元素的合并文本，包括他们的后代;当（）里含有参数时，表示设置每个匹配元素的文本内容为指定文本内容；另外，$node.text()与$node.html()的不同在于$node.text()能够在xml文档中使用，而html不可以。

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style type="text/css">
    </style>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>

    <p class="first"> 我是 <em>段落1</em> </p>
    <p class="second">我是段落2</p>

    <script>
     console.log("我是段落1的html类型 "+$(".first").html()) ;
     console.log("我是段落1的text类型 "+$(".first").text()) ;
     console.log("我是段落2的html类型 "+$(".second").html()) ;
     console.log("我是段落2的text类型 "+$(".second").text()) ;
     console.log($(".second").html()===$(".second").text());
    </script>

</body>
</html>

运行结果

需要指出的是，当$node里面是纯文字时，$node.html()和$node.text() 结果是相等的，例如上面的例子：$(".second").html()===$(".second").text() 运行结果是true；

再举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style type="text/css">
    </style>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>

    <div class="demo-container">
          <div class="demo-box">Demonstration Box</div>
      <ul>
      <li>list item 1</li>
      <li>list <strong>item</strong> 2</li>
      </ul>
    </div>
    <div class="demo-container">
        我是第二个<em>demo-container</em>
    </div> 

    <script>
     console.log("我是html类型 "+$(".demo-container").html()) ;
     console.log("我是text类型 "+$(".demo-container").text()) ;
    </script>

</body>
</html>

运行结果

（三）、$.extend 的作用和用法?

$.extend的作用是将两个或以上的对象内容合并到第一个对象；
$.extend的用法见下图：

Paste_Image.png

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style type="text/css">
    </style>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>



<script>

    var licai={
    "name":"licai",
    "age":"24",
    "like":{"inside":"coding","outside":"cycling","middle":"football"}

    };
    var caili={
    "name":"caili",
    "like":{"inside":"reading","outside":"footbal"}    
    }

    $.extend(licai,caili);
    console.log(licai);
    console.log(caili);

</script>

</body>
</html>

Paste_Image.png

若将 $.extend(licai,caili) 改成 $.extend(true，licai,caili)就变成了深拷贝，见下面的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style type="text/css">
    </style>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>



<script>
    var licai={
    "name":"licai",
    "age":"24",
    "like":{"inside":"coding","outside":"cycling","middle":"football"}

    };

    var caili={
    "name":"caili",
    "like":{"inside":"reading","outside":"footbal"}    
    }


    $.extend(true,licai,caili);
    console.log(licai);
    console.log(caili);

</script>

</body>
</html>

Paste_Image.png

综上所述：
当目标对象的属性与非目标对象属性相同时，目标对象的属性值若与非目标对象不同，则会被非目标对象的属性值给修改掉；（比如上面深拷贝的例子，目标对象name及like属性与非目标对象相同，目标对象的name属性值与非目标的name属性值相同，目标对象的属性值将被修改成非目标对象的属性值；目标对象的like属性值与非目标对象的like属性值也不同，目标对象like中的属性值inside属性及outside属性的属性值均被非目标对象修改了，但是若在深拷贝时，middle属性的属性值会被保留，但若是浅拷贝，则目标对象like属性值会被非目标对象完全粗暴的替换/修改成与非目标对象完全一样的属性值）

（四）、JQuery 的链式调用是什么？

可以连续使用jQuery方法的过程叫做JQuery 的链式调用；
$(selector).方法1（回调函数1）.方法2（回调函数2）.方法N（回调函数N）....
也可这样写：

$("选择器")
    .方法1(回调函数1)
    .方法2(回调函数2)
    .方法N(回调函数N);

其实链式调用就是通过对象的方法最后将对象再返回回来（return this）继续被其他方法调用；可通过这里的原生 js 实现链式调用的例子能够很好的理解：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style type="text/css">
    </style>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
    <script>
    var Dog=function (name,age){
        this.name=name;
        this.age=age;
    };
    Dog.prototype={
        getName:function(){
            console.log(this.name);
            return this
        },
        getAge:function(){
            console.log(this.age);
            return this
        }
    } ;
    Dogs=function(name,age){
        return new Dog(name,age);
    } ;    
    Dogs("goutou",3).getName().getAge();
    </script>

</body>
</html>

Paste_Image.png

（五）、JQuery ajax 中缓存怎样控制?

可使用cache这个参数来控制是否缓存页面，当为ture时则缓存页面（默认为ture，除了dataType为jsonp及script以外），false为不缓存页面；其实不缓存页面的实现原理就是在GET请求参数中附加"_={timestamp}"（时间戳）；

（六）、jquery 中 data 函数的作用？

存储数据

返回参数

值得提出的是：注意这两种方法目前并不提供在XML文档上跨平台设置，作为Internet Explorer不允许通过自定义属性附加数据。

下面举个例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
  div { color:blue; }
  span { color:red; }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <div>
    我的兴趣是
    <span></span>
    and
    <span></span>
  </div>
<script>
$("div").data("like", { "inside": "coding", "outside": "football" });
$("span:first").text($("div").data("like").inside);
$("span:last").text($("div").data("like").outside);
console.log($("div").data("like"))
console.log($("div").data())
</script>
 
</body>
</html>

运行结果

从jQuery 1.4.3起， HTML 5 data- 属性将自动被引用到jQuery的数据对象中。嵌入式破折号处理属性（ attributes）的方式在 jQuery 1.6 中已经改变，以使之符合W3C HTML5 规范.

举个例子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
  div { color:blue; }
  span { color:red; }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'>    
  </div>
  <script>
    console.log($("div").data("role")==="page");
    console.log($("div").data("lastValue")===43);
    console.log($("div").data("lastValue")==="43");
    console.log($("div").data("hidden")===true);
    console.log($("div").data("hidden")==="true");
    console.log($("div").data("options").name==="John");
  </script>
 
</body>
</html>

Paste_Image.png

二、代码

（一）、写出以下功能对应的 Jq 方法：

1.给元素 $node 添加 class active，给元素 $noed 删除 class active
2.展示元素$node, 隐藏元素$node
3.获取元素$node 的属性: id、src、title，修改以上属性
4.给$node 添加自定义属性data-src
5.在$ct 内部最开头添加元素$node
6.在$ct 内部最末尾添加元素$node
7.删除$node
8.把$ct里内容清空
9.在$ct 里设置 html <div class="btn"></div>
10.获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
11.获取窗口滚动条垂直滚动距离
12.获取$node 到根节点水平、垂直偏移距离
13.修改$node 的样式，字体颜色设置红色，字体大小设置14px
14.遍历节点，把每个节点里面的文本内容重复一遍
15.从$ct 里查找 class 为 .item的子元素
16.获取$ct 里面的所有孩子
17.对于$node，向上找到 class 为’.ct’的父亲，在从该父亲找到’.panel’的孩子
18.获取选择元素的数量
19.获取当前元素在兄弟中的排行

代码详见：https://github.com/have-not-BUG/task/blob/master/renwu/renwu26/renwu26-1.html

（二）、简单实现以下操作

1.当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
2.当窗口滚动时，获取垂直滚动距离
3.当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
4.当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
5.当选择 select 后，获取用户选择的内容
代码详见：https://github.com/have-not-BUG/task/blob/master/renwu/renwu26/renwu26-2.html

（三）、用 jquery ajax 实现如下效果。当点击加载更多会加载数据展示到页面。当鼠标放置上去会变色

http://jrgzuoye.applinzi.com/作业安排/jscode/JS9-jqueryajax/1.html

<?php
    // 后端 php 测试接口文件
    $start = $_GET['start']; //2
    $len = $_GET['len'];  //6 
    $items = array();
 
    for($i = 0; $i < $len; $i++){
        array_push($items, '内容' . ($start+$i));
    }
    $ret = array('status'=>1, 'data'=>$items);

    //{status: 1, data: ['内容1','内容2','内容3']}
    sleep(0.5);
    echo json_encode($ret);

HTML代码详见：https://github.com/have-not-BUG/task/blob/master/renwu/renwu26/3/renwu26_3.html

本地测试通过：

Paste_Image.png

**本文版权归本人即简书笔名：该账户已被查封所有，如需转载请注明出处。谢谢！ *

最后编辑于：2017.11.16 11:35:41

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,219评论 4赞 362
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,363评论 1赞 293
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,933评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,020评论 0赞 206
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,400评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,640评论 1赞 219
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,896评论 2赞 313
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,597评论 0赞 199
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,327评论 1赞 244
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,581评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,072评论 1赞 261
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,399评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,054评论 3赞 236
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,083评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,849评论 0赞 195
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,672评论 2赞 274
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,585评论 2赞 270

jquery 常用方法&ajax 基础知识问答

一、问答

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

（二）、$node.html()和$node.text()的区别?

（三）、$.extend 的作用和用法?

（四）、JQuery 的链式调用是什么？

（五）、JQuery ajax 中缓存怎样控制?

（六）、jquery 中 data 函数的作用？

二、代码

（一）、写出以下功能对应的 Jq 方法：

（二）、简单实现以下操作

（三）、用 jquery ajax 实现如下效果。当点击加载更多会加载数据展示到页面。当鼠标放置上去会变色

推荐阅读更多精彩内容

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