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
代码地址
- 代码

效果预览

jQuery动画与ajax

jQuery函数方法

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

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

$.extend 的作用和用法?

jQuery 的链式调用是什么？

Query 中 data 函数的作用

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

用jQuery实现以下操作

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

推荐阅读更多精彩内容