jQuery学习笔记

	作用	例子
$()	DOM对象转换jQuery对象 选择器	$('video')
	jQuery对象调用DOM的属性和方法	$('video')[0].play(); $(‘video’).get(0).play();
选择器
:first	筛选第一个冒号前的元素（li）	$("ul li:first").css("backgroundColor" , "pink");
:last	筛选最后一个冒号前的元素（li）	$("ul li:last").css("backgroundColor" , "black");
:eq(4)	根据索引号选取	$("ul li:eq(4)").css("backgroundColor" , "blue");
:odd	索引号奇	$("ol li:odd").css("backgroundColor" , "lightblue");
:even	索引号偶	$("ol li:even").css("backgroundColor" , "yellow");
筛选方法
.parent()	最近的父元素	$("div").parent()
.children()	所有亲孩子	$(".father").children() $(".father").children("p")
.find(target)	所有后代	$('.father').find('p')
.siblings()	除自身外所有兄弟元素	$(".item").siblings() $("#item").siblings("li").css("color" , "pink");
.nextAll()	选择之后的所有兄弟元素	$("#item").nextAll("li").css("color" , "pink");
.eq(n)	选第n个	$("ol li").eq(2).css("color" , "pink");
修改样式方法
.css(“height” , 300)	改数字可以不加单位和引号	$(“div”).css(“height” , 300);
.css({}）	属性可以不加引号，数字也可以不加引号单位，逗号隔开
.css(“属性”)	查	$("div").css("color");
操作类修改样式
.addClass()	增	$(this).addClass("current");
.removeClass()	删	$(this).removeClass("current");
.toggleClass()	增删交替切换	$(this).toggleClass("current")
函数方法
.hasClass(‘className’)	判断有无某类名	$("ol li").eq(1).hasClass('two')
事件函数
.mouseover（）	鼠标经过
.mouseout（）	鼠标离开
.click（）	鼠标点击
.hover(fn1[,fn2])	鼠标经过离开	只写一个函数就是经过离开都调用同一个函数，可搭配 .toogle使用
.stop()	停止前面动画（解决动画排队问题）
.scroll()	页面滚动事件	$(window).scroll(function(){}
动画函数
.show()	显示	$("div").show();
.hide()	隐藏	$("div").hide();
.toggle()	显示隐藏交替切换
.slideUp()	上拉	$("div").slideUp(200);//0.2秒
.slideDown()	下滑	$("div").slideDown(200);
.slideToggle()	上拉下滑切换	$("div").slideToggle(200);
.fadeIn()	淡入
.fadeOut()	淡出
.fadeToggle()	淡入淡出切换
.fadeTo(1000, .2)	时间（速度） 和 透明度参数必须写	$("div").fadeTo(1000, .2);
.animate({}[,]）	元素动画函数

animate

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

jQuery 属性操作

	jQuery 属性操作
prop()	获取或修改元素固有属性	$("a").prop("href") $("a").prop("href", "www.baidu.com")
attr()	获取或修改元素自定义属性，可以获得H5自定义属性data-attr	$("div").attr("index") $("div").attr("index", "2")
data()	存：将数据存放到元素的内存里而不影响DOM	$("div").data("uname", "andy")
data()	取	$("div").data("uname")
data()	获取H5自定义属性，但是不用加data- ,数字返回的是数字型	$("div").data("index")
change	事件：改变，如复选框的选中状态改变触发事件

jQuery内容文本值

html()	获取元素内部的html元素	$("div").html()
html()	修改元素内的html元素（覆盖）	$("div").html("<p>123</p>")
text()	获得元素内文本	$("div").text()
text()	修改元素内文本	$("p").text("456")
val()	获取修改表单的value值	$("input").val("123455") $("input").val()

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"));
        })