jQuery动画与ajax

jQuery函数方法

<div class="box">
  <ul>
    <li>1</li>
    <li>2</li>
    <li class="active">3</li>
    <li>4</li>
  </ul>
</div>
//元素遍历 .each()
$("ul>li").each(function(index,node){  //node是原生js对象,需转化
  var str = $(node).text()
  $(node).text(str + str)
})

//.map()
var arr = $(".box>ul>li").map(function(){
  return $(this).text()
})
console.log(arr)  // ["1", "2", "3", "4"]

//.index()
$(".active").index()  //2

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

• 当DOM准备就绪时，指定一个函数来执行。
• 大多数情况下，只要DOM结构已完全加载时，脚本就可以运行。传递处理函数给.ready()方法，能保证DOM准备好后就执行这个函数

如果执行的代码需要在元素被加载之后才能使用时，（例如，取得图片的大小需要在图片被加载完后才能知道），就需要将这样的代码放到 load 事件中。

$(document).ready(handler)
$(handler)

$(function(){
    console.log('ready');
});

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

• $node.html()，返回所选择元素内的html内容，包含html标签和文本内容
• $node.text()，返回所选择元素内的文本内容，不包含html标签，只包含文本内容

$.extend 的作用和用法?

• 当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）
• 如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。

var obj1 = {a:1}
var obj2 = {b:2,c:3}
var obj3 = {b:3,d:5} 
var obj4 = {}

$.extend(obj1,obj2)  //obj1 == {a: 1, b: 2, c: 3}
$.extend(obj1,obj2,obj3)  //obj1 == {a: 1, b: 3, c: 3, d: 5}
$.extend(obj4,obj1,obj2,obj3)  //obj4 == {a: 1, b: 3, c: 3, d: 5}
//写法同上
var obj5 = $.extend({},obj1,obj2,obj3)  //obj5 == {a: 1, b: 3, c: 3, d: 5}

jQuery 的链式调用是什么？

• 可以连续的使用 jQuery 方法的过程叫做 链式调用。
• jQuery是通过在调用方法后返回这个调用对象来实现链式调用的。

Query 中 data 函数的作用

• .data()
  • 在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data()方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险。

.data( key, value )在匹配元素上存储任意相关数据.

• key:一个字符串，用户存储数据的名称。
• value:新的数据值；它可以是任意的Javascript数据类型，包括Array 或者 Object。

我们可以在一个元素上设置不同的值，之后获取这些值：
$("body").data("foo", 52);
$("body").data("bar", { myType: "test", count: 40 });
$("body").data({ baz: [ 1, 2, 3 ] });
 
$("body").data("foo"); // 52
$("body").data(); // { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }

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

• 给元素$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','value')  //获取并赋值
$node.attr('src','value')
$node.attr('title','value')

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

$node.attr("data-src","value")

• 在$ct内部最开头添加元素$node,在$ct 内部最末尾添加元素$node

//结尾添加
$ct.append($node) 
$node.appendTo($ct)  
//开头添加
$ct.prepend($node)
$node.prependTo($ct)

• 删除$node 把$ct里内容清空

// 事件之类的删除后不保存
$node.remove()
// 事件之类的删除后保存
$node.detach()

$ct.empty()  //清空

• 在$ct 里设置<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);//包括内容,内边距,边框,外边距宽度

宽高

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

$(window).scrollTop()

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

$node.offset()  //{top: 16, left: 48}

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

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

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

<div class="box">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
$("ul>li").each(function(index,node){  //node是原生js对象,需转化
  var str = $(node).text()
  $(node).text(str + str)
})

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

$ct.find('.item')

• 获取$ct里面的所有孩子

$ct.children()

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

//找父亲
$node.parents('.ct')
//从父亲找儿子
$node.parents('.ct').find('.panel')

• 获取选择元素的数量

$node.length

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

$node.index()

用jQuery实现以下操作

• 当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色

<button id="btn" type="button">变色</button>

$("#btn").on("click",function(){
  $(this).css({"background-color":"red"})
//设置定时
  setTimeout(function(){
    $("#btn").css({"background-color":"blue"})
  },1000)
})

• 当窗口滚动时，获取垂直滚动距离

$(window).on("scroll",function(){
    $("node").text($(window).scrollTop()+"px");
});

• 当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色

<div class="bg"></div>

$(".bg").on("mouseenter",function(){
  $(this).css({"background-color":"red"})
})
$(".bg").on("mouseleave",function(){
  $(this).css({"background-color":"white"})
})

• 当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字

<input id="ipt" type="text">

$("#ipt").on("focus",function(){
  $(this).css({"outlineColor":"blue"})
})
//键盘事件
$("#ipt").on("keydown",function(){
  $(this).val($(this).val().toUpperCase())
})
$("#ipt").on("blur",function(){
  $(this).css({"outlineColor":"none"})
  console.log($(this).val())
})

• 当选择 select 后，获取用户选择的内容

<select name="" class="sports">
  <option value="篮球">篮球</option>
  <option value="排球">排球</option>
  <option value="足球">足球</option>
  <option value="乒乓球">乒乓球</option>
</select>
<p>用户选择的内容是:<span></span></p>

$(".sports").on("change",function(){
  $("p>span").text($("option:selected").val())
})

用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面效果预览

• 启用server-mock
• 需开启 mock start
• 代码地址
  • 代码

效果预览