进阶任务-15

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

为防止文档在完全加载之前运行Jquery代码,若在文档未完全加载前就运行函数,操作可能失败.必须在文档加载完后执行操作,可使用ready事件,作用相当于把js写到body末尾，还有一个简写版本的样子

$(function(){ 
  代码内容... 
})

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

前者不光会把指定节点中的文本内容拿出来，而且会把指定节点的html也都拿出来
后者的话主要是把指定节点的文本内容拿出来

$.extend 的作用和用法?

主要作用是拓展对象
用法

var obj1 = {a:1}
var obj2 ={b:2,c:3}
var obj3 = {}
$.extend(obj3,obj1,obj2)//{a: 1, b: 2, c: 3}  

jQuery 的链式调用是什么？

在一个对象上使用多个方法的写法被称为链式调用，因为大部分对象方法的最后是return this，所以有了链式调用这样的代码写法，简化了代码，使开发者更容易上手。

jQuery 中 data 函数的作用

主要作用：data方法允许在DOM元素上绑定任意类型的数据，避免了循环引用的内存泄漏风险。
写法

$('选中的元素节点').data('dk','ll')
$('选中的元素节点').data('dk')  //返回ll

给元素 $node 添加 class active，给元素 $noed 删除 class active

$('选中的元素节点').addClass('active')
$('选中的元素节点').removeClass('active')

展示元素$node, 隐藏元素$node

$('选中的元素节点').hide()
$('选中的元素节点').show()

获取元素$node 的 属性: id、src、title， 修改以上属性

$('img').attr('id') // 获取id值
$('img').attr('id','yezhu') //修改id值为野猪
$('img').attr('src') //获取src的内容
$('img').attr('src','yezhu') //修改src值为野猪
$('img').attr('title','yezhu') //修改title值为野猪

给$node 添加自定义属性data-src

$('选中的元素节点').data('src','value')

在$ct 内部最开头添加元素$node

$('.ct').prepend('.new-node')

在$ct 内部最末尾添加元素$node

$('.ct').append('.new-node')

删除$node

$('.ct').remove()

把$ct里内容清空

$('.ct').empty()

在$ct 里设置 html <div class="btn"></div>

$('.ct').html(' <div class="btn"></div> ')

获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

$('select-node').width();//不包括内边距宽度,仅包括内容
$('select-node').height();//不包括内边距高度,仅包括内容
$('select-node').innerWidth();//包括内容和内边距宽度
$('select-node').innerHeight();//包括内容和内边距高度
$('select-node').outerWidth();//包括内容,内边距,边框宽度
$('select-node').outerHeight();//包括内容,内边距,边框高度
$('select-node').outerHeight(true);//包括内容,内边距,边框,外边距高度
$('select-node').outerWidth(true);//包括内容,内边距,边框,外边距宽度

获取窗口滚动条垂直滚动距离

$(window).scrollTop()

获取$node 到根节点水平、垂直偏移距离

$(node).offset()

修改$node 的样式，字体颜色设置红色，字体大小设置14px

$(node).css({'color':'red','font-zize':'14px'})

遍历节点，把每个节点里面的文本内容重复一遍

$('.ct>ul>li').each(function(){
  var str  =  $(this).text()
  str = str+str
console.log(str)
})

从$ct 里查找 class 为 .item的子元素

$('.ct').find('.item')

获取$ct 里面的所有孩子

$('.ct').children()

对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子

$(node).parents('.ct').find('.panel')

获取选择元素的数量

$(node).length;

获取当前元素在兄弟中的排行

$(node).index()

7-1 ～7-5

代码展示

8 当点击加载更多会加载数据展示到页面

代码展示