Jquery常用方法&Ajax

作者: StarLikeRain | 来源:发表于2016-08-20 17:27 被阅读63次

前端基础（问答21）
jquery 常用方法&ajax
jquery 常用方法&ajax
jQuery 常用方法 & ajax
Jquery常用方法&Ajax
jquery 常用方法&ajax
jquery 常用方法&ajax
jquery 常用方法&ajax
jquery 常用方法&ajax
jQuery 常用方法&ajax

问答

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

$(document).ready()指的是整个DOM页面绘制完毕后才执行ready括号里面的东西，绘制不要求图片也加载完，只要求DOM，是的DOM。
区别:
$(document).ready()指的DOM结构绘制完毕后就执行，不必等到所有的什么图片啊元素啊都到位。
window.onload指的是页面中包括任何一个图片和元素都加载完毕后才执行。
$(document).ready()可以同时编写多个而window.onload同时只能编写一个，如果有多个会被覆盖掉。
$(document).ready()可以简写成$( function(){} )，window.onload没有简写。

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

$node.html()顾名思义获取节点的html结构以及文本内容。
$node.text()获取节点的html里面文本内容。

        <div class="aa">
            <p>我是一个试验品...</p>
        </div>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
        <script type="text/javascript">
            console.log($('.aa').html()); //<p>我是一个试验品...</p>
            console.log($('.aa').text()); //我是一个试验品...
        </script>

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

当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。
jQuery.extend([deep,] target [, object1 ] [, objectN ] )，其中deep为true的时候为深拷贝。
用法
1、$.extend(target, object1, object2,…])target为目标对象，后面的object会合并到target中，改变target的内容。如果不想更改目标对象的值，可以把target替换成{},如果有相同属性会覆盖相同的属性。

        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
        <script type="text/javascript">
            var obj1 = {
                name: "star",
                age: "20",
                hobby: {
                    food: 'egg tart',
                    job: 'design',
                    travel: 'yes'
                }
            }
            var obj2 = {
                name: "rain",
                age: "22",
                sex: "female",
                hobby: {
                    food: 'Hamburger',
                    job: 'engineer'
                }
            }
            var extendSum = $.extend(true,{}, obj1, obj2);
            console.log(extendSum); 
            //为false的时候hobby部分会显示的是food: 'Hamburger',job: 'engineer'
            //为true的时候hobby部分会显示的是food:"Hamburger"job:"engineer"travel:"yes"
        </script>

extend.png

4、 JQuery 的链式调用是什么？
链式调用就是执行完一个结果后就返回对象本身，然后被返回的对象继续执行后面的方法。

        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
        <script type="text/javascript">
            $('div').on('mouseover', function() {}).on('mouseleave', function() {});
        </script>

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

$.ajax()方法中有个cache：如果设置为 false ，浏览器将不缓存此页面。注意: 设置cache为 false将在 HEAD和GET请求中正常工作。它的工作原理是在GET请求参数中附加"_={timestamp}"。cache默认值为true，如果datatype为"script"和"jsonp"的时候默认为false，如果值为false则浏览器不保存此页面，原理是在GET请求中附加时间戳url?t=new Date().getTime()

6、jquery 中 data 函数的作用

.data()存储任意类型的数据到指定的DOM元素上，并且可以设置返回值，避免了循环应用内存泄漏的风险。
$.data(el, key, value) => element为需要绑定的数据的DOM元素,key是数据名,value是数据的值。

        <div id=""></div>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>

        <script>
            $('div').data('name',23333);
            console.log( $('div').data('name') );// output => 2333
        </script>

代码题

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

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

        <div class="wrap">111</div>
        <button class="btn">点击添加class</button>
        <button class="btn2">点击移除class</button>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>

        <script>
            $('.btn').on('click',function(){
                $('.wrap').addClass('ok');
            })
            $('.btn2').on('click',function(){
                $('.wrap').removeClass('ok');
            })
        </script>

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

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

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

$node.attr('id、src、title') ;//获取属性
$node.attr('id、src、title'，value);//设置属性

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

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

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

$ct.prepend($node);//或者
$node.prependTo($ct);

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

$ct.append($node);
$node.appendTo($ct);

删除$node

$node.remove();

把$ct里内容清空

$ct.empty();

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

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

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

$node.width();//获取宽度
$node.width('100px');
$nide.height();
$node.height('100px');

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

$('body').scrollTop();

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

$node.offset();//返回的参数包括left&top.

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

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

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

        <div>
            <ul class="node">
                <li>111</li>
                <li>222</li>
                <li>333</li>
                <li>444</li>
                <li>555</li>
            </ul>
        </div>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
        <script type="text/javascript">
            $('.node').each(function() {
                console.log($(this).text());
            });
            $.each($('.node').children(), function() {
                console.log($(this).text())
            });
        </script>

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

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

        <div>
            <ul class="ct">
                <li class="item">111</li>
                <li>222</li>
                <li>333</li>
                <li>444</li>
                <li class="item">555</li>
            </ul>
        </div>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
        <script type="text/javascript">
            $('.ct').find( $('.item').css('color','red') )
        </script>

效果

获取$ct 里面的所有孩子

$('.ct').children()//find是查找某种类型的 children是全部

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

$('.node').parent('.ct').find('.panel')

获取选择元素的数量

        <div>
            <ul class="ct">
                <li class="item">111</li>
                <li>222</li>
                <li>333</li>
                <li>444</li>
                <ul>
                    <li></li>
                </ul>
                <li class="item">555</li>
            </ul>
        </div>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
        <script type="text/javascript">
            console.log($('.ct li').length)//结果是6，这里可以看到会把深一层的也计算进入
        </script>

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

        <div>
            <ul class="ct">
                <li class="item">111</li>
                <li class="item">222</li>
                <li class="item ok">333</li>
                <li class="item">444</li>
                <p></p>
                <li class="item">555</li>
            </ul>
        </div>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
        <script type="text/javascript">
            console.log($('.item').index())//找到第一个item然后下标返回值
            console.log($('.ok').index())//2，在同类元素中是第三个下标为2
            console.log($('.item').index($('.ok')))//在item中寻找第一个ok的元素
            //总之就是在前面一个中寻找后面一个的第一个位置是多少
            console.log($('p').index())
        </script>

2、简单实现以下操作