JQuery animate and AJAX

题目1: jQuery 中, $(document).ready()是什么意思?
$(document).ready()是当页面文档加载完成时才能进行,即是加载完网页中的DOM节点,(DOM节点绘制好)之后就执行,不必等到整个网页都加载完成后执行。
另外window.ready()是指网页中的所有元素加载完成时,才能执行,就是网页外部链接的资源和内部的资源都加载完成后才能执行。
具体的区别为:
**1.执行时间 **

    window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 (全部加载完成才执行)
    $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 (部分加载完成才执行)

**2.编写个数不同 **

     window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 
     $(document).ready()可以同时编写多个,并且都可以得到执行 

**3.简化写法 **

     window.onload没有简化写法 
     $(document).ready(function(){})可以简写成$(function(){});

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

      $node.html()是返回demo节点(包括自己)的html结构和内容
      $node.text()是返回node节点的文本 

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

具体形式为jQuery.extend( target [, object1 ] [, objectN ] ),返回的是target,但是target是object的集合。
如果各个object的属性相同,后值覆盖前值。
默认是进行浅拷贝的。就是没有属性,添加新属性。各个object的属性相同时,引用最后一个属性,因为是传地址的。





jQuery.extend demo






页面展示:{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

说明了在进行extend的时候,obj1的banana属性的值,是object2的banana属性的值,是在传地址,故是进行浅拷贝。

所以在version1.1.4的时候,添加了新的属性。
表现形式为jQuery.extend( [deep ], target, object1 [, objectN ] )
deep : Boolean。为true,则进行深拷贝,深拷贝就是相当于我们window中的复制一样,创建的是一个新的对象了。警告: 不使用false(规定)

题目4: jQuery 的链式调用是什么?

因为JQuery的方法都会默认返回一个对象,然后进行调用方法      
method。表现形式为:$('.c').extend().css();
大体为$selector.method().method().mothod()..........

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

作用: 给node绑定任意的数据(除了undefined)
表现形式为:node.data(obj) ;新版本

题目6:
写出以下功能对应的 jQuery 方法:
1、给元素 $node 添加 class active,给元素 $noed 删除 class active

  $node.addClass('active')  //添加clss active
  $node.removeClass('active') //删除class active

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

  $node.show(); //展示元素
  $node.hide();  //隐藏元素
  $node.toggle();  //$node切换展示或隐藏状态

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

  $('#id'); //获取$node的id
  $node.attr('src')  //获取$node的src
  $node.attr('title') //获取$node的title

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

  $node.attr('data-src','value') 

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

    $ct.prepend('$node')
    或是 ('$node').prependTo('$ct') //注意是在内部的,是父子关系

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

    $ct.append('$node')
    或是 ('$node').appendTo('$ct') //注意是在内部的,是父子关系

7、删除$node

    $node.remove(); //自己都删除,何况子元素

8、把$ct里内容清空

  $ct.empty();//清空$ct中的子元素,留下父元素$ct

9、在$ct 里设置 html

  1、$ct.add('
') 2、$ct.html('
')

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

  $node.width()//$node的宽度,不包括padding
  $node.height()//$node的高度,不包括padding
  $node.innerHeight() //$node的宽度,包括padding,不包括border
  $node.innerWidth() //$node的高度,包括padding,不包括border
  $node.outerHeight() // outerHeight(),是默认false,是不包括margin,$node的高度,包括border,并不包括margin
  $node.outerWidth() // outerWdith(),是默认false,是不包括margin,$node的宽度,包括border,并不包括margin,设置为true,则包括了,则为元素的外盒模型。(没有margin的盒子模型为内盒模型)
  $node.outerWidth(true) // 包括外边距
  $node.outerWidth() //  包括外边距

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

  $window.scrollTop()

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

     $node.scrollTop()//垂直偏移距离~~

       $node.offset()
13、修改$node 的样式,字体颜色设置红色,字体大小设置14px

     $node.css({'color':'red','font-size':'14px'}) //使用对象的写法就好了
14、遍历节点,把每个节点里面的文本内容重复一遍

     $.each(obj,function(){
         $(this).text().clone()
     })
15、从$ct 里查找 class 为 .item的子元素

    $ct.each(function(){
       if($(this).children().hasClass('item'))
          {return $(this).children()}
       })
    或是
    $ct.children().filter('.item') //刚刚想到
     或是
    $ct.find('.item') //find(),这个更好。
16、获取$ct 里面的所有孩子

     $ct.children();
17、对于$node,向上找到 class 为'.ct'的父亲,在从该父亲找到'.panel'的孩子

     $node.parents('.ct').children('.panel')
18、获取选择元素的数量

     $(selector).length //一个数量就是一个长度。
19、获取当前元素在兄弟中的排行

       $(this).index()

**题目7:**
用jQuery实现以下操作
1、当点击$btn 时,让 $btn 的背景色变为红色再变为蓝色

     $btn.click(function(){$(this).css('style','blue')})
2、当窗口滚动时,获取垂直滚动距离

     $.window.scrollTop();
3、当鼠标放置到$div 上,把$div 背景色改为红色,移出鼠标背景色变为白色

     $div.hover(function(){$(this).css('background','red')},function(){$(this).css('background','blue')})
4、当鼠标激活 input 输入框时让输入框边框变为蓝色,当输入框内容改变时把输入框里的文字小写变为大写,当输入框失去焦点时去掉边框蓝色,控制台展示输入框里的文字    
5、当选择 select 后,获取用户选择的内容

     同一个demo:  https://github.com/komolei/demo/blob/master/JQuery/test-extend.html
**题目8:** 用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面[效果预览124](http://jrgzuoye.applinzi.com/%E4%BD%9C%E4%B8%9A%E5%AE%89%E6%8E%92/jscode/JS9-jqueryajax/1.html)

     demo:https://github.com/komolei/demo/tree/master/JQuery/task151
~~~**题目9:** 实现一个天气预报页面,前端展示自由发挥,数据接~~口: http://api.jirengu.com/weather.php
(选做题目)
~~有一个更好用的天气 API~~ :[心知天气](https://jscode.me/t/api/781)

你可能感兴趣的:(JQuery animate and AJAX)