jQuery动画与ajax

题目1:

jQuery 中, $(document).ready()是什么意思?

html文档加载完成再解析js文件内容(ready里面的内容)

我们知道:js文件的下载解析会阻止其他文件(html,css,图片等)的下载解析,如果把js文件的引入放在头部,或js代码放在头部,Js文件一下载就立即解析,产生的问题:
1,js文件的执行受到影响,这时候html文件还没有解析,JS是操作dom的文档都还没解析,js的解析执行必定受影响
2,js文件的下载和解析阻止其他文件下载解析,会出现白屏现象

所有,原生js的办法是:
1,<script async src="/xxx"></script>或<script defer src="/xxx"></script>
2,把js文件的引入或代码放到body的底部
3,把js代码包裹在:window.onload=function(){。。。}

而jQuery的办法是:
1,把js代码包裹在 $(document).ready(function(){。。。})
2,把js代码包裹在$(function(){。。。})

上面五种方法都能达到效果,但是原生的第三种方法会使得,所有的文件及图片全部下载解析完成再解析js代码,这会造成短暂页面效果不佳
而jQuery的的这两种方法,只会等到dom文档节点元素加载解析完成,就执行js代码,这种在最终的效果上会得到很大的改善

题目2:

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

1,设置$node节点里面的html为<p>段落</p>
$node.html("<p>段落</p>"):
2, 获取$node里面的所有html代码
$node.html():
3,设置$node里面的文本节点内容为哈哈
$node.text("哈哈")
4,获取$node所有元素的文本内容
$node.text()

题目3:

$.extend 的作用和用法?

jQuery.extend([deep,] target [, object1 ] [, objectN ] )

1,
      var obj1={};
      var obj2={
          name:"liu",
          age:18
       };
     $.extend(obj1,obj2);

相当于把obj2拷贝到obj1上

图片.png
2
       var obj1={};
       var obj2={
          name:"liu",
          age:18
     };
    var obj3={
         name:"vally",
        sex:"man"
     };
  $.extend(obj1,obj2,obj3);

把obj2拷贝到obj1上,再把obj3拷贝到obj1上,有相同属性key,覆盖,没有就添加

图片.png

实际使用场景:
用户输入姓名和年龄,如果用户没有输入年龄,就会使用我们设置的默认年龄
代码

图片.png

3,返回值为,复制覆盖的一个新对象

       function getnews(obj){
              var sp_obj={
                    name:"游客",
                   age:"不详"
             };
           // var relobj={};

         //$.extend(relobj,sp_obj,obj);
        var relobj=$.extend({},sp_obj,obj);
        console.log(relobj);
    }

4,

图片.png

设置为true,表示深拷贝
注:
浅拷贝表示拷贝栈里面的内容,或则堆里面的第一层内容
深拷贝表示拷贝里面的全部内容

5,

图片.png

每一个jQuery选择器上面都有指定对象的属性

题目4:

jQuery 的链式调用是什么?

如下面的写法就是链式调用:

 $('div').find('h3').eq(2).html('Hello');

优点:jQuery自动缓存每一步的结果比(不缓存结果)非链式调用,运行速度快性能高

题目5:

jQuery 中 data 函数的作用
在一个元素上设置不同的值,之后可以获取这些值

$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });

$("body").data("foo"); // 52
$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz:   [ 1, 2, 3 ] }

题目6:

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

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

添加class: $node.addClass("active")
删除class:$node.removeClass("active")
有active就删除没有就添加:$node.toggleClass("active")

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

展示元素:$node.show()
隐藏元素:$node.hide()
目前是展示就把它隐藏,反之展示:$node.toggle()

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

获取元素$node 的 属性: id、src、title:
$node.attr("id"),$node.attr("src"),$node.attr("title")
修改以上属性:
$node.attr("id","xx"),$node.attr("src","xx"),$node.attr("title","xx")

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

$node.attr("data-src","xx")

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

$ct.prepend($node)
$node.prependTo($ct)

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

$ct .append($node)
$node.appendTo($ct)

删除$node

detach($node) :保留删除元素和它的绑定事件
remove($node) :只保留删除元素

把$ct里内容清空

empty($node)

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

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

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

不包括内边距

$node .width()//获取 content-width
$node .width(50)//设置
$node .height()//获取
$node .height(50)//设置

包括内边距

$node .innerWidth()//获取 content-width+padding
$node .innerWidth(50)//设置
$node .innerHeight()//获取
$node .innerHeight(50)//设置

包括边框


图片.png

$node.outerWidth()//获取 content-width+padding+border
$node.outerHeight()//获取

包括外边距

$node.outerWidth(true)//获取 content-width+padding+border+margin
$node.outerHeight(true)//获取

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

$(window).scrollTop()

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

$node.offset()//获取node到更节点的top和left的值
$node.offset().top
$node.offset().left
//设置$node偏移距离
$node.offset({top:40,left:40})

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

方法一
$node.css({"color":"red","font-size":"14px"})
方法二:
.box{
color:red;
font-size:14px
}
$node.addClass("box")

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

$node.each(function(){

 console.log(this.innertext())

})

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

$ct .find(".item")

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

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

获取选择元素的数量

$node.length
$node.size()

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

$node.index()

题目7:

用jQuery实现以下操作

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

题目8:

jQuery ajax 实现,当点击加载更多会加载数据展示到页面

jquery-loadmore.gif

代码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容