jquery 简介

最新推荐文章于 2024-01-13 08:37:19 发布

o_瓜田李下_o

最新推荐文章于 2024-01-13 08:37:19 发布

阅读量214

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/weixin_43931625/article/details/107660002

版权

jquery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

jquery 简介

官网：https://jquery.com/

********************

导入 jquery

index.html

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/jquery/jquery-3.5.1.min.js"></script>
</head>
<script>
    $(function () {
        alert("hello world");
    })
</script>

<body>

</body>
</html>

********************

$(function() { }) 与 window.onload=function() { }

$(function(){})：DOM元素加载完成后，即可执行jquery操作

window.onload：所有DOM及文本、图片等加载完成后，才可执行相关操作

$(function(){})：可同时编写多个，都会执行

window.onload：同时编写多个，只会执行最后一个

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/jquery/jquery-3.5.1.min.js"></script>
</head>
<script>
    $(function () {
        alert("hello world");
    });

    $(function () {
        alert("hello world2");
    })
</script>

<body>

</body>
</html>

执行页面，会接连弹出两个提示框

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/jquery/jquery-3.5.1.min.js"></script>
</head>
<script>
    window.onload=function () {
        alert("hello world");
    };

    window.onload=function () {
        alert("hello world2");
    }
</script>

<body>

</body>
</html>

弹出一个提示框：hello world2

********************

jquery对象、 DOM对象

******************

DOM对象操作

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/jquery/jquery-3.5.1.min.js"></script>
</head>
<script>
    window.onload=function(){
        const domObj = document.getElementById("test");
        const text = domObj.innerText;
        const html = domObj.innerHTML;

        alert(text);
        alert(html);
    }
</script>

<body>
<div id="test">
    你好呀<br>
    <strong>hello world</strong>
</div>
</body>
</html>

弹出提示框

******************

jquery对象操作

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/jquery/jquery-3.5.1.min.js"></script>
</head>
<script>
    $(function () {
        const jqueryObj=$("#test");

        alert(jqueryObj.text());
        alert(jqueryObj.html());
    })
</script>

<body>
<div id="test">
    你好呀<br>
    <strong>hello world</strong>
</div>
</body>
</html>

弹出提示框

******************

jquery、DOM对象转换

<script>
    const jqueryObj=$("#test");
    const domObj=document.getElementById("test");
    
    const domObj2=jqueryObj.get(0);    //将jquery对象转换为dom对象
    const jqueryObj2=$(domObj);        //将dom对象转换为jquery对象
</script>