26.jquery 常用方法&ajax

问答

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

**(document).ready()**是DOM加载完成时执行相应的函数,而不必等待页面中的图像加载完毕； **window.onload**是当页面全部加载完成时执行相应的函数，比如页面内容、图片、资源等全部加载完成 **区别：** 1.执行时间 ``window.onload``必须等到页面内包括``图片``的所有元素加载完毕后才能执行。 ``(document).ready()是DOM结构绘制完毕后就执行，不必等到所有元素都加载完毕。 2.编写个数不同window.onload不能同时编写多个，如果有多个window.onload方法，只会执行最后一个(document).ready()``可以同时编写多个，并且都可以得到执行 3.简化写法 ``window.onload``没有简化写法； ``(document).ready(function(){...})``可以简写成(function(){})或().ready(function(){});

举例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
</head>
<body>

    <iframe src="http://www.taobao.com"></iframe>
    <script>    
        $( window ).load(function() {  //加载完执行，编写多个都执行
            console.log( "window loaded 1" );
        });
        $( window ).load(function() {
            console.log( "window loaded 11" );
        });

        window.onload=function() {  
            console.log( "window loaded 2" );
        };
        window.onload=function() {  //加载完执行，编写多个只执行最后一个
            console.log( "window loaded 22" );
        };

        $( document ).ready(function() {   //最先被执行，多个都执行
            console.log( "document loaded 3" );
        });
        $( document ).ready(function() {
            console.log( "document loaded 33" );
        });
    </script>
</body>
</html>
Paste_Image.png

注意：
由于在$(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕，并且已经解析为 DOM 树了，但很有可能图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。
要解决这个问题可以使用jquery中的load方法，如果处理函数绑定给 window 对象，则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发；如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。
例如

$(window).load(function (){  
    // 编写代码    
});  
$("img").load(function(){
    // 编写代码   
});

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

$node.html()是获取元素的html内容（包含标签和文本）
$node.text()是获取元素文本内容

举例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
</head>
<body>
    <div>
        这是用于测试
        <h1>测试html，text</h1>
    </div>

    <script>
    $(document).ready(function(){
        console.log( $('div').html());
        console.log( $('div').text());

        console.log( $('h1').html() );
        console.log( $('h1').text() ); 
        console.log( $('h1').html()===$('h1').text() );
       //当元素内只有文本时，html和text获取都是一样的
    })
    </script>
</body>
</html>
Paste_Image.png

3.$.extend 的作用和用法?

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

第1种情况：

jQuery.extend( target [, object1 ] [, objectN ] )

当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。
如果附加对象中的属性在目标对象中没有，那么在目标对象中添加该属性。如果附件对象中的属性在目标对象中也有，那么目标对象中属性的值被该属性的值所覆盖。

例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
</head>
<body>
   <div id="test"></div>

   <script>
        var object1={
            apple:1,
            banana:{weight:23,price:100},
            orange:23
        };
        var object2={
            banana:{price:300,color:'yellow'},
            pineapple:50
        }
        $.extend( object1,object2 );
        $('#test').append( JSON.stringify( object1 ))
   </script> 
</body>
</html>
Paste_Image.png

第2种情况：

jQuery.extend( [deep ], target, object1 [, objectN ] )

1.deep
类型: [Boolean]
如果是true，合并成为递归（又叫做深拷贝）。
2.target
类型: [Object]
对象扩展。这将接收新的属性。
3.object1
类型: [Object]
一个对象，它包含额外的属性合并到第一个参数.
4.objectN
类型: [Object]
包含额外的属性合并到第一个参数

这个用法多了一个参数true，它会用递归的方式去合并对象，并且是深拷贝。与上面的用法不同处在于如果目标对象的某个属性在附加对象中有，那么这个属性的值会发生合并，而不是覆盖。

同上
$.extend( true,object1,object2 );
Paste_Image.png

第3种情况

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

目标对象（也就是第一个参数）将被修改，并且将通过$.extend()返回。将目标对象设为{}，它是合并多个对象，但是不改变原对象。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
</head>
<body>
   <div id="test"></div>

   <script>
        var object1={
            apple:1,
            banana:{weight:23,price:100},
            orange:23
        };
        var object2={
            banana:{price:300,color:'yellow'},
            pineapple:50
        }
        var settings=$.extend( {},object1,object2 );
        $('#test').append( JSON.stringify( object1 )+'<br>');
        $('#test').append( JSON.stringify( object2 )+'<br>');
        $('#test').append( JSON.stringify( settings ));
   </script> 
</body>
</html>
Paste_Image.png
//extend默认生成的是浅拷贝对象，将上面加个ture就变为深拷贝对象
var settings=$.extend(true, {},object1,object2 );
Paste_Image.png

浅拷贝和深拷贝

<script>
        var obj1 = {
            a:{a:1,b:2},
        }
        var j1 =$.extend({},obj1)
        var j2 =$.extend(true,{},obj1)
        obj1.a.b =33333
        console.log(obj1)  //{ a:{a:1,b:333} }
        console.log(j1)  //{ a:{a:1,b:333} }
        console.log(j2)  //{ a:{a:1,b:2} }  //j2是深拷贝，它开辟了另外的空间，所以值没有变化
    </script>

4.JQuery 的链式调用是什么？

jQuery的链式调用就是指对一个jquery对象连续的使用jQuery方法。
原理是执行完一个方法后就返回对象本身（return this），然后使用本对象的其他jQuery方法。

例如：

$("#Test").addClass('style').find("div").eq(0).fadeOut(200);

上面的例子意为：先为id为Test的对象添加"style"这个样式，再找寻其下的第一个div标签，并使其淡出。通过上面看出链式操作就是围绕一个jQuery对象进行的。

作用：让代码更加简洁易读，减少重复性代码，提高性能。

5.JQuery ajax 中缓存怎样控制?

jQuery ajax利用cache这个参数来控制是否缓存页面。当为ture时则缓存页面（默认为ture，除了dataType为jsonp及script以外）；false为不缓存页面，即每当发起ajax请求时，都会向后台请求数据；
其实不缓存页面的实现原理就是在GET请求参数后面附加"_={timestamp}"（时间戳）；

$.ajax({
     cache:true //true开启缓存,false为关闭
});

注意：只有当使用GET方法时，设置cache为false是有用的。而使用POST方法时，则每次都会被认为是新的请求，不会缓存页面。

6.jquery 中 data 函数的作用

描述：存储任意数据到指定的元素或者返回设置的值。
可以向元素附加数据,以 .data(key,value)或.data(obj)的形式;
可以从元素上读取数据,以.data(key)或者.data()的形式

$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { myType: "test", count: 40 } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );

console.log( $( "body" ).data( "foo" ) );
console.log( $( "body" ).data( "bar" ) );
console.log( $( "body" ).data( "baz" ) );
console.log( $( "body" ).data() );

代码

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

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

$node.addClass('active');
$node.removeClass('active');

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

$node.show();
$node.hide();

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

获取元素属性值
$node.attr('id');
$node.attr('src');
$node.attr('title');
修改元素属性值
$node.attr('id',xxx);
$node.attr('src',xxx);
$node.attr('title',xxx);

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

$node.attr('data-src',xxx);

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

$ct.prepend('<li>遛狗</li>')

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

$ct.append('<li>看电影</li>');
或者
var $li=$('<li>看电影</li>');
$ct.append( $li );

7.删除$node

remove() - 删除被选元素（及其子元素）
$node.remove();

8.把$ct里内容清空

empty() - 从被选元素中删除子元素
$ct.empty();

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

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

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

$node.width(); //设置或返回元素的宽度（不包括内边距、边框或外边距）
$node.height(); //设置或返回元素的高度（不包括内边距、边框或外边距）
$node.width(500).height(500); //设置元素的宽高，jQuery会自动加上像素单位（px）

$node.innerWidth(); //返回元素的宽度（包括内边距）
$node.innerHeight(); //返回元素的高度（包括内边距）

$node.outerWidth(); //返回元素的宽度（包括内边距和边框）
$node.outerHeight(); //返回元素的高度（包括内边距和边框）

$node.outerWidth(true); //返回元素的宽度（包括内边距、边框和外边距）
$node.outerHeight(true); //返回元素的宽度（包括内边距、边框和外边距）

注意：
.css( "height" )和.height()的区别:
.height()返回一个无单位的像素值（比如说，400）
.css( "height" )返回一个带完整单位的值（比如说，400px）

<fieldset>
        <style>
            div{
                box-sizing:border-box;
                width:100px;
                height: 100px;
                background:red;
                border:10px solid;
            }
        </style>

        <div></div>

        <script>
            console.log( $('div').css('width') );
            console.log( $('div').width() );
        </script>
    </fieldset>

Paste_Image.png

当元素为box-sizing:border-box;时,使用和获取/设置宽高的方法要慎重.

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

scrollTop()  //用于获得针对匹配的元素集合中第一个元素的滚动条的当前垂直位置
$(document).scrollTop();

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

$node.offset().left  //水平偏移距离
$node.offset().top  //垂直偏移距离

offset()方法返回或设置匹配元素相对于文档的偏移（位置）。
并且返回第一个匹配元素的偏移坐标。该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

    <p>本段落的偏移</p>
    <button>获得 offset</button>
    <script>
        $(document).ready(function(){
          $("button").click(function(){
           console.log( $('p').offset() )
          });
        });
    </script>

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

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

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

.each( function(index, Element) ) //遍历一个jQuery对象，为每个匹配元素执行一个函数。

$( "li" ).each(function( index ) {   //这里的参数是数字索引和dom元素
  console.log( index + ": "" + $(this).text() );
});

或者

var obj = {
  "flammable": "inflammable",
  "duh": "no duh"
};
$.each( obj, function( key, value ) {  //这里的参数是属性和值
  console.log( key + ": " + value );
});

为什么上面两种例子回调函数中参数不一样？
each处理json数据之所以能循环每一个属性，因为json格式内是一组无序的属性-值，既然无序，又何来数字呢。而这个value等同于obj[key]。

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();

二、简单实现以下操作

1.当点击btn 时，让btn 的背景色变为红色再变为蓝色
2.当窗口滚动时，获取垂直滚动距离
3.当鼠标放置到div 上，把div 背景色改为红色，移出鼠标背景色变为白色
4.当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
5.当选择 select 后，获取用户选择的内容
代码运行结果

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

demo

<?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);

代码运行结果

Paste_Image.png

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念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

推荐阅读更多精彩内容