【笔记】jQuery学习

最新推荐文章于 2024-01-25 16:27:09 发布

不二D荧林仕

最新推荐文章于 2024-01-25 16:27:09 发布

阅读量842

点赞数

分类专栏：前端笔记文章标签： js css html javascript jquery

本文链接：https://blog.csdn.net/weixin_47211461/article/details/109090650

版权

笔记同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

jQuery简介
- 版本分类
- 关于压缩版和未压缩版
jQuery的入口函数
- jQuery和JS入口函数的区别
- jQuery入口函数的其他写法
jQuery冲突问题
jQuery核心函数
jQuery选择器
jQuery对象
- 什么是jQuery对象
- 什么是伪数组
静态方法和实例方法
- 静态方法each方法
- 静态方法map方法
- 其它静态方法
- 静态方法holdready方法
属性和属性节点
- 什么是属性?
- 如何操作属性?
- 什么是属性节点?
- 如何操作属性节点?
- 属性和属性节点有什么区别?
jQuery的attr方法
- attr(name|pro|key,val|fn)
- removeAttr(name)
jQuery的prop方法
- prop方法
- removeProp方法
jQuery操作类相关的方法
- addClass(class|fn)
- removeClass([class|fn])
- toggleClass(class|fn[,sw])
jQuery文本值相关方法
jQuery操作CSS样式方法
jQuery位置和尺寸操作的方法
jQuery的scollTop方法
jQuery事件
- jQuery事件绑定
- jQuery事件移除
- jQuery事件冒泡和默认行为
- jQuery事件自动触发
- jQuery自定义事件
- jQuery事件命名空间
- jQuery事件委托
- - 什么是事件委托?
- jQuery移入移出事件
动画
- index()方法
- eq()方法 / get()方法
- siblings()方法
- jQuery显示和隐藏动画
- 展开和收起动画
- .children()方法
- stop()方法
- jQuery淡入淡出动画
- 自定义动画
- stop和delay方法
- - delay方法
  - stop方法
- 图标特效
节点方法
- jQuery添加节点
- - 内部插入
  - 外部插入
- jQuery删除节点
- jQuery替换节点
- jQuery复制节点
案例知识点
- 新浪微博
- 狂拍灰太狼
- - Math中的一些方法
- CSS设置监听事件

jQuery简介

jQuery是一款优秀的JavaScript库，从命名可以看出jQuery最主要的用途是用来做查询(jQuery=js+Query)，正如jQuery官方Logo副标题所说(write less,do more)使用jQuery能让我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单。
原生JS写法和jQuery写法比较

版本分类

x版本：能够兼容IE678浏览器
2.x版本：不能兼容IE678浏览器
3.x版本：不能兼容IE678浏览器，更加的精简。提供不包含Ajax/动画API版本。（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）

关于压缩版和未压缩版

jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。
jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

jQuery的入口函数

jQuery和JS入口函数的区别

原生JS和jQuery入口函数的加载模式不同

原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行
jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行

覆盖问题

原生的JS如果编写了多个入口函数，后面编写的会覆盖前面编写的
jQuery中编写多个入口函数，后面的不会覆盖前面的

jQuery入口函数的其他写法

覆盖问题

// 1.第一种写法
        $(document).ready(function () {
            // alert("hello lnj");
        });

        // 2.第二种写法
        jQuery(document).ready(function () {
            // alert("hello lnj");
        });

        // 3.第三种写法(推荐)
        $(function () {
            // alert("hello lnj");
        });

        // 4.第四种写法
        jQuery(function () {
            alert("hello lnj");
        });

jQuery冲突问题

描述：如果使用多个框架中都有对“$”符号的使用，由于JavaScript的覆盖原因，会导致冲突，而使得某一个“$”失效。

<script src="js/jquery-1.12.4.js"></script>
<script src="js/test.js"></script>
<script>
    // 1.释放$的使用权
    // 注意点: 释放操作必须在编写其它jQuery代码之前编写
    //         释放之后就不能再使用$,改为使用jQuery
    // jQuery原理.noConflict();
    // 2.自定义一个访问符号
    var nj = jQuery.noConflict();
    nj(function () {
        alert("hello lnj");
    });
</script>

jQuery核心函数

$();/jQuery原理();就代表调用jQuery的核心函数

// 1.接收一个函数
        $(function () {
            alert("hello lnj");
            // 2.接收一个字符串
            // 2.1接收一个字符串选择器
            // 返回一个jQuery对象, 对象中保存了找到的DOM元素
            var $box1 = $(".box1");
            var $box2 = $("#box2");
            console.log($box1);
            console.log($box2);
            // 2.2接收一个字符串代码片段
            // 返回一个jQuery对象, 对象中保存了创建的DOM元素
            var $p = $("<p>我是段落</p>");
            console.log($p);
            $box1.append($p);
            // 3.接收一个DOM元素
            // 会被包装成一个jQuery对象返回给我们
            var span = document.getElementsByTagName("span")[0];
            console.log(span);
            var $span = $(span);
            console.log($span);
        });

jQuery选择器

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。
注意：jQuery选择器返回的是jQuery对象。
jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多扩展性的选择器。
【查看jQuery文档】
jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。
所以我们平时真正能用到的只是少数的最常用的选择器。

基本选择器：

名称	用法	描述
ID选择器	`$(“#id”);`	获取指定ID的元素
类选择器	`$(“.class”);`	获取同一类class的元素
标签选择器	`$(“div”);`	获取同一类标签的所有元素
并集选择器	`$(“div,p,li”);`	使用逗号分隔，只要符合条件之一就可
交集选择器	`$(“div.redClass”);`	获取class为redClass的div元素

总结：跟css的选择器用法一模一样。

层级选择器：

名称	用法	描述
子代选择器	`$(“ul>li”);`	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	`$(“ul li”);`	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

总结：跟css的选择器用法一模一样。

过滤选择器：

名称	用法	描述
:eq（index）	`$(“li:eq(2)”).css(“color”, ”red”);`	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	`$(“li:odd”).css(“color”, ”red”);`	获取到的li元素中，选择索引号为奇数的元素
:even	`$(“li:even”).css(“color”, ”red”);`	获取到的li元素中，选择索引号为偶数的元素

总结：这类选择器都带冒号

筛选选择器（方法）：

名称	用法	描述
children(selector)	`$(“ul”).children(“li”)`	相当于$(“ul>li”)，子类选择器
find(selector)	`$(“ul”).find(“li”);`	相当于$(“ul li”),后代选择器
siblings(selector)	`$(“#first”).siblings(“li”);`	查找兄弟节点，不包括自己本身
parent()	`$(“#first”).parent();`	查找父亲
eq(index)	`$(“li”).eq(2);`	相当于$(“li:eq(2)”),index从0开始
next()	`$(“li”).next()`	找下一个兄弟
prev()	`$(“li”).prev()`	找上一次兄弟

总结：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

内容选择器：

名称	用法	描述
:empty	`var $div = $("div:empty");`	找到既没有文本内容也没有子元素的指定元素
:parent	`var $div = $("div:parent");`	找到有文本内容或有子元素的指定元素
:contains(text)	`var $div = $("div:contains('我是div')");`	找到包含指定文本内容的指定元素
:has(selector)	`var $div = $("div:has('span')");`	找到包含指定子元素的指定元素

   <script>
        $(function () {
            // 编写jQuery相关代码
            // :empty 作用:找到既没有文本内容也没有子元素的指定元素
            var $div = $("div:empty");
            console.log($div);

            // :parent 作用: 找到有文本内容或有子元素的指定元素
            var $div = $("div:parent");
            console.log($div);

            // :contains(text) 作用: 找到包含指定文本内容的指定元素
            var $div = $("div:contains('我是div')");
            console.log($div);

            // :has(selector) 作用: 找到包含指定子元素的指定元素
            var $div = $("div:has('span')");
            console.log($div);
        });
    </script>
</head>
<body>

<div></div>
<div>我是div</div>
<div>他们我是div123</div>
<div><span></span></div>
<div><p></p></div>
</body>

jQuery对象

什么是jQuery对象

jQuery对象是一个伪数组

什么是伪数组

有0到length-1的属性, 并且有length属性

var $div = $("div");
console.log($div);

var arr = [1, 3, 5];
console.log(arr);

静态方法和实例方法

// 1.定义一个类
function AClass() {
}
// 2.给这个类添加一个静态方法
// 直接添加给类的就是静态方法
AClass.staticMethod = function () {
    alert("staticMethod");
}
// 静态方法通过类名调用
AClass.staticMethod();

// 3.给这个类添加一个实例方法
AClass.prototype.instanceMethod = function () {
    alert("instanceMethod");
}
// 实例方法通过类的实例调用
// 创建一个实例(创建一个对象)
var a = new AClass();
// 通过实例调用实例方法
a.instanceMethod();

静态方法each方法

        var arr = [1, 3, 5, 7, 9];
        var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
        /*
        第一个参数: 遍历到的元素    value
        第二个参数: 当前遍历到的索引    index
        注意点:
        原生的forEach方法只能遍历数组, 不能遍历伪数组
        */
        //遍历数组：
        arr.forEach(function (value, index) {
            console.log(index, value);
        });
        //遍历伪数组：
        obj.forEach(function (value, index) {
            console.log(index, value);
        });

        // 1.利用jQuery的each静态方法遍历数组
        /*
        第一个参数: 当前遍历到的索引    index
        第二个参数: 遍历到的元素    value
        注意点:
        jQuery的each方法是可以遍历伪数组的
        */
        //遍历数组：
        $.each(arr, function (index, value) {
            console.log(index, value);
        });
        //遍历伪数组：
        $.each(obj, function (index, value) {
            console.log(index, value);
        });

静态方法map方法

        var arr = [1, 3, 5, 7, 9];
        var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
        // 1.利用原生JS的map方法遍历
        /*
        第一个参数: 当前遍历到的元素
        第二个参数: 当前遍历到的索引
        第三个参数: 当前被遍历的数组
        注意点:
        和原生的forEach一样,不能遍历的伪数组
        */
        arr.map(function (value, index, array) {
            console.log(index, value, array);
        });
        obj.map(function (value, index, array) {
            console.log(index, value, array);
        });
        /*
        第一个参数: 要遍历的数组
        第二个参数: 每遍历一个元素之后执行的回调函数
        回调函数的参数:
        第一个参数: 遍历到的元素
        第二个参数: 遍历到的索引
        注意点:
        和jQuery中的each静态方法一样, map静态方法也可以遍历伪数组
        */
        $.map(arr, function (value, index) {
            console.log(index, value);
        });

        var res = $.map(obj, function (value, index) {
            console.log(index, value);
            return value + index;
        });

        var res2 = $.each(obj, function (index, value) {
            console.log(index, value);
            return value + index;
        });
        console.log(res);
        console.log(res2);

jQuery中的each静态方法和map静态方法的区别：

each静态方法默认的返回值就是, 遍历谁就返回谁
map静态方法默认的返回值是一个空数组

each静态方法不支持在回调函数中对遍历的数组进行处理
map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回

其它静态方法

$.trim();

作用: 去除字符串两端的空格
参数: 需要去除空格的字符串
返回值: 去除空格之后的字符串

        var str = "    lnj    ";
        var res = $.trim(str);
        console.log("---"+str+"---");
        console.log("---"+res+"---");

以下函数所涉及的公共代码：

        // 真数组
        var arr = [1, 3, 5, 7, 9];
        // 伪数组
        var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
        // 对象
        var obj = {"name":"lnj", age:"33"};
        // 函数
        var fn = function(){};
        // window对象
        var w = window;

$.isWindow();

作用: 判断传入的对象是否是window对象
返回值: true/false

        var res = $.isWindow(w);
        console.log(res);

$.isArray();

作用: 判断传入的对象是否是真数组
返回值: true/false

        var res = $.isArray(w);
        console.log(res);

$.isFunction();

作用: 判断传入的对象是否是一个函数
返回值: true/false
注意点:
jQuery框架本质上是一个函数

        (function( window, undefined ) {
         })( window );

        var res = $.isFunction(jQuery);
        console.log(res);

静态方法holdready方法

    <script>
        // $.holdReady(true); 作用: 暂停ready执行
        $.holdReady(true);
        $(document).ready(function () {
            alert("ready");
        });
    </script>
</head>
<body>
<button>回复ready事件</button>
<script>
    var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
	//开启ready执行
        $.holdReady(false);
    }
</script>
</body>

属性和属性节点

什么是属性?

对象身上保存的变量就是属性

如何操作属性?

对象.属性名称 = 值;
对象.属性名称;
对象["属性名称"] = 值;
对象["属性名称"];

什么是属性节点?

<span name = "it666"></span>

在编写HTML代码时,在HTML标签中添加的属性就是属性节点
在浏览器中找到span这个DOM元素之后, 展开看到的都是属性
在attributes属性中保存的所有内容都是属性节点

如何操作属性节点?

DOM元素.setAttribute("属性名称", "值");
DOM元素.getAttribute("属性名称");

属性和属性节点有什么区别?

任何对象都有属性, 但是只有DOM对象才有属性节点

            /*
            function Person() {

            }
            var p = new Person();
            // p.name = "lnj";
            p["name"] = "zs";
            // console.log(p.name);
            console.log(p["name"]);
            */

            var span = document.getElementsByTagName("span")[0];
            span.setAttribute("name", "lnj");
            console.log(span.getAttribute("name"));
        });

jQuery的attr方法

attr(name|pro|key,val|fn)

作用: 获取或者设置属性节点的值
可以传递一个参数, 也可以传递两个参数

如果传递一个参数, 代表获取属性节点的值
如果传递两个参数, 代表设置属性节点的值

注意点:
如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
如果是设置:找到多少个元素就会设置多少个元素
如果是设置:如果设置的属性节点不存在, 那么系统会自动新增

removeAttr(name)

作用：删除属性节点
注意点:
会删除所有找到元素指定的属性节点

            // console.log($("span").attr("class"));
            $("span").attr("class", "box");
            // $("span").attr("abc", "123");

            // $("span").removeAttr("class name");
        });
    </script>
</head>
<body>
<span class="span1" name="it666"></span>
<span class="span2" name="lnj"></span>
</body>

jQuery的prop方法

prop方法

特点和attr方法一致

    $("span").eq(0).prop("demo", "it666");
    $("span").eq(1).prop("demo", "lnj");
    console.log($("span").prop("demo"));

removeProp方法

特点和removeAttr方法一致

$("span").removeProp("demo");

注意点:
prop方法不仅能够操作属性, 他还能操作属性节点
官方推荐在操作属性节点时，具有 true 和 false 两个属性的属性节点，如 checked, selected或者 disabled 使用prop()，其他的使用 attr()

     // console.log($("span").prop("class"));
     // $("span").prop("class", "box");

     console.log($("input").prop("checked")); // true / false
     console.log($("input").attr("checked")); // checked / undefined

    });
    </script>
</head>
<body>
<span class="span1" name="it666"></span>
<span class="span2" name="lnj"></span>
<input type="checkbox">

jQuery操作类相关的方法

addClass(class|fn)

作用: 添加一个类
如果要添加多个, 多个类名之间用空格隔开即可

    var btns = document.getElementsByTagName("button");
    btns[0].onclick = function () {
        // $("div").addClass("class1");
        $("div").addClass("class1 class2");
    }

removeClass([class|fn])

作用: 删除一个类
如果想删除多个, 多个类名之间用空格隔开即可

    btns[1].onclick = function () {
        // $("div").removeClass("class2");
        $("div").removeClass("class2 class1");
    }

toggleClass(class|fn[,sw])

作用: 切换类
有就删除, 没有就添加

    btns[2].onclick = function () {
        $("div").toggleClass("class2 class1");
    }
        });

jQuery文本值相关方法

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            1.html([val|fn])
            和原生JS中的innerHTML一模一样
            2.text([val|fn])
            和原生JS中的innerText一模一样
            3.val([val|fn|arr])
            */
            var btns = document.getElementsByTagName("button");
            btns[0].onclick = function () {
                $("div").html("<p>我是段落<span>我是span</span></p>");
            }
            btns[1].onclick = function () {
                console.log($("div").html());
            }
            btns[2].onclick = function () {
                $("div").text("<p>我是段落<span>我是span</span></p>");
            }
            btns[3].onclick = function () {
                console.log($("div").text());
            }
            btns[4].onclick = function () {
                $("input").val("请输入内容");
            }
            btns[5].onclick = function () {
                console.log($("input").val());;
            }
        });
    </script>
</head>
<body>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<div></div>
<input type="text">
</body>

jQuery操作CSS样式方法

$(function () {
    // 编写jQuery相关代码
    // 1.逐个设置
    $("div").css("width", "100px");
    $("div").css("height", "100px");
    $("div").css("background", "red");

    // 2.链式设置
    // 注意点: 链式操作如果大于3步, 建议分开
    $("div").css("width", "100px").css("height", "100px").css("background", "blue");

    // 3.批量设置
    $("div").css({
        width: "100px",
        height: "100px",
        background: "red"
    });

    // 4.获取CSS样式值
    console.log($("div").css("background"));;
});

jQuery位置和尺寸操作的方法

    $(function () {
        // 编写jQuery相关代码
        var btns = document.getElementsByTagName("button");
        // 监听获取
        btns[0].onclick = function () {
            // 获取元素的宽度
            // console.log($(".father").width());
            // offset([coordinates])
            // 作用: 获取元素距离窗口的偏移位
            // console.log($(".son").offset().left);
            // position()
            // 作用: 获取元素距离定位元素的偏移位
            console.log($(".son").position().left);
        }
        // 监听设置
        btns[1].onclick = function () {
            // 设置元素的宽度
            // $(".father").width("500px")

            // $(".son").offset({
            //     left: 10
            // });

            // 注意点: position方法只能获取不能设置
            // $(".son").position({
            //     left: 10
            // });

            $(".son").css({
                left: "10px"
            });
        }
    });

jQuery的scollTop方法

      btns[0].onclick = function () {
          // 获取滚动的偏移位
          console.log($(".scroll").scrollTop());
          // 获取网页滚动的偏移位
          // 注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法
          console.log($("body").scrollTop()+$("html").scrollTop());
      }

    btns[1].onclick = function () {
        // 设置滚动的偏移位
        $(".scroll").scrollTop(300);
        // 设置网页滚动偏移位
        // 注意点: 为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法
        $("html,body").scrollTop(300);
    }

jQuery事件

jQuery事件绑定

jQuery中有两种绑定事件方式：

eventName(fn);
编码效率略高/ 部分事件jQuery没有实现,所以不能添加
on(eventName, fn);
编码效率略低/ 所有js事件都可以添加

注意点:
可以添加多个相同或者不同类型的事件，不会覆盖

    $("button").click(function () {
        alert("hello lnj");
    });
    $("button").click(function () {
        alert("hello 123");
    });
    $("button").mouseleave(function () {
        alert("hello mouseleave");
    });
    $("button").mouseenter(function () {
        alert("hello mouseenter");
    });
    
    $("button").on("click", function () {
        alert("hello click1");
    });

jQuery事件移除

   <script>
        $(function () {
            function test1() {
                alert("hello lnj");
            }
            function test2() {
                alert("hello 123");
            }
            // 编写jQuery相关代码
            $("button").click(test1);
            $("button").click(test2);
            $("button").mouseleave(function () {
                alert("hello mouseleave");
            });
            $("button").mouseenter(function () {
                alert("hello mouseenter");
            });

            // off方法如果不传递参数, 会移除所有的事件
            // $("button").off();
            // off方法如果传递一个参数, 会移除所有指定类型的事件
            // $("button").off("click");
            // off方法如果传递两个参数, 会移除所有指定类型的指定事件
            $("button").off("click", test1);
        });
    </script>

jQuery事件冒泡和默认行为

什么是事件冒泡?

子元素的事件传递给了父元素，使得父元素的事件也被触发。

如何阻止事件冒泡

$(".son").click(function (event) {
    alert("son");
    // return false;            //阻止冒泡第一种方法
    event.stopPropagation();    //阻止冒泡第二种方法
});
$(".father").click(function () {
    alert("father");
});

阻止事件冒泡必须在子元素中设置

什么是默认行为?

在元素中包含了组件原来的一些行为，例如包含超链接的跳转

如何阻止默认行为

            $("a").click(function (event) {
                alert("弹出注册框");
                // return false;
                event.preventDefault();
            });
        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<a href="http://www.baidu.com">注册</a>
<form action="http://www.taobao.com">
    <input type="text">
    <input type="submit">
</form>
</body>

与事件冒泡类似，有两种方法。

jQuery事件自动触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>26-jQuery事件冒泡和默行为</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 编写jQuery相关代码
            $(".son").click(function (event) {
                alert("son");
            });

            $(".father").click(function () {
                alert("father");
            });
            // $(".father").trigger("click");
            // $(".father").triggerHandler("click");

            /*
            trigger: 如果利用trigger自动触发事件,会触发事件冒泡
            triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡
            */
            // $(".son").trigger("click");
            // $(".son").triggerHandler("click");

            $("input[type='submit']").click(function () {
                alert("submit");
            });

            /*
            trigger: 如果利用trigger自动触发事件,会触发默认行为
            triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发默认行为
            */
            // $("input[type='submit']").trigger("click");
            // $("input[type='submit']").triggerHandler("click");

            $("span").click(function () {
                alert("a");
            });
            // $("a").triggerHandler("click");
            $("span").trigger("click");
        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>
<form action="http://www.taobao.com">
    <input type="text">
    <input type="submit">
</form>
</body>
</html>

jQuery自定义事件

想要自定义事件, 必须满足两个条件：

事件必须是通过on绑定的
事件必须通过trigger来触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>26-jQuery事件冒泡和默行为</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 编写jQuery相关代码
            // $(".son").myClick(function (event) {
            //     alert("son");
            // });
            $(".son").on("myClick", function () {
                alert("son");
            });
            $(".son").triggerHandler("myClick");
        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>
<form action="http://www.taobao.com">
    <input type="text">
    <input type="submit">
</form>
</body>
</html>

jQuery事件命名空间

想要事件的命名空间有效,必须满足两个条件：

事件是通过on来绑定的
通过trigger触发事件

	<script>
            $(".son").on("click.zs", function () {
                alert("click1");
            });
            $(".son").on("click.ls", function () {
                alert("click2");
            });
            // $(".son").trigger("click.zs");
            $(".son").trigger("click.ls");
        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>
<form action="http://www.taobao.com">
    <input type="text">
    <input type="submit">
</form>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {

            $(".father").on("click.ls", function () {
                alert("father click1");
            });
            $(".father").on("click", function () {
                alert("father click2");
            });
            $(".son").on("click.ls", function () {
                alert("son click1");
            });
            /*
            利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发
            利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发
            */
            // $(".son").trigger("click.ls");
            $(".son").trigger("click");
        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
<a href="http://www.baidu.com"><span>注册</span></a>
<form action="http://www.taobao.com">
    <input type="text">
    <input type="submit">
</form>
</body>

jQuery事件委托

什么是事件委托?

请别人帮忙做事情, 然后将做完的结果反馈给我们
在jQuery中,如果通过核心函数找到的元素不止一个, 那么在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件

	<script>
            // $("ul>li").click(function () {
            //     console.log($(this).html());
            // });
            /*
            以下代码的含义, 让ul帮li监听click事件
            之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件
            之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul,ul响应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁
            */
            $("ul").delegate("li", "click", function () {
                console.log($(this).html());
            });
        });
    </script>
</head>
<body>
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
</ul>
<button>新增一个li</button>
</body>

jQuery移入移出事件

mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件

$(".father").mouseover(function () {
    console.log("father被移入了");
});
$(".father").mouseout(function () {
    console.log("father被移出了");
});

mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件。推荐大家使用

$(".father").mouseenter(function () {
    console.log("father被移入了");
});
$(".father").mouseleave(function () {
    console.log("father被移出了");
});

hover事件，监听移入移出事件

/*
$(".father").hover(function () {
    console.log("father被移入了");
},function () {
    console.log("father被移出了");
});
*/

$(".father").hover(function () {
    console.log("father被移入移出了");
});

动画

index()方法

通过index()获取当前元素的索引.

eq()方法 / get()方法

.eq()返回传入的索引所对应的元素并封装成一个对象
如果是.get()方法，就不会封装成对象，直接将元素返回

siblings()方法

.siblings()可以找到除当前元素外的其他元素，与index()相对。体现js的排它特性
选项卡案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>38-TAB选项卡终极</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 440px;
            height: 298px;
            border: 1px solid #000;
            margin: 50px auto;
        }
        .nav>li{
            list-style: none;
            width: 110px;
            height: 50px;
            background: orange;
            text-align: center;
            line-height: 50px;
            float: left;
        }
        .nav>.current{
            background: #ccc;
        }
        .content>li{
            list-style: none;
            display: none;
        }
        .content>.show{
            display: block;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            // 1.监听选项卡的移入事件
            $(".nav>li").mouseenter(function () {
                // 1.1修改被移入选项卡的背景颜色
                $(this).addClass("current");
                // 1.2获取当前移入选项卡的索引
                var index = $(this).index();
                // 1.3根据索引找到对应的图片
                var $li = $(".content>li").eq(index);
                // 1.4显示找到的图片
                $li.addClass("show");
            });
            // 1.监听选项卡的移出事件
            $(".nav>li").mouseleave(function () {
                // 1.1还原选项卡的背景颜色
                $(this).removeClass("current");
                // 1.2获取当前移出选项卡的索引
                var index = $(this).index();
                // 1.3根据索引找到对应的图片
                var $li = $(".content>li").eq(index);
                // 1.4隐藏对应的图片
                $li.removeClass("show");
            });
            */
            // 1.监听选项卡的移入事件
            $(".nav>li").mouseenter(function () {
                // 1.1修改被移入选项卡的背景颜色
                $(this).addClass("current");
                // 1.2还原其它兄弟选项卡的背景颜色
                $(this).siblings().removeClass("current");
                // 1.3获取当前移出选项卡的索引
                var index = $(this).index();
                // 1.4根据索引找到对应的图片
                var $li = $(".content>li").eq(index);
                // 1.5隐藏非当前的其它图片
                $li.siblings().removeClass("show");
                // 1.6显示对应的图片
                $li.addClass("show");
            });
        });
    </script>
</head>
<body>
<div class="box">
    <ul class="nav">
        <li class="current">H5+C3</li>
        <li>jQuery</li>
        <li>C语言</li>
        <li>Go语言</li>
    </ul>
    <ul class="content">
        <li class="show"><img src="images/11.jpg" alt=""></li>
        <li><img src="images/12.jpg" alt=""></li>
        <li><img src="images/13.jpg" alt=""></li>
        <li><img src="images/14.jpg" alt=""></li>
    </ul>
</div>
</body>
</html>

jQuery显示和隐藏动画

$(function () {
    // 编写jQuery相关代码
    $("button").eq(0).click(function () {
        // $("div").css("display", "block");
        // 注意: 这里的时间是毫秒
        $("div").show(1000, function () {
            // 作用: 动画执行完毕之后调用
            alert("显示动画执行完毕");
        });
    });
    $("button").eq(1).click(function () {
        // $("div").css("display", "none");
        $("div").hide(1000, function () {
            alert("隐藏动画执行完毕");
        });
    });
    $("button").eq(2).click(function () {
        $("div").toggle(1000, function () {
            alert("切换动画执行完毕");
        });
    });
});

展开和收起动画

$("button").eq(0).click(function () {
    $("div").slideDown(1000, function () {
        alert("展开完毕");
    });
});
$("button").eq(1).click(function () {
    $("div").slideUp(1000, function () {
        alert("收起完毕");
    });
});
$("button").eq(2).click(function () {
    $("div").slideToggle(1000, function () {
        alert("收起完毕");
    });
});

.children()方法

找到当前元素下的子元素

   // 1.1拿到二级菜单
    var $sub = $(this).children(".sub");
    // 1.2让二级菜单展开
    $sub.slideDown(1000);
<body>
<ul class="nav">
    <li>一级菜单<span></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span></span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>

stop()方法

停止当前正在执行的所有动画。在jQuery中如果需要执行动画, 建议在执行动画之前先调用stop方法,然后再执行动画。

// 1.监听一级菜单的移入事件
$(".nav>li").mouseenter(function () {
    // 1.1拿到二级菜单
    var $sub = $(this).children(".sub");
    // 停止当前正在运行的动画：
    $sub.stop();
    // 1.2让二级菜单展开
    $sub.slideDown(1000);
});

jQuery淡入淡出动画

$("button").eq(0).click(function () {
    $("div").fadeIn(1000, function () {
        alert("淡入完毕");
    });
});
$("button").eq(1).click(function () {
    $("div").fadeOut(1000, function () {
        alert("淡出完毕");
    });
});
$("button").eq(2).click(function () {
    $("div").fadeToggle(1000, function () {
        alert("切换完毕");
    });
});
$("button").eq(3).click(function () {
    $("div").fadeTo(1000, 0.2, function () {
        alert("淡入完毕");
    })
});

.fadeTo(时间,透明度,动画结束后调用的方法)
动画淡入或淡出到某种程度（示例中为淡入到透明度0.2）。

$(function () {
    // 1.监听span的点击事件
    $("span").click(function () {
        $(".ad").remove();
    });

    // 2.执行广告动画
    /*
    $(".ad").slideDown(1000, function () {
        $(".ad").fadeOut(1000, function () {
            $(".ad").fadeIn(1000);
        });
    });
    */
    $(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);

});

通过动画队列的原理，进行动画的链式编程。

自定义动画

参数

params,[speed],[easing],[fn]Options,Number/String,String,FunctionV1.0

params：一组包含作为动画属性和终值的样式属性和及其值的集合
speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing：要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”.
fn:在动画完成时执行的函数，每个元素执行一次。

params,optionsString,StringV1.0

params：一组包含作为动画属性和终值的样式属性和及其值的集合
options：动画的额外选项。如：
speed - 设置动画的速度,
easing - 规定要使用的 easing 函数,
callback- 规定动画完成之后要执行的函数,
step - 规定动画的每一步完成之后要执行的函数,
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始,
specialEasing- 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>47-jQuery自定义动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            margin-top: 10px;
            background: red;
        }
        .two{
            background: blue;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 编写jQuery相关代码
            $("button").eq(0).click(function () {
                /*
                $(".one").animate({
                    width: 500
                }, 1000, function () {
                    alert("自定义动画执行完毕");
                });
                */
                $(".one").animate({
                    marginLeft: 500
                }, 5000, function () {
                    // alert("自定义动画执行完毕");
                });
                /*
                第一个参数: 接收一个对象, 可以在对象中修改属性
                第二个参数: 指定动画时长
                第三个参数: 指定动画节奏, 默认就是swing
                第四个参数: 动画执行完毕之后的回调函数
                */
                $(".two").animate({
                    marginLeft: 500
                }, 5000, "linear", function () {
                    // alert("自定义动画执行完毕");
                });
            })
            $("button").eq(1).click(function () {
                $(".one").animate({
                    width: "+=100"
                }, 1000, function () {
                    alert("自定义动画执行完毕");
                });
            });
            $("button").eq(2).click(function () {
                $(".one").animate({
                    // width: "hide"
                    width: "toggle"
                }, 1000, function () {
                    alert("自定义动画执行完毕");
                });
            })
        });
    </script>
</head>
<body>
<button>操作属性</button>
<button>累加属性</button>
<button>关键字</button>
<div class="one"></div>
<div class="two"></div>
</body>
</html>

stop和delay方法

在jQuery的{}中可以同时修改多个属性, 多个属性的动画也会同时执行。

$(".one").animate({
    width: 500
    // height: 500
}, 1000);

$(".one").animate({
    height: 500
}, 1000);

delay方法

delay方法的作用就是用于告诉系统延迟时长。

$(".one").animate({
    width: 500
    // height: 500
}, 1000).delay(2000).animate({
    height: 500
}, 1000);

stop方法

    $(".one").animate({
        width: 500
    }, 1000);
    $(".one").animate({
        height: 500
    }, 1000);

    $(".one").animate({
        width: 100
    }, 1000);
    $(".one").animate({
        height: 100
    }, 1000);
});
$("button").eq(1).click(function () {
    // 立即停止当前动画, 继续执行后续的动画
    // $("div").stop();
    // $("div").stop(false);
    // $("div").stop(false, false);

    // 立即停止当前和后续所有的动画
    // $("div").stop(true);
    // $("div").stop(true, false);

    // 立即完成当前的, 继续执行后续动画
    // $("div").stop(false, true);

    // 立即完成当前的, 并且停止后续所有的
    $("div").stop(true, true);

图标特效

$(function () {
    // 1.遍历所有的li
    $("li").each(function (index, ele) {
        // 1.1生成新的图片位置
        // no-repeat不平铺
        var $url = "url(\"images/bg.png\") no-repeat 0 "+(index * -24)+"px"
        // 1.2设置新的图片位置
        $(this).children("span").css("background", $url);
    });
    
    // 2.监听li移入事件
    $("li").mouseenter(function () {
        // 2.1将图标往上移动
        $(this).children("span").animate({
            top: -50
        }, 1000, function () {
            // 2.2将图片往下移动
            $(this).css("top", "50px");
            // 2.3将图片复位
            $(this).animate({
                top: 0
            }, 1000);
        });
    });
});

节点方法

jQuery添加节点

内部插入

append(content|fn)
appendTo(content)

会将元素添加到指定元素内部的最后

prepend(content|fn)
prependTo(content)

会将元素添加到指定元素内部的最前面

外部插入

after(content|fn)

会将元素添加到指定元素外部的后面

before(content|fn)

会将元素添加到指定元素外部的前面

insertAfter(content)
insertBefore(content)

  $("button").click(function () {
        // 1.创建一个节点
        var $li = $("<li>新增的li</li>");
        // 2.添加节点
        $("ul").append($li);
        $("ul").prepend($li);

        // $li.appendTo("ul");      //同上，写法不同
        // $li.prependTo("ul");

        // $("ul").after($li);
        // $("ul").before($li);
        // $li.insertAfter("ul");
    });

jQuery删除节点

删除
remove([expr])
删除指定元素
empty()
删除指定元素的内容和子元素, 指定元素自身不会被删除
detach([expr])

$("button").click(function () {
    // $("div").remove();
    // $("div").empty();
    // $("li").remove(".item");

    // 利用remove删除之后再重新添加,原有的事件无法响应
    // var $div = $("div").remove();
    // 利用detach删除之后再重新添加,原有事件可以响应
    var $div = $("div").detach();
    // console.log($div);
    $("body").append($div);
});
$("div").click(function () {
    alert("div被点击了");
});

jQuery替换节点

替换

replaceWith(content|fn)
replaceAll(selector)
替换所有匹配的元素为指定的元素。两个方法大致相同，只是元素的书写方式不太一样。

$("button").click(function () {
    // 1.新建一个元素
    var $h6 = $("<h6>我是标题6</h6>");
    // 2.替换元素
    // $("h1").replaceWith($h6);
    $h6.replaceAll("h1");
});

jQuery复制节点

clone([Even[,deepEven]])

如果传入false就是浅复制, 如果传入true就是深复制

浅复制和深复制的区别：
浅复制只会复制元素, 不会复制元素的事件
深复制会复制元素, 而且还会复制元素的事件

$("button").eq(0).click(function () {
    // 1.浅复制一个元素
    var $li = $("li:first").clone(false);
    // 2.将复制的元素添加到ul中
    $("ul").append($li);
});
$("button").eq(1).click(function () {
    // 1.深复制一个元素
    var $li = $("li:first").clone(true);
    // 2.将复制的元素添加到ul中
    $("ul").append($li);
});

$("li").click(function () {
    alert($(this).html());
});

案例知识点

新浪微博

a标签

在使用a标签时如果不想点击的时候跳转到页面的最上方，可使用javascript:

  <div class="page">
    <!-- 这里的a标签不能使用#，否则会跳转到前面，要用javascript:; -->
    <a href="javascript:;">1</a>
    <a href="javascript:;">2</a>
    <a href="javascript:;">3</a>
  </div>

监听内容的实时输入

change方法是在失去焦点后获取，不能实时获取。想要实时获取文本框输入的内容，要使用代理
change([[data],fn])
概述：
　　当元素的值发生改变时，会发生 change 事件。
　　该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。

参数：

fnFunctionV1.0

在每一个匹配元素的change事件中绑定的处理函数。

[data],fnString,FunctionV1.4.3

data:change([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的change事件中绑定的处理函数。

  $(".comment").change(function(){
    console.log($(this).val());
  });

使用代理：

 $("body").delegate(".comment","propertychange input", function(){
    //判断是否输入了内容
    if($(this).val().length>0){
      //让按钮可用
      $(".send").prop("disabled", false);
    }else{
      //让按钮不可用
      $(".send").prop("disabled", true);
    }
  });

parseInt()函数

parseInt()函数可解析一个字符串，并返回一个整数。

  //2.监听顶点击
  $("body").delegate(".infoTop", "click", function(){
    $(this).text(parseInt($(this).text()) + 1);
  })

生成时间

  //生成时间方法
  function formartDate(){
    var date = new Date();
    //2020-8-5 21:30:32
    var arr = [date.getFullYear() + "-",
    date.getMonth() + 1 + "-",
    date.getDate() + " ",
    date.getHours() + ":",
    date.getMinutes() + ":",
    date.getSeconds()];
    return arr.join("");
  }

狂拍灰太狼

Math中的一些方法

Math.random()
随机生成一个数。
Math.round(0.5)
四舍五入取整数。

   /*
    0  * 8 = 0   == 0
    0.1* 8 = 0.8 == 1
    0.2* 8 = 1.6 == 2
    0.3* 8 = 2.4 == 2
    0.4* 8 = 3.2 == 3
    0.5* 8 = 4.0 == 4
    0.6* 8 = 4.8 == 5
    0.7* 8 = 5.6 == 6
    0.8* 8 = 6.4 == 6
    0.9* 8 = 7.2 == 7
    1* 8 =  8    == 8
    */
    console.log(Math.random());
    console.log(Math.round(0.5));

CSS设置监听事件

ClassName:事件
设置一个鼠标移入变亮，移除变暗的动画示例：

.logo{
  float: left;
  margin-left: 20px;
  opacity: 0.5;
}
.logo:hover{
  opacity: 1;
}

我的博客原文链接：https://rainying.com/2019/10/28/【笔记】jQuery的学习/

不二D荧林仕

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【笔记】jQuery学习

十分详细的jQuery的学习笔记，包含部分案例的知识点
复制链接

扫一扫

专栏目录