进阶15 jQuery与ajax

题目一：jQuery 中， $(document).ready()是什么意思？

$(document).ready()是指在document加载完成之后再执行相应的操作
在html中，当javaScript置于body内容之上时，使用$(document).ready()可以防止页面加载完成之前执行javaScript

题目2： $node.html()和$node.text()的区别?

$node.html()是获取/更改元素内的html内容
$node.text()是获取/更改元素内的文本

题目3： $.extend 的作用和用法?

jQuery.extend（target [，object1] [，objectN]）

jQuery.extend()是将一个或者多个对象的内容合并到第一个对象中,若有重复的内容则会被覆盖

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

题目4： jQuery 的链式调用是什么?

jQuery所有对象的方法返回的都是对象本身,所以在方法A后可以继续调用方法B等同于jQuery直接调用方法B。
比如：$('ipt').focus(fn()).blur(fn())

题目5： jQuery 中 data 函数的作用

.data(key,value)
以指定的键名key存取数据。如果指定了value参数，则表示以键名key存放值为value的数据；如果没有指定value参数，则表示读取之前以键名key存放的数据；如果没有指定任何参数，则以对象形式返回之前存储的所有数据
.data(obj)
以对象形式同时传入任意多个key-value形式的数据，对象的每个属性就是键名key，属性值就是value。
data()函数的所有"存储数据"操作针对当前jQuery对象所匹配的每一个元素；所有"读取数据"操作只针对第一个匹配的元素

题目6

// 给元素 $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')
    $node.atte('id','jrg')
    $node.attr('src')
    $node.attr('src','http://abc.img')
    $node.attr('title')
    $node.attr('title','jrg')
// 给$node 添加自定义属性data-src
    $node.attr('data-src','http://abc.img')
// 在$ct 内部最开头添加元素$node
    $node.prepend($ct)  
// 在$ct 内部最末尾添加元素$node
    $node.append($ct)
// 删除$node
    $node.remove()
// 把$ct里内容清空
    $ct.empty()
// 在$ct 里设置 html <div class="btn"></div>
    $ct.html('<div class="btn"></div>')
// 获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
    $node.width()     
    $node.height()              //不包括内边距
    $node.innerWidth()
    $node.innerHeight()         //包括内边距
    $node.outerWidth()
    $node.outerHeight()         //包括边框
    $node.outerWidth(true)
    $node.outerHeight(true)     //包括外边距
// 获取窗口滚动条垂直滚动距离
    $node.scrollTop()
// 获取$node 到根节点水平、垂直偏移距离
    $node.offset()
// 修改$node 的样式，字体颜色设置红色，字体大小设置14px
    $node.css('color','red').css('font-size','14px')//or
    $node.css({
        'color' : 'red',
        'font-size' : '14px'
    })

// 遍历节点，把每个节点里面的文本内容重复一遍
    $node.each(function(){ 
     const str = $(this).text();
     $(this).text(str + str); 
});
// 从$ct 里查找 class 为 .item的子元素
    $ct.find('.item')   
// 获取$ct 里面的所有孩子
    $ct.children()
// 对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子
    $node.parent('.ct').children('.panel')
// 获取选择元素的数量
    $node.length
// 获取当前元素在兄弟中的排行
    $node.index()

题目7demo

题目8

最后编辑于：2017.11.19 15:49:01