jQuery动画与Ajax

2017-11-18  本文已影响0人  白柏更好

$(document).ready()是什么意思？

当DOM加载完成时执行相应的函数,
原生js提供load事件，当所有资源加载完成后才触发相应事件。大多情况下当DOM结构加载完成时脚本即可运行，所以说，使用$(document).ready()不失为一种适当的形式。
以下两种形式皆为正确及等价

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

$.extend 的作用和用法

作用：将两个或更多个对象的内容合并到第一个对象;提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。
在默认情况下，通过$.extend()合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。可以通过检查下面例子中 banana 的值，就可以了解这一点。然而，如果将 true 作为该函数的第一个参数，那么会在对象上进行递归的合并。
用法：$.extend([deep],target, [,object1] [,objectN])

jQuery的链式调用是什么？

对一个jQuery对象进行多次多种方法调用，其原理是大多方法最后返回原来的对象（this），因为返回的是同一对象，所以链式操作可以持续下去。
链式调用的好处是节省代码，代码美观；
提高代码效率；
让代码流程更清晰（因为Javascript是无阻塞语言，通过事件来驱动，异步来完成一些本需要阻塞进程的操作。异步编程，编写代码时也是分离的，这就使代码可读性变差。而链式操作，代码流程清晰，改善了异步体验。）；

jQuery中的data函数的作用

在匹配元素上储存相关数据或者返回在匹配的元素集合中的第一个元素的给定名称的数据存储的值。

以下功能对应的 jQuery 方法

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

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

//获取属性
$node.attr("id");
$node.attr("src");
$node.attr("tittle");
//修改属性
$node.attr("id","newId");
$node.attr("src","newSrc");
$node.attr("title","newTitle");

$(node).attr("data-src","456");

$(node).prepend("<p>new</p>")
$("<p>new</new>").prependTo($(node))

$(node),append("<p>new</p>")
$("<p>new</p>").appendTo($(node))

$(node).remove() //会删除与其绑定的事件及与该元素相关的jQuery数据，不想删除这些应采用下条方法
$(node).detach()

$(ct).empty()

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

//获取宽高
$(node).width() //返回一个没有单位的数值
$(node).height()
$(node).css("height") //返回一个带单位的字符串
//设置宽高
$(node).width(500) //当需要添加单位时需为一个字符串
$(node).height(500)
$(node).css("height",500) //当需要添加单位时需为一个字符串
// 计算时不包含内边距的为(不包含border)
$(node).width()
$(node).height()
$(node).css("height")
//计算时包含内边距的为（不包含border）
$(node).innerHeight()
$(node).innerWidth()
//计算时包含内边距和边框（如果设置为ture,那么也将包含margin）
$(node).outerWidth(ture)
$(node).outerHeighth(ture)

$(node).scrollTop()

$(node).offset().left
$(node).offset().top

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

$(node).each(function(){
    $(this).text($(this).text() + $(this).text())
})

$(node).children(".item")

$(ct).children()

$(node).parents(".ct").children(".panel")

$(node).length()

用jQuery实现以下操作

用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面效果预览 

<!doctype html>
<html>
<head>
    <title>tab切换效果</title>
    <meta charset="UTF-8">
    <style>
        li {
            list-style: none;
        }
        .item {
            width: auto;
            padding: 15px;
            margin: 20px auto;
            border: 1px solid lightgrey;
        }
        .item:hover {
            background-color: green;
            color: white;
        }
        a {
            display: block;
            width: 65px;
            margin: 20px auto;
            text-decoration: none;
            border: 1px solid red;
            border-radius: 5px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="ct">
        <li class="item">内容一</li>
        <li class="item">内容二</li>
    </div>
    <a href="">加载更多</a>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script>
        var page = 0;
        $("a").on("click",function(){
            $.get("/getNews",{pageIndex:page}).done(function(data){
                appendHtml(data);
                page++;
            }).fail(function(){
                console.log("系统异常！！！")
            });
        });

        function appendHtml(news){
            var htmls = '';
            for(var i=0; i<news.length; i++) {
                htmls += '<li class="item"> '+ news[i] + '</li>';
            }
            $(".ct").append(htmls);
        }
    </script>
</body>
</html>

mock

app.get('/getNews', function (req, res) {
    var news = [];
    var index = req.query.pageIndex;
    var length =3;
    var start = index*length;
    var final = start + length;
    for(i= start+1; i<= final; i++ ){
        news.push("内容"+ i);
    }
    res.send(news);
})
上一篇下一篇

猜你喜欢

热点阅读