一、jQuery 中， $(document).ready()是什么意思？
我们知道，在原生 JS 中，有个事件是onload，而window.onload()就是让里边的 JS 等到页面所有元素和资源加载结束后再执行。假设资源过大，如图片资源等， JS 需要等待的时间就很长。而 jQuery 的$(document).ready()事件能实现类似效果，但仅仅是元素（DOM）就绪后就立马执行，无需等待资源的加载。这是一个比window.onload()更高效的办法，而且与之相比， jQuery 的还能多次调用，效果会顺序执行，而原生的onload()要实现改效果需要另外自行处理，因为事件是会被覆盖的。另外，$(function(){})是$(document).ready()的缩写。
二、$node.html() 和 $node.text() 的区别?
- html()
该方法用于获取和设置选中节点的 HTML 结构。当是获取 HTML 时，只返回第一个匹配到的节点的结构。 - text()
该方法用于获取和设置选中节点的纯文本内容。当获取时，返回所有匹配到的元素的所有纯文本拼接起来的字符串。设置的时候，相当于设置纯文本，就算放入 HTML 结构也会被转化为文本。a
实际上就是 DOM 节点与文本；第一个元素和所有文本的区别。
三、$.extend 的作用和用法?
-
当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。和 ES6 的新语法
Object.assign()类似。 -
如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。
使用的话，直接调用即可，需要注意的是，同名的key会被覆盖。
var obj = $.extend({}, {a: 1})
四、 jQuery 的链式调用是什么？
链式调用类似如下：
$(DOM).animate().animate()...stop()
这样写，函数会顺序执行，与使用回调相比，更加简洁明了。原理是 jQuery 的函数执行返回都是一个 jQuery 对象，可直接调用 jQuery 方法。
五、 jQuery 中 data 函数的作用。
该方法可以用来获取或者设置 html 的自定义 data-* 属性，使用方法是$(DOM).data(key, [value])，加上value就是设置，不加就是获取。需要注意的是，如果动态设置的话，只是临时数据，页面刷新是会被重置的。
六、写出以下功能对应的 jQuery 方法：
- 给元素 $node 添加 class active，给元素 $noed 删除 class active
$node.addClass('active class2 ...')
$node.removeClass('active class2 ...')
- 展示元素$node, 隐藏元素$node
$node.show()
$node.hide()
- 获取元素$node 的 属性: id、src、title， 修改以上属性
$node.attr('id') //获取
$node.attr('id', 'aaa') //设置
$noode.attr(key, [value])
- 给$node 添加自定义属性data-src
$node.data('src', 'value')
- 在$ct 内部最开头添加元素$node
$ct.prepend($node)
- 在$ct 内部最末尾添加元素$node
$ct.append($node)
- 删除$node
$node.remove()
- 把$ct里内容清空
$ct.empty()
- 在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
- 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
//获取宽度（不包括内边距、边框、外边距）
$node.width();
//设置
$node.width(val);
//获取宽度（包括内边距）
$node.innerWidth();
//获取宽度（包括内边距和边框）
$node.outerWidth();
//获取宽度（包括内边距、边框和外边距）
$node.outerWidth(true);
//获取高度（不包括内边距、边框、外边距）
$node.height();
//设置
$node.height(val);
//获取高度（包括内边距）
$node.innerHeight();
//获取高度（包括内边距和边框）
$node.outerHeight();
//获取高度（包括内边距、边框和外边距）
$node.outerHeight(true);
- 获取窗口滚动条垂直滚动距离
$(window).scrollTop([val])
``
* 获取$node 到根节点水平、垂直偏移距离
```js
$node.offset()
``
* 修改$node 的样式，字体颜色设置红色，字体大小设置14px
```js
$node.css({
'color': 'red',
'font-size': '14px'
})
``
* 遍历节点，把每个节点里面的文本内容重复一遍
```js
$node.each(function(index , node){
var text = $(node).text()
$(node).text(text + text)
});
- 从$ct 里查找 class 为 .item的子元素
$ct.find(".item");
- 获取$ct 里面的所有孩子
$ct.children();
- 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parents('.ct').children('.panel');
- 获取选择元素的数量
$node.length
- 获取当前元素在兄弟中的排行
$node.index()
七、用 jQuery 实现以下操作
- 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
$btn.on('click', function(){
$(this).animate({
'background-color': 'red'
}, 500).animate({
'background-color': 'blue'
}, 500)
})
- 当窗口滚动时，获取垂直滚动距离
$(window).on("scroll", function(){
var scrollTop = $(window).scrollTop();
})
- 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
$div.on('mouseover', function(){
$(this).css('background-color': 'red')
})
$div.on('mouseout', function(){
$(this).css('background-color': 'white')
})
- 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
$input.on('focus', function(){
$(this).css('border-color': 'blue')
})
$input.on('input', function(){
var val = $(this).val()
$(this).val(val.toUpperCase())
})
$input.on('blur', function(){
$(this).css('border-color': '#333')
console.log('当前输入是：' + $(this).val)
})
- 当选择 select 后，获取用户选择的内容
$select.on('change', function(){
console.log($(this).val())
})
网友评论