AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Javascript知识【jQuery-基本操作】上篇

2022-08-23 126
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本篇主要主要介绍：Jquery概念，以及使用和JS的互转，页面加载完成时的实现

 1，jQuery-基本操作【阶段重点】

1.1：概念引入

jQuery是一个JavaScript框架。底层封装了大量JavaScript代码。

它兼容CSS3，还兼容各种浏览器，文档说明很全，应用详细，成熟插件多。

image.gif编辑

1.2：导入使用

image.gif编辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
           alert("xxx");
        });
    </script>
</head>
<body>

</body>
</html>

若导入失败，页面没有弹框，并且控制台展示如下报错：

image.gif编辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        function run1() {
            //js
            //alert(document.getElementById("d1").innerHTML);
            //jq
            //alert(jQuery("#d1").html());
            alert($("#d1").html());
        }
    </script>
</head>
<body>
    <div id="d1">我是内容体，呵呵</div>
    <input type="button" value="点我获取div内容体" onclick="run1();"/>
</body>
</html>

基本语法：jQuery（选择器）；$(选择器)；

建议使用$替代jQuery英文；

1.3：与JS互转

JS和JQ对象一般不能进行混用。

JS有JS的属性和方法

JQ有JQ的属性和方法

开发中，为了使用JS方法和属性，我们也会选择将jQuery对象转回JS对象。

格式：js对象=jQuery对象[0]

开发中，我们为了方便开发，会将JS对象转为jQuery对象使用；

格式：jQuery对象=$(js对象)；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        function run1() {
            //js
            var s1 = document.getElementById("d1");
            //转jq
            var s2 = $(s1);
            //转js
            var s3 = s2[0];
            alert(s3.innerHTML);
        }
    </script>
</head>
<body>
    <div id="d1">我是内容体，呵呵</div>
    <input type="button" value="点我获取div内容体" onclick="run1();"/>
</body>
</html>

小结：

在开发中，经常涉及到js和jq混用，因为Js有js的用法，jq有jq的用法，必须涉及到相互转换。

Js----->jq: $(js对象)

Jq---->js: jq对象[0]

注：jQuery对象只能调用jQuery方法和属性

JS对象只能调用JS方法和属性；

1.4：页面加载完成时

JS：只能设置一次，设置多次是覆盖<boby onload="">   window.onload = function(){};

JQ:可以设置多次，设置多次是追加

image.gif编辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        //你好 再见
        /*$(document).ready(function () {
            alert("你好");
        });
        $(document).ready(function () {
            alert("再见");
        });*/

        $(function () {
            alert("你好");
        });
        $(function () {
            alert("再见");
        });
    </script>
</head>
<body>

</body>
</html>
文章标签：
JavaScript
前端开发
关键词：
jQuery Javascript
JavaScript jquery
JavaScript基本操作
jQuery基本操作
JavaScript jquery基本操作
爱吃豆的土豆
目录
相关文章
神明木佑
|
1月前
|
JavaScript 前端开发 开发者
jQuery：JavaScript库的瑰宝
jQuery：JavaScript库的瑰宝
神明木佑
43 3
Star时光
|
1月前
|
JavaScript 前端开发 API
深入了解jQuery：快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery：快速、高效的JavaScript库
Star时光
15 0
cqtianxin1
|
1月前
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
cqtianxin1
14 0
派大鑫的工作室
|
1月前
|
JavaScript 前端开发
JavaScript三级联动jQuery写法
JavaScript三级联动jQuery写法
派大鑫的工作室
17 0
派大鑫的工作室
|
1月前
|
JavaScript 前端开发
JavaScript 树状菜单栏jQuery写法
JavaScript 树状菜单栏jQuery写法
派大鑫的工作室
14 0
半截诗
|
1月前
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
半截诗
59 0
lvbb66
|
3月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
lvbb66
38 2
土木林森
|
3月前
|
Devops 持续交付 测试技术
JSF遇上DevOps：开发流程将迎巨变？一篇文章带你领略高效协同的魅力！
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces（JSF）开发中融入DevOps文化，通过持续集成与部署、自动化测试、监控与日志记录及反馈机制，提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法，并强调了持续改进的重要性。
土木林森
39 0
土木林森
|
3月前
|
JavaScript 前端开发 API
从零开始学表单操作，jQuery 与原生 JavaScript 完全指南，带你轻松掌握网页交互关键！
【8月更文挑战第31天】在网页开发中，表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入，都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单，包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性，但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
土木林森
39 0
异步社区
|
Web App开发 JavaScript 前端开发
《jQuery与JavaScript入门经典》——2.7　问与答
就Cookie调试而言，您只需知道是否启用了Cookie、浏览器设置了哪些Cookie、这些Cookie的值是什么以及它们什么时候到期。这些信息都可在Firebug的Cookies选项卡中找到。Chrome和Internet Explorer在开发人员控制台中提供了类似的功能。
异步社区
1144 0

热门文章

最新文章

  • 1
    jquery还原含有rowspan、colspan的table
  • 2
    从零开始学习jQuery (三) 管理jQuery包装集
  • 3
    jquery.cookie中的操作
  • 4
    一起谈.NET技术，抛弃WebService，在.NET4中用 jQuery 调用 WCF
  • 5
    jquery datepicker
  • 6
    Jquery 超炫的导航效果
  • 7
    JQuery利用sort对DOM元素进行排序
  • 8
    jQuery从html代码中获取对应标签的写法
  • 9
    JQuery利用sort对DOM元素进行排序
  • 10
    jquery 遍历dom元素
  • 1
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    106
  • 2
    JavaScript 数组方法概览
    37
  • 3
    在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
    58
  • 4
    JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式
    46
  • 5
    JavaScript 提供了多种方法来操作 DOM（文档对象模型）
    47
  • 6
    JavaScript的垃圾回收机制通过标记-清除算法自动管理内存
    56
  • 7
    JavaScript 的垃圾回收机制有一些潜在的缺点
    40
  • 8
    nbcio-vue下载安装后运行报错，diagram-js没有安装
    59
  • 9
    了解JavaScript的垃圾回收机制
    39
  • 10
    uni-app和Vue.js二者之间有什么区别？
    64

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • jQuery开发教程
  • HTML5 新特性教程
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • CSS基础教程
    • 下一篇
    无影云桌面