问答
1. Jquery 中， $(document).ready()是什么意思？和window.onload 的区别？ 还有其他什么写法或者替代方法？
- $(document).ready()是指在DOM文档树加载完成之后执行，并不是指整个文档。也可以写成：$().ready()或者$();。
- window.onload是在dom文档树加载完和所有文件加载完之后执行。
- $(document).ready()可以有多个，且不会覆盖，按照顺序来执行，而window.onload只能绑定一次，后面的会覆盖前面的。
2.$node.html()和$node.text()的区别?
- $node.html()获取的是html节点内容，包括对应的标签会一起获取
- $node.text()获取的是htmli里面的额文本内容，有值得花为设置文本内容
3. $.extend 的作用和用法?
- $.extend()将多个对象合并到一起，可以传入多个参数。$.extend([deep,] target,..)[deep,]为布尔值默认情况不是深拷贝，可设置true为深拷贝
1
2
3
4
5
6
7
8
9
10
| var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
$.extend( object1, object2 );////将object2合并到object1,浅拷贝
|
4. JQuery 的链式调用是什么？
- 链式调用值得是jQuery方法调用的方法返回的也是一个JQuery对象，因此可以连续的调用下一个方法。
1
| $("#Test").css('color','red').show(200).hide();;
|
5. JQuery ajax 中缓存怎样控制?
- 在浏览器的一定时间内，如果url的第一次请求和第二次请求没有变化，浏览器会自动是用缓存内的数据.控制缓存通过cache 是否开启缓存，默认为true开启
ajax中缓存针对当提交方式为get的情况下，两次url地址相同，第二次就不会提交到服务器上，而是直接调用上一次的数据。控制缓存可以用$.setup({cache:false})
，其原理是类似在请求中加时间戳，这样浏览器以为两次请求是不同的而不会去调用缓存，但时间戳并不影响数据的获取。
6. jquery 中 data 函数的作用
.data() 方法允许我们在DOM元素上绑定任意类型的数据,以键值对的方式绑定,可以循环引用。
我们可以在一个元素上设置不同的值，之后获取这些值：
1
2
3
4
5
6
| $("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",
|
1. 写出以下jq方法
给元素 $node 添加 class active，给元素 $noed 删除 class active
1
2
| $node.addClass("active");
$node.removeClass("active");
|
展示元素$node, 隐藏元素$node
1
2
| $node.show();
$node.hide();
|
获取元素$node 的 属性: id、src、title， 修改以上属性
1
2
3
4
5
6
7
8
9
10
11
| $node.attr('id')；
$node.attr('src')；
$node.attr('title')；
//修改
$node.attr({
id:' img'，
src:' 1.jpg'，
title:' 饥人谷logo'，
});
$node.attr('id','img');// 单独修改属性
|
给$node 添加自定义属性data-src
1
| $node.attr('data-src','1.jpg');//自定义图片资源，用于懒加载当中，优化性能
|
在$ct 内部最开头添加元素$node
在$ct 内部最末尾添加元素$node
删除$node
1
| $node.remove();//remove()可设置元素选择器过滤
|
把$ct里内容清空
1
2
| $ct.empty();//把$ct内部的所有子元素清除掉，$ct本身还在，remove()把给元素及子元素删除
$ct.text("");/$ct.html("");//用赋值为空的方式清空内容
|
在$ct 里设置 html
1
| $ct.html('<div class="btn"></div>');
|
获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
1
2
3
4
5
6
7
8
| $node.width(); //获得宽度 不包括内边距 仅内容大小
$node.width(200); //设置宽度
$node.height(); //获得高度
$node.height(80); //设置高度
$node.innerWidth(); //包含内边距
$node.innerHeight()；//包含内边距
$node.outerWidth(); //包含边框
$node.outerWidth(true); //包含外边距
|
获取窗口滚动条垂直滚动距离
获取$node 到根节点水平、垂直偏移距离
1
2
3
| $node.offset()//获取元素相对于document的偏移
$node.offset().top//获取垂直偏移距离
$node.offset().left//获取水平偏移距离
|
修改$node 的样式，字体颜色设置红色，字体大小设置14px
1
2
3
4
| $node.css({
'color': 'red',
'font-size': '14px'
});
|
遍历节点，把每个节点里面的文本内容重复一遍
1
2
3
| $.each($('p'),function (inde,ele) {
$(this).text($(this).text()+$(this).text());
})
|
从$ct 里查找 class 为 .item的子元素
获取$ct 里面的所有孩子
对于$node，向上找到 class 为’.ct’的父亲，在从该父亲找到’.panel’的孩子
1
| $node.parents('.ct').find('.panel');
|
获取选择元素的数量
获取当前元素在兄弟中的排行
2.简单实现以下操作
- 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
- 当窗口滚动时，获取垂直滚动距离
- 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
- 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文2字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
- 当选择 select 后，获取用户选择的内容
gitlab库链接3.用 jquery ajax 实现如下效果。当点击加载更多会加载数据展示到页面。当鼠标放置上去会变色
gitlab库链接，使用mock后台服务器