【Django学习笔记（五）】JQuery介绍

最新推荐文章于 2024-08-04 08:18:48 发布

原创

最新推荐文章于 2024-08-04 08:18:48 发布 · 1.4k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#python #jquery #django #css #html #bootstrap #开发语言

JQuery介绍

前言
正文

前言

JQuery 是一个 JavaScript 的第三方模块(第三方类库)，可以基于 JQuery 自己开发一个功能，也有很多现成的工具依赖 JQuery，例如 Bootstrap 动态效果。本篇文章中介绍JQuery 的基本功能和依赖于 JQuery 的一些常用工具。

正文

1、JQuery 快速上手

1.1 下载 JQuery

下载网址：Download jQuery

1.2 应用 JQuery

导入JQuery ：

在这里插入图片描述

html 中导入 js 文件：

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

案例：动态实现将“中国联通”修改为“广西移动”:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1 id="txt">中国联通</h1>
    <script src="static/js/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        //使用JQuery修改内容
        //1、找到id=txt的标签
        //2、内容修改
        $("#txt").text("广西移动");
    </script>
</body>
</html>

在这里插入图片描述

2、寻找标签（直接）

2.1 ID选择器

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

JQuery 操作：

$("#txt")

2.2 样式选择器

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

JQuery 操作：

$(".c1")

2.3 标签选择器

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

JQuery 操作：

$("h1")

2.4 层级选择器

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

JQuery 操作：

$(".c1 .c2 a")

2.5 多选择器

<div class="c1">
	<div class="c2">
		<h1>123</h1>
	</div>
</div>
<div class="c3">
	<div class="c4">
		<h1>中国联通1</h1>
		<li>中国联通2</li>
	</div>
</div>

JQuery 操作：

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

2.5 属性选择器

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

JQuery 操作：

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

3、寻找标签（间接）

3.1 找到上一个兄弟

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

JQuery 操作：

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

3.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>

JQuery 操作：

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

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

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

4、寻找标签案例：菜单的切换

<!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