饥人谷学习进阶第 20 天
jQuery对象和原生DOM对象的区别
- DOM对象 是我们用传统JS方法获得的对象，jQuery对象 就是jQuery的类库选择器获得的对象；
- jQuery选择器得到的jQuery对象是一个类数组对象，是选择出来的元素的数组集合 和 原生JS中取得DOM对象是两种不同类型，两者不等价；
- jQuery对象无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery的方法。
- 对于选取元素时未选中元素的情况，DOM对象方法返回null结果表示没有选中 对象不存在，jQuery对象方法用length为0表示一个对象不存在
jQuery类数组对象
- 可通过下标访问 jQueryObj[n]
下标访问时是DOM对象，如果要选择单个且还是jQuery对象可通过jQueryObj.eq(n)选择 - 可读取长度jQueryObj.length
jQuery对象 和 DOM对象 转换
- 转成DOM对象 jQueryObj[n]
- 转成jQuery对象 变成jQuery对象后就可以调用jQuery对象方法
$(document.querySelector('#p1'))
没有选中对象
-
document.querySelector()为null，判断一个对象不存在 -
$().length为0，表示一个对象不存在
常用方法
.each(function(index, Element))
遍历一个jQuery对象，为每个匹配元素执行一个函数
$("li").each(function(index) {
console.log(index + ":" + $(this).text())
})
注意：一般来说，jQuery所有回调函数里的对应的元素都是原生DOM，如果想要使用jQuery对象方法要用 $() 将其转换成jQuery对象
jQuery.each(collection, callback(indexInArray, valueOfElement))
jQuery === $
jQuery 可以用 $ 代替
一个通用的迭代函数，可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length-1。其他对象通过其属性名进行迭代
var obj = {
"flammable": "inflammable",
"duh": "no duh"
}
$.each( obj, function( key, value ) {
alert( key + ": " + value )
})
存在价值：foreach只能用于数组，某些老浏览器不支持ES5，不能使用；$.each() 既支持老浏览器，又能让类数组对象使用，也可以遍历JSON对象，通用性更好。
.map(callback(index, domElement))
通过一个函数匹配当前集合中的每个元素，产生一个包含新的jQuery对象
$('.div').map(function(idx, element) {
return this.class
})
jQuery.extend([deep,]target[,object1][,objectN])
- 当我们提供两个或多个对象给
$.extend()，对象的所有属性都添加到目标对象（target参数） - 如果只有一个参数提供给
$.extend()，这意味着目标参数被忽略。这种情况下，jQuery对象本身被默认为目标对象。我们可以在jQuery的命名空间下添加新的功能。对于插件开发者向jQuery添加新函数时是很有用的。
目标对象（第一个参数）将被修改，并且将通过$.extend()返回。如果向保留原对象，可以通过传递一个空对象作为目标对象：
var obj = $.extend({}, obj1, obj2)
在默认情况下，通过$.extend()合并操作不是递归的
如果第一个对象的属性本身是一个对象或者数组，那么它将完全用第二个对象相同key重写一个属性。这些值不会被合并。如果将 true 作为该函数的第一个参数，会在对象上进行递归的合并。
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
// merge oject2 into object1
$.extend(object1, object2);
.clone([withDataAndEvents])
.clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点
通常将页面上一个元素插入到DOM里另一个地方，会被老地方移走，类似剪切效果
$('.hello').appendTo('.goodbye');
<div class="container">
<div class="goodbye">
Goodbye
<div class="hello">Hello</div>
</div>
</div>
如果需要复制而不是剪切，可以克隆之后再appendTo
$('.hello').clone().appendTo('.goodbye')
.index() / .index(selector) / .index(element)
从给定集合中查找特定元素index
- 没参数返回第一个元素index
- 如果参数是DOM对象或者jQuery对象，则返回参数再集合中的index
- 如果参数是选择器，返回第一个匹配元素index，没有找到返回-1
var listItem = $('#bar')
alert("Index:" + $("li").index(listItem))
.ready(handler)
当DOM准备就绪时，指定一个函数来执行。
虽然JS提供了load事件，当页面呈现时用来执行这个事件，直到所有东西，如图象已被完全接收前，此事件不会被触发。
在大多数情况下，只要DOM结构已完全加载时，脚本就可以运行。传递处理函数给 .ready() 方法，能保证DOM准备好就执行这个函数，因此，这里是进行所有其他事件绑定及运行其他jQuery代码的最佳地方。
如果执行的代码需要在元素被加载之后才能使用时（例如取得图片的大小需要在图片被加载完后才能知道），就需要将这样的代码放到load事件中。
下面两种语法等价
- $(document).ready(handler)
- $(handler)
$(function(){
console.log('ready');
});
window.onload和$(document).ready有什么区别？document.onDOMContentLoaded呢?
window.onload 是load在文档加载过程结束时触发事件，等待页面完全加载出来（所有资源都加载了），所有图像和子帧都已完成加载触发。时机较晚
$(document).ready 是只要页面的文档对象模型准备好（DOM可以安全操作）执行指定的函数，不需要等待所有数据样式表、图像和子框架等加载完成。时机较早
$(document).ready 相当于原生JS的 document.onDOMContentLoaded
document.onDOMContentLoaded 是当初始的HTML文档被完全加载和解析完成之后（DOM节点已经存在），DOMContentLoaded事件被触发，无序等待所有数据到来（样式表、图像和子框架的完成加载）。需要注意的是：DOMContentLoaded事件必须等待其所属script之前的样式表加载解析完成才会触发。
网友评论