[JavaScript知识库]jQuery学习笔记

animate

$("div").animate({
                    left: 500,
                    top: 200,
                    backgroundColor: "red",
                    opacity: .5
                } , 500)

jQuery 属性操作

jQuery内容文本值

jQuery遍历对象

$(function () {
            var col = ["red", "blue", "black"];
            var sum = 0;
            // 1、 .each(function(index,domEle))   相当于遍历每个对象的同时记录索引号
            $("div").each(function (i, div) {
                $(div).css("color", col[i]);
                sum += parseInt($(div).text());     //parseInt
            })
            console.log(sum);
            //2、  遍历 数组 或 对象等 用 $.each(要遍历的元素，回调函数function(i , val){})
            $.each(col, function (i, color) {
                console.log(i);
                console.log(color);
            })
            //3、  遍历对象
            $.each({
                name: "andy",
                age: 18
            }, function (i, val) {
                console.log(i);
                console.log(val);
            })
        })

jQuery创建添加删除元素

$(function () {
            // 1.创建元素
            var i = $("<div>我是div</div>");        //只能被添加一次
            // 2. 添加元素
            // 内部
            // 前面 prepend
            $("p").prepend(i);
            // 后面 append
            $("p").append(i);

            // 外部 
            // 前面 before
            var j = $("<a>hhhhh</a>")
            $("p").before(j);
            // 后面 after
            $("p").after(j);

            // 3.删除 remove empty .html("")
            // 
            // $("ul").remove();       //自杀
            $("ul").empty();            //删除所有子节点
        })

jQuery尺寸方法

$(function(){
            //1、 width() hight() 
            console.log($("div").width());
            // 修改
            $("div").width(300);
            // 2、 innerWidth innerHeight  包括padding
            console.log($("div").innerWidth());
            // 3、 outerWidth outerHeight 包括padding border
            console.log($("div").outerWidth());
            // 4、 outerWidth(true)    outerHeight(true) 包括padding border margin
            console.log($("div").outerWidth(true));
        })

jQuery位置方法

$(function () {
            // 1. offset()获取设置元素相对文档的偏移，返回一个对象
            console.log($(".son").offset()); 
    		console.log($(".son").offset().top);
    		console.log($(".son").offset().left);
            // 设置 传入对象
            $(".son").offset({
                top: 150,
                left: 150
            })

            // 2. position() 获取元素距离带有定位的父级的位置 ， 没有则以文档为准
            console.log($(".son").position());
        })

jQuery返回顶部案例

$(function(){
            // scrollTop
            var containerTop = $(".container").offset().top;
            $(window).scroll(function(){
                if ($(document).scrollTop() >= containerTop){
                    $(".back").fadeIn();
                }else{
                    $(".back").fadeOut();
                }
            })
            // 返回顶部
            $(".back").click(function(){
                // $(document).scrollTop(0);
                // 加入动画，注意，animate()是元素动画函数，只有元素才能调用，docunment不可以
                $("body,html").stop().animate({
                    scrollTop: 0
                })
            })
        })

on注册事件

注册一个或多个事件

$(function(){
            // on 
            // 1.
            $("div").on({
                click: function(){
                    $(this).css("background" , "red");
                },
                mouseenter: function(){
                    $(this).css("background" , "yellow");
                },
                mouseleave: function(){
                    $(this).css("background" , "#ccc");
                }

            })
            // 2. 类似hover，可以与toggle搭配使用
            $("p").on("mouseenter mouseleave" , function(){
                $(this).toggleClass("current");
            })
        })

绑定多个事件

$("ul").on("click", "li", function () {
                // 优势2. on可以实现事件委托
                // 事件绑定给ul（委派），点击小li触发事件
                alert("11");
            })

给未来动态创建的元素绑定事件

$("ol").on("click", "li", function () {
                alert(22);
            })
            var li = $("<li>我是后来创建的ol里的第一个小li</li>");
            $("ol").append(li);

off解绑事件

$(function () {
            // 绑定多事件
            $("div").on({
                click: function () {
                    console.log("click");
                },
                mouseenter: function () {
                    console.log("enter");
                }
            })
            // 事件委派
            $("ul").on("click", "li", function () {
                console.log("li被点击了");
            })
            // off()
            // 1.解绑所有事件
            // $("div").off();
            // 2.解绑指定事件
            $("div").off("click");
            // 3.解绑事件委派
            $("ul").off("click" , "li");
        })

one绑定只能触发一次的事件

// one 绑定只能触发一次的事件
            $("p").one("click", function () {
                console.log("我只理你这一次哦~");
            })

自动触发事件

<div>123</div>
    <input type="text">
    <script>
        $(function(){
            $("div").on("click" , function(){
                alert(1);
            })
            // 自动触发事件
            // 1. 元素.事件
            $("div").click();
            // 2. 元素.trigger("click") 会触发元素的默认行为，如表单获得焦点光标闪烁
            $("input").on("focus" , function(){
                $(this).val("trigger闪烁");
            })
            // $("input").trigger("focus");
            // 3.triggerHandler 不触发默认行为
            $("input").triggerHandler("focus");
        })
        
    </script>

jQuery事件对象 function(e)

$(function () {
            $("div").on("click", function (e) {
                // e就是事件对象
                console.log("div被点击了");
                // 如可以阻止事件冒泡
                e.stopPropagation();
            })
            $(document).on("click", function () {
                console.log("document被点击了");
            })

        })

jQuery对象拷贝$.extend()

$(function () {
            var obj = {
                msg: {
                    sex: "男"
                }
            };
            var obj2 = {
                msg: {
                    sex: "男"
                }
            };
            var student = {
                id: 112,
                name: 'andy',
                msg: { age: 1, score: 98 }
            }
            // 1. $.extend([deep] , target , obj1 , [objN])
            $.extend(obj, student);    //默认浅拷贝，student里的复杂数据类型msg被拷贝的只是地址
            console.log(student);
            // 改变一下student里的msg , obj里的也改变
            student.msg["age"] = 18;
            console.log(student.msg);
            console.log(obj.msg);
            // 改变简单数据类型则不变
            student.id = 1;
            console.log(student.id);
            console.log(obj.id);    //不变
            // 浅拷贝简单数据类型会覆盖合并，复杂数据类型只覆盖不合并

            // 2.深拷贝 $extend(true , targetObj , obj) 完全复制一份新数据过去，有不冲突属性会合并
            $.extend(true, obj2, student);
            console.log("-------------------------");
            console.log(student);
            console.log(obj2);
        })

jQuery多库共存

$(function () {
            // 1. 使用jQuery
            console.log(jQuery("div"));
            // 2. 自定义名字
            var jq = jQuery.noConflict();
            console.log(jq("span"));
        })