WEB前端.jQuery

最新推荐文章于 2024-06-24 20:44:34 发布
置顶 最新推荐文章于 2024-06-24 20:44:34 发布
阅读量636 收藏 3
点赞数 3
分类专栏： WEB前端 文章标签： WEB前端 jQuery 前端教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flowingcloud28/article/details/96976304
版权

持续更新呢，莫（mo）急（yu）。。。。ヽ(￣▽￣)ﾉヽ(￣▽￣)ﾉ

后续会补全代码块注释，并加入body标签内容

篇首节

README：

定位：WEB前端
目的：适合有jQuery知识基础萌新阅读。本文总结jQuery相关语法，常用操作，关键字等，用于快速的（每个支线仅有一个强综合性的案例）阅览复习知识点。
关键字：web前端， JavaScript（js），jQuery（jq），总结复习
说明： 本文内容参考W3school并加以整理，更简洁，更具代表性的案例，更贴心(xiong)的注释。
如果有任何问题包括版权及错误方面请联系QQ（171519019），用截图并标记更方便呢

链接：
教程链接：http://www.w3school.com.cn/jquery/index.asp
CDN：https://cdn.bootcss.com/jquery/3.4.1/jquery.js
编辑器: https://codepen.io/

核心：
$(selector).action(speed,callback)

词典：
selector => 选择器（同时用作替代所有“选择器”）；
action=> 操作指令（同时用作替代所有“指令”）；
speed=> 动画的变化速度（同时用作替代所有“速度”）；
callback=> 回调函数（同时用作替代所有“回调函数”）；

导航节

本节为标题导航，用于索引及支线指向。

jQuery 选择器

jQuery 语法

jQuery 效果
Query HTML
jQuery 遍历
jQuery AJAX

速览节

本节为精简概要，适合速览及不求甚解的读者。

案例

<!DOCTYPE html>
<html>

<head>
    <!-- 这是CDN：jQ链接 -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <!-- 这是jQ代码 -->
    <script type="text/javascript">
        // 首先等待文档加载完成，执行后文
        $(document).ready(function () {
            // 选择中button按钮，并添加点击事件，以及触发的函数
            $("button").click(function () {
                // 触发的函数内容为：选中p，并为其添加toggle事件（包含两个参数。slow控制速度为慢，后者为触发的函数）
                $("p").toggle("slow", function () {
                    console.log("这是点击按钮后，执行的回调函数：打印这段文字");
                });
            });
        });
    </script>
</head>

<body>
    <button type="button">隐藏/显示</button>
    <p>这是一段测试内容</p>
</body>

</html>

jQuery 选择器

基础语法：$(selector)
示例： $("div#intro .head") 选取 id=“intro” 的div元素中的所有 class=“head” 的元素。
说明：

  • jQuery 元素选择器
    示例： $("p#demo")选取所有 id=“demo” 的元素。
    另外，可以简写为 $("#demo")。
  • jQuery 属性选择器
    示例： $("[href!='#']")选取所有带有 href 值不等于 “#” 的元素。
  • jQuery CSS 选择器
    示例： $("p").css("background-color","red");

jQuery 语法

基础语法：$(selector).action()
示例：$(this).hide() 隐藏当前元素
说明：
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

铺述节

本节为详解铺述，适合学习及深入探究的读者。

jQuery 名称冲突

var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

jQuery 效果

案例：

$("button").click(function () {
        $("p").fadeTo("slow", 0.5, function () {
            console.log("这是点击按钮后，执行的回调函数：打印这段文字")
        })
})

说明：
另外，还可以添加两个参数，用来规定速度和回调函数
$(selector).toggle(speed,callback)
功能：

  • 显示和隐藏
    语法：
    $(selector).hide(),$(selector).show(),$(selector).toggle(),
  • 淡入和淡出
    语法：
    $(selector).fadeIn(),$(selector).fadeOut(),$(selector).fadeToggle(),$(selector).fadeTo()
  • 滑动
    语法：
    $(selector).slideDown(),$(selector).slideUp(),$(selector).fadeToggle(),$(selector).slideToggle()
  • 动画
    语法：
    $(selector).animate()
  • 暂停
    语法：
    $(selector).stop()
  • 回调函数
    语法：
    $(selector).action(speed,callback)
  • 链式操作
    语法：
    $(selector).action().action().action()

暂停.示例：

$(document).ready(function () {
        $("#startBtn").click(function () {
            $("#movePanel").slideDown(5000);
        });
        $("#stopBtn").click(function () {
            $("#movePanel").stop();
        });
    });

动画.示例：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

说明：
可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel（驼峰式）标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left。
另外，还可以使用相对值来定义：height:'+=150px',以及预定义值：height:'toggle',

动画.高级操作(队列).示例：

$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});

jQuery 遍历

分支：

  • 祖先
    语法：
    parent()，parents()，parentsUntil()
  • 后代
    语法：
    children()，find()
  • 同胞
    语法：
    siblings()，next()，nextAll()，nextUntil()，prev()，prevAll()，prevUntil()
  • 过滤
    语法：
    first()，last()，eq()

案例：

<body>
    <div>this is div
        <ul>this is ul
        	<li>this is li1</li>
            <li>this is li2
                <button id="btn">click me</button>
			</li>
			<li>this is li3</li>
        </ul>
    </div>
</body>

<script>
    $(document).ready(function () {
        // 获取按钮，并添加点击事件
        $("#btn").click(function () {
            // 获取 li，然后选中其父节点即为 ul，添加样式
            $("li").parent().css({
                // 使ul边框变红，证明 li 的父节点为 ul
                "borderColor": "red",
            })
        })
    })
</script>

<style>
    html {
        margin: 10px;
        padding: 10px;
        display: block;
        border: 2px solid lightgrey
    }

    body {
        margin: 10px;
        padding: 10px;
        display: block;
        border: 2px solid lightgrey
    }

    div {
        margin: 10px;
        padding: 10px;
        display: block;
        border: 2px solid lightgrey
    }

    ul {
        padding: 10px;
        display: block;
        border: 2px solid lightgrey
    }

    li {
        padding: 10px;
        display: block;
        border: 2px solid lightgrey
    }

    button {
        margin: 10px;
    }
</style>

jQuery 遍历 祖先

说明:
祖先是父、祖父或曾祖父等等。
通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。
功能：

  • 返回 直接父元素
    语法：
    $(selector).parent()
  • 返回 所有祖先元素
    语法：
    $(selector).parents()
  • 返回 返回介于两个给定元素之间的所有祖先元素
    语法：
    $(selector).parentsUntil()

parents().示例：

<script>
    $(document).ready(function () {
        // 获取按钮，并添加点击事件
        $("#btn").click(function () {
            // 获取 li，然后选中其所有父节点即为 ul，div，body，html根节点并添加样式
            $("li").parents().css({
                // 使ul，div，body，html边框变红，找到li的父节点们,注意其中包括 body 和 html
                "borderColor": "red",
            })
        })
    })
</script>

parentsUntil().示例：

<script>
    $(document).ready(function () {
        // 获取按钮，并添加点击事件
        $("#btn").click(function () {
            // 获取 li，然后选中其 li 与 body 之间的父节点即为 ul，div并添加样式
            $("li").parentsUntil("body").css({
                // 使ul， div边框变红，找到li的父节点们
                "borderColor": "red",
            })
        })
    })
</script>

jQuery 遍历 后代

说明:
后代是子、孙、曾孙等等。
通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。
功能：

  • 返回 直接子元素
    语法：
    $(selector).children()
  • 返回 被选元素的所有后代元素，一路向下直到最后一个后代
    语法：
    $(selector).find()

children().示例：

<script>
    $(document).ready(function () {
        // 获取按钮，并添加点击事件
        $("#btn").click(function () {
            // 获取 li，然后选中其直接子节点即为 div，添加样式
            $("body").children().css({
                // div边框变红，找到body的直接子节点
                "borderColor": "red",
            })
        })
    })
</script>

find().示例：

<script>
    $(document).ready(function () {
        // 获按钮，并添加点击事件
        $("#btn").click(function () {
            // 获取指定目标 ul，并添加样式
            $("body").find("ul").css({
                // ul边框变红，找到指定ul节点
                "borderColor": "red",
            })
        })
    })
</script>

jQuery 遍历 过滤

说明:
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
功能：

  • 返回 被选元素的首个元素
    语法：
    $(selector).first()
  • 返回 被选元素的最后一个元素
    语法：
    $(selector).last()
  • 返回 被选元素中带有指定索引号的元素
    语法：
    $(selector).eq()
  • 返回 匹配的元素,不匹配这个标准的元素会被从集合中删除
    语法：
    $(selector).filter()
  • 返回 不匹配标准的所有元素,not() 方法与 filter() 相反。
    语法：
    $(selector).not()

first().示例：

<script>
    $(document).ready(function () {
        // 获按钮，并添加点击事件
        $("#btn").click(function () {
            // 获取 ul 内部的第一个 li，并添加样式
            $("ul li").first().css({
                "borderColor": "red",
            })
        })
    })
</script>

eq().示例：

<script>
    $(document).ready(function () {
        // 获按钮，并添加点击事件
        $("#btn").click(function () {
            // 获取3个li中下标标为1的li2，并添加样式
            $("ul li").eq(1).css({
                "borderColor": "red",
            })
        })
    })
</script>

jQuery AJAX

准备：
如使用pc端编译器软件执行以下代码段，需先在文件夹中建立文件：“demo.txt”
该文件内容如下：

<p id="p1">this is p1!</p>
<p id="p2">this is p2!</p>

示例：

<body>
    <!-- 建立一个p标签和一个按钮即可 -->
    <p id="p">this is a p</p>
    <button>click me</button>
</body>

<script>
    $(document).ready(function () {
        // 选中"按钮"，添加点击事件
        $("button").click(function () {
            // 选中标签"p"，替换为txt文件中的内容。url即为 demo.txt 中的 #p
            // 并且触发后面的回调函数
            $("#p").load("/demo.txt #p2", function () {
                alert("can you see me?")
            })
        })
    });
</script>

</html>

说明：
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
语法：
$(selector).load(URL,data,callback);
词典：

  • URL(必需的) 参数规定您希望加载的 URL。
  • data(可选的) 参数规定与请求一同发送的查询字符串键/值对集合。
  • callback(可选的) 参数是 load() 方法完成后所执行的函数名称。

jQuery get(), post()

说明：
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

  • GET - 从指定的资源请求数据
  • POST - 向指定的资源提交要处理的数据

语法：
$.get(URL,callback);, $.post(URL,data,callback);

词典：

  • URL(必需的) 参数规定您希望请求的 URL。
  • data(可选的) 参数规定连同请求发送的数据。
  • callback(可选的) 参数是请求成功后所执行的函数名。

get().示例：

<body>
    <p>点击按钮，可以获取目标url的数据内容，以及获取返回的状态</p>
    <button>click me</button>
</body>

<script>
    $(document).ready(function () {
        // 选中"按钮"，添加点击事件
        $("button").click(function () {
            /*
                调用get()方法，
                    内部写入目标url，可以获取到其中的数据
                    可选写入回调函数，可以顺便执行该callback

                    其回调函数callback又有两个参数，且顺序固定，名称可变：
                        data: 为获取到的目标数据
                        status：为该请求数据事件的返回状态(人话：就是说到底有没有获取成功啦)
             */
            $.get(
                "/demo.txt",
                function (data, status) {
                    alert("数据：" + data + "\n 状态: " + status)
                }
            )
        })
    });

post().示例：

（巧了，我也不会。。。麻烦懂的dalao留个代码块）
迷路的刘云儿
关注
专栏目录
WEB前端-JQuery-表单验证
The One
09-03 1341
以下是分别以两种方式 DOM& jQuery绑定事件，并对表单内容进行简要验证的代码 可以通过js的表单验证减少与后台数据交互验证的动作，从而减少响应时间<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .item{
java web前端.docx
02-20
Java Web 前端知识点总结 Java Web 前端发展至今已经...本文档总结了 Java Web 前端的基础知识点，涵盖了 HTML、CSS、JS、DOM 编程、jQuery 框架、AJAX 基础等内容，对于初学者和开发者来说都是非常有价值的参考资料。
web前端javascript+jquery知识点总结
weixin_44924238的博客
02-15 9825
1.Javascript 语法.用途 javascript 在前端网页中占有非常重要的地位，可以用于验证表单，制作特效等功能，它是一种描述语言，也是一种基于对象（Object）和事件驱动并具有安全性的脚本语言 ...
前端怎么引入Jquery库
weixin_43604220的博客
11-30 4061
1.远程连接JQuery的库 站点是在国内，建议使用百度、新浪、又拍云等国内CDN地址， 站点是在国外，建议使用谷歌和微软的CDN地址 使用CDN地址引用jQuery的具体方法如下： <head> 百度 CDN： <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> 新浪 CDN： <script src="https://lib.sinaa...
前端主流框架-JQuery
qq_56438516的博客
06-24 1184
直白的讲就是通过程序解析结构化文档（xml，html）的时候，在内存中生成的包含当前结构化文档中所有内容的一个对象模型。文档中的每一个节点都会生成一个对象，这些对象与对象之间会形成一个层级关系，像一个树形结构，所以称之为。，文档中都是节点(一切皆节点)，文档中的标签就是元素节点（Element），标签的内容就是文本节点（Text），标签的属性就是属性节点（Attribute）。从上面的介绍得知，Dom操作的核心就是文本操作、属性样式操作、元素操作；直接在元素上绑定对应的事件。通过Dom对象.事件去绑定。
Web前端最新jQuery UI widget源码解析，前端入门
2401_84123357的博客
05-09 896
更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。// 比如dialog有一个close的callback，当close的callback被执行的时候，一个dialogclose的事件被触发。//1和2 分别就是参数a和b了。// 如果callback的名称和事件的prefix相同，事件的名称将不会是prefix。
web前端发展历程
热门推荐
官方推荐
05-30 3万+
前言 目前在IT公司中前端的岗位越来越成为不可或缺的，前端的地位也愈见明显，很多学校已经体系的传授前端课程，众多培训机构也将前端知识作为了主流课程，也有越来越多的同学加入到前端学习的行列中，作为前端工程师或者前端的学习者我们有必要去了解前端的发展史。...
Web前端学习笔记15：Web前端开发：jQuery总结
JasonYangQ的博客
08-17 9039
文章目录day01 - jQuery1.1. jQuery 介绍1.1.1 JavaScript 库1.1.2 jQuery的概念1.1.3 jQuery的优点1.2. jQuery 的基本使用1.2.1 jQuery 的下载1.2.2. 体验jQuery1.2.3. jQuery的入口函数1.2.4. jQuery中的顶级对象$1.2.5. jQuery 对象和 DOM 对象1.2.6. jQuery 对象和 DOM 对象转换1.3. jQuery 选择器1.3.1. 基础选择器1.3.2. 层级选择
WEB前端-jQuery-中文文档
The One
08-27 927
jQuery相当于一个封装了js&dom的第三方库，减少编码量，当时当业务类型为节约流量型的时候，比如手游等等，页面显示前需要预下载库资源。因此这种情况下为了节约流量，就需要自己来写js&dom了。jQuery这里只提供转跳，更专业的中文文档请点击此处
【Web前端】jQuery界面优化
zgljl2012的专栏
04-26 1807
随着互联网的发展，网站的前端界面会越来越重要，它关注的是用户的直接体验。市场上同类型的网站越来越多，一个比其他同类网站更流畅、优雅的界面能让用户摈弃你的竞争对手。所以，让自己的网站前端运行的更快、界面更优美成为了一个重要的话题。从而，前端界面优化技术也成为了优秀前端开发人员必备的技能，这是核心竞争力。今天介绍的是jQuery这个流行的前端javascript开发框架里的一些优化技术，这些优化技术需要
jquery.wordexport.js 导出word 默认web视图修改成页面视图
爱钻研的小张
06-22 1161
jquery.wordexport.js 导出word 默认web视图修改成页面视图
GL婚纱 web前端.zip
05-30
【GL婚纱 web前端.zip】是一个项目压缩包，主要用于展示在互联网+和创新创业大赛中的参赛作品。这个项目聚焦于Web前端开发，运用了多种技术来构建一个美观且功能丰富的婚纱网站。接下来，我们将深入探讨其中涉及的...
前端项目-lrsjng.jquery-qrcode.zip
09-03
《前端项目：动态生成二维码——lrsjng.jquery-qrcode》 在当今信息化时代，二维码（Quick ...无论你是进行传统Web开发还是采用现代前端框架，这个插件都能成为你工具箱中的利器，帮助你轻松实现二维码相关的功能。
web前端+jquery与ajax+json+手写前端完全实现分页
05-14
本主题聚焦于"web前端+jQuery与Ajax+JSON+手写前端完全实现分页"，这是一种高效的方法来处理大量数据，提升用户体验，同时减轻服务器压力。下面将详细介绍这些关键技术点。 **jQuery** 是一个快速、简洁的...
web前端初级.pdf
05-23
Web前端是用户与网站或APP交互的第一界面，对于用户体验至关重要。本次串讲教案初级内容涵盖Web前端开发的多个基础知识点，接下来将按照教案内容逐一阐述。 首先，在Web页面制作基础这一部分，首先介绍了HTML的基本...
基于java的人事管理系统设计与实现.docx
09-13
基于java的人事管理系统设计与实现.docx
Spring Boot微博后端系统（spring-boot-tucao-weibo）.zip
最新发布
09-13
这是一个基于Spring Boot框架开发的微博后端系统，实现前后端分离，使得后台可以独立开发和调试。该系统采用Vue实现前端界面，并提供了丰富的功能，如发布微博、评论、点赞等。技术栈包括Spring Boot、Spring Data JPA和Stomp（WebSocket）。项目提供开发环境和生产环境的运行方式，支持H2内存数据库和mySQL数据库。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看reADME.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
基于java的房产销售系统设计与实现.docx
09-13
基于java的房产销售系统设计与实现.docx
51单片机PID算法控制无刷直流电机proteus仿真 功能描述 1.五个按键，停止 启动，正转，反转，加速，减速 2.显示lc
09-13
51单片机PID算法控制无刷直流电机proteus仿真 功能描述 1.五个按键，停止 启动，正转，反转，加速，减速 2.显示lcd1602,第一行设置速度set= 3.第二行实际速度speed= r min 4.第一行右上角转正显示Z，反转显示F 5.驱动用ir2101加上6个mos管， 6.程序里有pid算法
jQuery：Web前端开发的高效工具
在Web前端开发技术的学习过程中，"Web前端开发技术-认识JQuery.pptx"文件主要介绍了jQuery的基础概念及其在开发中的广泛应用。jQuery是一个由John Resig创建的JavaScript库，其核心理念是通过简化语法和封装常用功能...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值