jQuery使用解读

已于 2024-02-01 12:00:07 修改
阅读量344 收藏 7
点赞数 10
文章标签： jquery 前端 javascript
于 2024-01-08 16:29:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78263022/article/details/135407887
版权

使用前提        npm install jquery        下载最新jq版本的jQuery

<script src = "放置jquery.js的路径"></script>        安装完成后导入jQuery

 选择器（如何拿元素）

1.jQuery的选择器：
语法：$('需要获取的元素')

1-2.jQuery的筛选器
语法：$ (  '需要获取的元素' .筛选器()  )

筛选器解释
first()取相同元素内第一个
late()取获取到相同元素的最后一个
eq(索引)从索引开始 如索填写的是4 则获取相同元素的第5个元素
next()

拿到指定元后的元素

nextAll()拿到指定元素后的所有元素
prev()拿到指定元素前一个元素
prevAll()拿到指定元素前一个所有元素
parent()拿到除了指定元素外的所有标签元素
parents()从指定元素开始 逐层开始获取
siglings()拿到指定元素的所有的兄弟元素
find()拿到指定元素下的find()的指定元素（所有）

操作元素

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <title>Test></title>
</head>
<body>

    <div>
        hellow word
        <p>你好 世界</p>
    </div>
    <input type="text">

    <script>
        //1.html()
        //等价与原生js中的innerHTML
        //参数可以识别标签
        console.log($('div').html('<h1>成功修改</h1>'))

        //2.text
        //等价于原生js的innerText
        //不识别标签
        console.log($('div').text("成功修改"))

        //3.val
        //等价与原生js中的value
        //作用：用来设置表单value的值
        console.log($('input').val('123456'))
    </script>
</body>
</html>

、

 操作类名

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <title>操作类名</title>
</head>
<body>

    <div class="a b c d">
        
    </div>

    <button>切换</button>

    <script>
        //1.  addClass()
        //语法：元素集合.addClass(需要添加的类名)
        $('div').addClass('e')

        //2.  removeClass()
        //语法：元素集合。removeClass(需要删除的类名)
        $('div').removeClass('b')
        
        //3.  toggleClass()
        //如果本身有这个类名就是删除 没有就是添加
        var get = document.querySelector('button')
        get.onclick = function(){
            $('div').toggleClass('box')
        }
    </script>
</body>
</html>

 操作元素样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <title>操作元素样式</title>
</head>
<style>
    div{
        background-color: red;
        width: 100px;
        height: 100px;
    }
</style>
<body>

    <div>

    </div>
    <button>点我变大</button>
    <button class="big">点我变的更大</button>

    <script>
        //css 设置样式
        //语法：元素集合.css('样式名'，'样式值')
        var btn = document.querySelector('button')
        btn.onclick = function(){
            $('div').css('width','300px')
            $('div').css('height','300px')
        }
        
        //Or

        var big = document.querySelector('.big')
        big.onclick = function(){
            $('div').css({
                width:500,
                height:500,
                'background-color':'yellow'
            })
        }
    
    </script>
</body>
</html>

操作元素属性

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <title>操作元素属性</title>
</head>
<body>

    <div class="a" id="b">我是div标签</div>

    <script>
        //attr()
        //作用：更改class or id 的属性值
        $('div').attr('id','c')

        //removeattr()
        //作用：删除属性值
        $('div').removeAttr('class')

        //prop()
        //作用和attr()一样 但只能修改prop自己创建的
    </script>
</body>
</html>

获取元素尺寸

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <title>jquery获取元素尺寸</title>
</head>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }

    div{
        width: 500px;
        height: 500px;
        padding: 20px;
        border: 20px solid black;
        background-color: skyblue;
        background-clip: content-box;
    }
</style>
<body>

    <div></div>

    <script>
        //width and height 拿到元素的宽高
        //获取内容的宽高
        console.log($('div').width())
        console.log($('div').height())

        //innerWidth() innerHeight()
        //拿到整个元素的宽高
        console.log($('div').innerHeight())
        console.log($('div').innerWidth())

        //outerWidth(true) outerheight(true)
        //拿到整个元素的 宽高 包含所有设置
        console.log($("div").outerHeight(true))
        console.log($("div").outerWidth(true))
    </script>
    </script>
</body>
</html>

 获取元素偏移量

        //offset()  position
        //速成的速度自己看ai吧

事件操作

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <title>事件绑定</title>
</head>
<style>
    div{
        background-color: red;
        width: 200px;
        height: 200px;
    }
</style>
<body>

    <div></div>

    <script>
        //on() 方法绑定事件
        //语法：on('事件类型','事件处理函数')
        $('div').on('click',function(){console.log('i am click even')})
        //事件委托
        //语法：on('事件类型','委托元素','事件处理函数')
        //作用：把指定元素交给$()选择的元素来执行 可以是一个元素集合来选定on（{}） 也就说批量绑定

        //one()作用与on()是一样的 只不过只能执行一次
        $('p').one({
            click:function(){console.log('1')},
            mouseover:function(){'鼠标移入事件'}
        })

        //hover()
        //语法：元素集合.hover(移入时触发的函数，移出时触发的函数)
        //当只写入一个函数时 移出移入都会触发

        //常用事件函数
        //click(),mouserover(),mouseout(),change(),......

        //off()
        //解除对应事件的处理函数

        //trigger()事件触发
        //使用代码的方式来触发
        //语法：元素集合.trigger(事件类型)
        setInterval(function(){
            //表示1000ms触发一次绑定div的click事件
            $('div').trigger('click')
        },1000)
    </script>
</body>
</html>

jquery基础动画效果

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <title>jquery基础动画绑定</title>
</head>
<style>
    *{margin: 0px;padding: 0px;}

    div{
        width: 500px;
        height: 500px;
        background-color: red;
    }
</style>
<body>
    <button>show</button>
    <button>hide</button>
    <button>toggle</button>

    <div></div>

    <script>
        $('button:nth-child(1)').click(function(){
            //执行 show 动画函数
            $('div').show(1000,'linear',function(){console.log('show触发了')})
        })
        $('button:nth-child(2)').click(function(){
            //执行 hide 动画函数
            $('div').hide(1000,'linear',function(){console.log('hide触发了')})
        })
        $('button:nth-child(3)').click(function(){
            //执行 toggle 动画函数
            $('div').toggle(1000,'linear',function(){console.log('toggle触发了')})
        })
    </script>
</body>
</html>

jquery折叠效果

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <title>jquery动画折叠效果</title>
</head>
<style>
    *{margin: 0px;padding: 0px;}

    div{
        width: 500px;
        height: 500px;
        background-color: red;
    }
</style>
<body>
    <button>slideDown</button>
    <button>slideUp</button>
    <button>slideToggle</button>

    <div></div>

    <script>
        $('button:nth-child(1)').click(function(){
            //执行 slideDown 动画函数
            $('div').slideDown(1000,'linear',function(){console.log('slideDown触发了')})
        })
        $('button:nth-child(2)').click(function(){
            //执行 hide 动画函数
            $('div').slideUp(1000,'linear',function(){console.log('slideUp触发了')})
        })
        $('button:nth-child(3)').click(function(){
            //执行 toggle 动画函数
            $('div').slideToggle(1000,'linear',function(){console.log('slideToggle触发了')})
        })
    </script>
</body>
</html>

jquery渐隐渐显效果

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <title>jquery的渐隐渐显效果</title>
</head>
<style>
    *{margin: 0px;padding: 0px;}

    div{
        width: 500px;
        height: 500px;
        background-color: red;
    }
</style>
<body>
    <button>fadeIn</button>
    <button>fadeOut</button>
    <button>fadeToggle</button>
    <button>fadeTo</button>

    <div></div>


    <!-- xxx动画函数('运动事件','指定透明度','运动曲线','运动回调函数') -->
    <!-- 具体看fadTo() -->

    <script>
        $('button:nth-child(1)').click(function(){
            //执行 slideDown 动画函数
            $('div').fadeIn(1000,'linear',function(){console.log('fadeIn触发了')})
        })
        $('button:nth-child(2)').click(function(){
            //执行 hide 动画函数
            $('div').fadeOut(1000,'linear',function(){console.log('fadeOut触发了')})
        })
        $('button:nth-child(3)').click(function(){
            //执行 toggle 动画函数
            $('div').fadeToggle(1000,'linear',function(){console.log('fadeToggle触发了')})
        })
            $('div').fadeTo(1000,'0.66','linear',function(){console.log('运动到了指定的透明度')})
    </script>
</body>
</html>

jquery综合动画效果

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <title>综合动画函数</title>
</head>
<style>
    *{margin: 0px;padding: 0px;}

    div{
        width: 200px;
        height: 200px;
        background-color: skyblue;
        position: absolute;
    }
</style>
<body>

    <button>开始 动画</button>

    <div></div>
    
    <script>
        /*
            综合动画
            animate()
            第一个参数：运动的样式 要以一个对象来实现
            第二个参数：运动时间
            第三个参数：运动曲线
            第四个参数：运动结束回调函数
        */

        $('button').click(function(){
            $('div').animate({
                width:400,
                height:400,
                left:200,
                top:200,
                'border-radius':'50%'
            },1000,'linear',function(){ cosole.log('运动结束') })
        })
    </script>
</body>
</html>

jquery动画结束函数

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <title>动画结束效果</title>
</head>
<style>
    *{margin: 0px;padding: 0px;}

    div{
        width: 500px;
        height: 500px;
        background-color: skyblue;
        position: absolute;
    }
</style>
<body>

    <button>开始动画</button>
    <button>停止(1)</button>
    <button>停止(2)</button>

    <div></div>



    <script>
        /*
            结束动画
            1.stop()
            目前运动到什么位置就结束在什么位置

            2.finish()
            直接结束动画的结束位置
        */

        $('button:nth-child(1)').click(function(){
            $('div').toggle(2000)
        })
        
        $('button:nth-child(2)').click(function(){
            $('div').stop()
        })

        $('button:nth-child(3)').click(function(){
            $('div').finish()
        })
    </script>

</body>
</html>

jQuery的Ajax请求方式

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <title>jQuery的Ajax请求方式</title>
</head>
<body>
    <script>
        /*
            语法：$.ajax({配置项})
            配置项：
            1.url 必填 请求地址
            2.method 选填 请求方式 默认get
            3.data 选填 默认时'' 表示携带后端的参数
            4.async 选填 默认时true 表示是否异步
            5.success 选填 表示成功回调函数
            6.error 选填 表示请求失败的回调函数
            res表示后端的回调结果
        */

        $.ajax({
            url:'http://localhost:3306/item/one',
            error:function(){
                console.log('连接失败')
                //......剩下的类推
            }
        })

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

KKAming
关注
  • 10
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery 源码解读
AruKing的博客
07-25 745
jquery 源码大概10000多行，每行都会解析可能不是很现实，可能也只会更新一版，这都看心情。 （function（global,factory）{...})（） 在这部分主要就是匿名函数 注释：匿名函数的好处：自执行里面所有东西都是局部的，防止和代码冲突。 那如何获取匿名函数里面的方法和属性呢？ 可以在里面挂在一个对象上，比如挂在windows上面 (function (){...
jQuery-简述篇
weixin_44908855的博客
11-16 1322
1. JavaScript库 javaScript库：是一个封装好的特定的集合（方法和函数） 在这个库中封装了很多预先定义好的函数在里面，比如动画animate、hide、show、比如获取元素等 简单理解：就是一个js文件，里面对我们原生js代码进行了封装，存放到里面，这样我们就可以快速高效的使用这些封装好的功能 比如jQuery，就是为了快捷方便的操作DOM，里面基本都是函数（方法） 常见的JavaScript库：jQuery、Prototype、YUI、Dojo、ExtJS、移动端的zepto，这些
jQuery源码解读二
xyr05288的专栏
05-18 585
$.callbacks----$.deferred --- $.data ---- $.queue这几项彼此有依赖关系六. jQuery.data参考文章： http://www.cnblogs.com/silin6/p/jQuery_data.html#data-2-x6.1 引入背景jQuery在1.2后引入jQuery.data（数据缓存系统），主要的作用是让一组自定义的数据可以DOM元素相
jQuery疑难解答
Hy_csdn_road的博客
03-18 691
jQuery 1. Var、let和const声明变量的区别是什么？ var: var在全局声明的变量会自动挂载到顶层对象window上 var声明变量，存在变量提升的现象 var会先将声明变量的操作放在作用域的顶部，之后再执行赋值等操作 因为代码存在变量提升，变量可以先使用再声明，造成代码可读性非常糟糕！var可以重复声明变量 let: let声明的变量不会挂载在window上 let声明变量，...
jQuery源码解读.ppt
06-17
1、基本选择器 2、层次选择器 3、过滤选择器 4、表单选择...$(".myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")
jQuery:jQuery 源码解读 -- jQuery v1.10.2
05-15
以下是对jQuery源码的深度解读。 ### 1. 兼容性处理 jQuery从诞生之初就致力于解决JavaScript在不同浏览器之间的兼容问题。在v1.10.2中，jQuery通过`jQuery.fn.init`初始化函数处理了各种浏览器差异，比如`...
jquery源码框架解读
10-20
6. **性能优化**：jQuery在设计时考虑了性能问题，如使用Sizzle选择器引擎优化DOM查找，使用缓存避免重复操作，以及延迟执行（`.deferred()`)和节流/debounce（防止频繁触发）等技术。 7. **源码结构分析**：jQuery...
jQuery源码解读
09-20
jQuery 源码解读 jQuery 是一款非常流行的 JavaScript 库，以其简洁的语法和强大的功能深受开发者喜爱。本文将深入探讨 jQuery 的源码结构和执行流程，帮助你更好地理解和运用这个库。 首先，jQuery 的核心架构是...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 244
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
Node多版本管理器NVM安装使用
GongWeiBuQi的博客
07-11 173
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 717
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
Javafx利用fxml变换场景的小细节
2301_80311013的博客
07-09 841
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 994
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
vue父子组件通信实现模糊搜索功能
全栈码农，专注java项目实战教程分享、大学生项目辅导开发讲解。
07-09 752
模糊搜索功能 每个网站都要用得到
Haproxy搭建Web群集
wkysdhr的博客
07-08 956
Haproxy 是目前比较流行的一种群集调度工具，同类群集调度工具有很多，如LVS 和Nginx。相比较而言，LVS 性能最好，但是搭建相对复杂;Nginx的upstream模块支持群集功能，但是对群集节点健康检查功能不强，高并发性能没有 Haproxy好。
Webkit简介以及工作流程
读心悦
07-10 308
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
​​ 翻页 上一页/下一页
szzlh123456789的博客
07-09 373
【代码】​​ 翻页 上一页/下一页。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 182
通过sm4对文件进行加解密，用户输入密码
jQuery代码解读
11-14
以下是一些解读jQuery代码的方法和技巧： 1.了解jQuery的基本结构：jQuery的核心代码包含在一个立即执行函数表达式(IIFE)中，该函数将window对象作为参数传递，并返回一个jQuery对象。这个jQuery对象是一个包含许多...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值