进阶15

2017-10-30 本文已影响0人饥人谷_醉眼天涯

题目1： jQuery 中， $(document).ready()是什么意思？
当DOM(文档对象模型)已经加载，并且页面(包括图像)已经完全呈现时，会发生ready事件。
题目2： $node.html()和$node.text()的区别?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>
    <div class="wrap">
        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div id="first"></div>
        <div id="second"></div>
    </div>
    <script>
        // console.log($('.wrap .first').html());
        console.log($('.wrap>ul>li').html());     // 0
        console.log($('.wrap>ul>li').text());     // 01234
        console.log($('.wrap>ul').html()); 
        /*
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        */
        console.log($('.wrap>ul').text());
        /* 0
           1
           2
           3
           4
        */
        $('#first').text('<b>haha</b>');   // <b>haha</b> jQuery.text()将内容当做文本 
        $('#second').html('<b>haha</b>');  // haha    (以粗体显示) jQuery.html()将字符串当做HTML
        </script>
        <!-- 还有一个区别
            .text() 可以被用在XML和HTML文档中
            .html() 仅仅是可以被用在HTML文档中
         -->
    </body>

题目3： $.extend 的作用和用法?
扩展一个对象
举列说明:

<script>
        var obj1 = {a:{first:1, second: 2}};
        var obj2 = {b:2, c:3};
        var obj3 = {d:4, e:5};
        var obj4 = {a:{second: 3}, f:6};
        /*
        $.extend(obj1,obj2); // 将obj2合并到obj1上  obj1为{a:{first:1, second: 2},b:2,c:3}
        $.extend(obj1,obj2,obj3); // 将obj2和obj3合并到obj1上  obj1为{a:{first:1, second: 2},b:2,c:3,d:4,e:5}
        $.extend(true, obj1, obj4);     // 将obj4合并到obj1上，进行递归合并 obj为{a:{first:1,second:3}, f:6}
        var obj5 = $.extend({}, obj1, obj2); // 将obj1和obj2合并到obj5上,并没有修改了obj1 因此obj5为{a:{first:1, second: 2},b:2,c:3}
        */
    </script>

题目4： jQuery 的链式调用是什么？
使用jQuery的方法时，对象上的方法返回的是对象本身(return this),因此能接着使用
本地对象的其他jQuery方法,这就是链式调用。

<style>
            #box {
                position: relative;
                width: 100px;
                height: 100px;
                background: red;
            }
    </style>
<body>
    <div id="box">
        hihihi
    </div>
    <button class="box-btn">变宽变大移动</button>
    <script>
        var $div = $('#box');
        // 链式调用
        $('.box-btn').on("click", function() {
            $div.css({width: '150px', height: '150px', 'color': 'blue', 'font-size': '8px'})
                .animate({left: '200px'})
                .animate({top: '200px'})
                .animate({left: '0px'})
                .animate({top: '0px'})
                .animate({width: '100px', height: '100px'})
        })
        $div.attr('data-src', '50');
        $div.attr('data-src', '70');
        console.log($div.attr('data-src'));
    </script>
</body>

题目5： jQuery 中 data 函数的作用

为相关的匹配元素存储，随机数据，或者在指定的数据存储区返回匹配元素集合中第一个元素的值。
举列说明
 // example 1
        $('body').data("foo", 52, 43);

        $("body").data("bar", {myType: "test", count: 40});

        $("body").data({ baz: [1,2,3] } );

        alert($("body").data("hello"));     // undefined

        alert($("body").data());      // [object Object]

        alert($("body").data("foo"));  // 52

        alert($("body").data("bar").myType); // test

        alert($("body").data("baz")[0]);   // 1

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

        // example 2
        <div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name": "John"}'></div>

        $('div').data("role")  === "page";

        $("div").data("lastValue")  === 43;

        $("div").data("hidden") === true;

        $("div").data("options").name === "John";

题目6：
写出以下功能对应的 jQuery 方法：

给元素 $node 添加 class active，给元素 $noed 删除 class active
$node.addClass('active')
$node.removeClass('active')
展示元素$node, 隐藏元素$node
$node.show()
$node.hide()
获取元素$node 的属性: id、src、title，修改以上属性
$(selector).attr(attributeName, value);
$node.attr('id',修改的值)
$node.attr('src', 修改的值)
$node.attr('title',修改的值)
给$node 添加自定义属性data-src
$node.attr('data-src');
在$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.height()
$node.width(value)//设置
$node.heigth(value)
包括内边距不包含边框
$node.innerWidth()
$node.innerHeight()
$node.innerWidth(value)
$node.innerHeight(value)
包含边框不包括外边距
$node.outerWidth()
$node.outerHeight()
$node.outWidth(value)
$node.outerHeight(value)
包含外边距
$node.outerWidth(true)
$node.outerHeight(true)
$node.outerWidth(value)
$node.outerWidth(value)
获取窗口滚动条垂直滚动距离
$(selector).scrollTop();
获取$node 到根节点水平、垂直偏移距离
$node.offset().left
$node.offset().top
修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({'color': 'red','font-size': '14px'});
遍历节点，把每个节点里面的文本内容重复一遍
$node.each(function(index, node) {
var str = $(this).text();
$(this).text(str+str);
})
从$ct 里查找 class 为 .item的子元素
$ct.find('.item');
获取$ct 里面的所有孩子
$ct.children();
对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parents('.ct').find('.panel');
获取选择元素的数量
$(selector).length;
获取当前元素在兄弟中的排行
举列说明

<div class="ct">
                <div class="c1">c1</div>    
                <div class="c2">---</div>   
                <div class="c1">c1</div>    
                <div class="c2">----</div>  
                <div class="c1">c1</div>    
                <div class="c2 active">----</div>   
        </div>
console.log($('.ct .active').index());  // 5
console.log($('.ct .active').index('.c2'));  // 2  在class为c2中排行第三

题目7：
用jQuery实现以下操作
当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
效果预览
当窗口滚动时，获取垂直滚动距离
效果预览
当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
效果预览
当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
预览
当选择 select 后，获取用户选择的内容
预览
题目8：用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面效果预览
预览
 代码

进阶15

猜你喜欢

热点阅读