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")); //"hahha"
代码
给元素 $node 添加 class active,给元素 $noed 删除 class active
$node.addClass('active) //添加
$node.removeClass('active') //删除
展示元素$node, 隐藏元素$node
$node.show() //展示
$node.hide() //隐藏
获取元素$node 的 属性: id、src、title, 修改以上属性
$node.attr('id/src/title','el') //只有第一个参数代表获取元素属性,第二个可选参数el为需要设置的属性
给$node 添加自定义属性data-src
$node.attr('data-src','添加的属性')
在$ct 内部最开头添加元素$node
$ct.prepend($node)
在$ct 内部最末尾添加元素$node
$ct.append($node)
删除$node
$node.remove() //删除此元素以及子元素
把$ct里内容清空
$ct.empty() //删除ct子元素
在$ct 里设置 html
<div class="btn"></div>
$ct.html('<div class="btn"></div>')
-
获取、设置$node的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
获取高度: $node.height() 返回高度(不包括内边距、边框或外边距) $node.inndrHeight() 返回高度包括内边距 $node.outerHeight() 返回高度包括内边距和边框 $node.outerHeight() 返回高度包括内边距边框和外边距 //宽度等同于上边 设置宽高例子: `$('div').width(300).height(200); 设置div宽度300,高度200`
获取窗口滚动条垂直滚动距离
$(document).scrollTop();
获取$node 到根节点水平、垂直偏移距离
$node.offset()
-
修改$node 的样式,字体颜色设置红色,字体大小设置14px
$node.css({ "color":"red", "font-size":"14px" };
-
遍历节点,把每个节点里面的文本内容重复一遍
$.each($node,function(){ console.log($(this).text()); }); 或: $node.each(function(){ console.log($(this).text()); });
从$ct 里查找 class 为 .item的子元素
$ct.find('item')
获取$ct 里面的所有孩子
$ct.children() //获取直接子元素
$ct.find('*') //获取所有后代元素
对于$node,向上找到class为'.ct'的父亲,在从该父亲找到'.panel'的孩子
$node.parents('.ct').find('.panel')
获取选择元素的数量
$node.length; //$node.size()
获取当前元素在兄弟中的排行
$node.index()
代码
- 本博客版权归羞涩的涩和饥人谷所有,转载请注明出处