jQuery详细教程

最新推荐文章于 2024-05-18 11:09:56 发布

Calebbbbb

最新推荐文章于 2024-05-18 11:09:56 发布

阅读量912

点赞数 37

分类专栏：前端开发文章标签： jquery 前端 javascript python html css 开发

本文链接：https://blog.csdn.net/2203_75327677/article/details/136969812

版权

前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

前言
一、安装与快速上手
二、直接寻找标签
三、间接寻找标签
- 1.找兄弟
- 2.找父子
四、值操作
五、事件
六、样式操作

前言

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互

一、安装与快速上手

JQuery是一个JavaScript的第三方模块(第三方类库)
JQuery的安装方式参考《BootScrap详细教程》的实现动态效果部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <h1 id="txt">中国联通</h1>

    <script src="static/js/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        //使用JQuery修改内容
        $("#txt").text("广西移动");
    </script>

</body>
</html>

请添加图片描述

二、直接寻找标签

1.ID选择器

<h1 id="txt">中国联通</h1>
<h1>中国联通</h1>
<h1>中国联通</h1>

$("#txt")

2.类选择器/样式选择器

<h1 class="c1">中国联通</h1>
<h1 class="c2">中国联通</h1>
<h1 class="c3">中国联通</h1>

$(".c1")

3.标签选择器

<h1 class="c1">中国联通</h1>
<h1 class="c2">中国联通</h1>
<h1 class="c3">中国联通</h1>

$("h1")

4.层级选择器

<div class="c1">
	<div class="c2">
		<h1>123</h1>
	</div>
</div>

$(".c1 .c2 h1")

5.多选择器

<div class="c1">
	<div class="c2">
		<h1>123</h1>
	</div>
</div>
<div class="c3">
	<div class="c4">
		<h1>123</h1>
		<li>456</li>
	</div>
</div>

$("#c1,#c2,li")

6.属性选择器

<input type="text" name="n1" />
<input type="text" name="n2" />
<input type="text" name="n3" />

$("input[name='n1']")

三、间接寻找标签

1.找兄弟

<div>
	<div>北京</div>
	<div id="c1">上海</div>
	<div>深圳</div>
	<div>广州</div>
</div>

$("#c1").prev()			//上一个
$("#c1")				//本体
$("#c1").next()			//下一个
$("#c1").next().next()	//下一个的下一个
$("#c1").siblings()		//所有的

2.找父子

<div>
	<div>
		<div>北京</div>
		<div id="c1">
			<div>浦东新区</div>
			<div>静安区</div>
			<div>奉贤区</div>
		</div>
		<div>深圳</div>
		<div>广州</div>
	</div>
	<div>
		<div>北京</div>
		<div id="c1">上海</div>
		<div>深圳</div>
		<div>广州</div>
	</div>
</div>

$("#c1").parent()			//父亲
$("#c1").parent().parent()	//父亲的父亲

$("#c1").children()			//所有的儿子
$("#c1").children(".p10")	//所有的儿子中寻找class=p10

$("#c1").find(".p10")		//所有的子孙中寻找class=p10
$("#c1").children("div")	//所有的儿子中寻找标签 div

实例：菜单切换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        .menus {
            width: 200px;
            height: 1000px;
            border: 1px solid red;
        }

        .menus .header {
            background-color: royalblue;
            padding: 5px 5px;
            border-bottom: 1px dotted gray;
            cursor: pointer;
        }

        .menus .content a {
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted gray;
        }

        .hide {
            display: none;
        }
    </style>
</head>

<body>

    <div class="menus">
        <div class="item">
            <div class="header" onclick="clickMe(this);">天津</div>
            <div class="content hide">
                <a>静海区</a>
                <a>东丽区</a>
                <a>西青区</a>
                <a>宝坻区</a>
                <a>滨海新区</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickMe(this);">上海</div>
            <div class="content hide">
                <a>静安区</a>
                <a>奉贤区</a>
                <a>浦东新区</a>
                <a>徐汇区</a>
                <a>青浦区</a>
            </div>
        </div>
    </div>

    <script src="static/js/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        function clickMe(self) {
            var hasHide = $(self).next().hasClass("hide");
            if (hasHide) {
                $(self).next().removeClass("hide");
            } else {
                $(self).next().addClass("hide");
            }
        }
    </script>
</body>
</html>

在这里插入图片描述

功能升级：只允许一个展开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        .menus {
            width: 200px;
            height: 1000px;
            border: 1px solid red;
        }

        .menus .header {
            background-color: royalblue;
            padding: 5px 5px;
            border-bottom: 1px dotted gray;
            cursor: pointer;
        }

        .menus .content a {
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted gray;
        }

        .hide {
            display: none;
        }
    </style>
</head>

<body>

    <div class="menus">
        <div class="item">
            <div class="header" onclick="clickMe(this);">天津</div>
            <div class="content">
                <a>静海区</a>
                <a>东丽区</a>
                <a>西青区</a>
                <a>宝坻区</a>
                <a>滨海新区</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickMe(this);">上海</div>
            <div class="content hide">
                <a>静安区</a>
                <a>奉贤区</a>
                <a>浦东新区</a>
                <a>徐汇区</a>
                <a>青浦区</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickMe(this);">上海1</div>
            <div class="content hide">
                <a>静安区</a>
                <a>奉贤区</a>
                <a>浦东新区</a>
                <a>徐汇区</a>
                <a>青浦区</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickMe(this);">上海2</div>
            <div class="content hide">
                <a>静安区</a>
                <a>奉贤区</a>
                <a>浦东新区</a>
                <a>徐汇区</a>
                <a>青浦区</a>
            </div>
        </div>
    </div>

    <script src="static/js/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        function clickMe(self) {
            //1.让菜单展示出来
            $(self).next().removeClass("hide");

            //2.找父亲,父亲的所有兄弟,再去每个兄弟的子孙中寻找 class="content", 添加 hide 样式
            $(self).parent().siblings().find(".content").addClass("hide");
        }
    </script>
</body>
</html>

在这里插入图片描述

四、值操作

<div id="c1">内容</div>
<input type="text " id="c2"/>

JQuery操作:

$("#c1").text()				//获取文本内容
$("#c1").text("abc")		//设置文本内容

$("#c2").val()				//获取用户输入的值
$("#c2").val("嘿嘿嘿")		//设置值

实例：动态创建数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <input type="text" id="txtUser" placeholder="用户名">
    <input type="text" id="txtEmail" placeholder="密码">
    <input type="button" value="提交" onclick="getInfo()">

    <ul id="view">
    </ul>

    <script src="static/js/jquery-3.6.1.min.js"></script>
    <script>

        function getInfo() {
            //1.获取用户输入的用户名与密码
            var username = $("#txtUser").val();
            var email = $("#txtEmail").val();

            dataString = username + ":" + email

            //2.创建li标签, 在li内部写入内容
            var newLi = $("<li>").text(dataString);

            //3.把新创建的li标签添加到ul里面
            $("#view").append(newLi);
        }

    </script>
</body>
</html>

在这里插入图片描述

五、事件

$(“相关标签”).click(function(){函数内容});

<body>

    <ul>
        <li>百度</li>
        <li>谷歌</li>
        <li>搜狗</li>
    </ul>

    <script src="static/js/jquery-3.6.1.min.js"></script>
    <script>
        $("li").click(function(){
            // 点击li标签时,自动执行这和函数
            // $(this) 当前你点击的是哪个标签
             $(this).remove();//删除标签
        });
    </script>
</body>

实例：表格操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="body">
            <tr>
                <td>1</td>
                <td>poker</td>
                <td>
                    <input type="button" value="删除" class="delete" />
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>poker</td>
                <td>
                    <input type="button" value="删除" class="delete" />
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>poker</td>
                <td>
                    <input type="button" value="删除" class="delete" />
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>poker</td>
                <td>
                    <input type="button" value="删除" class="delete" />
                </td>
            </tr>
        </tbody>
    </table>

    <script src="static/js/jquery-3.6.1.min.js"></script>
    <script>
        $(
            function () {
                $(".delete").click(function () {
                    $(this).parent().parent().remove();
                });
            }
        )
    </script>
</body>
</html>

在这里插入图片描述

六、样式操作

addClass
removeClass
hasClass
等等

十分多，可以在jQuery手册中寻找https://jquery.cuishifeng.cn/

Calebbbbb

关注

37
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
jQuery详细教程

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
复制链接

扫一扫