|

常见的JavaScript库

| | —- | | jQuery | | Prototype | | YUI | | Dojo | | Ext JS | | 移动端的zepto | | 这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的，我们主要学习的是jQuery。
jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。
学习jQuery本质:就是学习调用这些函数(方法)。
jQuery出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。 | |

jQuery的优点

| | ●轻量级。核心文件才几十kb，不会影响页面加载速度 | | ●跨浏览器兼容。基本兼容了现在主流的浏览器 | | ●链式编程、隐式迭代 | | ●对事件、样式、动画支持，大大简化了DOM操作 | | ●支持插件扩展开发。有着丰富的第三方的插件，例如∶树形菜单、日期控件、轮播图等 | | ●免费、开源 |

jQuery的入口函数

$(function () { //内容 })

$(document.ready(function()) { //内容 })

jQuery对象和DOM对象

jQuery基础选择器

iQuery设置样式

$(‘div’).css(‘属性’，’值’)；

jQuery筛选选择器

jQuery筛选方法

tab栏切换

$("button").click(function () {
    var index = $(this).index();
    $("span").eq(index).show().siblings("span").hide()
    $(this).css("background", "red").siblings("button").css("background", "")
})

jQuery效果

| 显示隐藏 | show( )
hide( )
toggle( ) |

（[speen，[easing]，[fn] ]）
（[speen，[easing]，[fn] ]）
（[speen，[easing]，[fn] ]）

(1)参数可以省略，无动画直接显示
(2)speed :三种预定速度之一的字符串(“slow”, “normal”, or”fast”)或1000
(3)easing :(Optional)用来指定切换效果，默认是”swing”,可用参数”linear”
(4)s fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

fadeTo(1000, .5 ) | | —- | —- | —- | | 滑动 | slideDown( )
slideUp( )
slideToggle( ) | | | 淡入淡出 | fadeln( )
fadeOut( )
fadeToggle( )
fadeTo( ) | | | 自定义动画 | animate( ) | animate( params，[speed]，[easing]，[fn] )
params:想要更改的样式属性，以对象形式传递，必须写。
属性名可以不用带引号，复合形式需要驼峰命名法。 | | 上下滑动 | hover( fn(),fn() ) | 可以只写一个function( ) | | 停止排队 | stop( ) | 动画都需要加停止排队 |

//自定义动画
$('button').click(function () {
    $(".a1").animate({
        left: 400,
        top: 300,
        opacity: .1,
        borderRadius: 100
    }, 2000)
})

jQuery属性操作

//购物车加减商品
$(".right").click(function () {
    var n = $(this).siblings(".itxt").val();
    n++;
    $(this).siblings(".itxt").val(n);
});
$(".left").click(function () {
    var n = $(this).siblings(".itxt").val();
    if (n == 1) {
        return false;
    }
    n--;
    $(this).siblings(".itxt").val(n);
});

遍历元素

$(“div”).each(function(index，domEle) { xxx； })

1.each0方法遍历匹配的每一个元素。主要用DOM处理。each每一个
2.里面的回调函数有2个参数：index是每个元素的索引号; domEle是每个DOM元素对象，不是jquery对象
3.所以要想使用jquery方法，需要给这个dom元素转换为jquery对象$(domEle)

$(function () {
    var arr = ["red", "blue", "pink", "hotpink", "green"]
    $("span").each(function (i, domEle) {
        $(domEle).css("background-color", arr[i])
    })

$.each(object，function(index,element){ xxx; })

1.$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2.里面的函数有2个参数:index是每个元素的索引号; element遍历内容

$(function () {
    $.each({
        name: "andy",
        age: 18
    }, function (i, ele) {
        console.log(i);
        console.log(ele);
    })

jQuery尺寸、位置操作

//动画返回顶部
$(".back").click(function () {
    $("body,html").stop().animate({
        scrollTop: 0
    });
})

动画电梯导航栏

$(".fixedtool li").click(function () {
    var current = $(".floor .w").eq($(this).index()).offset().top;
    $("body,html").stop().animate({
        scrollTop: current
    });
})

滚到哪个模块哪个模块变色

// 滚到哪个模块哪个模块变色
$(".floor .w").each(function (i, ele) {
    if ($(document).scrollTop() >= $(ele).offset().top) {
        console.log(i);
        $("fixedtool li").eq(i).addClass("current").siblings().removeClass();
    }
})

jQuery事件

jQuery自动触发事件

jQuery对象拷贝

jQuery常用插件

jQuery ajax

$(document).ready(function() {
    var str=''
    $.ajax({
        url: "https://cnodejs.org/api/v1/topics",
        type: "GET",
        data: {
            page: 1,
            limit: 40
        },
        success: function(res) {
            console.log(res)
            for(var i=0; i<res.data.length; i++) {
                str+=`
                    <li>${res.data[i].title}</li>
                `
            }
            $("ul").html(str)
        },
        fail: function(err) {
            console.log(err)
        }
    })
})

// 按下回车读取本地存储数控

load();
// 按下回车读取本地存储数控
// 存储的数据格式 var todolist = [{ tltle: "xxx", done: false }]
$("#title").on("keydown", function (event) {
    if (event.keyCode === 13) {
        var local = getDate();
        console.log(local);
        local.push({ title: $(this).val(), done: false });
        saveData(local);
        load();
    }
});
//读取本地存储的数据
function getDate() {
    var data = localStorage.getItem("todolist");
    if (data != null) {
        return JSON.parse(data);
    } else {
        return [];
    }
}
// 保存本地存储数据
function saveDate(data) {
    localStorage.setItem("todolist", JSON.stringify(data));
}
// toDolist本地存储数据渲染到加载页面
//  渲染加载数据
function load() {
    // 读取本地存储的数据
    var data = getDate();
    // 遍历之间先清空ol里面的元素内容
    $("ol").empty();
    $.each(data, function (i, n) {
        $("ol").prepend("<li>+n.title+</li>")
    })
}