十分钟快速入门JQuery教程

最新推荐文章于 2024-05-23 16:57:23 发布

Fanfffff720

最新推荐文章于 2024-05-23 16:57:23 发布

阅读量171

点赞数 9

文章标签：学习 jquery 前端

本文链接：https://blog.csdn.net/weixin_74009702/article/details/137478955

版权

JQuery简介

1.JQuery是一个快速、简洁的JavaScript代码库(或JavaScript框架)。JQuery设计的宗旨是"Write less, Do more",即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

2.如何把jQuery引入到HTML页面中？jQuery就是一个普通的js文件，引入方式和一般JavaScript文件一样。

<script type="text/javascript" src="./js/jquery-1.1.1.js"></script>

3.jQuery基本使用案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq的基础使用</title>
    <!-- 1.导入jQuery文件 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="i1" >
    <input type="button" id="btn" value="获取">
    <div id="div1"></div>
    <!-- 2.使用jQuery -->
    <script>
        // 编写事件,选中div,再给div重新赋值
        $("#btn").click(function(){
            // text(参数):用于修改元素的内容,需要传递参数
            // val():表示获取文本框中的内容
            $("#div1").text($("#i1").val());
        });
    </script>
</body>
</html>

JavaScript对象和jQuery对象互相转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象互相转换</title>
    <!-- 1.导入jQuery文件 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="i1">
    <input type="button" id="d1" value="js转jQuery">
    <input type="button" id="d2" value="jquery转js">

    <script>
        // 1.将js对象转化为jq对象
        // 1.1通过jq选中d1并给它添加点击事件
        $("#d1").click(function() {
            // 1.2通过js获取文本框元素,返回值就是一个js对象
            var i1 = document.getElementById("i1");
            // 1.3将js对象转化为jq对象
            var jq = $(i1);
            // 1.4通过jq对象的val()方法获取jq的值
            alert(jq.val());
        });

        // 2.将jq对象转化为js对象 
        // 2.1通过jq选中d2并给它添加点击事件
        $("#d2").click(function() {
            // 2.2通过jq获取文本框元素,返回值就是一个jq对象
            var jq = $("#i1");
            // 2.3将jq对象转化为js对象
            // jq对象本质是一个数组,可以通过下标访问元素
            // jq对象是一个数组,而数组中的每个元素是一个js类型的元素
            var js = jq[0];
            // 2.4通过js对象的value属性获取js的值
            alert(js.value);
        });
    </script>
</body>
</html>

jQuery选择器

基础选择器

层级选择器

筛选选择器和方法

选择器案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery选择器示例</title>
    <!-- 引入jQuery库 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>jQuery选择器示例</h1>
    
    <!-- 选取元素 -->
    <p>选取元素：</p>
    <button id="btn1">选取所有段落</button>
    <button id="btn2">选取所有类名为.highlight的元素</button>
    <button id="btn3">选取所有id为special的元素</button>

    <!-- 操作结果显示区域 -->
    <div id="result"></div>

    <script>
        $(document).ready(function(){
            // 选取所有段落
            $("#btn1").click(function(){
                var paragraphs = $("p");
                displayResult(paragraphs);
            });

            // 选取所有类名为.highlight的元素
            $("#btn2").click(function(){
                var highlightedElements = $(".highlight");
                displayResult(highlightedElements);
            });

            // 选取所有id为special的元素
            $("#btn3").click(function(){
                var specialElement = $("#special");
                displayResult(specialElement);
            });

            // 显示结果
            function displayResult(elements){
                $("#result").empty(); // 清空结果区域
                elements.each(function(){
                    $("#result").append("<p>" + $(this).prop("tagName") + ": " + $(this).text() + "</p>");
                });
            }
        });
    </script>

    <!-- 示例内容 -->
    <p>这是一个段落。</p>
    <p class="highlight">这是另一个带有highlight类的段落。</p>
    <p>这是第三个段落。</p>
    <div id="special">这是一个特殊的div。</div>
    <p class="highlight">这是另一个带有highlight类的段落。</p>
</body>
</html>

Fanfffff720

关注

9
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
十分钟快速入门JQuery教程

1.JQuery是一个快速、简洁的JavaScript代码库(或JavaScript框架)。JQuery设计的宗旨是"Write less, Do more",即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。2.如何把jQuery引入到HTML页面中？jQuery就是一个普通的js文件，引入方式和一般JavaScript文件一样。3.jQuery基本使用案例：<head>
复制链接

扫一扫