jquery动画与Ajax

作者: 饥人谷_啦啦啦 | 来源:发表于2017-07-08 03:06 被阅读0次

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

$(document).ready的意思，等DOM结构加载后以后执行ready里面的代码。
另外，$() ,是$(document).ready()的速记形式。

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

$node.html() 是获取node这个jquery对象的html内容。html()加字符串、变量可以对其html结构进行修改。
$node.text()是获取文本内容。同样括号内加字符串或者变量可以对内容进行修改。

题目3： $.extend 的作用和用法?

用来合并对象。
jQuery.extend([deep,] target [, object1 ] [, objectN ] )

第一个参数可选，true或者false。表示，是不是遵从递归合并的规则，意思就是，深合并对象中的对象，如果是false，并不执行合并，直接用第二个对象中的KEY重写value，默认值是false。
target，目标对象。如果只传进来两个对象参数，则第一个就是目标参数，如果只传进来一个，在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。
返回值是目标对象，且会被修改，如果不希望被修改，则可以传进去一个空对象。
如果传进去是两个数组，也按照key:value进行合并，后者覆盖前者。如 a=[2,7],b=[1,2,3]，合并结果：[2,7,3]

题目4： jQuery 的链式调用是什么？

Query的方法的返回值仍为当前对象时可以继续调用该对象的方法，这样就形成一种链式调用，好处，对于操作DOM结构来说，代码量好像减少了，不用像JS一样，选择一个DOM节点，做某件事，再选择这个节点，再做某件事。用链式就可以实现$node.do().do()。流程变得更加清晰了。

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

储存与元素相关的任意数据。
$node.data(key,value) 为这个node储存名为key,值为value的一个数据。key和value都是必选的。
也可以这样：$node.data({key1:value1,key2:value2})

题目6：

给元素 $node 添加 class active，给元素 $noed 删除 class active
$node.addClass('active')
$node.removeClass('active')
展示元素$node, 隐藏元素$node
$node.show()
$node.hide()
获取元素$node 的属性: id、src、title，修改以上属性

$node.attr('id')
$node.attr('src')
$node.attr('title')
$node.attr({
  id:'xxx',
  src:'xxxx',
  title:'xxx'
})

给$node 添加自定义属性data-src
`$node.attr('data-src','xxxxx')
在$ct 内部最开头添加元素$node
$ct.perpend($node)
在$ct 内部最末尾添加元素$node
$ct.append($node)
删除$node
$ct.remove($node)
把$ct里内容清空
`$ct.empty()
在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class=btn></div>')
获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

$node.width() //只是内容
$node.height()
$node.innerWidth()//包括内边距，不包括边框。
$node.innerHeight()
$node.outerWidth()//包括内边距，边框，不包括外边距
$node.outerHeight()
$node.outerWidth(true)//包括内边距，边框，外边距。
$node.outerHeight(true)

获取窗口滚动条垂直滚动距离
$(window).scrollTop()
获取$node到根节点水平、垂直偏移距离
`$node.offset()
修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({"color":"red","font-size":"14px"})
遍历节点，把每个节点里面的文本内容重复一遍

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

从$ct 里查找 class 为 .item的子元素
$ct.find('.item')
获取$ct 里面的所有孩子
$ct.children()
对于$node，向上找到 class 为’.ct’的父亲，在从该父亲找到’.panel’的孩子
$node.parent('.ct').find('.panel')
获取选择元素的数量
$node.length
$node.size()
获取当前元素在兄弟中的排行
$node.index()

题目7：用jQuery实现以下操作

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

题目8：

<!DOCTYPE html>
<html>
<head lang="en">
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin:0;
            padding:0;
        }
        .layout{
            margin:0 auto;
            text-align:center;
        }
        ul>li{
            text-align:left;
            list-style: none;
            border:1px solid  #ccc;
            border-radius:2px;
            padding:10px;
        }
        ul>li:hover{
            background-color:green;
        }
        span{
            display:inline-block;
            line-height:50px;
            border:1px solid #ccc;
            cursor:pointer;
            height:50px;
            width:100px;
            margin-top:20px;

        }
        span img{
            width:50%;
            height:auto;
        }
    </style>
</head>
<body>
    <div class="layout">
        <ul>
            <li>内容1</li>
            <li>内容2</li>
        </ul>
        <span>加载更多</span>
    </div>
    <script>
        $(function(){
            $.ajax({
                url:'/getContent',
                method:'get',
            }).done(function(){
                console.log(1)
            }).success(function(){
                console.log(2)
            })
        }());

            var a= 3,isloading=false
            $('span').on('click', function (){
                if(isloading){
                    return;
                }else {
                    $(this).html('<img src=http://img.zcool.cn/community/01965756f0a5de6ac7257d202cc205.gif>')
                    isloading=true;
                    $.ajax({
                        url: '/getContent',
                        method: 'get',
                        data: {
                            haha: a
                        }
                    }).done(function (result) {
                        var hl = '';
                        $.each(result, function (i) {
                            hl += '<li>' + result[i] + '</li>'
                        })
                        $('.layout>ul').append(hl)

                    }).fail(function (jqXHR, textStatus) {
                        isloading=false;
                        $(this).html('加载更多')

                    }).success(function(){
                        console.log(111)
                        isloading=false;
                        a+=5;
                        $('span').text('加载更多')
                    })
                }
            })


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

router.get('/getContent',function(req,res){
  var a=[],haha=req.query.haha;
  for(var i=0;i<5;i++){
    a[i]='内容'+(i+parseInt(haha))
  }
  res.header('Access-Control-Allow-Origin','*')
  setTimeout((function(){
    res.send(a)
  }),5000)
})

效果预览：

加载更多

选做题目：

<!DOCTYPE html>
<html>
<head lang="en">
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        @font-face {
            font-family: 'iconfont';  /* project id 314258 */
            src: url('//at.alicdn.com/t/font_o079ijg916cx47vi.eot');
            src: url('//at.alicdn.com/t/font_o079ijg916cx47vi.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_o079ijg916cx47vi.woff') format('woff'),
            url('//at.alicdn.com/t/font_o079ijg916cx47vi.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_o079ijg916cx47vi.svg#iconfont') format('svg');
        }
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
            color:white;
        }
        html body{
            height:100%;
        }
        .layout{
            width:1024px;
            height:100%;
            background:url(http://p0.so.qhimgs1.com/bdr/_240_/t0187a977029f45c17c.jpg) no-repeat center center;
            background-size:cover;
            margin:0 auto;
            padding:30px;
        }
        .main{
            width:960px;
            margin:0 auto;
        }
        .bg {
            height:380px;
            background:url(http://p1.so.qhimgs1.com/bdr/_240_/t016a820b1d9b0dd06d.jpg) no-repeat center center;
            background-size:cover;
            position:relative;
        }
        h1{
            display:inline-block;
            padding-top:40px;
            padding-left:60px;
            font-size:100px;
            color:#fff;
        }
        .location{
            float:right;
            margin-top:80px;
            margin-right:60px;
            text-align:center;
        }
        .location>span{
            display:inline-block;
            font-family: iconfont;
            font-size:60px;
        }
        .location .where li{
            display:none;
            list-style:none;
            color:#fff;
            padding-top:10px;
            padding-bottom:10px;
            border-top:1px solid;
            text-align:center;
        }
         .where .your {
           padding:20px;
        }
        .lastp{
            position:absolute;
            bottom:10px;
            left:60px;
            font-size:24px;
            font-weight:700;
        }
        .w-ct {
            width:960px;
            height:150px;
            overflow:hidden;
        }
        .weather{
            box-sizing:border-box;
            list-style:none;
            width:1160px;
        }
        .weather:after{
            display:block;
            content:'';
            clear:both;
        }
        .weather li{
            box-sizing:border-box;
            float:left;
            height:150px;
            width:200px;
        }
        .weather>li>span{
            display:inline-block;
            float:left;
            width:50%;
            text-align:center;
        }

        .weather .week{
            margin-top:20px;
            color:white;
            text-align:center;
        }
        .weather> .addwidth{
            width:358px;
            border-left:2px solid;
            border-right:2px solid;
        }
        .addwidth .temperature{
            font-size:30px;
            padding-top:20px;
            height:auto;
        }
        .addwidth img{
            width:80px;
            height:60px;
            float:left;
            margin-left:50px;
            margin-bottom:20px;
        }
        .addwidth .w-wind{
            font-size:20px;
            margin-top:0;
        }
        .addwidth .w-weather{
            font-size:20px;
            margin:0 auto;
        }
         .temperature{
            padding-top:20px;
            height:200px;
            font-size:24px;
        }
         li>img{
            float:left;
            margin-left:25px;
            margin-bottom:0;
            width:40px;
            height:auto;
        }
         .w-wind{
            margin-top:5px;
            font-size:20px;
        }
         .w-weather{
            margin:5px auto;
            font-size:20px;
        }
        .logo {
            width:200px;
            height:150px;
            font-family: 'iconfont';
            font-size:80px;
            line-height:150px;
            text-align:center;
            float:left;
        }
    </style>
</head>
<body>
    <div class="layout">
     <div class="main">
        <div class="bg">
            <h1>Summer</h1>
            <div class="location">
                <span ></span>
                <ul class="where">
                    <div class="your">
                        <div>郑州</div>
                        <li>成都</li>
                        <li>郑州</li>
                        <li>杭州</li>
                    </div>

                </ul>
                <p class="time">lala</p>
            </div>
            <p class="lastp">weather</p>
        </div>
         <div class="w-ct">
             <ul class="weather">
                 <li>
                     <div class="week"><span>星期三</span></div>
                     <span class="temperature"> 82 </span>
                     ![](http://place.eventown.com.cn/images/loading.gif)
                     <span class="w-wind">2017/7/5</span>
                     <span class="w-weather">aldjf</span>
                 </li>
                 <li >
                     <div class="week"><span>星期三</span></div>
                     <span class="temperature">29</span>
                     ![](http://place.eventown.com.cn/images/loading.gif)
                     <span class="w-wind">2017/7/5</span>
                     <span class="w-weather">aldjf</span>
                 </li>
                 <li >
                     <div class="week"><span>星期三</span></div>
                     <span class="temperature">28</span>
                     ![](http://place.eventown.com.cn/images/loading.gif)
                     <span class="w-wind">2017/7/5</span>
                     <span class="w-weather">aldjf</span>
                 </li>
                 <li >
                     <div class="week"><span>星期三</span></div>
                     <span class="temperature">28</span>
                     ![](http://place.eventown.com.cn/images/loading.gif)
                     <span class="w-wind">2017/7/5</span>
                     <span class="w-weather">sdfa</span>
                 </li>
                 <div class="logo"></div>
             </ul>
         </div>
        </div>
      </div>
<script>
    $('.your').on('mouseover',function(){
        $('.where li').slideDown()
    })
    $('.your').on('mouseleave',function(){
        $('.where li').hide()
    })
    $('.your li').on('click',function(){
        $('.your>div').text($(this).text())
        $.ajax({
            url:'//jirenguapi.applinzi.com/weather.php',
            method:'get',
            data:{
                city:$('.your>div').text()
            },
        }).done(function(result){
            var now=JSON.parse(result)
            console.log(now)
            console.log(now.date)
            console.log(now.results[0].weather_data[0].date.match(/\S*/).join(''))
            var wdata=now.results[0].weather_data
            $('.time').text(now.date)
            $.each(wdata,function(i){
                $('.weather .week>span').eq(i).text(wdata[i].date.match(/\S*/).join(''))
                $('.weather .temperature').eq(i).text(wdata[i].temperature)
                $('.weather .w-wind').eq(i).text(wdata[i].wind)
                $('.weather .w-weather').eq(i).text(wdata[i].weather)
                $('.weather img').eq(i).attr('src',wdata[i].dayPictureUrl)
            })
        })
    })
    $('.weather>li').on('mouseover',function() {
        if ($(this).hasClass('addwidth')) {
            return;
        } else {
            $(this).addClass('addwidth')

        }
    })
    $('.weather>li').on('mouseleave',function(){
        $(this).removeClass('addwidth')
    })
       $.ajax({
           url:'//jirenguapi.applinzi.com/weather.php',
           method:'get',
           data:{
                city:$('.your>div').text()
           },
       }).done(function(result){
           var now=JSON.parse(result)
           console.log(now)
           console.log(now.date)
           console.log(now.results[0].weather_data[0].date.match(/\S*/).join(''))
           var wdata=now.results[0].weather_data
           $('.time').text(now.date)
           $.each(wdata,function(i){
               $('.weather .week>span').eq(i).text(wdata[i].date.match(/\S*/).join(''))
               $('.weather .temperature').eq(i).text(wdata[i].temperature)
               $('.weather .w-wind').eq(i).text(wdata[i].wind)
               $('.weather .w-weather').eq(i).text(wdata[i].weather)
               $('.weather img').eq(i).attr('src',wdata[i].dayPictureUrl)
           })
       })


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

效果预览

今天好像js.jierengu不知道怎么回事，放上去预览不了
功能实现

地点

可以选择三个地点。

最下面有个动画效果

问题：我在做这个动画的时候，考虑的是加一个addwidth 的class。但是出现了一个小问题，就是如果第一个li 默认有addwidth这个class的时候，怎么样才能实现，鼠标离开的时候确保这个ul里面仍然是有一个 addwidth?

jquery动画与Ajax

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

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

题目3： $.extend 的作用和用法?

题目4： jQuery 的链式调用是什么？

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

题目6：

题目7：用jQuery实现以下操作

题目8：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读