jQuery 常用方法&ajax

问答

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

1.$(document).ready()意思是等页面中的DOM元素加载完毕后再执行jQuery代码。

  • window.onload是等待DOM及其他元素(如图片,css,引用文件)也就是页面的所有元素加载完成后执行代码。只能执行一个,如果有多个,就执行最后一个。
  • $(document).ready()只需要在页面中所有的DOM结构绘制完毕后就执行。并且能同时编写多个,根据编写顺序依次执行

3.$(document).ready()可以简写成:$(function(){});

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

1.$node.html()

$node.html()

不传入值,就是获取集合中第一个匹配元素的HTML内容。

$node.html(htmlString)

设置每一个匹配元素的html内容。

$node.html(function(index,oldhtml))

用来返回设置HTML内容的一个函数。
2.$node.text()

$node.text()

得到匹配元素集合中每个元素的合并文本,包括他们的后代。

$node.text(textString)

用于设置匹配元素内容的文本。

$node.text(function(index,text))

用来返回设置文本内容的一个函数。

代码示例:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div id="box1">
        <p>这是一个段落<span>嘿嘿嘿</span></p>
    </div>
    <div id="box2">
        <p>这是一个段落<span>嘿嘿嘿</span></p>
    </div>
    <div id="box3">
        <p>这是一个段落<span>嘿嘿嘿</span></p>
    </div>
    <div id="box4">
        <p>这是一个段落<span>嘿嘿嘿</span></p>
    </div>
    <script>
        console.log($("#box1").html());
        console.log($("#box2").html("<h1>我是一个大标题</h1>"));
        console.log($("#box3").text());
        console.log($("#box4").text("我是替换的新文本内容"));
    </script>
</body>
</html>
输出结果

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

1.作用:将一个或多个对象的属性添加给目标对象。
2.用法:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div id="box"></div>
    <script>
        var obj1={
            name: "张三",
            age: 25,
            height: 180,
            address: {
                city: "杭州"
            }
        }
        var obj2={
            name: "李四",
            sex: "男",
            address: {
                street: "jichang"
            }
        }
    </script>
</body>
</html>
  • 第一个参数作为目标对象,后面的对象参数的属性会添加到目标对象中。如果只有一个参数,那么jQuery对象本身将被作为目标对象。可以通过这种方法向jQuery的命名空间添加新的功能。
示例
  • 如果第一个参数是true,那么合并的多个对象内部的对象参数就不会产生合并的现象,全部都会展示出来。
示例
  • 作为目标对象的第一个参数会被修改,如果想要保留目标对象原先的值,可以将第一个参数设置为空对象。
示例

四、JQuery 的链式调用是什么?

jQuery的链式调用是指对一个对象连续的使用jQuery方法。

$(this).removeClass("mouseout").addClass("mouseover").next().show()

这么做的好处是让代码更加简洁易读,减少代码的重复性,提高代码的可读性。其中的原理是执行完一个方法后就返回对象本身(return this),然后对象继续执行后面的方法。

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

jQuery ajax方法中是利用cache参数来控制缓存的。
设置为true将缓存页面(默认为true,dataType为“script”和“jsonp”时默认为false)。如果设置为false,浏览器将不会缓存页面。
其工作原理是在GET请求参数中附加“={timestamp}”时间戳,使请求的链接每次都不同。

六、jquery 中 data 函数的作用

1.data([key],[value])作用:在元素上存放数据,返回jQuery对象。
2.参数:key:存储的数据名;value:将要存储的任意数据。
3.代码示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <script>
        console.log($("#box1").data("blah")); //undefined
        $("#box1").data("blah","hello"); //设置blah为hello
        console.log($("#box1").data("blah")); //hello
        $("#box1").removeData("blah"); //移除blah设置的值
        console.log($("#box1").data("blah")); //undefined

        $("#box2").data("test",{first:16,last:"pizza"}); //给存储名为test的对象存储内容{first:16,last:"pizza"}
        console.log($("#box2").data("test").first); //16
        console.log($("#box2").data("test").last); //pizza
        console.log($("#box2").data("test")); //{first: 16, last: "pizza"}
        $("#box2").removeData("test"); //移除test设置的内容
        console.log($("#box2").data("test")); //undefined
    </script>
</body>
</html>

本文版权归本人和饥人谷所有,转载请注明来源。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容