jQuery 中，$(document).ready()是什么意思？
在$(document).ready()函数内的所有代码都将在DOM加载完毕后，页面全部内容（包括图片等）完全加载完毕前执行。
$(document).ready()表示页面的dom元素已经加载完毕，这是为了防止在页面加载元素加载完之前对dom元素进行操作。原生js中我们可以使用window.onload来达到这个效果，不过两者还是有区别，onload是所有元素、图片、外部资源都加载完，而$(document).ready()只需要元素加载完成。所以onload比$().ready()要慢。
$node.html()和$node.text()的区别?
$node.html()：取得第一个匹配元素的html内容。
$node.html(val)：设置每一个匹配元素的html内容。
$node.text()：取得所有匹配元素的文本内容。
$node.text(val)：设置所有匹配元素的文本内容。
html()包含匹配元素的HMTL内容，而text()只合并文本内容。
$.extend 的作用和用法?
extend的主要作用就是合并对象，对对象进行扩展操作。基本语法如下：
jQuery.extend([deep,] target [, object1 ][, objectN ] )
var obj1 = {
name: 'he',
age: 22
};
var obj2 = {
name: 'mamba',
sex: '男'
};
$.extend(obj1, obj2); // {name: "mamba", age: 22, sex: "男"}
obj1; // {name: "mamba", age: 22, sex: "男"}
obj2; // {name: "mamba", sex: "男"}
上面的代码意思是将 obj2 对象合并到 obj1 对象中，但这种方法会 改变 obj1 对象的结构。
var obj1 = {
name: 'he',
age: 22
};
var obj2 = {
name: 'mamba',
sex: '男'
};
$.extend({}, obj1, obj2); // {name: "mamba", age: 22, sex: "男"}
obj1; // {name: "he", age: 22}
obj2; // {name: "mamba", sex: "男"}
用这种方法，相当于把obj1和obj2合并后的结果赋值给一个新建的对象。不会改变obj1的对象结构。
该方法还有一个类型为 boolean 的 [deep] 传参，当其为 true 时，将 object1 , objectN 深度复制 后合并到 target 中。
var obj = {
name: 'he',
age: 22,
number: [1, 2, 3]
};
var obj1 = $.extend({}, obj);
var obj2 = $.extend(true, {}, obj);
obj.number[0] = 4;
console.log(obj1.number[0]); // 4
console.log(obj2.number[0]); // 1
obj2是经过obj深拷贝后的结果，所以obj2内的对象不再因obj的改变而改变。
jQuery 的链式调用是什么？
链式调用就是分步骤地对jQuery对象实现各种操作。
它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。优点在于：
1.代码更精简。链式调用能大大精简代码量，多项操作一行代码一气呵成；
2.优化性能。使用链式调用，所有操作代码共享一个jQuery对象，省去了逐步查询DOM元素的性能损耗。
jQuery 中 data 函数的作用
-
.data( key, value )或.data( obj )在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。 - .data() 方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险。如果 DOM 元素是通过 jQuery 方法删除的或者当用户离开页面时，jQuery 同时也会移除添加在上面的数据。我们可以在一个元素上设置不同的值，并获取这些值：
- HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。
<div class="box" data-max="30" data-min="10"></div>
$('.box').data('value', [10, 20, 30]);
$('.box').data('friend', {'age': 30, 'sex': 'male'});
$('.box').data({name: 'mamba', hobby: 'travel'});
$('.box').data('friend'); // {age: 30, sex: "male"}
$('.box').data('name'); // "mamba"
// HTML 5 data- 属性 将自动被引用到jQuery的数据对象中
$('.box').data('min'); // 10
$('.box').data('max'); // 30
$('.box').data('max', 50);
$('.box').data('max'); // 50
$('.box').attr('data-max'); // "30"，可见.data()只能对其访问
写出以下功能对应的 jQuery 方法：
给元素 $node 添加 class active，给元素 $noed 删除 class active
$node.addClass('active');
$node.removeClass('active');
展示元素$node, 隐藏元素$node
$node.show(time,allback)
$node.hide(time,callback)
获取元素$node 的 属性: id、src、title， 修改以上属性
//获取属性，一个参数
$node.attr('id');
$node.attr('src');
$node.attr('title');
//修改属性，两个参数或一个对象
$node.attr('id', 'xxx');
$node.attr({
src: 'xxx',
title: 'xxx'
});
给$node 添加自定义属性data-src
$node.attr('data-src', 'xxx');
在$ct 内部最开头添加元素$node
$ct.prepend($node);
$node.prependTo($ct);
在$ct 内部最末尾添加元素$node
$ct.append($node);
$node.appendTo($ct);
删除$node
$node.remove() //$node上面的属性、事件之类的删除之后不保存
$node.detach() //$node上面的属性、事件之类的删除之后保存
把$ct里内容清空
$ct.empty()
在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$node.width(); // content width
$node.height(); // content htight
$node.innerWidth(); // padding width
$node.innerHeight(); // padding height
$node.outerWidth(); // border width
$node.outerHeight(); // border height
$node.outerWidth(true); // margin width
$node.outerHeight(true); // margin height
获取窗口滚动条垂直滚动距离
$(window).scrollTop();
获取$node 到根节点水平、垂直偏移距离
$node.offset(); // {top: 3149, left: 38}
修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({
color: 'red',
'font-size': '14px'
});
遍历节点，把每个节点里面的文本内容重复一遍
<ul id="items">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
$('#items li').each(function () {
var text = $(this).text();
$(this).text(text + text);
});
</script>
从$ct 里查找 class 为 .item的子元素
$ct.find('.item');
获取$ct 里面的所有孩子
$ct.children();
对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parents('.ct').find('.panel');
获取选择元素的数量
$node.length
$node.size()
获取当前元素在兄弟中的排行
$node.index();
1
1
1
11
1
1
1
1
11
网友评论