26.jquery 常用方法&ajax

作者: 鸿鹄飞天 | 来源:发表于2016-12-21 11:41 被阅读54次

问答

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

26.jquery 常用方法&ajax

问答

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

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

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

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

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

6.jquery 中 data 函数的作用

代码

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

二、简单实现以下操作

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程

26.jquery 常用方法&ajax

问答

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

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

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

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

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

6.jquery 中 data 函数的作用

代码

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

二、简单实现以下操作

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程

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

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