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

代码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容