认知 jQuery

已于 2022-06-26 15:52:20 修改
阅读量183 收藏
点赞数
分类专栏： jQuery 文章标签： jquery javascript ecmascript
于 2022-06-25 17:14:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48610566/article/details/125459719
版权

本文章将持续更新在jQuery学习中遇到的知识点、问题及相关事件，帮助在复习时快速建起全局认知。

文章目录

一、基础认知

1、简介

（1）jQuery 是一个 JavaScript 函数库。
（2）jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。
（3） jQuery 库包含以下功能：

  • html 的元素选取
  • html的元素操作
  • html dom遍历和修改
  • js特效和动画效果
  • css操作
  • html事件操作
  • ajax异步请求方式

*提示： 除此之外，jQuery 还提供了大量的插件。

2、理念

写的少做的多

3、步骤

（1）引入jQuery

<script src="../jquery-3.4.1.js"></script>

（2）在入口函数内写demo

<!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>
    <script src="../jquery-3.4.1.js"></script>
</head>

<body>
    <button id="hide">隐藏</button>

    <script>
        // jQuery:
        //  $是一个全局对象，代表了jQuery, 意味着$ = jQuery
        // 入口函数全写：
        // $(document).ready(function(){
        //     jQuery代码
        // })
        
        $(function () {//jQuery的入口函数(简写)
            $('#hide').bind('click', function () {
                alert('你单击按钮')
            })
        })

        // // 底层方式
        // var btn=document.querySelector('#hide')
        // btn.addEventListener('click',function(){
        //     alert('你单击按钮')
        // })
    </script>
</body>

</html>

4、基本选择器

（1）ID选择器：#id属性值
（2）类选择器：.属性值
（3）标签选择器：标签名

5、基本过滤选择器

（1）：first：选择第一个
（2）：last：选择最后一个
（3）：not(selector)：不是某一个属性的元素
（4）：even：索引为偶数
（5）：odd：索引为基数
（6）：eq（index）：索引等于index的元素
（7）：qt（index）：索引大于index的元素
（8）：lt（index）：索引小于index的元素

<!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>
    <script src="../jquery-3.4.1.js"></script>
</head>

<body>
    <button id="hide">隐藏</button>
    <br><br>
    <p id="p1">jQuery学习</p>
    <br><br>
    <p class="pt">html学习</p>
    <p class="pt">Css学习</p>
    <br><br>
    <div>红楼梦</div>
    <div>三国演义</div>
    <div>水浒传</div>
    <div>西游记</div>

    <script>
        // jQuery:
        //  $是一个全局对象，代表了jQuery, 意味着$ = jQuery
        // 入口函数全写：
        // $(document).ready(function(){
        //     jQuery代码
        // })

        $(function () {//jQuery的入口函数(简写)
            $('#hide').bind('click', function () {
                alert('你单击按钮')
            })

            // 修改元素为P1的元素的颜色
            $('#p1').css('backgroundColor','red')

            // 修改class为pt的文本颜色
            $('.pt').css('color','blue')

            // 将所有p标签的文本大小设置为25px
            $('p').css('fontSize','25px')

            // 将第一个p标签的背景色改为深绿色
            $('p:first').css('backgroundColor','lightpink')

            // 将最后一个p标签的背景颜色改为浅绿色
            $('p:last').css('backgroundColor','lightgreen')

            // 将class属性不是pt的元素的字号变小
            $('p:not(.pt)').css('fontSize','18px')

            // 索引为偶数的元素
            $('div:even').css('color','red')

            // 索引为奇数的元素
            $('div:odd').css('color','pink')

            // 索引为2的div的字号像素为20px
            $('div:eq(2)').css('fontSize','20px')
        })

        // // 底层方式
        // var btn=document.querySelector('#hide')
        // btn.addEventListener('click',function(){
        //     alert('你单击按钮')
        // })
    </script>
</body>

</html>

6、属性选择器

（1）[attribute]：拥有给定属性的元素
（2）[attribute=value]：选取指定属性的值为value的元素
（3）[attribute!=value]：选取属性值不等于value的元素
（4）[attribute^=value]：选择属性值为value开始的元素
（5）[attribute$=value]：选择属性值为value结尾的元素
（6）[attribute*=value]：选择属性值中含有value的元素

<!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>
    <script type="text/javascript" src="../jquery-3.4.1.js"></script>
</head>
<body>
    用户名：<input type="text" name="userName">
    <br><br>
    密&nbsp;&nbsp;码：<input type="password" name="" id="">
    <br><br>
    年&nbsp;&nbsp;龄：<input type="number" name="agenumber" id="" max="120" min="0">
    <br><br>
    地&nbsp;&nbsp;址：<input type="text" name="address" id="">
    <br><br>
    电话号码：<input type="tel" name="userPhone" id="">
    <br><br>
    QQ号码：<input type="text" name="qqnumber" id="">


    <script>
        $(function(){
            // 将具有max的属性的文本设为红色
            $('input[max]').css('color','red')

            // 将name属性值为username的input的文本设置为蓝色
            $('input[name=userName]').css('color','blue')

            // 将除了用户名栏设置成粉色
            $('input[name!=userName]').css('color','pink')

            // 将name值为user开头的元素字号变为25
            $('input[name^=user]').css('fontSize','25px')

            // 将以phone结尾的元素字号变为38px
            $('input[name$=number]').css('fontSize','38px')

            // 将type属性值中含有word的文本颜色设置为yellow
            $('input[type*=word]').css('color','yellow')
        })
    </script>
</body>
</html>

二、jQuery中操作元素的属性

1、读取属性值

语法：attr(属性名)

let t=$('#p1').attr('name')

2、修改属性的值

（1）修改单个属性值

语法：attr('key','value')

$('img').attr('src','../img/002.JPG')

（2）设置多个属性值

语法：attr({属性名：属性值，属性名：属性值})

*键值对不要带双引号，容易被误解为常量

 $('img').attr({'src':'../img/002.JPG','width':'100px','height':'100px'})

（3）函数设置值

语法：attr(key,fn)
在函数中设置属性的值，key需要用括号括起来。

$('img').attr('src',function(){
                    return '../img/002.JPG'
                })

（4）删除属性

语法：removeAttr(属性名)

$('img').removeAttr('src','../img/002.JPG')

3、实操（一）

<!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>
    <script src="../jquery-3.4.1.js"></script>
</head>
<body>
    <p id="p1" name="pt">大唐芙蓉园</p>
    <button id="btn">显示图片</button>
    <button id="del">删除图片</button>

    <br><br>
    <img src="" alt="" srcset="">

    <script>
        $(function(){
            //获取id为p1的元素为name的属性值
            let t=$('#p1').attr('name')
            console.log(t)

            // 显示图片
            $('#btn').bind('click',function(){
                //$('img').attr({'src':'../img/002.JPG','width':'100px','height':'100px'})
                $('img').attr('src',function(){
                    return '../img/002.JPG'
                })
            })
            // 删除图片
            $('#del').bind('click',function(){
                $('img').removeAttr('src','../img/002.JPG')
            })
        })
    </script>
</body>
</html>
  • 初始页面

结果-0

  • 显示图片

结果-1

  • 删除图片

结果-2

三、jQUery操作元素的样式

1、通过class属性修改

（1）给元素添加指定的类名（class属性值）

语法：addClass(类名)

 $('#sp').addClass('ok')//给span增加了一个class属性，值为OK

（2）删除元素的class属性

语法：removeClass（类名）

$('#sp').removeClass('ok')//避免持续写入导致类名错误

2、通过CSS样式修改

（1）获取CSS样式属性值

语法：css('属性名')

let k=$('p').css('color')//获取p标签的color值

（2）设置单个CSS样式

语法：css(key,value)

参数key是属性名，参数value是属性值，每个都要单独带括号

$('#p2').css('color','blue')

（3）设置多个CSS样式

语法：css({key:value,key:value,key:value})

$('#p2').css({'color':'blue','fontSize':'20px'})

（4）实操（二）

<!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>
    <script src="../jquery-3.4.1.js"></script>
</head>
<body>
    <p style="color: red;" id="p1">前端学习</p>
    <p id="p2">设置样式</p>
    <script>
        $(function(){
            // let k=$('p').css('color')//获取p标签的color值
            // console.log(k)

            // 设置样式属性
            $('#p2').css({'color':'blue','fontSize':'20px'})

            // 
            let g=$('#p1').html()//获取p标签的color值
            console.log(g)
        })
    </script>
</body>
</html>
  • 错误密码：

结果-3

  • 正确密码：

结果-4

3、获取宽度和高度

（1）获取宽度

语法：width（）

（2）设置宽度

语法：width（value）

（3）获取高度

语法：height()

（4）设置高度

语法：height(value)

4、操作标签的HTML代码

也就是通过html修改一个元素的内容

（1）获取值

语法：html()

let g=$('#p1').html()//获取p标签的color值
console.log(g)

（2）设置值

语法：html(value)

 $('#sp').html('用户名错误')

5、操作input标签的值

（1）获取值

语法：属性.val()

$('input[type=text').val()

（2）设置值

语法：属性名.val(属性值)

$('input[type=text').val('更改文本')

（3）实操（三）

<!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>
    <script src="../jquery-3.4.1.js"></script>
</head>
<body>
    用户名：<input type="text" name="" id="" value="12345">
    <input type="button" value="确定">

    <script>
        $(function(){
            $('input[type=button]').bind('click',function(){
                // alert($('input[type=text').val())
                $('input[type=text').val('更改文本')
            })
        })
    </script>
</body>
</html>
  • 点击按钮之前：

结果-5

  • 点击按钮之后：

结果-6

四、jQuery事件处理

与JavaScript基本一致，但增加了一些增强和扩展，使得代码更加简洁强壮。

1、页面载入事件

（1）在JavaScript中

语法：window.onload()

（2）在jQuery中

语法：

完整写法：
$(document).ready(function(){demo})
简写：
$(function(){ demo})

2、给元素绑定事件

（1）直接绑定事件

语法：bind(type,[data],fn)
type：表示事件类型，必须有
data：可选参数，传递给事件对象的额外数据，一般不用
fn：是一个回调函数

$('div').bind('mouseout',function(){
                $(this).css('backgroundColor','red')
            })

（2）事件名绑定

语法：元素对象.事件名（function(){ demo }）
常用事件：

点击本链接可跳转《JS常用事件》

$('div').mouseout(function(){
                $(this).css('backgroundColor','red')
            })

3、反绑定

意义：取消绑定的事件
语法：unbind([type],[data])
type：事件类型，可选的
data：可选参数，传递给事件对象的额外数据

（1）取消所有绑定的事件

语法：unbind()

$('div').unbind()

（2）取消指定的事件

语法：unbind(type)

 $('div').unbind('mouseout')

4、实操（四）

<!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>
    <script src="../jquery-3.4.1.js"></script>
</head>
<body>
    <button id="all">取消所有绑定</button>
    <button id="one">取消指定事件绑定</button>
    <br><br>
    <div style="background-color: red;width:100px;height:100px;"></div>
    <script>
        $(function(){
            $('div').bind('mouseover',function(){
                $(this).css('backgroundColor','blue')
            })
            $('div').bind('mouseout',function(){
                $(this).css('backgroundColor','red')
            })
            // 取消绑定在div上的所有事件
            $('#all').bind('click',function(){
                $('div').unbind()
            })
            // 取消绑定在div上的一个事件
            $('#one').bind('click',function(){
                $('div').unbind('mouseout')
            })
        })
    </script>
</body>
</html>
  • 初始界面：
    初始状态

初始界面-鼠标移上去
初始界面-鼠标移开

  • 单击“取消所有绑定”：

页面状态-无论鼠标在哪里都不影响

  • 单击“取消指定事件绑定”：

单击后不做任何动作
单击后鼠标移上去
单击后鼠标移开

5、一次性绑定

意义：绑定的时间只能执行一次
语法：one(type,[data],fn)

 $('button').one('click',function(){
                alert('一次性绑定')
            }

6、模拟鼠标悬停

语法：hover(over,out)
over：是一个函数，当鼠标进入时执行
out：是一个函数，鼠标离开时执行

  • 写法一：
$('img').hover(function(){
                $(this).attr('src','../img/1.png')
            },function(){})
$('img').hover(function(){},function(){
                $(this).attr('src','../img/002.JPG')
            })
  • 写法二：
function over(){
                $('img').attr('src','../img/1.png')
            }
            function out(){
                $('img').attr('src','../img/002.JPG')
            }
            $('img').hover(over,out)

7、实操（五）

<!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>
    <script src="../jquery-3.4.1.js"></script>
</head>
<body>
    <button>一次绑定</button>
    <br><br>
    <img src="../img/002.jpg" alt="" style="width: 100px;height:100px;">

    <script>
        $(function(){
            $('button').one('click',function(){
                alert('一次性绑定')
            })
            // $('img').hover(function(){
            //     $(this).attr('src','../img/1.png')
            // },function(){})
            // $('img').hover(function(){},function(){
            //     $(this).attr('src','../img/002.JPG')
            // })

            // 写法二：
            function over(){
                $('img').attr('src','../img/1.png')
            }
            function out(){
                $('img').attr('src','../img/002.JPG')
            }
            $('img').hover(over,out)
        })
    </script>
</body>
</html>
  • 初始页面

初始页面

  • 一次性绑定

第一次点击
之后的点击

  • 鼠标悬停
    鼠标移入图片
    鼠标移出图片

五、jQuery的动画

1、元素的隐藏和显示

（1）隐藏

语法：hide(speed,[callback])
speed：一个参数，隐藏对象所用时间
callback：可选参数，当对象隐藏后执行该参数

$('img').hide(2000)

（2）显示

语法：show(speed,[callback])
speed：一个参数，显示对象所用时间
callback：可选参数，当对象显示后执行该参数

$('img').show(4000)

（3）交替

语法：toggle(speed,[callback])
意义：如果隐藏就显示，如果显示就隐藏
speed：表示速度，可以是数字也可以是表示数字的字符串（‘slow’，‘normal’，‘fast’）
callback：可选参数，当事件执行后执行该参数

$('#toggle').bind('click',function(){
                $('img').toggle('normal')
            }

（4）实操（六）

<!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>
    <script src="../jquery-3.4.1.js"></script>
</head>
<body>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id='toggle'>交替</button>
    <br><br>
    <img src="../img/002.JPG" alt="" style="width: 200px;height:200px">

    <script>
        $(function(){
            // 隐藏
            $('#hide').click(function(){
                $('img').hide(2000)//参数是时间，单位是毫秒，默认是600
                alert('图片已隐藏')
                
            })

            // 显示
            $('#show').click(function(){
                $('img').show(4000)
                alert('图片已显现')
            })

            // 交替
            $('#toggle').bind('click',function(){
                $('img').toggle('normal')
            })
        })
    </script>
</body>
</html>
  • 初始页面：

在这里插入图片描述

  • 隐藏

先显示Alert
再隐藏图片

  • 显示
    先显示Alert
    再显示图片

  • 交替

图片显示时点击交替则隐藏
图片隐藏时点击交替则显示

2、收缩与展开

（1）收缩

语法：slideUp(speed,[callback])

$('img').slideUp(2000)

（2）展开

语法：slideDown(speed,[callback])

$('img').slideDown()

（3）交替

语法：slideToggle(speed,[callback])

$('img').slideToggle('fast')

3、淡入淡出

本质上通过改变对象的透明度来实现动画。

此处建议点击链接复习《用CSS3实现滤镜——常见九种效果》

（1）淡入

语法：fadeIn(speed,[callback])

$('img').fadeIn(2000)

（2）淡出

语法：fadeOut(speed,[callback])

$('img').fadeOut()

（3）透明度固定

意义：表示对象的透明度，范围在【0~1】，可以指定对象不透明程度的函数
语法：fadeTo(speed,opacity,[callback])

 $('img').fadeTo('slow',0.5)

（4）透明度的交替

语法：fadeToggle(speed,[callback])

$('img').fadeToggle(4000)

（5）实操（七）

<!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>
    <script src="../jquery-3.4.1.js"></script>
</head>
<body>
    <button id="up">收缩</button>
    <button id="down">展开</button>
    <button id="toggle_1">交替</button>
    <br><br>
    
    <button id="out">淡出</button>
    <button id="in">淡入</button> 
    <button id="to">指定透明度</button>   
    <button id="toggle_2">交替</button>
    <br><br>

    <img src="../img/6.png" alt="" style="width: 200px;height:150px;">

    <script>
        $(function(){
            $('#up').bind('click',function(){
                $('img').slideUp(2000)
            })
            $('#down').bind('click',function(){
                $('img').slideDown()
            })
            $('#toggle_1').bind('click',function(){
                $('img').slideToggle('fast')
            })

            $('#in').bind('click',function(){
                $('img').fadeIn(2000)
            })
            $('#out').bind('click',function(){
                $('img').fadeOut()
            })
            $('#to').bind('click',function(){
                $('img').fadeTo('slow',0.5)
            })
            $('#toggle_2').bind('click',function(){
                $('img').fadeToggle(4000)
            })
        })
    </script>
</body>
</html>
  • 初始页面

初始页面

  • 收缩

点击收缩

  • 展开

点击展开

  • 收缩展开交替

在展开时点击交替
在收缩时点击交替

  • 淡出

点击淡出

  • 淡入

点击淡入

  • 透明度固定
    点击指定透明度

  • 淡入淡出交替

在图片显示时点击交替

在图片不显示时点击交替

这里可以轻松看出，在代码运行过程中，已运行的程序不会被撤销，如果之前已经指定了透明度，那之后的显示中透明度就会直接被固定，包括之后点击“淡入”也将是一样的结果。

云喵喵是淼淼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
初步认知jQuery
欢迎来到我的博客，一起学习Java！
08-16 84
jQuery：是JavaScript的一个类库全写JavaScript querywrite less do more JavaScript查询写的更少做的更多 第一步先导入js文件： <script type="text/javascript" src="js/js.js" charset="UTF-8"></script> 然后再去写你想要操作的元素。例：...
JQuery 认知
Star_kang的博客
10-23 139
一，jQuery框架 jQuery是JavaScript框架 jQuery功能：HTML标签的选区，标签的操作，CSS操作，事件操作，动画设置，DOM操作，Ajax等 jQuery是轻量级“写的少”，“做的多”， 二，jQuery的语法 ：表示jQuery框架的标识符基本方法：：表示jQuery框架的标识符 基本方法：：表示jQuery框架的标识符基本方法：(选择器或标签对象)，方法();...
Jquery总体认知
过客如期的博客
12-07 67
一，什么是jquery 1.jquery是javascript的库，大小为97kb 二，jquery的作用 1.jquery主要是简化了原生的dom操作， 2.对ajax进行了封装
我对 jQuery浅浅的认知
weixin_45613892的博客
06-15 397
作为一个要一直和大前端打交道后半生的人，我觉得jQuery我还是要了解一下的，虽然现在好多开发更倾向于选择使用vue,react框架，但仍然存在一些公司使用的jQuery，毕竟它曾经也是那么的万人瞩目。jQuery最吸引人的一点就是它的兼容性，了解前端发展的铁子都知道，原来的前端开发主要是解决各种兼容性问题，而jQuery正好解决了这点，估计那时候它是真的香啊。进入正题，就我对jQuery的浅学习做一下梳理jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的Java
我所认知的jQuery
King的博客
08-04 82
笔记放在Github上，点击访问下载 jQuery是一个优秀的JavaScript库 jQuery的特性： HTML元素的获取和操作 CSS的操作 HTML事件函数 JavaScript的特效动画 HTMLDOM的遍历与修改 AJAX Utilities jQuery的优势及特点： 轻量级 强大的选择器 出色的DOM操作的封装 可靠地事件处理机制 完善的Ajax 不污染顶级变量 出色的...
对jQuery的认知
weixin_45174624的博客
06-25 106
jQuery入门 1. 什么是jQuery 它是一个轻量级的javascript类库 注1：就一个类“jQuery”，简写“”注1：” 注1：”注1：就是jQuery简写 2.Javascipt跟jQuery的区别： Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。 jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发...
jQuery的认知
奇里蓝天
09-03 568
1、$("ul>il")与$("ul il")的qubie
jQuery
therain123的博客
05-12 94
系列文章目录 例如：第三章 jQuery学习记录 第一节 jQuery初步认知 javascript概念 基于Js语言的API和语法组织逻辑，通过内置window和document对象，来操作内存中的DOM元素 JQuery概念 是一个javascript代码仓库，我们称之为javascript框架。 是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。 它可以帮我们做什么(有什么优势) 轻量级、体积小，使用灵巧(只需引入一个js文件) 强大
jQuery的一些认知
weixin_41049260的博客
09-21 141
一、认识jQuery库 1、js和jQuery的关系？ js是网页开发语言，jQuery是基于js的一种框架，也是对js对象和函数的封装。 2、创立者和时间，以及思想 jQuery是由美国人John Resig在2006年创建的。 设计思想：write less,do more (写更少，做更多)。 3、jQuery能做什么？ 访问和操作DOM元素 控制页面样式 对页面事件进行处理 可以扩展新的...
jQuery 认知.docx
09-25
本文档为jQuery认知，用于初学者了解jQuery优点，对象，以及基本的jQuery选择器
jQuery 认知
09-26
jQuery 认知
jquery-3.4.1.zip
07-27
本文以淘宝作为例子，介绍从一百个并发到千万级并发情况下服务端的架构的演进过程，同时列举出每个演进阶段会遇到的相关技术，让大家对架构的演进有一个整体的认知，文章最后汇总了一些架构设计的原则。
jQuery编写的本地todolist
11-08
jQuery编写的本地todolist 适合初学jQuery的新手尝试的一个小项目 涉及很多方面 写完以后能够大大提高对jQuery代码的理解和认知
Head First jQuery（中文版）
03-02
通过使用认知科学和学习理论的最新研究成果，你将享受一种多感官学习体验，《head first jquery（中文版）》采用了一种专门为你的大脑而设的丰富格式娓娓道来，而不是长篇累牍地说教，让你昏昏欲睡。
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1085
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1059
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 332
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Vue3 - 实现一个雨水滴落的动画效果
良月柒
05-29 142
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
jquery input val发生变化时触发事件
05-27
可以使用jQuery的change事件来监听input元素的值变化，示例代码如下： ```javascript $("input").on("change", function() { // 处理input值变化后的逻辑 }); ``` 当input元素的值发生变化时，change事件会被触发，你可以在事件处理函数中编写相应的逻辑来处理输入值的变化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值