jQuery学习笔记

最新推荐文章于 2024-09-11 22:31:16 发布
最新推荐文章于 2024-09-11 22:31:16 发布
阅读量217 收藏
点赞数
文章标签： jquery ajax 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53472371/article/details/118757657
版权
本文详细介绍了jQuery的学习笔记，包括为何要学习jQuery、jQuery的优势、语法、选择器、事件和动画，以及如何操作表单和表格。jQuery简化了原生JavaScript的API，提供了易记的语法和浏览器兼容性，支持多个入口函数，同时提供了丰富的选择器和事件处理。文章还深入探讨了事件冒泡、事件绑定和移除、模拟操作、动画效果和表单验证等功能，是jQuery初学者的实用教程。
摘要由CSDN通过智能技术生成

jQuery

文章目录

为什么要学习 jQuery

jQuery其实就是一个封装了很多方法的js库。

jQuery：我们考虑如何操作 DOM，jQuery 考虑如何让我们更方便地操作 DOM。

vue 和 React：我们考虑如何操作数据，框架考虑如何将改变后的数据更新到界面。

原生js的缺点：

  • 不能添加多个入口函数（Window.onload），如果添加了多个，后面会把前面的给覆盖。
  • 原生js的api名字都太长太难记
  • 原生js有时候代码冗余
  • 原生js中有些属性或者方法有浏览器兼容问题
  • 原生js容错率比较低，前面的代码出了问题，后面的代码执行不了

jQuery的优势：

  • 是可以有多个入口函数的
  • jquery的api名字都容易记忆
  • jquery代码简洁（隐式迭代）
  • jquery帮我们解决了浏览器兼容问题
  • 容错率高，前面的代码出了问题，后面的代码不受影响

jQuery 语法

基础语法是：

$(selector).action();
  • 美元符号 $ 定义 jQuery。
  • 选择符（selector）“查询”和“查找” HTML 元素。
  • jQuery 的 action() 执行对元素的操作。

文档就绪函数

所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

});

// 可以简写成

$(funciton(){

});

jQuery入口函数和Window.onload入口函数的区别

window.onload$(doucment).ready()
执行时机必须等待网页中所有的内容加载完毕后才能执行（包括图片）网页中所有 DOM 结构绘制完毕后就执行，可能 DOM 元素关联的东西并没有加载完
编写个数不能同时编写多个。能同时编写多个。

编写个数的意思就是：

window.onload = function () {
  alert('test1');
};
window.onload = function () {
  alert('test2');
};
//结果只会输出 test2。

$(document).ready(function () {
  alert('test1');
});
$(document).ready(function () {
  alert('test2');
});
//结果两次都输出

第一个jQuery程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div></div>
</body>
</html>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    // 1.引入jquery文件
    // 2.写一个入口函数
    // 3.找到你要操作的元素（jQuery选择器），去操作它（给它添加属性，样式，文本...）
    $(document).ready(function () {
        $('div').width(100).height(100).css('backgroundColor','red').text('哈哈');
    });
</script>

jQuery 对象和 DOM 对象

代码笔记：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="one"></div>
    <div></div>
    <div></div>
</body>
</html>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    //入口函数
    $(function () {
        // 1.dom对象
        // 原生js选择器获取到的对象
        // 特点：只能调用dom方法或者属性，不能调用jquery的属性或者方法
        // var div1 = document.getElementById("one");
        // div1.style.backgroundColor = 'red';//dom对象是可以调用dom的属性或者方法
        //div1.css('backgroundColor','red');//报错了 div1.css is not a function,因为dom对象不能调用jquery方法



        // 2.jQuery对象(jQuery对象是个伪数组，jquery对象其实就是dom对象的一个包装集)
        // 利用jquery选择器获取到的元素
        // 特点：只能调用jquery的方法或者属性，不能调用dom对象的属性或者方法
        var $div1 = $('#one');
        // $div1.css('backgroundColor','green');//jquery对象是可以调用jquery的属性或者方法
        //$div1.style.backgoundColor = 'red';//报错了Cannot set property 'backgoundColor' of undefined


        // 3.dom对象转换成jQuery对象
        // var div1 = document.getElementById("one");
        // var $div = $(div1);
        // console.log($div1);


        //4.jquery对象转换成dom对象
        //4.1使用下标来取出来
        var $divs = $('div');
        console.log($divs);
        // var div1 = $divs[0];
        // console.log(div1);


        // 4.2使用jquery的方法 get();
        var div2 = $divs.get(1);
        console.log(div2);
    });
</script>

jQuery 选择器

基本选择器

在这里插入图片描述
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="one">
    lllllll
</div>
<div class="Two">
    aaaaaaaa
</div>
<ul>
    <li>1</li>
    <li class="apple">2</li>
    <li class="three">3</li>
</ul>
</body>
</html>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(function () {
        $('#one').css('fontSize',40);
        $('.Two').css('fontSize',50);
        $('li').css('backgroundColor','red');
        $('.apple,.three').css('backgroundColor','white');
        $('li.apple').css('backgroundColor','green');
    });
</script>

层次选择器

在这里插入图片描述
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <div>
        <span>123</span>
        <span>123</span>
        <span>123</span>
    </div>
    <div>
        <p>1</p>
        <div>div1</div>
        <div>div2</div>
        <div>div3</div>
    </div>
    <p>2</p>
</div>
</body>
</html>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(function () {
        //需求1：获取id为father这个元素的所有div
        console.log($('#father>div'));

        //需求2：获取id为father这个元素的所有子id以及所有子span
        //console.log($('#father>div,p'));//不行，这种意思是获取id为father这个元素的所有子div以及页面上所有的p
        console.log($('#father>div,#father>p'));//可以

        //需求3：获取id为father这个div的所有后代div
        console.log($('#father div'));
    });
</script>

过滤选择器

在这里插入图片描述
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>我是第1个li标签</li>
        <li>我是第2个li标签</li>
        <li>我是第3个li标签</li>
        <li>我是第4个li标签</li>
        <li>我是第5个li标签</li>
        <li>我是第6个li标签</li>
        <li>我是第7个li标签</li>
        <li>我是第8个li标签</li>
        <li>我是第9个li标签</li>
        <li>我是第10个li标签</li>
    </ul>
</body>
</html>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(function () {
        //设置奇数行li标签颜色为天蓝色
        $('li:odd').css('backgroundColor','skyblue');
        //设置偶数行li标签背景色为粉色
        $('li:even').css('backgroundColor','pink');
        //首位两行li显示红色
        $('li:eq(0)').css('backgroundColor','red');
        $('li:eq(9)').css('backgroundColor','red');
    });
</script>

表单选择器

为了使用户能够更加灵活的操作表单，jQuery 中专门加入了表单选择器，利用这个选择器，我们能够特别方便的获取到表单的某个或某类型的元素。

  • :input 选取所有的 、、和 元素。

  • :text 选取所有的单行文本框。

  • :password 选取所有的密码框

  • :radio 选取所有的单选框

  • :checkbox 选取所有的多选框

  • :submit 选取所有的提交按钮

  • :image 选取所有的图像

  • :reset 选取所有的重置按钮

  • :button 选取所有的按钮

  • :file 选取所有的上传域

  • :hidden 选取所有不可见元素

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input text="text" id="form1" />
<input text="textaera" />
</body>
</html>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(function () {
        $('#form1:input').css({
            height: '300px',
        });
        // $('#form1 input').css({
        //     height: '300px',
        // });
    });
</script>

筛选选择器（了解）

在这里插入图片描述

jQuery 中的事件和动画

事件

事件绑定

  • bind() 向元素添加事件处理程序（3.0 版本已经弃用）
  • on() 向元素添加事件处理程序（自 jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的首选方法。）
  • one() 向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次

注意：

  • 使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

  • 如需移除事件处理程序，请使用 off() 方法。

  • 如需添加只运行一次的事件然后移除，请使用 one() 方法。

绑定事件处理器分类：

在这里插入图片描述
在这里插入图片描述

语法为：

$(selector).on(event,childSelector,data,function)

参数说明：

  • event 必需。表示事件类型，规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。事件类型包括：blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、keydown、keypress 等，也可以为自定义名称。

  • childSelector 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。

  • data 可选。规定传递到函数的额外数据。

  • function 可选。规定当事件发生时运行的函数。

代码示例1：为 li 元素绑定 click 事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<ul>
    <li>blue</li>
    <li>white</li>
    <li>red</li>
</ul>
<script type="text/javascript">
    $(document).ready(function () {
        $('ul li').on('click', function () {
            $(this).clone().appendTo('ul');
        });
    });
</script>
</body>
</html>

代码示例2：将上节事件绑定的例子简写绑定事件

  • 像 click，mouseover 和 mouseout 这类事件，我们经常会用到，jQuery 为此提供了一套简写的方法，使得我们能够减少代码量。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<ul>
    <li>blue</li>
    <li>white</li>
    <li>red</li>
</ul>
<script type="text/javascript">
    $(document).ready(function () {
        $('ul li').click(function () {
            $(this).clone().appendTo('ul');
        });
    });
</script>
</body>
</html>

合成事件

hover() 方法的语法结构为：

$(selector).hover(inFunction, outFunction);

参数说明：

  • inFunction 必需。规定 mouseover 事件发生时运行的函数。

  • outFunction 可选。规定 mouseout 事件发生时运行的函数。

hover() 方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第 1 个函数，当光标移出这个元素时，会触发指定的第 2 个函数。

代码示例：当鼠标移动到 li 上时字体大小变成 24px，移开变为 14px。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<ul>
    <li>blue</li>
    <li>white</li>
    <li>red</li>
</ul>
<script type="text/javascript">
    $(function () {
        $('ul li').hover(
            function () {
                $(this).css({
                    'font-size': '24px',
                });
            },
            function () {
                $(this).css({
                    'font-size': '14px',
                });
            }
        );
    });
</script>
</body>
</html>

事件冒泡

什么是事件冒泡

当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个 click 事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的 onclick 属性赋一个函数的名字，就是让这个函数去处理该按钮的 click 事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="content">
    我是外层div元素
    <span>我是内部span元素</span>
    我是外层div元素
</div>
<script type="text/javascript">
    $(function () {
        $('span').on('click', function () {
            alert('我是内部span元素，我被点击了');
        });
        $('#content').on('click', function () {
            alert('我是外部div元素，我被点击了');
        });
        $('body').on('click', function () {
            alert('我是body元素，我被点击了');
        });
    });
</script>
</body>
</html>

在点击 span 元素的时候，会触发 span 元素的 click 事件，会输出三条记录，这就是事件冒泡所引起的。 span 元素的 click 事件按照以下的顺序冒泡：

  • span

  • div

  • body

之所以称为事件冒泡，是因为事件会按照 DOM 的层次结构像水泡一样不断向上直至顶端。

事件冒泡引发的问题

事件冒泡可能会引起预料之外的结果，比如我们上面的例子中，需求是点击 span 元素，只触发 span 元素的 click 事件，然而 div 元素 和 body 元素的 click 事件也被触发了，因此，我们需要对事件的作用范围进行限制。

停止事件冒泡：

停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行，在 jQuery 中提供了 event.stopPropagation() 方法来停止冒泡。使用 event.isPropagationStopped() 方法来检查指定的事件上是否调用了该方法，如果 event.stopPropagation() 被调用则该方法返回 true，否则返回 false。

停止事件冒泡：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="content">
    我是外层div元素
    <span>我是内部span元素</span>
    我是外层div元素
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('span').on('click', function (event) {
            alert('我是内部span元素，我被点击了');
            event.stopPropagation(); //停止事件冒泡
        });
        $('#content').on('click', function (event) {
            alert('我是外部div元素，我被点击了');
            event.stopPropagation(); //停止事件冒泡
        });
        $('body').on('click', function () {
            alert('我是body元素，我被点击了');
        });
    });
</script>
</body>
</html>
阻止默认行为：

网页中的元素都有自己默认的行为。比如单击超链接后会跳转，单击“提交”按钮后表单会提交，有时候我们需要阻止元素的默认行为。 在 jQuery 中提供了 event.preventDefault() 方法阻止元素发生默认的行为。使用 event.isDefaultPrevented() 方法来检查指定的事件上是否调用了 preventDefault() 方法。

代码示例：阻止链接打开 url

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<a href="https://www.lanqiao.cn/">实验楼</a>
<script type="text/javascript">
    $(document).ready(function () {
        $('a').click(function (event) {
            event.preventDefault();//阻止元素发生默认的行为
        });
    });
</script>
</body>
</html>

另外表单中我们可以使用该方法来阻止表单的提交，比如当用户名为空时，点击提交按钮，出现提示信息让用户输入内容，并且表单不能提交，只有在用户名里输入内容时，才能提交表单。

事件对象的属性

  1. event.type 获取事件的类型
    代码示例：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<a href="https://www.lanqiao.cn/">实验楼</a>
<script type="text/javascript">
    $(function () {
        $('a').click(function (event) {
            event.preventDefault();//阻止元素发生默认的行为
            alert(event.type);//获取事件的类型
        });
    });
</script>
</body>
</html>
  1. event.stopPropagation() 方法，防止事件冒泡到 DOM 树上，也就是不触发的任何前辈元素上的事件处理函数。参考上面。JavaScript 中符合 W3C 规范的 stopPropagation() 方法在 IE 浏览器下无效，jQuery 对其进行了封装，使之能兼容各种浏览器。
  2. event.preventDefault() 方法， 如果调用这个方法，默认事件行为将不再触发。参考上面。JavaScript 中符合 W3C 规范的 preventDefault() 方法在 IE 浏览器下无效，jQuery 对其进行了封装，使之能兼容各种浏览器。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了。
  3. event.target 属性返回哪个 DOM 元素触发了事件。target 属性可以是注册事件时的元素，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托。
    代码示例：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落</p>
<button>我是按钮</button>
<p>
    标题，段落和按钮元素设置了点击事件。分别点击元素查看是哪个元素的事件被触发了。
</p>
<div style="color:red;"></div>
<script type="text/javascript">
    $(function () {
        $('p, button, h1').click(function (event) {
            $('div').html('通过 ' + event.target.nodeName + ' 元素触发。');//返回哪个 DOM 元素触发了事件
        });
    });
</script>
</body>
</html>
  1. event.pageX 和 event.pageY 分别获取鼠标相对于文档的左边缘的位置（左边）和鼠标相对于文档的顶部边缘的位置（坐标）。 如果没有使用 jQuery，那么在 IE 浏览器中使用 event.x/event.y，而在 Firefox 浏览器中使用 event.pageX/event.pageY,如果页面中有滚动条，则还要加上滚动条的宽度和高度。
    代码示例：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<p>鼠标指针在: <span></span></p>

<script>
    $(function () {
        $(document).mousemove(function () {
            $('span').text('X:'+ event.pageX + ', Y: ' + event.pageY);
        });
    });
</script>
</body>
</html>

移除事件

与 on() 方法绑定事件相对应的 off() 方法用来移除事件。自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注: 如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。

语法为：

$(selector).off(event,selector,function(eventObj),map)

参数说明：

  • event 必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。

  • selector 可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。

  • function(eventObj) 可选。规定当事件发生时运行的函数。

  • map 规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<p>点击这个段落修改它的背景颜色。</p>
<p>点击一下按钮再点击这个段落( click 事件被移除 )。</p>
<button>移除 click 事件</button>

<script>
    $(function () {
        $('p').on('click', function () {
            $(this).css('background-color', 'red');//修改背景颜色
        });
        $('button').click(function () {
            $('p').off('click');//移除 click 事件
        });
    });
</script>
</body>
</html>

注： 如需添加只运行一次的事件然后移除，请使用 one() 方法。

语法为：

$(selector).one(event,data,function)

参数说明：

  • event 必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

  • data 可选。规定传递到函数的额外数据。

  • function 必需。规定当事件发生时运行的函数。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<p>这是一个段落 。</p>
<p>这是另外一个段落。</p>
<p>点击任意一个段落来修改段落的字体大小，每个段落只会执行一次。</p>

<script>
    //如需添加只运行一次的事件然后移除，请使用 one() 方法
    $(function () {
        $('p').one('click', function () {
            $(this).animate({
                fontSize: '+=6px',
            });
        });
    });
</script>
</body>
</html>

模拟操作

常用模拟

我们前面的例子中都是需要用户操作，比如 click 事件必须要用户单击才能触发，但有时候，我们需要通过模拟用户操作，来达到单击的效果。在 jQuery 中，可以使用 trigger() 方法来完成模拟操作。

语法为：

$(selector).trigger(event,param1,param2,...)

参数说明：

  • event 必需。规定指定元素上要触发的事件。可以是自定义事件，或者任何标准事件。

  • param1,param2,… 可选。传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<p>这是一个段落 。</p>
<p>这是另外一个段落。</p>
<p>点击任意一个段落来修改段落的字体大小，每个段落只会执行一次。</p>

<script>
    $(document).ready(function () {
        $('p').one('click', function () {
            $(this).animate({
                fontSize: '+=6px',
            });
        });
        $('p').trigger('click');//模拟操作
    });
</script>
</body>
</html>
触发自定义事件

trigger() 方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<p>这是一个段落 。</p>
<p>这是另外一个段落。</p>
<p>点击任意一个段落来修改段落的字体大小，每个段落只会执行一次。</p>

<script>
    $(function() {
        $("p").one("myClick", function() {
            $(this).animate({
                fontSize: "+=6px"
            });
        });
        //触发自定义事件
        $("p").trigger("myClick");
    });
</script>
</body>
</html>
传递数据

trigger(type,[data]) 方法有两个参数，第 1 个参数是要触发的事件类型，第 2 个参数是要传递给处理函数的附加数据，以数组形式传递。通常可以传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button id="btn">点击我</button>
<div id="test"></div>

<script>
    $(function() {
        $('#btn').on("myClick",function(event,message1,message2){
            $('#test').append("<p>"+message1+message2+"</p>");
        });
        $('#btn').trigger("myClick",["我的自定义","事件"]);
    });
</script>
</body>
</html>
执行默认操作

trigger() 方法触发事件后，会执行浏览器默认操作。
例如：$('input').trigger('focus');

以上代码不仅会触发为 input 元素绑定的 foucs 事件，也会使 input 元素本身得到焦点（浏览器的默认操作）。如果我们只想触发绑定的 focus 事件，而不想执行浏览器默认操作，我们可以使用 triggerHandler() 方法。它们之间的不同之处有：

  • triggerHandler() 不触发事件的默认行为。（比如表单提交）

  • .trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。

  • 由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button id="old">.trigger( "focus" )</button>
<button id="new">.triggerHandler( "focus" )</button><br /><br />
<p>
    执行 .trigger 后 input 输入框自动获取焦点，触发事件的默认行为，而
    .triggerHandler 仅仅
    执行了指定的事件浏览器并未执行动作，输入框也没有获取焦点。
</p>
<input type="text" value="将获取焦点" />
<script>
    $(function () {
        $('#old').click(function () {
            $('input').trigger('focus');
        });
        $('#new').click(function () {
            $('input').triggerHandler('focus');
        });
        $('input').focus(function () {
            $('<span>获取焦点!</span>').appendTo('body').fadeOut(1000);
        });
    });
</script>
</body>
</html>

动画

show()方法和 hide()方法

代码笔记：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
<input type="button" value="显示" id="show"/>
<input type="button" value="隐藏" id="hide"/>
<input type="button" value="切换" id="toggle"/> <br/><br/>
<div id="div1"></div>
</body>
</html>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(function () {
        //1.显示show();
        //参数1：代表执行动画的时长 毫秒数，也可以是代表时长的字符串 fast normal slow
        //参数2：代表动画执行完毕后的回调函数
        $('#show').click(function () {
            //给id为div1的元素动画显示
            //1.1 如果show()这个方法没有参数，那就没有动画效果
            // $('#div1').show();
            //1.2 如果想要动画效果，就应该给他参数
            $('#div1').show(2000);
            // $('#div1').show('fast');//200毫秒
            // $('#div1').show('normal');//400毫秒
            // $('#div1').show('slow');//600毫秒
            // $('#div1').show('aaa');//如果代表时长的单词写错了，就相当于写了一个normal,不会报错
            //1.3 回调函数
            // $('#div1').show(2000, function () {
            //     alert('动画执行完毕了！');
            // });
        });

        //2.隐藏
        $('#hide').click(function () {
            //让id为div1的元素动画隐藏
            // $('#div1').hide();//没有参数没有动画效果
            $('#div1').hide(2000);
            // $('#div1').hide(2000,function () {
            //     alert('隐藏了');
            // });
        });

        //3.切换toggle
        //如果元素示隐藏状态就动画显示，如果元素是显示状态就动画隐藏
        $('#toggle').click(function () {
            $('#div1').toggle(1000);
        });
    });
</script>

slideUp() 方法和 slideDown() 方法

代码笔记：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
<input type="button" value="滑入" id="slideDown"/>
<input type="button" value="滑出" id="slideUp"/>
<input type="button" value="切换" id="slideToggle"/> <br/><br/>
<div id="div1"></div>
</body>
</html>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(function () {
        //1.滑入 slideDown(参数1，参数2);
        //参数1：动画执行的时长
        //参数2：动画执行完毕后的回调函数
        $('#slideDown').click(function () {
            //让id为div1的元素滑入
            // $('#div1').slideDown();//没有给参数相当于给了一个默认的时长，normal代表的400毫秒
            $('#div1').slideDown(2000);
            // $('#div1').slideDown(2000,function () {
            //     alert('滑入完成了');
            // });
        });

        //2.滑出 slideUp();
        $('#slideUp').click(function () {
            //让id为div1的元素滑出
            $('#div1').slideUp(2000);
            // $('#div1').slideUp(2000,function () {
            //     alert('滑出做完了');
            // });
        });

        //3.切换 slideToggle();
        //元素是隐藏状态就滑入；元素是显示状态就滑出
        $('#slideToggle').click(function () {
            $('#div1').slideToggle(1000);
        });
        
    });
</script>

fadeIn() 方法和 fadeOut() 方法

代码笔记：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
<input type="button" value="淡入" id="fadeIn"/>
<input type="button" value="淡出" id="fadeOut"/>
<input type="button" value="切换" id="fadeToggle"/>
<input type="button" value="淡入到哪里" id="fadeTo"/><br/><br/>
<div id="div1"></div>
</body>
</html>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(function () {
        //1.淡入
        $('#fadeIn').click(function () {
            // $('#div1').fadeIn();//默认400毫秒
            $('#div1').fadeIn(1000);
        //     $('#div1').fadeIn(1000,function () {
        //         alert('淡入完成了')
        //     });
        });

        //2.淡入
        $('#fadeOut').click(function () {
            $('#div1').fadeOut(1000);
            // $('#div1').fadeOut(1000,function () {
            //     alert('淡出完成了');
            // });
        });

        //3.切换 fadeToggle
        $('#fadeToggle').click(function () {
            $('#div1').fadeToggle(1000);
        });

        //4.淡入到哪里 fadeTo
        $('#fadeTo').click(function () {
            $('#div1').fadeTo(1000,0.5);
        });

    });
</script>

animate()方法

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0px;
        }
        #div1{
            top:50px;
        }
        #div2{
            top:170px;
        }
    </style>
</head>
<body>
<input type="button" value="从左到右800" id="lr8000"/>
<div id="div1"></div>
<!--<div id="div2"></div>-->
</body>
</html>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(function () {
        //自定义动画 animate();
        //参数1：必选的 对象 代表的是需要做动画的属性
        //参数2：可选的 代表执行动画的时长
        //参数3：可选的 easing 代表的是缓动还是匀速 linear(匀速) swing（缓动）默认不写是缓动
        //参数4：可选的 动画执行完毕的回调函数
        $('#lr8000').click(function () {
            //让id为div1的元素动画移动到800那个位置
            // $('#div1').animate({
            //     left:800,
            //     width:200,
            //     height:200,
            //     opacity:0.5
            // },2000,'linear',function () {
            //     alert('动画执行完毕了');
            // });

            // //让id为div2的元素动画移动到800那个位置
            // $('#div2').animate({
            //     left:800
            // },2000,'swing');

            $('#div1').animate({
                left:800,
                width:200,
                height:200,
                opacity:0.5
            },2000,'linear',function () {
                //既然这里是一个函数，那就可以写任意的代码，那就可以在这里让div1做动画
                $('#div1').animate({
                    left:400,
                    width:300,
                    height:300,
                    top:150,
                    opacity:1
                },2000);
            });

        });
    });
</script>

停止动画和判断是否处于动画状态

停止动画

在这里插入图片描述
jQuery stop() 方法用于在动画或效果完成前对它们进行停止。stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法：$(selector).stop( [clearQueue ] [, jumpToEnd ] )

参数说明：

  • clearQueue 参数，可选值，规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

  • jumpToEnd 参数，可选值，规定是否立即完成当前动画。默认是 false。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style type="text/css">
        #panel,
        #flip {
            padding: 10px;
            text-align: center;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
        }
        #panel {
            padding: 20px;
            display: none;
        }
    </style>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello syl!</div>
<script>
    $(function () {
        $('#flip').click(function () {
            $('#panel').slideDown(5000);
            $('#panel').slideUp(5000);
        });
        $('#stop').click(function () {
            $('#panel').stop();
        });
    });
</script>
</body>
</html>
判断元素是否处于动画状态

在使用 animate() 方法的时候，要避免动画积累而导致的动画与用户的行为不一致，当用户快速在某个元素上执行 animate() 动画时，就会出现动画积累，解决方法是判断元素是否处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加，代码如下：

if (!$(element).is(':animated')) {
  //判断元素是否处于动画状态
  //如果当前没有进行动画，则添加新动画
}
延迟动画

在动画执行的过程中，如果想对动画进行延迟操作，那么可以使用 delay() 方法。

语法为：$(selector).delay(speed, queueName);

参数说明：

  • speed 可选。规定延迟的速度。可能的值：毫秒，“slow”，“fast”。

  • queueName 可选。规定队列的名称。默认是 “fx”，标准效果队列。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
    <button>点击按钮，显示多个的 div 框。</button>
    <br /><br />
    <div id="div1" style="width:90px;height:90px;display:none;background-color:black;"></div>
    <br />
    <div id="div2" style="width:90px;height:90px;display:none;background-color:green;"></div>
    <br />
    <div id="div3" style="width:90px;height:90px;display:none;background-color:blue;"></div>
    <br />
    <div id="div4" style="width:90px;height:90px;display:none;background-color:red;"></div>
    <br />
    <div id="div5" style="width:90px;height:90px;display:none;background-color:purple;"></div>
    <br />
<script>
    $(function () {
        $('button').click(function () {
            //延迟动画
            $('#div1').delay('slow').fadeIn();
            $('#div2').delay('fast').fadeIn();
            $('#div3').delay(800).fadeIn();
            $('#div4').delay(2000).fadeIn();
            $('#div5').delay(4000).fadeIn();
        });
    });
</script>
</body>
</html>

jQuery 对表单、表格的操作

表单应用

单行文本框应用

代码笔记：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    //那就是 IE6 并不支持除超链接元素之外的 :hover 伪类选择符，所以我们可以用 jQuery 来弥补 IE6 对 CSS 支持的不足。
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        body {
            font: normal 12px/17px Arial;
        }

        div {
            padding: 2px;
        }

        input,
        textarea {
            width: 12em;
            border: 1px solid #888;
        }

        .focus {
            border: 1px solid #f00;
            background: #fcc;
        }
    </style>
</head>
<body>
<form action="" method="post" id="regForm">
    <fieldset>
        <legend>个人基本信息</legend>
        <div>
            <label for="username">名称:</label>
            <input id="username" type="text" />
        </div>
        <div>
            <label for="pass">密码:</label>
            <input id="pass" type="password" />
        </div>
        <div>
            <label for="msg">详细信息:</label>
            <textarea id="msg" rows="2" cols="20"></textarea>
        </div>
    </fieldset>
</form>
<script>
    $(function () {
        //当元素失去焦点时发生 blur 事件。当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），发生 focus 事件。
        $(':input').focus(function () {
                $(this).addClass('focus');
            }).blur(function () {
                $(this).removeClass('focus');
            });
    });
</script>
</body>
</html>

多行文本框应用

代码笔记：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            font: normal 12px/17px Arial;
        }

        .msg {
            width: 300px;
            margin: 100px;
        }

        .msg_caption {
            width: 100%;
            overflow: hidden;
            margin-bottom: 1px;
        }

        .msg_caption span {
            display: block;
            float: left;
            margin: 0 2px;
            padding: 4px 10px;
            background: #898989;
            cursor: pointer;
            color: white;
        }

        .msg textarea {
            width: 300px;
            height: 80px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<form action="" method="post">
    <div class="msg">
        <div class="msg_caption">
            <span class="bigger">放大</span>
            <span class="smaller">缩小</span>
            <span class="up">向上</span>
            <span class="down">向下</span>
        </div>
        <div>
            <textarea id="comment" rows="8" cols="20"> </textarea>
        </div>
    </div>
</form>
<script>
    $(function () {
        var $comment = $('#comment'); //获取评论框

        $('.bigger').click(function () {
            //放大按钮绑定单击事件
            if (!$comment.is(':animated')) {
                //判断是否处于动画
                if ($comment.height() < 600) {
                    $comment.animate(
                        {
                            height: '+=60',
                        },
                        400
                    ); //重新设置高度，在原有的基础上加60
                }
            }
        });
        $('.smaller').click(function () {
            //缩小按钮绑定单击事件
            if (!$comment.is(':animated')) {
                //判断是否处于动画
                if ($comment.height() > 60) {
                    $comment.animate(
                        {
                            height: '-=60',
                        },
                        400
                    ); //重新设置高度，在原有的基础上减60
                }
            }
        });
        $('.up').click(function () {
            //向上按钮绑定单击事件
            if (!$comment.is(':animated')) {
                //判断是否处于动画
                $comment.animate(
                    {
                        scrollTop: '-=60',
                    },
                    400
                );
            }
        });
        $('.down').click(function () {
            //向下按钮绑定单击事件
            if (!$comment.is(':animated')) {
                $comment.animate(
                    {
                        scrollTop: '+=60',
                    },
                    400
                );
            }
        });
    });
</script>
</body>
</html>

复选框应用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<form method="post" action="">
    你喜欢的季节是什么？
    <br />
    <input type="checkbox" name="items" value="春天" />春天
    <input type="checkbox" name="items" value="夏天" />夏天
    <input type="checkbox" name="items" value="秋天" />秋天
    <input type="checkbox" name="items" value="冬天" />冬天
    <br />
    <input type="button" id="CheckedAll" value="全　选" />
    <input type="button" id="CheckedNo" value="全不选" />
    <input type="button" id="CheckedRev" value="反　选" />

    <input type="button" id="send" value="提　交" />
</form>
<script>
    $(function () {
        //全选
        $('#CheckedAll').click(function () {
            $('[name=items]:checkbox').attr('checked', true);
        });
        //全不选
        $('#CheckedNo').click(function () {
            $('[type=checkbox]:checkbox').attr('checked', false);
        });
        //反选
        $('#CheckedRev').click(function () {
            $('[name=items]:checkbox').each(function () {
                //jQuery写法
                //$(this).attr("checked", !$(this).attr("checked"));
                //$(this).prop("checked", !$(this).prop("checked"));

                //原生js写法
                this.checked = !this.checked;
            });
        });
        //输出值
        $('#send').click(function () {
            var str = '你选中的是：\r\n';
            $('[name=items]:checkbox:checked').each(function () {
                str += $(this).val() + '\r\n';
            });
            alert(str);
        });
    });
</script>
</body>
</html>

下拉框应用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div.centent {
            float: left;
            text-align: center;
            margin: 10px;
        }

        span {
            display: block;
            margin: 2px 2px;
            padding: 4px 10px;
            background: #898989;
            cursor: pointer;
            font-size: 12px;
            color: white;
        }
    </style>
</head>
<body>
<div class="centent">
<!--    删除追加可以用 appendTo() 方法直接完成。-->
    <select multiple="multiple" id="select1" style="width:100px;height:160px;">
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
        <option value="4">选项4</option>
        <option value="5">选项5</option>
        <option value="6">选项6</option>
        <option value="7">选项7</option>
    </select>
    <div>
        <span id="add">选中添加到右边&gt;&gt;</span>
        <span id="add_all">全部添加到右边&gt;&gt;</span>
    </div>
</div>

<div class="centent">
    <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
        <option value="8">选项8</option>
    </select>
    <div>
        <span id="remove">&lt;&lt;选中删除到左边</span>
        <span id="remove_all">&lt;&lt;全部删除到左边</span>
    </div>
</div>
<script>
    $(function () {
        //移到右边
        $('#add').click(function () {
            //获取选中的选项，删除并追加给对方
            $('#select1 option:selected').appendTo('#select2');
        });
        //移到左边
        $('#remove').click(function () {
            $('#select2 option:selected').appendTo('#select1');
        });
        //全部移到右边
        $('#add_all').click(function () {
            //获取全部的选项,删除并追加给对方
            $('#select1 option').appendTo('#select2');
        });
        //全部移到左边
        $('#remove_all').click(function () {
            $('#select2 option').appendTo('#select1');
        });
        //双击选项
        $('#select1').dblclick(function () {
            //绑定双击事件
            //获取全部的选项,删除并追加给对方
            $('option:selected', this).appendTo('#select2'); //追加给对方
        });
        //双击选项
        $('#select2').dblclick(function () {
            $('option:selected', this).appendTo('#select1');
        });
    });
</script>
</body>
</html>

表单验证

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<form method="post" action="">
    <div class="int">
        <label for="username">用户名:</label>
        <input type="text" id="username" class="required" />
    </div>
    <div class="int">
        <label for="email">邮箱:</label>
        <input type="text" id="email" class="required" />
    </div>
    <div class="int">
        <label for="personinfo">个人资料:</label>
        <input type="text" id="personinfo" />
    </div>
    <div class="sub">
        <input type="submit" value="提交" id="send" /><input type="reset" id="res"/>
    </div>
</form>
<script type="text/javascript">
    $(document).ready(function () {
        //如果是必填的，则加星标识.
        $('form :input.required').each(function () {
            var $required = $("<strong class='high'> *</strong>"); //创建元素
            $(this).parent().append($required); //然后将它追加到文档中
        });
        //文本框失去焦点后
        $('form :input')
            .blur(function () {
                var $parent = $(this).parent();
                $parent.find('.formtips').remove();
                //验证用户名
                if ($(this).is('#username')) {
                    if (this.value == '' || this.value.length < 6) {
                        var errorMsg = '请输入至少6位的用户名.';
                        $parent.append(
                            '<span class="formtips onError">' + errorMsg + '</span>'
                        );
                    } else {
                        var okMsg = '输入正确.';
                        $parent.append(
                            '<span class="formtips onSuccess">' + okMsg + '</span>'
                        );
                    }
                }
                //验证邮件
                if ($(this).is('#email')) {
                    if (
                        this.value == '' ||
                        (this.value != '' && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))
                    ) {
                        var errorMsg = '请输入正确的E-Mail地址.';
                        $parent.append(
                            '<span class="formtips onError">' + errorMsg + '</span>'
                        );
                    } else {
                        var okMsg = '输入正确.';
                        $parent.append(
                            '<span class="formtips onSuccess">' + okMsg + '</span>'
                        );
                    }
                }
            })
            .keyup(function () {
                $(this).triggerHandler('blur');
            })
            .focus(function () {
                $(this).triggerHandler('blur');
            }); //end blur

        //提交，最终验证。
        $('#send').click(function () {
            $('form :input.required').trigger('blur');
            var numError = $('form .onError').length;
            if (numError) {
                return false;
            }
            alert('注册成功,密码已发到你的邮箱,请查收.');
        });

        //重置
        $('#res').click(function () {
            $('.formtips').remove();
        });
    });
</script>
</body>
</html>

表格应用

表格变色

普通的隔行变色
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        table {
            border: 0;
            border-collapse: collapse;
        }

        td {
            font: normal 12px/17px Arial;
            padding: 2px;
            width: 100px;
        }

        th {
            font: bold 12px/17px Arial;
            text-align: left;
            padding: 4px;
            border-bottom: 1px solid #333;
        }

        /* 偶数行样式*/
        .even {
            background: yellow;
        }

        /* 奇数行样式*/
        .odd {
            background: red;
        }

        /* 选中行样式 */
        .selected {
            background: green;
            color: #fff;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>暂住地</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>周杰伦</td>
        <td>男</td>
        <td>台湾</td>
    </tr>
    <tr>
        <td>成龙</td>
        <td>男</td>
        <td>香港</td>
    </tr>
    <tr>
        <td>古天乐</td>
        <td>男</td>
        <td>香港</td>
    </tr>
    <tr>
        <td>PDD</td>
        <td>男</td>
        <td>成都</td>
    </tr>
    <tr>
        <td>大司马</td>
        <td>男</td>
        <td>芜湖</td>
    </tr>
    <tr>
        <td>皮皮虾</td>
        <td>略</td>
        <td>沙滩</td>
    </tr>
    </tbody>
</table>
<script>
    $(function () {
    //注：$("tr:odd") 和 $("tr:even") 选择器索引是从 0 开始的，因此第一行是偶数。另外我们使用 contains 选择器来讲某一行单独设置 CSS 样式。
        $('tbody>tr:odd').addClass('odd'); //先排除第一行thead,然后给奇数行添加样式
        $('tbody>tr:even').addClass('even'); //先排除第一行thead,然后给偶数行添加样式
        $("tr:contains('PDD')").addClass('selected');
    });
</script>
</body>
</html>
单选框控制表格行高亮
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style type="text/css">
        table {
            border: 0;
            border-collapse: collapse;
        }

        td {
            font: normal 12px/17px Arial;
            padding: 2px;
            width: 100px;
        }

        th {
            font: bold 12px/17px Arial;
            text-align: left;
            padding: 4px;
            border-bottom: 1px solid #333;
        }

        /* 偶数行样式*/
        .even {
            background: yellow;
        }

        /* 奇数行样式*/
        .odd {
            background: red;
        }

        /* 选中行样式 */
        .selected {
            background: green;
            color: #fff;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>暂住地</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>周杰伦</td>
        <td>男</td>
        <td>台湾</td>
    </tr>
    <tr>
        <td>成龙</td>
        <td>男</td>
        <td>香港</td>
    </tr>
    <tr>
        <td>古天乐</td>
        <td>男</td>
        <td>香港</td>
    </tr>
    <tr>
        <td>PDD</td>
        <td>男</td>
        <td>成都</td>
    </tr>
    <tr>
        <td>大司马</td>
        <td>男</td>
        <td>芜湖</td>
    </tr>
    <tr>
        <td>皮皮虾</td>
        <td>略</td>
        <td>沙滩</td>
    </tr>
    </tbody>
</table>
<script type="text/javascript">
    $(document).ready(function () {
        $('tbody>tr:odd').addClass('odd'); //先排除第一行thead,然后给奇数行添加样式
        $('tbody>tr:even').addClass('even'); //先排除第一行thead,然后给偶数行添加样式
        $('tbody>tr').click(function () {
            $(this)
                .addClass('selected')
                .siblings()
                .removeClass('selected')
                .end()
                .find(':radio')
                .attr('checked', true);
        });
        // 如果单选框默认情况下是选择的，则高色.
        // $('table :radio:checked').parent().parent().addClass('selected');
        //简化:parent()方法是逐步向父节点获取相应的元素，可以使用parents()方法直接获取
        $('table :radio:checked').parents('tr').addClass('selected');
        //通过has选择器再简化:
        //$('tbody>tr:has(:checked)').addClass('selected');

        //注：示例代码中我们使用了 end() 方法，当前对象是 $(this)，当进行 addClass('selected') 操作时，
        // 对象并没有发生变化，当执行 siblings().removeClass('selected') 操作时，
        // 对象已经变成了 $(this).siblings(),因此后面的的操作都是针对这个对象的，
        // 如果需要重新返回到 $(this) 对象，我们就可以使用 end() 方法。
        // 这样后面的 .find(':radio').attr('checked', true);
        // 操作就是 $(this).find(':radio').attr('checked', true);

    });
</script>
</body>
</html>
复选框控制表格行高亮
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        table {
            border: 0;
            border-collapse: collapse;
        }

        td {
            font: normal 12px/17px Arial;
            padding: 2px;
            width: 100px;
        }

        th {
            font: bold 12px/17px Arial;
            text-align: left;
            padding: 4px;
            border-bottom: 1px solid #333;
        }

        /* 偶数行样式*/
        .even {
            background: yellow;
        }

        /* 奇数行样式*/
        .odd {
            background: red;
        }

        /* 选中行样式 */
        .selected {
            background: green;
            color: #fff;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>暂住地</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>周杰伦</td>
        <td>男</td>
        <td>台湾</td>
    </tr>
    <tr>
        <td>成龙</td>
        <td>男</td>
        <td>香港</td>
    </tr>
    <tr>
        <td>古天乐</td>
        <td>男</td>
        <td>香港</td>
    </tr>
    <tr>
        <td>PDD</td>
        <td>男</td>
        <td>成都</td>
    </tr>
    <tr>
        <td>大司马</td>
        <td>男</td>
        <td>芜湖</td>
    </tr>
    <tr>
        <td>皮皮虾</td>
        <td>略</td>
        <td>沙滩</td>
    </tr>
    </tbody>
</table>
<script>
    $(function () {
        $('tbody>tr:odd').addClass('odd'); //先排除第一行thead,然后给奇数行添加样式
        $('tbody>tr:even').addClass('even'); //先排除第一行thead,然后给偶数行添加样式
        $('tbody>tr').click(function () {
            if ($(this).hasClass('selected')) {
                $(this)
                    .removeClass('selected')
                    .find(':checkbox')
                    .attr('checked', false);
            } else {
                $(this)
                    .addClass('selected')
                    .find(':checkbox')
                    .attr('checked', true);
            }
        });
        // 如果复选框默认情况下是选择的，则高色.
        // $('table :checkbox:checked').parent().parent().addClass('selected');
        //简化:
        $('table :checkbox:checked').parents('tr').addClass('selected');
        //$('tbody>tr:has(:checked)').addClass('selected');
    });
</script>
</body>
</html>

表格展开关闭

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style type="text/css">
        table {
            border: 0;
            border-collapse: collapse;
        }

        td {
            font: normal 12px/17px Arial;
            padding: 2px;
            width: 100px;
        }

        th {
            font: bold 12px/17px Arial;
            text-align: left;
            padding: 4px;
            border-bottom: 1px solid #333;
            width: 100px;
        }

        .parent {
            background: red;
            cursor: pointer;
        }

        /* 偶数行样式*/
        .odd {
            background: blue;
        }

        /* 奇数行样式*/
        .selected {
            background: green;
            color: #fff;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>暂住地</th>
    </tr>
    </thead>
    <tbody>
    <tr class="parent" id="row_01">
        <td colspan="3">前端工程师</td>
    </tr>
    <tr class="child_row_01">
        <td>尤雨溪</td>
        <td>男</td>
        <td>上海</td>
    </tr>
    <tr class="child_row_01">
        <td>阮一峰</td>
        <td>男</td>
        <td>上海</td>
    </tr>

    <tr class="parent" id="row_02">
        <td colspan="3">后端工程师</td>
    </tr>
    <tr class="child_row_02">
        <td>张三</td>
        <td>男</td>
        <td>湖南长沙</td>
    </tr>
    <tr class="child_row_02">
        <td>李四</td>
        <td>男</td>
        <td>浙江温州</td>
    </tr>

    <tr class="parent" id="row_03">
        <td colspan="3">运营小姐姐</td>
    </tr>
    <tr class="child_row_03">
        <td>Angelababy</td>
        <td>女</td>
        <td>浙江杭州</td>
    </tr>
    <tr class="child_row_03">
        <td>邓紫棋</td>
        <td>女</td>
        <td>浙江杭州</td>
    </tr>
    </tbody>
</table>
<script>
    $(function () {
        $('tr.parent')
            .click(function () {
                // 获取所谓的父行
                $(this)
                    .toggleClass('selected') // 添加/删除高亮
                    .siblings('.child_' + this.id)
                    .toggle(); // 隐藏/显示所谓的子行
            })
            .click();
    });
</script>
</body>
</html>

表格内容筛选

利用 contains 选择器结合 jQuery 的 filter() 筛选方法，可以实现表格的过滤。

filter() 方法：

  • filter() 方法返回符合一定条件的元素。

  • 该方法让您规定一个条件。不符合条件的元素将从选择中移除，符合条件的元素将被返回。

  • 该方法通常用于缩小在被选元素组合中搜索元素的范围。

  • filter() 方法是与 not() 方法相对的。

语法为：$(selector).filter(criteria,function(index))

参数说明：

  • criteria 可选。规定要从被选元素组合中返回的选择器表达式、jQuery 对象、一个或多个元素。如需规定多个条件，请使用逗号分隔。
  • function(index) 可选。为集合中的每个元素规定要运行的函数。如果返回 true，则保留元素，否则元素将被移除。index - 集合中元素的 index 位置。this 是当前的 DOM 元素。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div>
    <br />
    筛选：
    <input id="filterName" />
    <br />
</div>

<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>暂住地</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>张一</td>
        <td>男</td>
        <td>浙江宁波</td>
    </tr>
    <tr>
        <td>张二</td>
        <td>女</td>
        <td>浙江杭州</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>湖南长沙</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>男</td>
        <td>浙江温州</td>
    </tr>
    <tr>
        <td>李五</td>
        <td>男</td>
        <td>浙江杭州</td>
    </tr>
    <tr>
        <td>李六</td>
        <td>女</td>
        <td>浙江杭州</td>
    </tr>
    <tr>
        <td>王七</td>
        <td>男</td>
        <td>浙江杭州</td>
    </tr>
    <tr>
        <td>王八</td>
        <td>女</td>
        <td>浙江杭州</td>
    </tr>
    <tr>
        <td>王九</td>
        <td>男</td>
        <td>湖南长沙</td>
    </tr>
    </tbody>
</table>
<script>
    $(function () {
        $('#filterName').keyup(function () {
            $('table tbody tr')
                .hide()
                .filter(":contains('" + $(this).val() + "')")
                .show();
        });
    });
</script>
</body>
</html>

其它应用

网页字体大小

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .msg {
            width: 300px;
            margin: 100px;
        }

        .msg_caption {
            width: 100%;
            overflow: hidden;
            margin-bottom: 1px;
        }

        .msg_caption span {
            display: block;
            float: left;
            margin: 0 2px;
            padding: 4px 10px;
            background: #898989;
            cursor: pointer;
            font-size: 12px;
            color: white;
        }

        .msg textarea {
            width: 300px;
            height: 80px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<div class="msg">
    <div class="msg_caption">
        <span class="bigger">放大</span>
        <span class="smaller">缩小</span>
    </div>
    <div>
        <p id="para">
            我爱学习天天向上。我爱学习天天向上。
            我爱学习天天向上。我爱学习天天向上。
            我爱学习天天向上。我爱学习天天向上。
            我爱学习天天向上。我爱学习天天向上。
            我爱学习天天向上。我爱学习天天向上。
            我爱学习天天向上。我爱学习天天向上。
            我爱学习天天向上。我爱学习天天向上。
        </p>
    </div>
</div>
<script>
    $(function () {
        $('span').click(function () {
            var thisEle = $('#para').css('font-size');
            //使用parseInt()方法去掉单位，第二个参数表示进制，这里为十进制
            var textFontSize = parseInt(thisEle, 10);
            //slice()方法返回字符串中从指定的字符开始的一个子字符串，
            // 因为px是两个字符，所以指定字符串应该从倒数第二个字符开始，
            // 在后面设置字体大小时，再把单位拼接上
            var unit = thisEle.slice(-2); //获取单位
            var cName = $(this).attr('class');
            if (cName == 'bigger') {
                //进行限制不能无限防大
                if (textFontSize <= 22) {
                    textFontSize += 2;
                }
            } else if (cName == 'smaller') {
                //进行限制不能无限缩小
                if (textFontSize >= 12) {
                    textFontSize -= 2;
                }
            }
            $('#para').css('font-size', textFontSize + unit);
        });
    });
</script>
</body>
</html>

网页选项卡

网页选项卡也可以叫 tab 栏切换，就是通过点击不同的按钮，显示不同的内容，原理很简单，通过隐藏和显示来切换不同的内容。

代码示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font: 12px/19px Arial, Helvetica, sans-serif;
            color: #666;
        }

        .tab {
            width: 240px;
            margin: 50px;
        }

        .tab_menu {
            clear: both;
        }

        .tab_menu li {
            float: left;
            text-align: center;
            cursor: pointer;
            list-style: none;
            padding: 1px 6px;
            margin-right: 4px;
            background: #f1f1f1;
            border: 1px solid #898989;
            border-bottom: none;
        }

        .tab_menu li.hover {
            background: #dfdfdf;
        }

        .tab_menu li.selected {
            color: #fff;
            background: #6d84b4;
        }

        .tab_box {
            clear: both;
            border: 1px solid #898989;
            height: 100px;
        }

        .hide {
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_menu">
            <ul>
                <li class="selected">春天</li>
                <li>夏天</li>
                <li>秋天</li>
                <li>冬天</li>
            </ul>
        </div>
        <div class="tab_box">
            <div>春天</div>
            <div class="hide">夏天</div>
            <div class="hide">秋天</div>
            <div class="hide">冬天</div>
        </div>
    </div>
    <script>
        $(function () {
            var $div_li = $('div.tab_menu ul li');
            $div_li
                .click(function () {
                    $(this)
                        .addClass('selected') //当前<li>元素高亮
                        .siblings()
                        .removeClass('selected'); //去掉其它同辈<li>元素的高亮
                    var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
                    $('div.tab_box > div') //选取子节点。不选取子节点的话，会引起错误。如果里面还有div
                        .eq(index)
                        .show() //显示 <li>元素对应的<div>元素
                        .siblings()
                        .hide(); //隐藏其它几个同辈的<div>元素
                })
                .hover(
                    function () {
                        //添加光标滑动效果
                        $(this).addClass('hover');
                    },
                    function () {
                        $(this).removeClass('hover');
                    }
                );
        });
    </script>
</body>

</html>

jQuery AJAX

原生 AJAX

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。 它并不是一种单一的技术，而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示，其最大的特点就是异步。

AJAX是一种在无需重新加载整个网页的情况下，能够更新部分页面内容的新方法。

AJAX不是新的编程语言，它是多种技术的综合使用，包含了javascript, dom, css 服务器端技术，servlet, jsp, jdbc 等等，还有json 数据格式。

使用AJAX实现局部刷新。

AJAX核心是 javascript 和 xml（json）：使用javascript操作异步对象XMLHttpRequest，和服务器交换使用json和数据格式。

AJAX 的优势与劣势

优势

  • 不需要插件支持
  • 优秀的用户体验
  • 提高 Web 程序的性能
  • 减轻服务器和带宽的负担

劣势

  • 浏览器对 XMLHttpRequest 对象支持度不足(关于 - XMLHttpRequest 对象稍后会介绍到)
  • 破坏浏览器前进、“后退”按钮的正常功能
  • 对搜索引擎的支持的不足
  • 开发和调试工具的缺乏

全面刷新和局部刷新

1） 全局刷新：使用 form，href 等发起的请求是全局刷新。

用户发起请求，视图改变了，跳转视图，使用新的数据添加到页面。

缺点：

  1. 传递数据量比较大，占用网络的带宽
  2. 浏览器需要重新的渲染整个页面
  3. 用户的体验不是那么好

2）局部刷新：在当前页面中，发起请求，获取数据，更新当前页面的dom对象，对视图部分刷新。

特点：

  1. 数量比较小，在网络中传输速度快
  2. 更新页面内容，是部分更新页面，浏览器不用全部渲染视图
  3. 在一个页面中，可以做多个局部刷新
  4. 从服务器获取的是数据，拿到更新视图

异步对象XMLHttpRequest介绍

异步请求对象：在局部刷新中，使用异步请求对象，在浏览器内部发起请求，获取数据。

异步对象XMLHttpRequest对象：js 中的一种对象，使用js语法创建和使用这个对象。

创建 XMLHttpRequest 对象的语法：var xhr = new XMLHttpRequest();
之后就可以使用xhr对象的属性或者函数，进行异步对象的操作。

使用异步对象实现局部刷新，异步对象主要负责发起请求，传递请求的参数，并从服务器接收数据。

局部刷新需要使用哪些技术：

  1. javascript：创建XMLHttpRequest对象，调用它的属性或者方法
  2. dom：处理dom，更新select的数据
  3. css：处理视图，更新，美化
  4. servet：服务器端技术
  5. 数据格式：json ，它之前是xml

把上面这些技术的综合使用叫做ajax(阿贾克斯)。

异步对象XMLHttpRequest属性和方法

  1. 创建异步对象，使用js的语法
    var xhr = new XMLHttpRequest();
  2. XMLHttpRequest方法
    我们会使用 XMLHttpRequest 对象的 open() 和 send() 方法来将请求发送到服务器。
    1）open（请求方式，服务器端的访问地址，异步还是同步）默认是true异步
    例如：xhr.open("get","loginServlet",true);
    2）send()； 使用异步对象发送请求
方法描述
open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。method: 请求的类型，http 的请求类型，如 GET、POST。url: 请求的服务端路径。async: Boolean 类型，true (异步处理)，false(同步处理)
send(string)将请求发送到服务端。string：仅用于 post 请求。
  1. XMLHttpRequest属性
    readyState属性： 请求的状态
    0：表示创建异步对象时，new XMLHttpRequest();
    1：表示初始异步对象的请求参数。执行open()方法
    2：使用send()方法发送请求
    3：使用异步对象从服务器接受了数据
    4：异步对象接受了数据，并在异步对象内部处理完成后。
    status属性： 网络的状态，和Http的状态码对应
    200：请求成功
    404：服务器资源没有找到
    500：服务器内部代码有错误
    responseText属性： 表示服务器端返回的数据
    例如： var data = xhr.responseText;

在这里插入图片描述

异步对象XMLHttpRequest使用步骤

  1. 使用js创建异步对象
    var xhr = new XMLHttpRequest();
  2. 给异步对象绑定事件。事件名称 onreadystatechange
    onreadystatechange： 当异步对象发起请求，获取了数据都会触发这个事件。这个数据需要指定一个函数，在函数中处理状态的变化。
    例如： button增加单击事件onclick
    xhr绑定事件
    xhr.onreadystatechange=function(){ 当事件发生时执行的代码 }
    在绑定事件中做什么，根据readyState值做请求的处理
xhr.readystatechange=function(){
	if(xer.readyState==4 && xhr.status==200){
	从服务器获取了数据，更新当前页面的dom对象，完成请求的处理
	var data = xhr.responseText;
	更新dom对象
	document.getElementById("#mydiv").innerHTML = data;
	}
}

  1. 初始请求的参数，执行open()函数
    xhr.open("get","loginServlet",true);

  2. 发送请求，执行send()
    xhr.send()

在这里插入图片描述

Pulseum
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery 学习笔记
Dshuai7191的博客
08-26 360
演示通过 animate() 方法预定义 "hide", "show", "toggle" 值。演示更多 jQuery animate() 方法实例 (多个 animate() 回调).jQuery toggle() 用于切换 hide() 和 show() 方法。使用jQuery text() 和 html() 方法获取内容。演示 jQuery focus() 和 blur() 事件。演示jQuery hide() 和 show() 方法。演示简单的 jQuery animate() 方法。...
JQuery学习笔记
热爱编程、热爱生活、热爱探索
08-21 1201
万字详解带你快速了解并上手JQuery，同时文中还参杂一些使用JQuery的经验，帮助你提前避坑
jQuery——jQuery学习笔记(完整版）
Bonsoir777的博客
09-16 1321
本文主要介绍有关jQuery的相关知识点
jquery学习笔记
05-16
《jQuery学习笔记详解》 jQuery，作为一款广泛应用于Web开发的JavaScript库，以其简洁的API、强大的功能和广泛的社区支持，极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。这篇学习笔记将深入探讨...
jQuery学习笔记（一）
07-13
**jQuery学习笔记（一）** 在深入探讨jQuery之前，我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
Jquery学习笔记分享
11-24
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
Spark的一些高级用法
Casual_Lei的博客
09-05 1003
通过 DataFrame、SQL、持久化、UDF 和流处理，你可以更高效地处理不同场景下的大数据任务。在实际应用中，结合合适的存储和优化策略，可以显著提升 Spark 作业的性能。
jQuery基础2-css的操作-事件-属性-Ajax-DOM操作
m0_64450406的博客
09-06 1138
新列表项
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 579
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
基于Spring Boot构建一个点餐系统
嵌入式行业打工人，不定期更新博客。
09-08 942
这个示例提供了一个非常基础的框架，你可以在此基础上扩展更多的功能，如用户认证、购物车管理、支付接口等。在实际开发过程中，还需要考虑诸如错误处理、事务管理、日志记录等方面的问题。此外，确保所有的API调用都是安全的，并且正确处理用户的输入数据，防止SQL注入等安全风险。如有疑问和需求，可以私信联系我。
构建高效 Python Web API：RESTful 设计与 GraphQL 实践
weixin_52392194的博客
09-11 920
在现代 Web 开发中，API 是前后端通信的核心枢纽，设计一个高效且易于扩展的 API 是保证系统良好运行的基础。本文详细探讨 RESTful API 的设计准则，如何生成 API 文档，GraphQL 的应用，以及如何在 FastAPI 和 Django REST Framework 中实现分页、过滤、认证等功能。
2024伊语IM即时通讯源码/im商城系统/纯源码IM通讯系统安卓+IOS前端纯原生源码
翎风世界
09-10 481
2.4 node安装wget "https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz"资料参考地址：https://www.1234f.com/sj/GitHub/qtym/20240910/677.html。源码下载地址：https://www.123pan.com/s/LA1bVv-5l5Vv。备用下载地址：http://pan.1234f.com:5212/s/5PrS4。api.xxx.com接口。im.xxx.com通讯。
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项
weixin_41899098的博客
09-06 1067
环境：vue3 + vuetify3 + unplugin-vue-router是怎么创建这个项目的：选择它推荐的设置（Recommend）
一文读懂 JS 中的 Set 结构
最新发布
沐爸的博客
09-11 577
Set 如何使用？和 Map 有什么区别？有哪些属性和方法？又有哪些使用场景？WeakMap 又是什么？
前端技术演进与未来发展趋势探究
生活的真谛从来都不在别处 就在日常一点一滴的奋斗里
09-07 1986
本文深入探讨了前端领域的发展历程、主要技术及未来趋势。从前端技术的起源与早期发展，到动态页面的崛起，再到如今各种先进技术的涌现，我们见证了前端技术的不断演进。在发展历程方面，前端从最初的静态网页逐渐发展为复杂的动态交互界面。早期浏览器的竞争推动了技术的进步，而随着互联网的发展，后端框架的出现解决了后台代码庞大臃肿的问题。前端技术也从“网页三剑客”演变为新的“三剑客”，即 HTML、CSS 和 JavaScript，同时各种前端框架不断涌现，大大提高了开发效率和质量。
Vue响应式进阶常用API学习
weixin_44072254的博客
09-06 877
reactive()的浅层浅层响应式，和reactive()不同，这里没有深层级的转换：一个浅层响应式对象里只有根级别的属性是响应式的。readonly()的浅层作用形式,只有根级别是只读不可更改的，根级别以下的可更改，只是视图不会更新，但值改变了。shallowRef是浅层引用,只会跟踪原始对象的引用,不会跟踪原始对象的属性。创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。的副作用，这通常在对浅引用的内部值进行深度变更后使用。代理对象，并返回该代理对象对应的原始对象。
Jquery学习笔记分享：优势应用及选择器详解
在这里，我们将分享一些 Jquery 学习笔记，希望能够帮助广大开发者更好地掌握和运用 JQuery。 在第一章中，我们首先了解了 JQuery 的概述。JQuery 的基本作用主要是简化 JavaScript 编程，提高开发效率，减少代码量...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值