Jquery动画与ajax

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

$(document).ready()方法：为防止文档在完全加载之前运行Jquery代码,若在文档未完全加载前就运行函数,操作可能失败.必须在文档加载完后执行操作,可使用ready事件,作用相当于把js写到body末尾.(可简写为$(function(){})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>clone-index-ready</title>
    <script>
        window.onload =function(){//js代码放入head
            console.log(1);
            var box = document.querySelector('.box')
            console.log(box)
        }
       $(document).ready(function(){
             //jquery写在前面但<script src="jquery-3.2.0.min.js"></script>也必需放在前面
            // or $(function(){
                
            })
        })
    </script>
</head>

ready和onload的区别是：前置只包括文档元素的加载，后者是所有资源的加载; onload 要等所有资源加载，包括 图片、CSS、JS、Iframe;另一个事件，不等所以，ready比onload先执行

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

$node.html()，返回所选择元素内的html内容，包含html标签和文本内容
$node.text()，返回所选择元素内的文本内容，不包含html标签，只包含文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html-text</title>
</head>
<body>
    <p id="test">这是段落中的<b>粗体</b>文本。</p>

    <script src="jquery-3.2.0.min.js"></script>
    <script>
        console.log( $('#test').html() );  // 这是段落中的<b>粗体</b>文本。
        console.log( $('#test').text() );  // 这是段落中的粗体文本

        console.log( $('#test').html('<span>hello</span>' )); // 这是段落中的<b>粗体</b>文本。被替换成hello 
        console.log( $('#test').text('<span>hello</span>' )); //这是段落中的<b>粗体</b>文本。<span>hello</span>

    </script>
</body>

</html>

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

作用：$.extend()将多个对象合并到一起，可以传入多个参数。$.extend([deep,] target,…)[deep,]为布尔值默认情况不是深拷贝，可设置true为深拷贝
用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>extend</title>
    <style>
         ul,li{
            margin: 0px;
            padding:0px;
            list-style: none;
        }
      
    </style>
</head>
<body>

     <script src="jquery-3.2.0.min.js"></script>
     <script>
         var obj ={};
         var obj1 = {
             name:'zyn',
             sex:'man'
         };
         var obj2 ={
             name:'jl',
             age:39
         }
        
       // $.extend(obj,obj1)//把obj1拷贝到obj  (用法1)
        $.extend(obj,obj1,obj2) //拷贝2次同名属性覆盖(用法2)


        function getMessage(obj){
            var opts ={};
            var defalut ={
                name:'zyn',
                sex:'male',
                age:30，
                friend:'abc'
            };
            $.extend(opts,defalut,obj)  
           // or var  opts = $extend({},obj1,obj2)
            console.log(opts)

        }
        getMessage({
            name:'jl',
            sex:'fmale',
            age:19
        })//当用户给定参数时覆盖默认的参数值(用法3)


        var obj0 ={};
         var obj3 = {
             name:'zyn',
             sex:'man',
             friends:[1,2,3]
         };
        //$.extend(obj0,obj3);//浅拷贝(用法4)
         $.extend(true,obj0,obj3)//深拷贝

         
         $.fn.extend(obj2)//在原形上新增属性；or $.extend($.fn,obj2)(用法5)
       
     </script>
</body>
</html>

用法一：把obj1拷贝到obj

QQ截图20170322152116.jpg

用法二：拷贝2次同名属性覆盖

QQ截图20170322152151.jpg

用法三：当用户给定参数时覆盖默认的参数值

QQ截图20170322152510.jpg

用法四：深拷贝，浅拷贝

QQ截图20170322152911.jpg

用法五：在原形上新增属性；

QQ截图20170322153210.jpg

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

链式调用：使用jQuery方法时，对象方法返回的是对象本身，可以调用对此对象的其他jQuery方法，实现连续调用多个方法
例如：$(this).siblings().removeClacc('active').addClass('newname')

5. jQuery 中 data 函数的作用

jQuery.data( element, key, value )

1.element:要存储数据的DOM对象；
2.key:存储的数据名；
3.value:新数据值；


jQuery.data() 方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。如果 DOM 元素是通过 jQuery 方法删除的或者当用户离开页面时，jQuery 同时也会移除添加在上面的数据。我们可以在一个元素上设置不同的值，并获取这些值：

jQuery.data(document.body, 'foo', 52);
jQuery.data(document.body, 'bar', 'test');

注意：个方法目前并不提供在XML文档上跨平台设置，作为Internet Explorer不允许在XML文档中通过自定义属性附加数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Data</title>
    <style>
        div{
            color:green;

        }
        span{
            color:red;
        }
    </style>
</head>
<body>
    <div>
        hi I am name is 
        <span class="span1"></span>
        and age 
        <span class="span2"></span>
    </div>

    <script src="jquery-3.2.0.min.js"></script>
    <script>
        var div = $('div')[0]//DOM对象
        $.data(div,'message',{user:'zyn',age:19});//把属性名为message的属性user,age存在Div内
        $('.span1').text($.data(div,'message').user)//获取div内的属性值放入span内
        $('.span2').text($.data(div,'message').age)

    </script>
</body>
</html>

QQ截图20170322161827.jpg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Data</title>   
</head>
<body>
 
    <div class="div1" data-role="page" data-last-value="10" data-hidden="true"></div>

    <script src="jquery-3.2.0.min.js"></script>
    <script>

        console.log($('.div1').data("role"))
        console.log($('.div1').data("lastValue"))
        console.log($('.div1').data("hidden"))
    </script>
</body>
</html>

QQ截图20170322172017.jpg

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

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

$node.addClass('active')
$node.removeClass('active')

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

$node.hide()//隐藏
$node.show()//显示

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

$node.attr('id')//获取
$node.attr('id','btn1')//修改id为btn1

$node.attr('src')//获取
$node.attr('src','zyn.com')//修改src为zyn.com

$node.attr('title')//获取
$node.attr('title','jquery-attr')//修改title为jqery-attr

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

$node.attr('data-src','qq.com')

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

$('.ct').prepend($node)

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

$('.ct').append($node)

删除$node

$node.remove()

把$ct里内容清空

$('.ct').empty();

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

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

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

无参数获得宽度，高度
有参数设置宽度，高度
$node.width();                // width
$node.height();               // height
$node.innerWidth();       // width+ padding
$node.innerHeight();      // height+ padding
$node.outerWidth();       // width+ padding + border
$node.outerHeight();      // height + padding + border
$node.outWidth(true);    // width ＋ padding + border + margin
$node.outHeight(true);   // height + padding + border + margin

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

$(window).scrollTop()

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

$node.offset();
$node.offset({ top: 10, left: 30 })//可以设置位置

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

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

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

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

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

$ct.find('.item')

获取$ct 里面的所有孩子

$ct.children();

$ct.contents();
//.contents()和.children()方法类似，只不过前者包括文本节点和注释节点，以及jQuery对象中产生的HTML元素。请注意，虽然这种方式可以传递文本节点和注释节点给一个jQuery集合，但是大多数操作不会支持他们。

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

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

获取选择元素的数量

$node.length;
$node.size()//1.8开始被废弃

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

$(this).index();

7. 用jQuery实现以下操作

1.当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
2.当窗口滚动时，获取垂直滚动距离
3.当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
4.当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
5.当选择 select 后，获取用户选择的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>task1</title>
    <style>
  .bg{
      background:red;
  }

#div3 .box3{
            border: 1px solid #ccc;
            width: 150px;
            height: 150px;
        }
    </style>
</head>
<body>
 <div id="div1">
        <h3>1.当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色</h3>
        <button class="btn">点击变换颜色</button>
 </div>
 </br>
 </br>
 <div id="div2">
        <h3>2.当窗口滚动时，获取垂直滚动距离</h3>
        <div class="box2">
            <p>div垂直的滚动距离为:<span>0px</span></p>
        </div>
  </div>
  </br>
  </br>
  <div id="div3">
        <h3>3.当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色</h3>
        <div class="box3"></div>
  </div>
  </br>
  </br>
  <div id="div4">
        <h3>4.当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字</h3>
        <input class="txt" type="text" placeholder="请输入英文字母">
 </div>
 </br>
 </br>
 <div id="div5">
        <h3>5.当选择 select 后，获取用户选择的内容</h3>
        <select name="happy" class="good" >
            <option value="0" selectd>请选择</option>
            <option value="1">舞蹈</option>
            <option value="2">瑜伽</option>
            <option value="3">音乐</option>
            <option value="4">旅行</option>
        </select>
        <p>用户选择的内容是:<span></span></p>
    </div>
 
 </br>
 </br>
 
    <script src="jquery-3.2.0.min.js"></script>
    <script>
        var $btn = $('.btn')
        $btn.on('click',function(){
            $(this).css({background:'red'})
            setTimeout(function(){
                $('.btn').css({background:'blue'})
            },1000)
         
        })
        $(window).on('scroll',function(){
              $('.box2 span').text(($(this).scrollTop()));
        })


        var $div3 = $('.box3')
        $div3.on('mouseenter',function(){
              $div3.addClass('bg')
        })
         $div3.on('mouseleave',function(){
              $div3.removeClass('bg')
        })

        var $input = $('.txt')
        $input.on('focus',function(){//focus获取焦点事件
              $input.css({border:'1px solid blue'})
        
        })
        $input.on('keyup',function(){
            $(this).val(function(index,val){
                return val.toUpperCase()
               
            })
        })
        $("input").on("blur",function(){//blur失去焦点事件
            $(this).css("border","");
            if($(this).val()!=""){
          console.log($(this).val());
            }
  
        });
        $("#div5 span").text($(".good option:selected").text());
        $("#div5 .good").on("change",function(){
        
           $("#div5 span").text($(".good option:selected").text());
        });

    </script>
</body>
</html>

20170322_201808.gif

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新闻实例</title>
    <style>
        html,body,h2,p,ul,li{
            margin:0px;
            padding:0px;
            list-style: none;
        }
        a{
            color:#333;
            text-decoration:none;
        }
        .container{
            width:600px;
            margin:0 auto;
        }
        .item{
            margin-top:20px;
        }
        .item:after{
            content:'';
            display: block;
            clear:both;
        }
        .item .thumb img{
            width:50px;
            height: 50px;
        }
        .item .thumb{
            float:left;
        }
        .item h2{
            margin-left:60px;
            font-size:14px;
          
        }
        .item p{
            margin-left:60px;
            font-size:14px;
            margin-top:10px;
            color:#ccc;
        }
        .load-more{
            margin-top:20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="news">
            <li>
                <a>
                    <div>
                        <img src="" alt="">
                    </div>
                    <h2></h2>
                    <p></p>
                </a>
            </li>
          
        </ul>
        <button class="load-more">加载更多</button>
    </div>
    
    
    <script src="jquery-3.2.0.min.js"></script>

    <script>
        var pageIndex =0;//每次后端给一页数据 一页数据加载2个新闻
        $('.load-more').on('click',function(){
            $.get('/getNews',{page:pageIndex}).done(function(ret){
                if(ret.status === 0){//与后端约定status===0时数据发送成功
                    pageIndex++;
                    appendHtml(ret.data)//ret.data获取后端retNews

                }else{
                    alert('获取新闻出错')
                }
                
            }).fail(function(){
                alert('系统异常')
            })
        })


        function appendHtml(news){
            if(news.length === 0){
                $('.load-more').remove();
                $('.container').append('<p>没有更多了</p>')//数据全部加载完后
            }
            var  html ='';//接受到数据后拼接html
            $.each(news,function(){
                html +='<li class="item">';
                html +=' <a href="'+this.link+'">';
                html += '<div class="thumb">  ![]('+ this.img +')</div>';
                html +='<h2>'+this.title+'</h2>';
                html +=' <p>'+this.brif+'</P>';
                html +='</a></li>';

            })
            $('.news').append(html);

        }
      
    </script>
</body>
</html>

//后端
app.get('/getNews',function(req,res){
     
    
    var news = [
        {
            link:'http://mil.qq.com/mil_index.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289576514_150120/0',
            title:'韩媒：韩国旅行社停止销售中国旅游产品 销量锐减',
            brif:'萨德对韩国人民生活的影响-1'
        },
          {
            link:'http://news.qq.com/l/milite/jqlw/listjunqingliaowang2012.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290217879_150120/0',
            title:'陆克文：特朗普时期，台湾问题不再是中美台面上问题',
            brif:'萨德对韩国人民生活的影响-2'
        },
          {
            link:'http://news.qq.com/l/milite/milgn/list2010122872223.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290161671_150120/0',
            title:'乐天免税店销售额锐减25% 韩国免税店开拓东南亚市场',
            brif:'萨德对韩国人民生活的影响-3'
        },
          {
            link:'http://news.qq.com/l/milite/zhoubiansaomiao/list2012095132256.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290216074_150120/0',
            title:'朝中社：美国“反恐战”是前所未闻的国家恐怖行为',
            brif:'萨德对韩国人民生活的影响-4'
        },
          {
            link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289499164_150120/0',
            title:'美前防长：对朝鲜动武风险太大，还是谈判吧',
            brif:'萨德对韩国人民生活的影响-5'
        },
          {
            link:'http://news.qq.com/l/milite/milhqj/list2010122872321.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1290217031_150120/0',
            title:'央视揭秘辽宁舰首次远航 露脸的仨人啥来头？',
            brif:'萨德对韩国人民生活的影响-6'
        },
          {
            link:'http://news.qq.com/l/milite/junbei/list2012095132410.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289499766_150120/0',
            title:'媒体：留给和平解决朝核问题的时间或许所剩无多',
            brif:'萨德对韩国人民生活的影响-7'
        },
         {
            link:'http://v.qq.com/cover/j/j02y37wjjgnxdel.html?vid=q0016flpc3k',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289332905_150120/0',
            title:'德女防长回怼特朗普欠军费言论：我们不欠北约的钱',
            brif:'萨德对韩国人民生活的影响-8'
        },
         {
            link:'http://news.qq.com/l/milite/gaoqingtuku/listgaoqingtuku2012.htm',
            img:'http://inews.gtimg.com/newsapp_ls/0/1289495870_150120/0',
            title:'俄媒：学生超越老师 中国造舰已遥遥领先俄罗斯',
            brif:'萨德对韩国人民生活的影响-9'
        },
       
    
    ]
    var pageIndex = req.query.page;
    var len = 2;
    var retNews = news.slice(pageIndex*len,pageIndex*len+len)//获取数据第一次0 2 /第二次 2  4 /....

    res.send({
        status:0,
        data:retNews
    })
})

20170322_204000.gif

版权归饥人谷楠柒所有如有转载请附上地址