JavaScript
Keeling1720
这个作者很懒,什么都没留下…
展开
-
js实现睡眠方法(sleep)
js实现睡眠方法(sleep)如果你不需要用到原函数的this那么这么用。(需要用到this请往下看)//这种用法在doSomething处使用this的话,指向的是匿名函数//3000表示睡眠3s后执行doSomethingsetTimeout(function(){ //doSomething(这里写时间到之后需要去做的事情)}, 3000);这种用法的好处是,你的this还是原函数的this。function sleep (time) { return new Promise((原创 2021-12-08 16:26:37 · 17863 阅读 · 2 评论 -
jQuery使用bind绑定多个事件后,怎么判断是触发了哪个事件
jQuery使用bind绑定多个事件后,怎么判断是触发了哪个事件其实,只需要在function中传入参数event,然后通过判断event的type值即可,代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="原创 2021-07-01 10:48:59 · 305 阅读 · 0 评论 -
jQuery中子元素触发事件的时候怎么才能不触发父元素的事件
很简单,只需要在子元素的触发事件末尾添加一个return false即可。原创 2021-07-01 10:41:14 · 640 阅读 · 0 评论 -
jQuery中常用的事件处理方法(click、mouseover、mouseout、bind、one、live、unbind)
文章目录jQuery中常用的事件处理方法clickmouseovermouseoutbindoneunbindlivejQuery中常用的事件处理方法click作用:用于绑定单击事件以及触发单击事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text原创 2021-07-01 10:10:51 · 647 阅读 · 0 评论 -
jQuery对DOM进行增删改(jQuery实现动态添加html标签、删除html标签、删除html标签)
文章目录jQuery对DOM进行增删改增增加子标签增加兄弟元素改删jQuery对DOM进行增删改增增加子标签A.appendTo(B) :把A插入到B的最后一个子元素A.prependTo(B) :把A插入到B的第一个子元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <原创 2021-06-30 17:07:18 · 380 阅读 · 1 评论 -
jQuery获取、设置标签属性值
jQuery获取、设置标签属性值jQuery提供了两种方法:attr():传入一个参数获取某属性值,两个参数:修改某属性值,返回参数的值(不推荐操作checked、readOnly、selected、disabled等等)prop():传入一个参数获取某属性值,非空返回true,没有该属性返回false,修改的时候,用true和false替代前面直接传值(只推荐操作checked、readOnly、selected、disabled)...原创 2021-06-29 18:48:20 · 861 阅读 · 0 评论 -
jQuery的html()、text()、val()
jQuery的html()、text()、val()前面介绍DOM的时候,我们提到过,可以通过DOM对象的innerText、innerHTML等信息修改标签的文本和属性等信息。那么,jQuery可不可以呢?答案是肯定的。且看下面介绍:html():设置和获取起始标签到终止标签中的内容,相当于innerHTMLtext():设置和获取起始标签到终止标签中的文本,相当于innerContextval():设置和获取表单项的value属性值废话不多说,代码来一波:<!DOCTYPE h原创 2021-06-29 16:48:21 · 261 阅读 · 1 评论 -
jQuery的元素的筛选
jQuery的元素的筛选前面介绍了很多的过滤器,现在统一一下,把他们变成一种方法,然后再加上一些特有的方法,这就是本章所要讲的内容。比如:原先的$(div:eq(index)),其实我们也可以直接通过调用方法替代这种花里胡哨的写法——$(“div”).eq(index)。下面给出几个例子:eq(index):获取第N个元素first :获取第一个元素last:获取最后一个元素filter(expr/ obj/ ele/ fn):筛选出与指定表达式匹配的元素集合,用逗号分割多个表达式原创 2021-06-27 14:22:25 · 330 阅读 · 1 评论 -
jQuery的属性过滤选择器
jQuery的属性过滤选择器jQuery的属性过滤选择器一般用中括号[]表示,有以下几种:[attribute]:匹配包含给定属性的元素[attribute=value]:匹配给定的属性是某个特定值的元素[attribute!=value]:匹配所有不含有指定属性或不等于指定属性的元素[attribute^=value]匹配以某些值开始的元素[attribute$=value]:匹配以某些值结尾的元素[attribute*value]:匹配包含某些值的元素原创 2021-06-27 10:55:16 · 890 阅读 · 0 评论 -
jQuery的内容过滤选择器
jQuery的内容过滤选择器内容过滤选择器有四种::contains(text)匹配包含text文本信息的元素:empty 匹配所有不包含文本或没有子元素的元素:parent 匹配含有子元素或者文本的元素:has(selector)匹配含有选择器所匹配的元素的元素:contains(text)例子::empty例子::parent例子:has(selector)例子:...原创 2021-06-27 10:34:23 · 214 阅读 · 0 评论 -
jQuery的基本过滤选择器
jQuery的基本过滤选择器基本过滤选择器有很多,通过在元素后加冒号:表示,简略介绍如下::first 指代第一个(div:first表示第一个div):last 指代最后一个(div:last表示最后一个div):not(selector) 指代去除所有与给定选择器匹配的元素(input:not(:checked)表示所有未选中的input):even 指代所有索引值为偶数的元素,从0开始计数(tr:even表示第0、2、4、6…的tr元素):odd 指代所有索引值为奇数的元素,从0开始计数原创 2021-06-27 10:21:58 · 423 阅读 · 0 评论 -
jQuery层级选择器(常用)
jQuery层级选择器(常用)层级有四种:某元素A的所有后代元素B用空格表示(例:form input表示form中的所有input标签)某元素A的子元素B用>表示(例:form>input仅表示form中的input子元素)某元素A下边的元素B用+表示(例:label>input表示前面是label的input元素)某元素A后边的兄弟元素B用~表示(例:form~input表示与form互为兄弟元素的input元素)<!DOCTYPE html><ht原创 2021-06-27 10:04:10 · 405 阅读 · 1 评论 -
jQuery基础选择器(较常用)
jQuery基础选择器(较常用)jQuery的四大基本选择器:id选择器:$("#idValue"):查询id为idValue的对象类选择器:$(".className"):查询class为className的对象标签选择器:$(“div”):查询标签为div的对象混合选择器:$(“div,.className”):查询满足标签为div或class为className的对象<!DOCTYPE html><html lang="en"><head>原创 2021-06-27 10:03:31 · 178 阅读 · 0 评论 -
jQuery核心函数
文章目录jQuery核心函数$的简介$的四个主要用法1.传入函数2.传入HTML标签字符串3.传入选择器字符串4.传入DOM对象jQuery核心函数看了前一篇博客的亲,可能会觉得这个$用着好奇怪。下面,我们就来说说$是个什么东西?他到底有什么用?$的简介$是jQuery的核心函数,能完成jQuery的很多功能,${}就是调用$这个函数$的四个主要用法1.传入函数相当于window.onload() = function(){ }例子:<!DOCTYPE html><h原创 2021-06-25 18:50:20 · 100 阅读 · 1 评论 -
jQuery的下载和简单使用
文章目录jQuery的下载jQuery的简单使用jQuery的下载官方下载网址:https://jquery.com/download/进去后,用谷歌浏览器翻译一下,选一个自己喜欢的下载即可:我下载的是第一个下载压缩的生产 jQuery3.6.0。进去后,右键鼠标点击另存为,把他下载到我们本地即可。jQuery的简单使用首先,我们把下载的jquery-3.6.0.min.js文件放到项目目录下然后我们在html中导入这个js文件,导入方式跟导入js文件一样。<script ty原创 2021-06-01 10:17:28 · 4739 阅读 · 3 评论 -
如何使用js添加html标签
文章目录如何使用js添加html标签如何使用js添加html标签其实很简单,只需要以下几个步骤:1.使用getElementById获取想要写的标签的父标签对象(body除外,当然body也可以获取,当时没必要,因为他可以通过document.body直接调用)2.使用createElement创建标签对象3.设置标签的属性和文本信息4.使用步骤1获取到的父标签对象的appendChild方法添加标签详细代码如下:<!DOCTYPE html><html lang="en原创 2021-06-01 09:32:31 · 20852 阅读 · 0 评论 -
js的事件
文章目录js的事件事件的注册静态注册onloadonclickonbluronchangeonsubmit动态注册onloadonclickonbluronchangeonsubmitjs的事件事件:电脑输入设备与页面进行交互的响应。常用的事件:onload:加载完成事件,常用于做页面js代码的初始化onclick:单击事件,常用于按钮点击响应onblur:失去焦点事件,常用于输入框失去焦点后验证内容合法性onchange:内容改变事件,常用于下拉框和输入框内容改变的响应onsubmit:原创 2021-05-27 09:27:17 · 190 阅读 · 1 评论 -
15.节点属性
在DOM中,每一个节点都是一个对象,DOM节点由三个重要的属性:原创 2021-02-03 18:57:47 · 486 阅读 · 1 评论 -
14.setAttribute和getAttribute的方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>set跟getAttribute</title> <style type="text/css"> #box{ color:red; } </style></head><原创 2021-01-31 16:56:37 · 395 阅读 · 1 评论 -
13.DOM和节点
文章目录DOM节点获取节点的方式DOMDOM全程:Document Object Model(文档对象模型)let person = { name : '张三', say : function(){ }}在js中,对象分为三种:(1)用户定义的对象(2)内建对象Array Date Math(3)宿主对象通常,我们把DOM看成一棵家谱树。例如以下代码:<body> <h1>你想学习什么编程语言?</h1> <p title原创 2021-01-31 16:40:51 · 202 阅读 · 0 评论 -
12.随机数、颜色、验证码
文章目录随机数字、颜色和验证码随机数字、颜色和验证码<!DOCTYPE html><html lang="UTF-8"><head> <meta charset="UTF-8"> <title>随机</title></head><body> <script type="text/javascript"> //随机min到max之间的整数原创 2021-01-26 23:52:41 · 133 阅读 · 0 评论 -
11.Date日期对象
文章目录创建方式日期的常用方法日期格式化方法创建方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Date日期对象</title></head><body> <script type="text/javascript"> //Date日期对象,范围为UTC 19原创 2021-01-25 21:34:23 · 428 阅读 · 0 评论 -
10.字符串的方法
文章目录字符串的字符和切片方法查找字符所在的位置字符串的字符和切片方法<!DOCTYPE html><html lang="UTF-8"><head> <meta charset="UTF-8"> <title>字符串的常用方法</title></head><body> <script type="text/javascript"> //属性原创 2021-01-25 17:48:41 · 55 阅读 · 0 评论 -
9.数组
文章目录数组的栈方法和队列方法数组的栈方法和队列方法<!DOCTYPE html><html lang="UTF-8"><head> <meta charset="UTF-8"> <title>数组常用的方法</title></head><body> <script type="text/javascript"> //Array(数组)的定义原创 2021-01-23 17:53:00 · 92 阅读 · 0 评论 -
8.对象
在JS中,对于对象的创建和使用如下:<!DOCTYPE html><html lang="UTF-8"><head> <meta charset="UTF-8"> <title>对象</title></head><body> <script type="text/javascript"> //对象(属性和方法)字面量创建 姓名,年龄,性别,爱好(动作)原创 2021-01-23 17:34:00 · 61 阅读 · 0 评论 -
7.函数作用域和全局污染
下面,我们直接贴代码,首先,在js文件夹下新建一个first.jsp文件,如下:const name = "Mike";function temp() { console.log("Hello, I'm "+name);}然后新建一个second.jsp文件,如下:const name = "John";function temp() { console.log("Hello, I'm "+name);}之后我们在JavaScript文件夹下新建一个07_global.h原创 2021-01-22 22:46:16 · 218 阅读 · 0 评论 -
6.函数
由于for语句,逻辑运算符和算数运算符等等都跟Java基础一样,这里不多做解释。这里,我们讲一下JavaScript的函数:这里直接粘贴代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>函数</title></head><body> <script type="text/javas原创 2021-01-22 22:02:11 · 58 阅读 · 0 评论 -
5.if-else语句
这里比较容易,直接粘贴代码(跟Java类似)<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>条件判断</title></head><body> <script type="text/javascript"> //初始化变量 let distance = 10;原创 2021-01-22 13:22:26 · 500 阅读 · 0 评论 -
4.Array数组
Array数组下面直接用代码和注释解释:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script type="text/javascript"> //创建数组 //一维数组 let shopp原创 2021-01-02 21:32:21 · 147 阅读 · 0 评论 -
3.变量类型
文章目录变量类型基本的数据类型变量类型变量分为两种类型:一种是基本的数据类型,一种是引用的数据类型。基本的数据类型包括:number、string、boolean、undefined、null引用的数据类型包括:Object、Array、Function基本的数据类型基本的数据类型包括:NumberStringBooleanundefinednull新建一个HTML5文件,命名为03.variable_type,输入以下代码:由于截图太麻烦了,我就全部换成注释的形式了。<!原创 2021-01-02 21:04:06 · 1479 阅读 · 1 评论 -
2.变量介绍
新建一个文件02.variable,代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>变量</title></head><body> <script type="text/javascript"> //新版本的js把原本的var分成了const和let两部分原创 2021-01-02 20:44:47 · 78 阅读 · 0 评论 -
1.如何在HTML5中引入js文件
在HTML5中引入js文件有两种方式如下:新建一个html5文件,输入以下代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!-- 内部js--> <script type="text/javascript"> //编写js代码原创 2021-01-02 20:20:59 · 6249 阅读 · 2 评论