进阶-任务15

jQuery 中， $(document).ready()是什么意思？

JavaScript提供了load事件，当页面加载完毕时用来执行这个事件，直到所有的东西，如图像已被完全接收前，此事件不会被触发。
而 $(document).ready()是当DOM结构完全加载时，指定一个函数来执行

$node.html()和$node.text()的区别?

$node.html()用来设置和获取元素内部 HTML 内容
$node.text()用来设置和获取元素内部文本

$.extend 的作用和用法?

将两个或更多对象的属性或方法合并到第一个对象，常用于合并 defaults 和 options 对象，并且不修改 defaults 对象。

var defaults = {
  username: 'user',
  gender: 'unknown',
  limits: function() {
    alert(1)
  }
}

var options = {
  username: 'nicole',
  gender: 'female',
  limits: function() {
    alert(1)
  }
}
var userInfo = {}
$.extend(userInfo, defaults, options)
console.log(userInfo)
/*
[object Object] {
  gender: "female",
  limits: function () {
    alert(1)
  },
  username: "nicole"
}*/

jQuery 的链式调用是什么？

由于jQuery的方法都会返回一个jQuery对象，使得一个对象可以多次调用方法。

$('div').siblings().addClass('hover')

jQuery 中 data 函数的作用

用来读取或设置HTML5的data-*属性的值

// html
<div data-index="2"></div>
// js
$div = $('div')
$div.data('index','5')
var index= $div.data('index')
$div.html(index)
//output: 5

写出以下功能对应的 jQuery 方法：

$node = $('.node')
$ct = $('#ct')
// 给元素 $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','div')
$node.attr('src','http://baidu.com')
$node.attr('title','jirengu')
// 给$node 添加自定义属性data-src
$node.data('src','http://baidu.com')
// 在$ct内部最开头添加元素$node
$ct.prepend($node)
// 在$ct 内部最末尾添加元素$node
$ct.append($node)
// 删除$node
$node.remove()
// 把$ct里内容清空
$ct.html('')
// 在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn">1</div>')
// 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
$node.width()
$node.innerWidth()
$node.outerWidth()
$node.outerWidth(true)
$node.height()
$node.innerHeight()
$node.outerHeight()
$node.outerHeight(true)
// 获取窗口滚动条垂直滚动距离
$(window).scrollTop()
// 获取$node 到根节点水平、垂直偏移距离
$node.offset()
// 修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({
  color: 'red',
  fontSize: '14px'
})
// 遍历节点，把每个节点里面的文本内容重复一遍
$node.each(function() {
  console.log($this.text())
})
// 从$ct 里查找 class 为 .item的子元素
$ct.find('.item')
// 获取$ct 里面的所有孩子
$ct.children()
// 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
$node.parents('.ct').find('.panel')
// 获取选择元素的数量
$node.length
$node.size()
// 获取当前元素在兄弟中的排行
$node.index()

最后编辑于：2017.12.06 06:54:42