JQuery入门

最新推荐文章于 2024-07-25 09:24:40 发布
最新推荐文章于 2024-07-25 09:24:40 发布
阅读量128 收藏
点赞数
分类专栏： Java web 文章标签： jquery javascript js java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014520586/article/details/107142122
版权

JQuery入门

基本概念

一个javascript框架,
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。
jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
JavaScript框架: 本质上就是一些 .js 文件, 封装了javascript的原生代码而已

快速入门

  1. 下载JQuery
    https://jquery.com/download/
    • 版本说明
      • 1.x版本: 兼容ie678, 使用最为广泛, 官方只做bug维护, 功能不再新增, 一般项目使用1.x版本就可以, 最终版本: 1.12.4(2016年5月20日)
      • 2.x版本: 不兼容ie678, 很少使用, 官方只做bug维护, 功能不再新增, 最终版本: 2.2.4(2016年5月20日)
      • 3.x版本: 不兼容ie678, 只支持最新的浏览器, 除非特殊要求, 一般不会使用3.x版本, 很多老的jQuery插件不支持这个版本, 目前该版本是官方主要更新维护的版本, 最新版本: 3.2.1(2017年3月20日)
    • jquery-xxx.js与jquery-xxx.min.js的区别
      • jquery-xxx.js: 开发版本, 给程序员看的, 有良好的缩进和注释, 体积大
      • jquery-xxx.min.js: 生产版本, 程序中使用, 没有缩进, 体积小, 程序加载更快
  2. 导入JQuery文件
    将下载的js文件放入项目的某个文件夹, 这里放在了js文件夹
    <script src="js/jquery-3.5.1.js"></script>
  3. 使用js文件(获取对象)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery快速入门</title>
    <script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>

<script>
    var div1 = $("#div1");
    alert(div1.html());

    var div2 = $("#div2")
    alert(div2.html())
</script>

</body>
</html>

JQuery对象和JavaScript对象区别与转换

jquery对象在操作时更加方便
jquery对象和js对象的方法不通用
两者相互转换
jquery -> js: jquery对象[索引] 或者 jquery对象.get(索引), 例如
js -> jquery: $(js对象)
实例:

<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>

<script>
    var divs = document.getElementsByTagName("div");
    var $divs = $("div");
    // alert(divs.length);
    // alert($divs.length);
    for (var i = 0; i < divs.length; i++) {
        divs[i].innerHTML = "aaa"
    }

    $divs.html(("bbb"));
    $(divs).html("ccc");
    $divs[0].innerHTML="ddd";
    $divs.get(1).innerHTML="ddd";
    //jquery对象在操作时更加方便
    //jquery对象和js对象的方法不通用
    //两者相互转换
    /*
    * jquery -> js: jquery对象[索引] 或者 jquery对象.get(索引)
    * js -> jquery: $(js对象)
    * */
</script>

</body>

选择器

筛选具有相似特征的元素(标签)

基本语法学习

事件绑定&入口函数(window.onload)

<div id="div1">div1...</div>
<div id="div2">div2...</div>
<input type="button" value="点我" id="b1">
<script>
//给b1按钮添加单机事件
    //给b1按钮添加单机事件
    window.onload = function () {
        document.getElementById("b1").onclick = function () {
            alert("abc");
        };
    };

//用jquery方式写: (两种写法效果相同)
    //jqeury入口函数(DOM文档加载完成后执行该函数中的代码)
    $(function () {
        $("#b1").click(function () {
            alert("abc");
        });
    });
    </script>

window.onload和$(function () {
    })的区别: window.onload只能定义一次, 如果定义多次, 后面的会将前面的覆盖
    例如: 定义了
    window.onload = function1
    window.onload = function2
    function2会覆盖function1

样式控制

    $("#div1").css("background-color", "red");
    $("#div1").css("backgroundColor", "pink");

将background-color中 - 后面的字母变为大写, 可以被IDE识别, 可以检测是否有拼写错误

jQuery选择器

https://www.w3cschool.cn/jquery/xs75ofnl.html

基本选择器
标签选择器(元素选择器)

$("html标签名") -> 获得所有匹配标签名称的元素

id选择器

$("#id属性值") -> 获得指定id的元素

类选择器

$(".class属性值") -> 获得指定class属性元素

并集选择器

$("选择器1, 选择器2...") -> 获得多个选择器选中的元素

层级选择器
后代选择器

$("A B") -> 获得A元素内的所有B元素

子选择器

$("A > B") -> 获得A元素内的所有B子元素

属性选择器

https://www.w3cschool.cn/jquery/xs75ofnl.html
https://www.w3cschool.cn/yfmth7/qfg9mozt.html

DOM操作

  1. 内容操作
    • html(): 获取/设置元素的标签体内容(包括html标签)
    • text(): 获取/设置元素的标签体纯文本内容(不包括html标签)
    • val(): 获取/设置元素的value属性值
  2. 属性操作
    • 通用属性操作

      • attr(): 获取/设置元素的属性

      • removeAttr(): 删除属性

      • prop(): 获取/设置元素的属性

      • removeProp(): 删除属性
        attr和prop的区别:

          如果操作的是元素的固有属性, 建议使用prop
  如果操作的是元素的自定义属性, 使用attr, select使用attr获取不到
    • class属性操作
      • addClass(): 添加class属性值
      • removeClass(): 删除class属性值
      • toggleClass(): 切换class属性值
        toggleClass(“one”): 判断如果元素对象上存在class=“one”, 则将属性值one删除掉, 如果元素对象上不存在class=“one”, 则添加该属性
  3. CRUD操作
    • append(): 父元素将子元素追加到末尾, 对象1.append(对象2): 将对象2添加到对象1内部, 在末尾
    • prepend() : 父元素将子元素追加到开头, 对象1.prepend(对象2): 将对象2添加到对象1内部, 在开头
    • appendTo(): 对象1.appendTo(对象2): 将对象1添加到对象2内部, 在末尾
    • prependTo(): 对象1.appendTo(对象2)`: 将对象1添加到对象2内部, 在开头
    • after(): 添加元素到对应元素后边: 对象1.after(对象2): 将对象2添加到对象1后面, 对象1和对象2是兄弟关系
    • before(): 添加元素到对应元素前边: 对象1.after(对象2): 将对象2添加到对象1前面, 对象1和对象2是兄弟关系
    • insertAfter(): 对象1.insertAfter(对象2): 将对象1添加到对象2后面, 对象1和对象2是兄弟关系
    • insertBefore():对象1.insertBefore(对象2): 将对象1添加到对象2前面, 对象1和对象2是兄弟关系
    • remove(): 移除元素, 对象.remove(): 移除改对象
    • empty(): 清除元素的所有后代元素, 对象.empty(): 将对象的后代元素全部清空, 但是保留当前对象以及其属性节点

jQuery动画

https://www.w3cschool.cn/jquery/pxu61f21.html

jQuery遍历

  1. js方式获取对象
<body>
<script>
    //1. js方式
    $(function () {
        //1. 获取所有的ul下的li
        var cities = $("#city li");
        for (var i = 0; i < cities.length; i ++) {
            alert(i + ":" + cities[i].innerHTML);
        };
    });
</script>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>

</body>
  1. jquery对象.each(callback)
<body>
<script>
    //1. js方式
    $(function () {
        // //1. 获取所有的ul下的li
        // var cities = $("#city li");
        // for (var i = 0; i < cities.length; i ++) {
        //     alert(i + ":" + cities[i].innerHTML);
        // };
        
        //2. jq对象.each(callback)
        cities.each(function (index, element) {
            //获取li对象 第一种方式 this
            // alert(this.innerHTML);
            //获取li对象, 第二种方式 在回调桉树中定义函数 index(索引) element元素对象)
            alert(index + ":" + element.innerHTML)
        })
    });
</script>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>

循环的break/continue用法
js方式:

    //1. js方式
    $(function () {
        //1. 获取所有的ul下的li
        var cities = $("#city li");
        for (var i = 0; i < cities.length; i ++) {
            if ("上海" == cities[i]) {
                break;
                // continue;
            }
            alert(i + ":" + cities[i].innerHTML);
        };

jquery方式:

        // 2. jq对象.each(callback)
        cities.each(function (index, element) {
            //获取li对象 第一种方式 this
            // alert(this.innerHTML);
            //获取li对象, 第二种方式 在回调桉树中定义函数 index(索引) element元素对象)
            if ("上海" == element.innerHTML) {
                //如果当前function返回为false, 则结束循环(break)
                //如果当前function返回为true, 则继续下次循环(break)
                return false;
            }
            alert(index + ":" + element.innerHTML)
        });
  1. $.each(object, [callback])
        //3. $.each(object, [callback])
        $.each(cities, function () {
            alert($(this).html())
        })
  1. for…of: jquery3.0版本之后提供的方式
        //4. for...of
        for (li of cities) {
            alert($(li).html())
        }

事件绑定

  1. jquery标准的事件绑定方式
    jquery对象.事件方法(回调函数)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定事件</title>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            // 简化书写: .fn1().fn2()...
            $("#name").click(function () {
                alert("我被点击了");
            }).mouseover(function () {
                alert("鼠标来了");
            });
        });
    </script>
</head>
<body>
<input id="name" type="button" value="绑定点击事件">
</body>
</html>
  1. on绑定事件/off解除绑定
    jquery对象.on("事件名称", 回调函数)
    jquery对象,off("事件名称")
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定事件</title>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //1. 使用on给按钮绑定单击事件 click
            $("#btn1").on("click", function () {
                alert("我被点击了");
            });
            $("#btn2").click(function () {
                //2. 使用off解除btn1的单击事件
                $("#btn1").off("click");
                $("#btn1").off();//将组件上所有事件全部解绑
            })
        });

    </script>
</head>
<body>

<input id="btn1" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">

</body>
</html>
  1. 事件切换: toggle
    jquery对象.togge(fn1, fn2...)
    当点击jquery对象对应的组件后, 会执行fn1, 第二次点击会执行fn2…
    注意: 1.9版本以后, .toggle()方法删除, 需要使用jquery migrate(迁移)插件回复此功能
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件切换</title>
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/jquery-migrate-1.0.0.js"></script>
    <script>
        $(function () {
            //1. 获取按钮, 调用toggle方法
            $("#btn1").toggle(function () {
                //改变div背景色为green
                $("#mydiv").css("backgroundColor","green");
            }, function () {
                $("#mydiv").css("backgroundColor","pink");
            })
        });

    </script>
</head>
<body>
<input id="btn1" type="button" value="事件切换">
<div id="mydiv" style="width: 100px; height: 100px;background-color: blue">div</div>
</body>
</html>

插件增强jQuery功能

实现方式

  1. $.fn.extend(object)
    增强通过jQuery获取的对象的功能 $("#id")
    实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象方法扩展</title>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        //1. 定义jQuery对象插件
        $.fn.extend({
            //定义check方法, 所有的jquery对象都可以调用该方法
            check:function () {
                //让复选框选中
                //this: 调用该方法的jquery对象
                this.prop("checked", true);
            },
            uncheck:function () {
                //让复选框选中
                //this: 调用该方法的jquery对象
                this.prop("checked", false);
            }
        });

        $(function () {
            //获取按钮
            $("#btn-check").click(
                function () {
                    $("input[type='checkbox']").check();
                }
            );
        });

        $(function () {
            //获取按钮
            $("#btn-uncheck").click(
                function () {
                    $("input[type='checkbox']").uncheck();
                }
            )
        })

    </script>
</head>
<body>
<input type="button" value="点击选中复选框" id="btn-check">
<input type="button" value="点击取消选中复选框" id="btn-uncheck">

<div>
    <input type="checkbox" value="football">足球
    <input type="checkbox" value="basketball">篮球
    <input type="checkbox" value="volleyball">排球
</div>

</body>
</html>
  1. $.extend(object)
    增强jQuery对象自身的功能 $/jQuery
    实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局方法扩展</title>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $.extend({
            max:function (a, b) {
                //返回两个数中的较大值
                return a >= b? a: b;
            },
            min:function (a, b) {
                //返回两个数中的较小值
                return a <= b? a: b;
            }
        });

        //调用全局方法
        var max = $.max(4, 3);
        alert(max);
        var min = $.min(4, 3);
        alert(min);
    </script>
</head>
<body>

</body>
</html>
大太阳的的
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery入门
08-09
jQuery入门1 适合零基础初学者，讲解详细，易于理解，
jQuery 入门讲解1
10-30
本文将深入讲解jQuery的入门知识，包括其优点、构造函数以及一些基本的DOM操作方法。 首先，jQuery 的优点是多方面的。它的体积小巧，例如，版本1.2.3只有15kb，这使得它在网页加载速度方面表现优秀。jQuery 提供了...
jQuery入门 构造函数
10-29
jQuery 是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画设计以及Ajax交互。在本文中，我们将深入探讨jQuery的构造函数及其相关的功能。 首先，jQuery的构造函数是创建jQuery对象的关键，它...
jquery入门
03-24
**jQuery 入门详解** jQuery 是一个高效、简洁且功能丰富的 JavaScript 库，它极大地简化了 JavaScript 对HTML 文档的遍历、事件处理、动画设计和Ajax交互。jQuery 的核心理念是“Write Less, Do More”，即用更少...
JQuery 入门实例1
10-29
JQuery 入门实例 大家可以参考下。
jQuery入门2
08-09
jQuery入门2，适合零基础初学者，讲解详细，易于理解，
jquery 入门demo
08-06
《jQuery入门Demo详解》 jQuery，作为一款广泛应用于前端开发的JavaScript库，以其简洁的API、强大的功能和广泛的浏览器兼容性赢得了开发者们的喜爱。对于初学者来说，掌握jQuery的基础知识和常见操作是步入Web开发...
jQuery入门知识简介
10-29
seektanjQuery是最近比较火的一个JavaScript库，从del.icio.us/上相关的收藏可见一斑。
Jquery入门
07-20
Jquery入门
jQuery入门基础知识学习指南
10-23
本文将深入介绍jQuery入门的基础知识，帮助初学者快速掌握这个强大的工具。 首先，理解jQuery的核心概念——选择元素并进行操作。jQuery支持CSS选择器，包括ID选择器（`#myId`）、类选择器（`.myClass`）、属性选择...
JQuery入门，JQuery总结
01-05
**jQuery入门与总结** jQuery是一个深受开发者喜爱的JavaScript库，它的出现极大地方便了JavaScript的编程，使得HTML元素的选择、操作和隐藏等任务变得更加简单。jQuery的核心理念是"write less, do more"，即用更...
jQuery入门到精通
11-01
jQuery入门到精通，前端开发技术，前端javaScript
jQuery入门jQuery入门
04-26
jQuery入门,jQuery入门,jQuery入门,jQuery入门
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 459
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
Next.js静态导出与动态路由优化
天涯学馆
07-20 1068
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1171
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
lph159的博客
07-24 1024
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 293
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值