【无标题】

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量102 收藏
点赞数
文章标签： javascript 前端 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BBsix666/article/details/128852426
版权

文章目录


添加链接描述

1、jQuery+选择器上


在这里插入图片描述

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
    <div></div>
    

    <script>
        console.log($(('div')))
    </script>

2、jQuery的筛选器

first()、last()

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
    <div></div>
    <div></div>
    <div></div>
    

    <script>
        console.log($('div').first())
    </script>

eq()指定

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
    <div></div>
    <div></div>
    <div></div>
    

    <script>
        console.log($('div').eq(2))
    </script>

next()下一个、nextAll()后面所有、nextAll(选择器)后面所有指定选择器的元素、nextUntil()后面所有兄弟元素、nextUntil(选择器)到指定选择器为止（不包括）
在这里插入图片描述
parent()获取当前元素父元素、parents()获取当前元素所有父元素、parents(选择器)
children()所有子元素、childrens(选择器)
siblings()所有兄弟元素自己除外
在这里插入图片描述

3、jquery操作文本内容

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4、jQuery操作类名

addclass()、removeclass()、hasclass()、toggleclass()
在这里插入图片描述

5、jQuery操作元素样式

元素集合.css(‘width’)

在这里插入图片描述

在这里插入图片描述

6、jQuery基础绑定事件

on()
元素集合.on(事件类型，事件处理函数)
在这里插入图片描述

7、jQuery事件绑定

在这里插入图片描述
one（）只能执行一次函数

9、jQuery节点操作

包括 创建节点、插入节点、删除节点、替换节点、克隆节点

<script>
        const p =$(<p>创建</p>)
    </script>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

10、操作元素属性

在这里插入图片描述
attr()获取
元素集合.attr(属性名)
元素集合.attr(属性名，属性值)

attr()设置
元素集合.attr(属性名，属性值)

removeAttr()删除
元素集合.removeAttr(属性名)

prop()设置自定义属性
removeProp()删除

在这里插入图片描述

11、获取元素尺寸

在这里插入图片描述

12、操作位置关系

在这里插入图片描述

13、基础动画

show()显示
hide()隐藏
toggle()切换
在这里插入图片描述

14、折叠动画

slidedown()显示、slideup()隐藏、slidetoggle()

15、渐隐渐显动画

fadeIn()显示、fadeOut()隐藏、fadeToggle()
fadeTo(时间、指定透明度、运动曲线、回调函数)

16、综合动画

animate()

17、停止动画

元素集合.stop()
当代码执行到这句时，立刻停止
元素集合.finish()
当代码执行到这句时，直接去到结束位置

18、动画插件

添加链接描述

19、案例-回到顶部

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 60px;
            height: 60px;
            position: fixed;
            background-color: brown;
            right: 40px;
            bottom: 40px;
        }

        .go {
            height: 3000px;
        }
    </style>
</head>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
    <div class="go"></div>
    <div class="box">

    </div>

    <script>
        $('.box').click(() => {
            $('html').animate({
                scrollTop: 0
            }, 4000)
        })
    </script>
</body>

</html>

20、树状菜单

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul{
            width: 300px;
            border: 3px solid pink;
            margin: 30px auto;
            padding: 30px;
        }
        ul li ol{
            padding-left: 30px;
            display: none;
        }
        ul li ol li{
            height: 20px;
            line-height: 20px;
        }
        ul li::before{
            content: '+';
        }
        ul li.active::before{
            content: '-';
        }
    </style>
</head>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
    <ul>

        <li><span>第一级菜单</span>
            <ol>
                <li>+ 第二级</li>
                <li>+ 第二级</li>
                <li>+ 第二级</li>
            </ol>
        </li>
        <li><span>第一级菜单</span>
            <ol>
                <li>+ 第二级</li>
                <li>+ 第二级</li>
                <li>+ 第二级</li>
            </ol>
        </li>
        <li><span>第一级菜单</span>
            <ol>
                <li>+ 第二级</li>
                <li>+ 第二级</li>
                <li>+ 第二级</li>
            </ol>
        </li>
    </ul>

    <script>
        $('ul li').click(function () {
            $(this).toggleClass('active').siblings().removeClass('active')
            $(this).find('ol').slideToggle().parent().siblings().find('ol').slideUp()
        })
        
    </script>
</body>

</html>

22、鼠标跟随

<script>
        $('li').hover(
            function () {
                $('div').fadeIn(100)
                const src = $(this).find('img').prop('src')
                $('div').find('img').prop('src', src)
            },
            function () {
                $('div').fadeOut(100)
            }
        )
            .mouseover(function (e) {
                const x = e.pageX + 10
                const y = e.pageY + 10
                $('div').offset({ left: x, top: y })
            })
    </script>

23、jquery发送ajax请求

在这里插入图片描述

25、ajax发送跨域请求

在这里插入图片描述
在这里插入图片描述

26、ajax全局钩子函数

在这里插入图片描述
ajaxStart()
表示在同一个作用域下多个ajax请求的时候
第一个ajax请求之前

ajaxSend()
表示在每一个请求发送之前触发
只要有一个请求执行send方法了，就会先触发一次

ajaxSuccess()
只要有一个请求成功了，触发一次

ajaxError()
只要有一个请求失败了，就会触发一次

ajaxComplete()
只要有个请求完成了，就会触发一次

ajaxStop()
当你有多个请求时，在最后一个请求后触发，只执行一次

在这里插入图片描述

27、jQuery的多库并存

在这里插入图片描述

28、深浅拷贝

赋值：把一个对象的地址赋值给另一个对象
浅拷贝：复制一份，两份对象内容一样，只能操作对象里面一层
在这里插入图片描述

深拷贝：对象空间里面无论多少层都相对独立，利用递归思想实现
在这里插入图片描述

29、jQuery里面的深浅拷贝

$.extend(对象1,对象2···)
把从第二个对象开始里的每一个对象的数据拷贝到第一个里面
浅拷贝

$.extend(true,对象1,对象2···)
深拷贝

30、jQuery的插件扩展

在这里插入图片描述

32、表单验证插件

添加链接描述
在这里插入图片描述

33、jQuery的入口函数

$().ready(function(){})

在这里插入图片描述

34、轮播图

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
    <div class="banner">
        <ul class="img_box">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ol class="point_box"></ol>
        <div>
            <p class="left"></p>
            <p class="right"></p>
        </div>
    </div>
    <script>
        let timer = 0
        let index = 1
        setPoint()
        function setPoint() {
            const num = $('ul li').length
            let str = ""
            for (var i = 0; i < num; i++) {
                str += `<li class="${i === 0 ? 'active' : ''}"></li>`
            }
            $('.point_box')
                .html(str)
                .css('width', num * 35)
                .css('marginLeft', $('.point_box').width() / -2)
        }
        copyEle()
        function copyEle() {
            const first = $('.img_box').children().first().clone()
            const last = $('.img_box').children().last().clone()
            $('.img_box')
                .append(first)
                .prepend(last)
                .css({
                    width: $('.img_box li').length * 100 + '%'

                })
        }
        autoPlay()
        function autoPlay() {
            timer = setInterval(() => {
                index++
                $('.img_box').animate({ left: -index * $('.banner').width() }, 500, moveEnd())
            }, 1000);
        }
        function moveEnd() {
            if (index >= $('.img_box li').length - 1) {
                index = 1
                $('.img_box').css('left', -index * $('.banner').width())
            }
            if (index <= 0) {
                index = $('.img_box li').length - 2
                $('.img_box').css('left', -index * $('.banner').width())
            }
            $('.point_box li').removeClass('active').eq(index - 1).addClass('active')
        }

    </script>
</body>

</html>
BBsix666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Qt-无标题窗口
学而思
05-21 7347
        今天学习了下无标题窗口，于是来记录下我的学习过程首先建立一个Qt Widgets Application继承QWidget类创建完后直接运行就得到了如下效果那么，既然是无标题窗口就要去掉窗口栏啊，于是加上setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinimizeButtonHint);去掉标题栏，但是这样整个窗口就不能移动...
C#中实现无标题栏窗体拖动的代码
热门推荐
百锦再的博客
01-18 1万+
事件来实现拖动功能。当鼠标按下时，我们标记鼠标正在拖动，并保存当前坐标。在鼠标移动时，如果鼠标正在拖动，我们更新窗体的位置，使其跟随鼠标移动。当鼠标释放时，我们取消拖动标记。请注意，在窗体上添加了对应事件处理程序的窗体控件属性应该设置为对应的事件处理程序方法。在窗体设计视图，选择属性窗格，在事件选项卡中为。在C#中实现无标题栏窗体拖动的代码可以通过处理鼠标事件来实现。这样，当你在运行窗体时，你就可以通过鼠标拖动窗体来改变其位置。事件分别选择对应的处理程序方法。在这个示例代码中，我们通过处理。
Qt无标题窗口
05-21
在本文中，我们将深入探讨如何使用Qt框架创建一个无标题窗口，这在界面设计和自定义标题栏美化中非常有用。我们将关注`framelesswidget.cpp`、`main.cpp`、`framelesswidget.h`等核心文件，理解它们在实现无标题窗口...
VC去掉'无标题'字样的方法.zip
11-21
在使用Visual C++进行编程时，我们经常会在创建新的窗口或者对话框时默认看到标题栏显示为“无标题”。这可能会对用户界面的美观性和专业性造成一定的影响。本资料包提供了一种方法来帮助开发者去掉这个“无标题”...
visual c++取掉对话框窗口的 -无标题 字样的方法
08-04
在Visual C++编程环境中，创建窗口应用程序时，默认情况下，窗口标题栏可能会显示“-无标题”字样，这通常是由于没有正确设置窗口类或没有自定义窗口标题所导致的。要解决这个问题，我们需要深入理解Windows API中的...
c#实现无标题栏窗口的拖动
09-05
本篇文章将详细讲解如何在C#中实现这种无标题栏窗口的拖动以及其他基本操作。 首先，为了实现无标题栏窗口的拖动，我们需要处理窗体的鼠标事件。窗体的`FormBorderStyle`属性应设置为`None`，这会去除窗体的边框和...
Android 全屏无标题栏的三种实现方法
09-02
在Android应用开发中，有时我们需要实现全屏无标题栏的效果，以提供更加沉浸式的用户体验。以下将详细介绍三种在Android中实现全屏无标题栏的方法。 ### 方法一：通过Java代码 在Activity的`onCreate()`方法中，在...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 201
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 93
vue 自定义滚动条同步拖动（移动端）
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 875
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Webkit简介以及工作流程
读心悦
07-10 302
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 199
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 85
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 303
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 130
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
javascript高级部分笔记
喵喵的博客
07-09 1262
javascript高级部分 Function方法 与 函数式编程 call 语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义：调用一个对象的一个方法，以另一个对象替换当前对象。 说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 let myName = 'goudan
设置无标题 android
05-02
在Android应用中，设置无标题是一种简洁和美观的设计方式，可以为用户提供更流畅的使用体验。以下是一些实现设置无标题的方法： 1. 在Android的Manifest文件中，找到对应Activity的标签，并添加”android:theme="@...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值