jQuery详解

已于 2022-04-15 15:11:35 修改
阅读量739 收藏
点赞数
分类专栏： 基础学习 文章标签： java 开发语言 前端
于 2022-03-06 00:21:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qdyones/article/details/123203268
版权
这篇博客详细介绍了JavaScript的基础知识，包括数据类型、字符串、数组、对象、分支循环、函数、DOM操作等内容，并深入讲解了jQuery的选择器、事件、DOM操作等核心特性。还涉及到了浏览器对象模型BOM的操作，如location、document、cookie等。
摘要由CSDN通过智能技术生成

文章目录

1.什么是JavaScript？

JavaScript是一门直接上最流行的脚本语言
ECMAScript是JavaScript的一种标准规范

2.基本使用及HelloWorld

JavaScript快速上手：第一个JavaScript
设置弹窗alert

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个JavaScript程序</title>
<!--    script标签内写JavaScript代码-->
<!--  <script !src="">-->
<!--    alert("hello world!");-->
<!--  </script>-->


<!--    外部引入 注意：script标签必须成对存在-->

    <script src="js/qd.js"></script>
<!--    不用显示定义type，也默认就是JavaScript-->
    <script type="text/javascript"> </script>

</head>
<body>






<!--这里也可以存放JavaScript代码-->
</body>
</html>

alert('hello world');

3.浏览器控制台的使用

控制台调试变量

在这里插入图片描述

控制台打印变量，相当于sout

![在这里插入图片描述](https://img-blog.csdnimg.cn/c5ddcaf9868143a5a4c50a940b9fb6dc.png

源码

在这里插入图片描述

调试代码

在这里插入图片描述

控制台最常用

在这里插入图片描述

4.数据类型快速浏览

1.数据类型：
数值、文本、图形、音频、视频……

2.js不区分小数和整数，Number
123 // 整数123
123.1 //浮点数123. 1
1.123e3 //科学计数法
-99	//复数
NaN //not a numbe 
Infinity //表示无限大

3.逻辑运算
 && 	与
 ||		或
 ！		非
 
4.比较运算符（很重要，相当于是JS的一个缺陷，坚持不要使用==比较）
=
==
等于(类型不一样，值一样，也会判断为true)
=== 
绝对等于(类型-样，值一样，结果true)

5.字符串
"abc" 'abc'

6.须知：NaN===NaN，这个与所有的数值都不相等，包括自
己只能通过isNaN(NaN)来判断这个数是否是NaN

7.空指针
null和undefined
●null空
●undefined 未定义

8.数组
Java的数值必须是相同类型的对象~，JS中不需要这样!
var arr = [1,2,3,4,5,'he11o' ,nu11，true]
取数组下标:如果越界了，就会
1 undefined

9.对象（所有变量都是用var关键字）
对象是大括号，数组是中括号
 var person={
            name:"suibian",
            age:15,
            tags:['js','java','web','66']
        }

属性之间用逗号隔开，最后一个属性不需要添加逗号

10.变量
主要不能以数字开头
可以用$开头，也可以使用下划线
也可以使用中文

浮点数问题：（尽量避免使用浮点数，存在精度问题）

在这里插入图片描述
可以使用判断测试范围
在这里插入图片描述

5.严格检查模式strict

前提是IDEA设置了es6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>严格检查模式</title>
    <script !src="">
        // 写js代码尽量带上严格检查模式↓ 避免出现js随意性产生的一些问题
        //下面这行代码必须写在JS第一行
        'use strict';
        // 全局变量：尽量避免，因为太容易冲突
        i=1;
        // 另外局部变量尽量都是用let定义
        let i=1;
    </script>
</head>
<body>

</body>
</html>

6.字符串类型详解

转义字符

’ 单引号
\n 换行
\t table空格
\u4e2d \u#### Unicode字符
\x41 Ascll字符

多行字符串编写

使用esc按键上的字符，就可以编写多行字符串

<script>
        'use strict'
        var msg=
            `
            你好
            nihao
            hello world
            `
        
    </script>

模板字符串

  let name="suibian";
        let age=15;
        let msg=`你好呀，${name}`

在这里插入图片描述

字符串长度

console.1og(str. length)

字符串的可变性（不可变）

console.log(msg)
VM127:1 你好呀，suibian
undefined
var student="student"
undefined
student[0]=1
1
console.log(student)
VM317:1 student

方法

1.小写转换成大写

console.log(msg)
VM127:1 你好呀，suibian
undefined
var student="student"
undefined
student[0]=1
1
console.log(student)
VM317:1 student
undefined
console.log(student.toUpperCase)
VM450:1 ƒ toUpperCase() { [native code] }
undefined
 console.log(student.toUpperCase())
VM469:1 STUDENT

2.大写转换成小写

console.log(msg)
VM127:1 你好呀，suibian
undefined
var student="student"
undefined
student[0]=1
1
console.log(student)
VM317:1 student
undefined
console.log(student.toUpperCase)
VM450:1 ƒ toUpperCase() { [native code] }
undefined
 console.log(student.toUpperCase())

VM469:1 STUDENT
undefined
console.log(student.toLowerCase())
VM495:1 student
undefined

3.其他方法

在这里插入图片描述
注意substring是[ )的意思，包前面不包后面的一个范围

7.数组类型详解

JS里面Array可以包含任意的数据类型

var arr=[1,2,3,4,5]
undefined
console.log(arr)
VM599:1 (5) [1, 2, 3, 4, 5]
0: 1
1: 2
2: 3
3: 4
4: 5
length: 5[[Prototype]]: Array(0)
undefined

数组的内容可以产生变化

修改数组的长度大于实际数组内容长度，数组的长度就会发生变化，只是会产生空的未被定义的内容，如果小于实际数组内容的长度，就会产生内容缺失，但是是可以运行的

indexOf：下标索引

arr=[1,2,3,4,5,6,"1","2"]
(8) [1, 2, 3, 4, 5, 6, '1', '2']
arr.indexOf(0)
-1
arr.indexOf(1)
0
arr.indexOf(2)
1
arr.indexOf("1")
6

slice截取数组一部分的数据（类似于String中的SubString）

arr=[1,2,3,4,5,6,"1","2"]
(8) [1, 2, 3, 4, 5, 6, '1', '2']
arr.indexOf(0)
-1
arr.indexOf(1)
0
arr.indexOf(2)
1
arr.indexOf("1")
6
arr.slice(2)
(6) [3, 4, 5, 6, '1', '2']

push、pop 尾部添加元素、去掉尾部第一个元素

arr.push("a","b")
10
arr
(10) [1, 2, 3, 4, 5, 6, '1', '2', 'a', 'b']
arr.pop()
'b'
arr
(9) [1, 2, 3, 4, 5, 6, '1', '2', 'a']

push是往尾部添加元素
pop是排除掉最后一个元素

unshift、shift 头部添加元素、去掉头部第一个元素

arr=[1,2,3,4,5]
(5) [1, 2, 3, 4, 5]
arr.unshift("a","b")
7
arr
(7) ['a', 'b', 1, 2, 3, 4, 5]
arr.shift
ƒ shift() { [native code] }
arr.shift()
'a'

unshift往头部开始加入元素
shift是去掉头部的第一个元素
shift括号里面添加任何数字都是去掉第一个元素

arr.sort（）排序

arr=["A","D","C"]
(3) ['A', 'D', 'C']
arr.sort()
(3) ['A', 'C', 'D']

arr.reverse（）元素反转

arr=["A","D","C"]
(3) ['A', 'D', 'C']
arr.sort()
(3) ['A', 'C', 'D']
arr.reverse()
(3) ['D', 'C', 'A']

arr.concat（）返回数组、没有修改数组

arr=["A","D","C"]
(3) ['A', 'D', 'C']
arr.sort()
(3) ['A', 'C', 'D']
arr.reverse()
(3) ['D', 'C', 'A']
arr.concat(1,2,3)
(6) ['D', 'C', 'A', 1, 2, 3]
arr
(3) ['D', 'C', 'A']

join是数组内的元素用某连接符号连接起来

arr.join('-')
'D-C-A'

多维数组

arr = [[1,2],[3,4],["5","6"]];
arr[1] [1]
4

8.对象类型详解

设置若干个对象
JS中所有的键都是字符串，值是任意对象

var 对象名={
	属性名：属性值
	属性名：属性值
	属性名：属性值
}
//定义了一个person对象，他有四个属性
var person={
            name:"suibian",
            age:15,
            length:20
        }

使用键值对，也就是对象属性：对象值，多个属性之间用逗号隔开，最后一个属性不加逗号

对象赋值

  person.name="suibian1";

使用一个不存在的属性报错

person.hah
undefined

动态删减属性

delete person.name
true
person
{age: 15, length: 20}

动态添加属性

person.haha=1
1

查找对象值

'age' in person
true

'toString' in person
true

判断一个属性是否是这个对象自身拥有的

person.hasOwnProperty('age')
true
person.hasOwnProperty('toString')
false

9.分支和循环详解

if判断

 var age=3;
        if (age>3){
            alert("suibian")
        }else{
            alert("maiyou")
        }

while、do while循环语句

 while (age<100){
            age=age+1;
            console.log(age)
        }

		do{
			 age=age+1;
			 console.log(age)
   		}while(age>3)

在这里插入图片描述
避免死循环，例如弹窗永远关不掉

while(true){
	alert(123)
}

for循环

//快捷fori，和java的i.for有一点点不一样
        for (let i = 0; i < 100; i++) {
            console.log(i)
        }

遍历数组

 var age=[12,456,8,78,7156,4,878,7,489]
        age.forEach(function (value){
            console.log(value)
        })

for……in

  for (var num in age){
            // if (age.hasOwnProperty(num)){
            //   
            // }
            console.log(age[num])
        }

最常用↓↓↓↓也可以遍历Map以及字符、数组等等

  for (var x of age){
            console.log(x)
        }

遍历Set

var set = new Set([5,6,7]);
for (1et x of set) {
console.1og(x)
}

遍历Map

var map = new Map([["tom" ,100],["jack" , 90],["haha" ,80]]);
for (1et x of map){
console.log(x)
}

10.Map和Set集合

检查有没有报错，需要ES6，ES6新特性

new Set();
new Map();

Map集合

  new Set();
        new Map();
        var map=new Map([['tom',100],['jack',90],['jary',10]]);
        var name=map.get('tom');// 通过key值获得value
        console.log(name);
        map.set('admin',20);//新增元素
        map.delete("tom")//删除元素

Set集合（set是无序不重复的集合）

var set=new Set([1,1,1,1,3,4])

下面的是浏览器调试台测试

Set(3) {1, 3, 4}
set.add(1)
Set(3) {1, 3, 4}
set.add(8)
Set(4) {1, 3, 4, 8}
set.delete(1)
true
set
Set(3) {3, 4, 8}

查看是Set否包含某元素

console.log(set.has(3))
VM322:1 true
undefined

Iterator遍历Set中的元素

ES6新特性，因为for in有漏洞，遍历下标的时候会将name，age等属性遍历进去

11.函数的定义和参数获取

定义方式一、

JS里面所有的函数都是用function定义
-旦执行到return代表函数结束,返回结果!
如果没有执行return，函数执行完也会返回结果,结果就是undefined

  function abs(x){
            if (x>0){
             return   x=1
            }else {
              return  x=0
            }
        }

定义方式二、

这种就是匿名内部类的写法

 var abs=function (x){
            if (x>0){
             return   x=1
            }else {
            return   x=0
            }
        }

调用函数

abs(10)

手动抛出异常

JS可以传输任意的参数，但是也可以不传递参数，都不会报错
所以就需

最低0.47元/天 解锁文章
qdyones
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery详解
qq_45240472的博客
04-09 3101
1、jQuery概述 1.1、JavaScript库 仓库:可以把很多东西放到这个仓库里面。 找东西只需要到仓库里面查找到就可以了。 JavaScript库:即library ,是-个封装好的特定的集合(方法和函数)。从封装-大堆函数的角度理解库,就是在这个库中,卦装了很多预先定义好的函数在面,比如动画animate、hide、 show ,比如获取元素等。 简单理解:就是一个JS 文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如jQuery ,就是为
原创：Jquery入门详解
redarmychen的专栏
04-01 4066
                                                                             JQuery入门介绍1、JQuery概述：Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari
JQuery 详解
H445584704的博客
03-04 482
一、概念 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 二、快速入门 简单来说，JQuery就是一个JavaScript框架，简称
JQuery详解
m0_57249797的博客
08-20 671
一、JQuery入门 学习目标： 能够说出什么是JQuery 能够说出JQuery的优点 能够简单使用JQuery 能够说出DOM对象和JQuery对象的区别 1、JQuery的概述 1.1、JavaScript库 仓库：可以把很多东西放到这个仓库里面，找东西只需要到仓库里面查找到就可以了。 JavaScript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取
JQuery详解JQuery详解
05-07
2. **jQuery 对象**：jQuery 提供了一系列方法，如 `each()`，但这些方法只能应用于 jQuery 对象。将 DOM 元素转换为 jQuery 对象可以使用 `$()` 函数，如 `var a = $("#cid")`、`var b = $("<p>hello</p>")` 和 `...
Jquery 效果使用详解
10-23
《jQuery效果使用详解》 jQuery，作为一款强大的JavaScript库，极大地简化了JavaScript的DOM操作，特别是在处理CSS选择器和XPath支持方面，使得开发者能够更加高效地编写JavaScript代码，即便是对于JavaScript初学...
jQuery详解与实践.pdf
03-16
《jQuery详解与实践》这本书是面向那些希望深入了解和熟练运用jQuery技术的开发者们的一份宝贵资源。jQuery，作为一款广泛使用的JavaScript库，极大地简化了网页DOM操作、事件处理、动画设计以及Ajax交互等任务，...
jQuery(详解)
wenkezhuangyuan的博客
08-20 1613
1.简介 jquery是js的框架，利用了选择器(借鉴了css的选择器)查找要操作的dom节点(dom对象)，将dom节点对象封装成jquery对象，调用jquery提供的方法或者属性操作dom节点。 目的: 1.简化代码 2.解决了兼容性问题 2.编程步骤 1.引入jquery.js文件<script src=""></script> 2.使用juqery提供的选择器查找节点，var $obj = $("#id") 3.调用jquery提供的属性或方法，操作该节点
jQuery
m0_46337171的博客
01-06 220
目录前言1.jQuery介绍1.1 jQuery能做什么1.2 jQuery的优势2 jQuery的使用2.1 基本的语法介绍2.2 jQuery对象与DOM对象2.3 选择器2.3.1 基本选择器2.3.2 层次选择器2.3.3 属性选择器2.3.4 过滤选择器2.4 事件2.4.1 鼠标事件2.4.2 键盘事件2.4.3 表单事件2.4.4 鼠标悬停复合事件2.4.5 连续点击复合事件2.4.6 事件的动态绑定2.5 元素的隐藏和显示2.5.1 改变元素的宽和高（带动画效果）2.5.2 改变元素的高（拉
JQuery的作用详解
KaiFa_XiaoYang的博客
12-30 1978
一、 jQuery是什么？ jQuery是一个JavaScript库，是由John Resig创建于2006年1月的开源项目，jQuery凭借着简介的语法和跨平台的兼容性，极大简化了JavaScript开发人员遍历HTML文档，操作DOM、处理事件、执行动画和开发ajax的操作。其独特而又优雅的代码风格改变JavaScript程序员的设计思路和编写程序的方式。简单地来说： 1、jQuery是一个优秀的JavaScript库。 2、jQuery极大地简化了JavaScript编程。 3、jQu
jQuery 详解（上）+代码 （全）
王佳龙的博客
07-30 478
目录 jQuery 教程                                    jQuery 效果                                          jQuery - HTML  jQuery 简介                                   jQuery- 隐藏和显示                           ...
jQuery教程详解（一）
weixin_30856725的博客
07-11 138
PS——了解JQuery Query是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动...
JQuery 详解 -----Jane Eyre
ZLX_508的博客
07-21 302
JQuery 基础： 1. 概念： 一个JavaScript框架。简化JS开发 * jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的Ja...
jquery技术详解
lcx556224523的博客
04-10 4602
目录(?)[+] 前面我们讲解了的J2EE的技术都是服务端的技术，下面我们来看一下前端的一些开发技术，这一篇我们来看一下jQuery技术 简介： jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。 jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LE
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值