前端小白的学习之路(jQuery 一)-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_245249828/article/details/136481055

本文介绍了jQuery库的基本概念，包括其作用、使用步骤（如引入库、基本操作示例），以及常见的DOM操作方法、事件处理机制，重点讲解了如何通过不同方式绑定和解绑事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、jQuery是什么？
二、使用步骤
- 1.引入库
- 2.读入数据
- 3.常见API
- 4.事件点击

一、jQuery是什么？

jQuery是一个快速、小型且功能丰富的JavaScript库。它通过一个易于使用的API使HTML文档遍历和操作、事件处理、动画和Ajax等操作变得更加简单，该API可在多种浏览器中工作。jQuery结合了多功能性和可扩展性，改变了数百万人编写JavaScript的方式。

jQuery 是一个JS库。简称 “JQ”.

其本质就是javascript. 重点是围绕DOM操作

作用：可以提高web（网页）开发的效率（write less , do more）

下载

官网地址(下载速度慢)：jQuery

国内地址(下载速度快):jquery下载所有版本（实时更新）

二、使用步骤

1.引入JQ库

代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>


    <!-- 第一步：下载jquery文件 (复制粘贴在一个文件) -->
    <!-- 第二步：把jquery文件引入到网页中 -->
    <!-- 开发环境版本 -->
    <!-- <script src="./libs/jQuery/jQuery.js"></script> -->
    <!-- 生产环境版本 -->
    <script src="./libs/jQuery/jQuery.min.js"></script>

   
</body>
</html>

2.基本使用

代码如下：


    <script>

        // jQuery函数 , jQuery的别名 "$" , $也是一个函数.
        //  window.jQuery = window.$ = jQuery; 
        // console.log(jQuery === $);// true


        // 入口函数 (需要操作div标签,script标签如果写在div标签的后面,可以不写入口函数)
        // 1) 直接调用jQuery函数
        // jQuery(function(){
        //     jQuery(".box").click(function(){
        //         jQuery(this).animate({width:200,height: 200},300);
        //     })
        // })

        // 使用别名 "$" 这个名称作为函数调用
        $(function(){
            $(".box").click(function(){
                $(this).animate({width:200,height: 200},300);
            })
        })
    </script>

三、常见的API

案例主体

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>
    <style></style>
</head>

<body>

    <div class="box">123</div>
    <div id="demo">456</div>
    <input type="text" value="hello">
    <ul class="list">
        <li>列表1</li>
        <li class="aaa">列表2 aaa</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
    </ul>
    <img src="" alt="" class="picture">


    <!-- 引入jQuery -->
    <script src="./libs/jQuery/jQuery.min.js"></script>
    <script>
     </script>
</body>

</html>

1）获取页面标签

1.获取目标元素

        // 原生JS
        var box = document.querySelector(".box")
        console.log(box);//<div class="box">123</div>  这个东西我们叫做 dom对象
        box.style["fontSize"] = "40px";
        document.querySelector("#demo");
        var items = document.querySelectorAll("ul li");
        items[0].style["color"] = "red";
        items[1].style["color"] = "green";
        items[2].style["color"] = "blue";

        // JQ 选择器函数  $()
        // 调用 $ 函数,传递一个选择器,就可以获取页面的标签
        var $box = $(".box");
        console.log($box);// ce.fn.init {0: div.box, length: 1}   这个东西我们叫做 jquery对象
        $box.style["fontSize"] = "40px";// 报错
        $box.css("fontSize","40px");// 正确

        $("#demo") // 选择id叫做demo的标签
        var $list = $("ul li");// 选择ul的所有后代li标签
        console.log($list);// 把选择器对应的标签记录在jquery对象中
    


        // $ 既可以作为初始化函数(入口函数),也可以作为选择器函数使用
        $(function(){}) // 这是初始化函数
        $(".box") // 这是获取页面标签的意思 作为选择器函数使用

2.获取目标元素的所有子元素

var $child = $(".list").children();

console.log($child);

3. 获取目标元素的父元素

var $parent = $(".aaa").parent();

console.log($parent);

4. 获取目标元素的兄弟元素

 var $bro = $(".aaa").siblings();

 console.log($bro);

5. 获取目标元素相邻的下一个元素

var $next = $(".aaa").next();

console.log($next);

6. 获取目标元素相邻的上一个元素

 var $prev = $(".aaa").prev();

 console.log($prev);

7. 找到ul标签下的.aaa标签

var $aaa = $(".list").find(".aaa");

console.log($aaa);

2）设置标签的样式

1.设置单个样式

$("ul li").css("color","red");

2.设置多个样式

$(".box").css({width:100,height: 100,backgroundColor:"blue"})

3）设置标签的文本

1.纯文本

$("#demo").text("abc");

$("#demo").text("<span>abc</span>");//纯文本不会渲染标签

2.超文本

$("#demo").html("abc");

$("#demo").html("<span>abc</span>");

$("#demo").html("<i>abc</i>");//可以用于渲染html字符串

不传递参数,表示获取该标签的超文本

var v2 = $("#demo").html();

console.log(v2);// '<i>abc</i>'

3.获取输入框的值

var v1 = $("input").val();

console.log(v1);// 'hello'

4）设置标签的属性

// class  id  src   title  href 
var s1 = "https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png"
var s2 = "https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png"
$(".picture").attr("src", s2);// 设置标签属性
var v3 = $(".picture").attr("src");// 获取标签属性
console.log(v3);// 'https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png'
$(".picture").removeAttr("src");// 删除标签属性

5）删除标签、添加标签

1.添加标签

// 往目标元素的尾部追加渲染字符串
$(".box").append("<h3 class='tit1'>7</h3>");
$(".box").append("<h3>8</h3>");
$(".box").append("<h3>9</h3>").css("color", "red");// 链式编程

// 往目标元素的首位添加渲染字符串
$(".box").prepend("<h3>7</h3>");
$(".box").prepend("<h3>8</h3>");
$(".box").prepend("<h3>9</h3>");

2.删除标签

// 删除标签
$(".tit1").remove();
$(".box").html("");
$(".box").empty();

四.事件处理

案例主体

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>
    <style></style>
</head>

<body>
    <div class="container">
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
    </div>
    <p>提示:</p>


    <!-- 引入jquery文件 -->
    <script src="./libs/jQuery/jQuery.js"></script>
    
</body>

</html>

1).写法1

$(".container button").click(function(){

     // console.log(this);// 事件的调用者

     // console.log($(this));// jquery对象

     // 获取当前点击标签的文本

     var v = $(this).html();

     // 字符串拼接

     var str = "提示: 点击了 “"+v+"”";

     // 渲染字符串

     $("p").html(str);

})

2). 写法2

可以绑定多个行为

$(".container button").bind("click mouseenter", function () {

    // 获取当前点击标签的文本

    var v = $(this).html();

    // 字符串拼接

    var str = "提示: 点击了 “" + v + "”";

    // 渲染字符串

    $("p").html(str);

})

3). 写法3

可以事件委托

$(".container").delegate("button", "click", function () {
    
    //给button的父元素.container绑定点击事件

    // console.log(this);// 你点击的标签(事件调用者)

    // 获取当前点击标签的文本

    var v = $(this).html();

    // 字符串拼接

    var str = "提示: 点击了 “" + v + "”";

    // 渲染字符串

    $("p").html(str);

})

4). 写法4(推荐写法)

// 推荐使用

$(".container button").on("click", function () {

    // 获取当前点击标签的文本

    var v = $(this).html();

    // 字符串拼接

    var str = "提示: 点击了 “" + v + "”";

    // 渲染字符串

    $("p").html(str);

})



// 事件委托 (可以动态绑定事件)

$(".container").on("click", "button", function (event) {

    // 事件对象(鼠标信息,键盘信息,事件信息等)

    // console.log(event);// 事件触发时所产生的集合

    // 获取当前点击标签的文本

    var v = $(this).html();

    // 字符串拼接

    var str = "提示: 点击了 “" + v + "”";

    // 渲染字符串

    $("p").html(str);

})

5).解绑事件

解绑用on绑定的事件：

//使用off解绑事件
$(".container button").off('click');

前端小白的学习之路(jQuery 一)

文章目录

一、jQuery是什么？

下载

二、使用步骤

1.引入JQ库

2.基本使用

三、常见的API

案例主体

1） 获取页面标签

1.获取目标元素

2.获取目标元素的所有子元素

3. 获取目标元素的父元素

4. 获取目标元素的兄弟元素

2）设置标签的样式

1.设置单个样式

2.设置多个样式

3）设置标签的文本

1.纯文本

2.超文本

3.获取输入框的值

4）设置标签的属性

5）删除标签、添加标签

1.添加标签

2.删除标签

四.事件处理

案例主体

1).写法1

2). 写法2

3). 写法3

4). 写法4(推荐写法)

5).解绑事件

1）获取页面标签