题目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上
2
var obj1={};
var obj2={
name:"liu",
age:18
};
var obj3={
name:"vally",
sex:"man"
};
$.extend(obj1,obj2,obj3);
把obj2拷贝到obj1上,再把obj3拷贝到obj1上,有相同属性key,覆盖,没有就添加
实际使用场景:
用户输入姓名和年龄,如果用户没有输入年龄,就会使用我们设置的默认年龄
代码
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,
设置为true,表示深拷贝
注:
浅拷贝表示拷贝栈里面的内容,或则堆里面的第一层内容
深拷贝表示拷贝里面的全部内容
5,
每一个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)//设置
包括边框
$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 后,获取用户选择的内容
代码