Jquery 中,$(document).ready()是什么意思?和window.onload 的区别? 还有其他什么写法或者替代方法?
$(document).ready()是指在页面中等到所有DOM准备就绪时,执行ready()这个函数,一般把jq事件和函数放置于该事件中。
区别:
window.onload
需要页面内包括图片等所有元素加载完毕后才能执行,而$(document).ready()
是DOM结构绘制完毕后就可以执行,不必等到加载完毕。
window.onload
不能同时编写多个,如果页面有多个window.onload
,只会执行最后一个,$(document).ready()
可以同时编写多个并执行
其他写法:
$(document).ready(function)
$().ready(function)
$(function)
$node.html()
和$node.text()
的区别
$node.html()
获取被选元素的节点包括html结构
$node.text()
获取被选元素的文本节点
$.extend 的作用和用法?
当我们提供两个或多个对象给$.extend()
,对象的所有属性都添加到目标对象(第一个参数)并返回,如果没有{}
将赋值到第一个对象。
用法为:
var object=$.extend({},object1,object2);
当一个参数为true时,将会进行递归的深拷贝合并。
用法为:
var object=$.extend(true,{},object1,object2);
JQuery 的链式调用是什么?
指的是在JQ环境下,函数的返回对象可以连续的使用.jq()的方法进行连续调用而不报错
JQuery ajax 中缓存怎样控制?
使用cache这个参数控制,true代表可以缓存,false则为不缓存?(不缓存的方法主要是运用是时间戳的原理)
jquery 中 data 函数的作用
data函数主要是用来在元素中存放临时数据
如:
$("div").data("loading",'hahha'); console.log($("div").data("loading"));
代码
1.给元素 $node 添加 class active,给元素 $noed 删除 class active
$node.addClass('active) //添加
$node.removeClass('active') //删除
2.展示元素$node, 隐藏元素$node
$node.show() //展示
$node.hide() //隐藏
3.获取元素$node 的 属性: id、src、title, 修改以上属性
$node.attr('id/src/title','el') //只有第一个参数代表获取元素属性,第二个可选参数el为需要设置的属性
4.给$node 添加自定义属性data-src
$node.attr('data-src','添加的属性')
5.在$ct 内部最开头添加元素$node
$ct.prepend($node)
6.在$ct 内部最末尾添加元素$node
$ct.append($node)
7.删除$node
$node.remove() //删除此元素以及子元素
8.把$ct里内容清空
$ct.empty() //删除ct子元素
9.在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
10.获取、设置$node的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
获取高度:
$node.height() 返回高度(不包括内边距、边框或外边距)
$node.inndrHeight() 返回高度包括内边距
$node.outerHeight() 返回高度包括内边距和边框
$node.outerHeight() 返回高度包括内边距边框和外边距
//宽度等同于上边
设置宽高例子:
$('div').width(300).height(200); 设置div宽度300,高度200
11.获取窗口滚动条垂直滚动距离
$(document).scrollTop();
12.获取$node 到根节点水平、垂直偏移距离
$node.offset()
13.修改$node 的样式,字体颜色设置红色,字体大小设置14px
$node.css({
"color":"red",
"font-size":"14px"
};
14.遍历节点,把每个节点里面的文本内容重复一遍
$.each($node,function(){
console.log($(this).text());
});
或:
$node.each(function(){
console.log($(this).text());
});
15.从$ct 里查找 class 为 .item的子元素
$ct.find('item')
16.获取$ct 里面的所有孩子
$ct.children() //获取直接子元素
$ct.find('*') //获取所有后代元素
17.对于$node,向上找到class为'.ct'的父亲,在从该父亲找到'.panel'的孩子
$node.parents('.ct').find('.panel')
18.获取选择元素的数量
$node.length; //$node.size()
19.获取当前元素在兄弟中的排行
$node.index()