jquery动画和ajax

作者: 小囧兔 | 来源:发表于2017-07-11 22:12 被阅读0次

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

页面加载完成后，浏览器会通过JavaScript给DOM元素添加事件。在原生的JavaScript中,用的是window.onload方法，而在jQuery中使用的是$(document).ready()方法，$(document).ready()方法是事件模块中最重要的一个函数。通过使用这个方法，可以在DOM载入就绪时就对其进行操纵并调用执行它所绑定的函数，但这并不是说明跟这些元素关联的文件都下载完毕了。比如要对加载的图片添加一些行为，例如点击后图片显示或者隐藏，如果$(document).ready()方法进行设置，只要DOM元素加载完毕就可以操作了，不用等到所有图片都下载完毕，但是使用window.onload操作，用户必须等到所有图片都下载完毕才可以操作。
$(document).ready()可以多次使用，比如

function  a(){
  console.log(a);
}
function b(){
console.log(b);
}
 $(document).ready(function(){
    a();
})
 $(document).ready(function(){
    b();
})

会依次输出a 和b,但是使用window.onload的话，只会输出后面那一个，因为把前面的覆盖了。
$(document).ready()方法也可以写成：

1.
$(function(){
  ....
})
2.
$().ready(function(){
...
})

注意！
使用$(document).ready()方法时，由于DOM准备完毕就会被执行，此时关联的元素可能还没加载完成，例如和图片有关的html下载完毕，并且已经解析为DOM树了，但可能图片还未加载完毕，所以此时图片的高度宽度等属性不一定有效，要解决这个方法可以用load()方法，这里不细讲了。

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

$node.html()，无参数时，用于获取元素的HTML内容(包括文本内容和标签)，
$node.html(val),val为元素的HTML内容，用于设置元素的HTML内容。
$node.text(),无参数时，用于获取元素的文本内容。
$node.text(val),有参数时，用于设置元素的文本内容。

<body>
<p>
    <a href="">哈哈哈</a>
</p>
<script src="//apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
     var  html=$("p").html();
    console.log(html);
    console.log($("p").text());
</script>

Paste_Image.png

$.extend 的作用和用法?

$.extend是一个添加属性方法的入口，
函数原型：$.extend([deep,] target [, object1 ] [, objectN ] )
用法：
1.当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。
2.如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。
目标对象（第一个参数）将被修改，并且将通过$.extend()返回，如果我们想保留原对象，我们可以将一个空对象作为目标对象：如:var obj = $.extend({}, object1, object2);进行对象属性方法合并。
默认情况下， $.extend()执行的合并不会递归，如果第一个对象的属性本身是对象或数组，则它将被第二个或后续对象中具有相同键的属性完全覆盖。这些值不合并，如果将 true作为该函数的第一个参数，那么会在对象上进行递归的合并。
用法：
1.$.extend()用来扩展jQuery静态方法

$.extend({
        exFunc:function (){
            console.log("hah");   
        }
    });
$.exFunc();

2.将a1,a2…aN的每一项合并为obj的每一项，并返回合并后的对象

var obj = {name:"xiaoming",age:20};
a1 = {name:"lihua",sex:"male"};
    $.extend(obj,a1);
    console.log(obj);  //{name: "lihua", age: 20,sex:"male"}

3.想得到合并的结果，并不修改obj的结构

var newObj = $.extend({},obj,a1,a2...aN);
//newObj就是得到的新对象

4.在jQuery对象扩展一个命名空间

  $.extend({nameScope:{}});
  $.extend($.nameScope,{name:"tom"});
//将name添加到nameScope这个命名空间中

5.当extend的第一参数为布尔值,决定extend是深拷贝还是浅拷贝。

var src1 = {name:"tom",location:{city:"Beijing",county:"China"}};
 var src2 = {name:"job",location:{live:"New York",county:"USA"}};
1.参数true，深拷贝
$.extend(true,src1,src2);
//合并后src1为：
{name: "job", location: {city: "Beijing",county: "USA",live: "New York"}}
里面的子元素也会进行合并
2.参数为false，浅拷贝。
$.extend(false,src1,src2);
合并后src1为：
 {name: "job", location: {live:"New York",county:"USA"}}
里面的子元素不会合并，直接覆盖

参考：http://api.jquery.com/jQuery.extend/

jQuery 的链式调用是什么？

对发生在同一个jQuery对象上的一组动作，可以直接连写，而无需重复获取对象。如：

$("#myphoto").show().siblings().hide();

jQuery 中 data 函数的作用

在jQuery中，可以通过data()方法将数据缓存，虽然使用全局变量或者局部变量可以将数据保存，但是变量不可以将数据缓存，而且不依附于某元素自身。如果使用data()方法可以针对元素定义数据，在元素中存取数据，从而避免数据被循环使用的风险，根据功能不同data有以下几种使用格式：
1.根据元素中的名称定义或者返回存储的数据，调用格式为：
data([name]);
其中name为可以选参数，表示存储数据的名称。
2.根据元素中的名称在元素上存储或者设置数据，调用格式为：
data(name,value);
其中name表示要存储数据的名称，value表示要存储的数据。
比如：在一个p元素上设置或者保存数据

<body>

<p> </p>
<div class="divtip"></div>
<script src="//apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
  $(function(){
      $("p").data("Data"); //初始值
       $("p").data("Data","设置数据");
       $(".divtip").append($("p").data("Data"));//显示设置数据
  })
</script>
</body

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

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

  $node.addClass("active");//添加
$noed.removeClass("active");//删除

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

$node.show();//展示
$node.hide();//隐藏
$node.css("display","block");//展示
$node.css("display","none");//隐藏

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

获取属性值：
$node.attr("id");
$node.attr("src");
$node.attr("title");
 修改属性：
$node.attr("id","val");
$node.attr("src","val");
$node.attr("title","val");
批量修改：
$node.attr({
    "id":"val",
    "src":"val",
   "title":"val"
})

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

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

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

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

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

$ct.append($node);
或者：
$node.appendTo($ct);

删除$node

$node.remove();//删除后$node包含的所有后代都被删除,删除的是指向节点的引用。

把$ct里内容清空

$ct.empty();

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

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

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

   p{
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 1px solid;
            margin: 10px;
        }
 <p></p>
 不包括内边距：
$node.width();//100
$node,height();/100
包括内边距：
$node.innerWidth();//120
$node.innerHeight();//120
包括边框：
$node.outerWidth();//122
$node.outerHeight();//122
包括外边距：
$node.outerWidth(true);//142
$node.outerHeight(true);//142

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

window.scrollTop();

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

$node.offset();

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

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

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

$.each(function(index){
          console.log($(this).text())
      })

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

$ct.find(".item");

获取$ct 里面的所有孩子

$ct.children();

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

$node.parents(".ct").find(".panel");

获取选择元素的数量

$node.length;
或者：
$node.size()

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

$node.index()

用jQuery实现以下操作:

当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色

<style>
       .red {background: red; }
        .blue{background: blue;}
   </style>
$(function(){
  $(".btn").on('click',function(){
      $(".btn").addClass("red").toggleClass("blue")
  })  
 })

当窗口滚动时，获取垂直滚动距离

 $(window).scroll(function(){
          console.log($(window).scrollTop()+"px");
      })

当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色

$(function(){
     $div.on("mouseenter",function(){
         $div.css("background","red");
     });
      $div.on("mouseleave",function(){
          $div.css("background","blue");
      })
  });

当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时
把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字

$(function(){
     $('input').on("change",function(){
         $(this).css("outline","blue");
         if($(this).val().toLowerCase()){
             $(this).on('keyup',function(){
                var up=  $(this).val().toUpperCase();
                 console.log(up);
             });
         }else {
             console.log($(this).val());
         }
     });
  });

当选择 select 后，获取用户选择的内容

<select name="" id="select">
    <option value="1">a</option>
    <option value="2">b</option>
    <option value="3">c</option>
</select>
$("#select").on("change",function(){
        console.log($("#select option:selected").text());
    })

加载更多

router.js


app.get('/loadMore',function(req,res){
   var index=req.query.page;
    var len=req.query.length;
    var data=[];
    for(var i=0;i<len;i++){
        data.push('新闻'+(parseInt(index)+i));
    }
    res.send({
        status:0,
        data:data
    })
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
             margin: 0;
        }
        ul li {list-style: none}
        a{
            text-decoration: none;
            color: #ff00ff;
        }
        .outer{
            text-align: center;
            width: 600px;
            margin: 0 auto;
        }
         .wrap>li{
             border: 1px solid #ddd;
             text-align: center;
             line-height: 2;
             margin-bottom: 10px;
         }
        .wrap>li:hover{
            background: #ddd;
        }
        #btn{
            display: inline-block;
            padding: 8px 20px ;
            color: #fff;
            background: #0000ff;
            border-radius: 4px;
        }

    </style>
</head>
<body>
<div class="outer">
    <ul class="wrap">

    </ul>
    <a href="javascript:;" id="btn">加载更多</a>
</div>

</body>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
      var pageIndex=0;
     $("#btn").on('click',function() {
         $.ajax({
             url: '/loadMore',
             data: {
                 page: pageIndex,
                 length: 5
             },
             type: 'get',
             dataType: 'json',
             success: function (ret) {
                 pageIndex=pageIndex+5;
                  appendHtml(ret.data);
             },
             error: function () {
                 alert("获取数据异常")
             }
         });
     });
       function  appendHtml(ret){
           var html='';
           for(var i=0;i<ret.length;i++){
                var i;
               html+='<li>'+ret[i]+'</li>';
               console.log(ret[i]);
           }
//           $.each(ret,function(){
//               html+='<li>'+this+'</li>';
//               console.log(this)
//           });
           $('.wrap').append(html);
       }

2.或者这样写也可以
  var pageIndex=0;
$("#btn").on('click',function() {
     $.ajax({
             url:'/loadMore',
             method:'get',
              data:{
                  page:pageIndex,
                  length:5
              }
       }).done(function(ret){
            if(ret.status===0){
                pageIndex=pageIndex+5;
                appendHtml(ret.data);
            }else{
                alert("获取数据异常")
            }
     }).fail(function(){
         alert("系统异常")
     })
 });
   function  appendHtml(ret){
           var html='';
           for(var i=0;i<ret.length;i++){
                var i;
               html+='<li>'+ret[i]+'</li>';
               console.log(ret[i]);
           }
//           $.each(ret,function(){
//               html+='<li>'+this+'</li>';
//               console.log(this)
//           });
           $('.wrap').append(html);
       }
3.这样更简单，不过不是很清楚，还是前面的写法好
$("#btn").on('click',function() {
     $.get('/loadMore',{page:pageIndex, length:5}).done(function(ret){
            if(ret.status===0){
                pageIndex=pageIndex+5;
                appendHtml(ret.data);
            }else{
                alert("获取数据异常")
            }
     }).fail(function(){
         alert("系统异常")
     })
 });
       function  appendHtml(ret){
           var html='';
           for(var i=0;i<ret.length;i++){
                var i;
               html+='<li>'+ret[i]+'</li>';
               console.log(ret[i]);
           }
//           $.each(ret,function(){
//               html+='<li>'+this+'</li>';
//               console.log(this)
//           });
           $('.wrap').append(html);
       }
</script>

结果：

若水GIF截图_2017年7月11日21点42分17秒.gif

发现用for循环和$.each如果都写this的话，获取到的值是不一样的，for循环获取到的是window对象，结果发现是作用域的问题，但是不知道为何$,each的this指的是返回数组里面的值。

jquery动画和ajax

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

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

$.extend 的作用和用法?

jQuery 的链式调用是什么？

jQuery 中 data 函数的作用

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

用jQuery实现以下操作:

加载更多

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读