菜单 搜索
首页 前端知识 jQuery详细教程

jQuery详细教程

2024-07-29 00:07:30 前端知识 前端哥 715 619 我要收藏

文章目录

  • 前言
  • 一、安装与快速上手
  • 二、直接寻找标签
    • 1.ID选择器
    • 2.类选择器/样式选择器
    • 3.标签选择器
    • 4.层级选择器
    • 5.多选择器
    • 6.属性选择器
  • 三、间接寻找标签
    • 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/

转载请注明出处或者链接地址：https://www.qianduange.cn//article/14533.html
标签
小程序开发
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！