javaScript和JQuery_js和jquery-优快云博客

本文链接：https://blog.youkuaiyun.com/lm12032015/article/details/123818887

这篇博客详细探讨了JavaScript作为行为层语言的基础常识和语法，包括数据类型、作用域、DOM操作等内容，并介绍了jQuery这一JS封装库，讲解了其基础常识和事件处理。文章强调了JavaScript对于后端人员的重要性，并提醒开发者关注浏览器对象模型（BOM）和文档对象模型（DOM）的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript:行为层语言

基础常识和语法

一个合格的后端人员,必须精通 JavaScript

css有人说:他不算一门编程语言.后来他添加了基于node.js的,less机制,相当于:成为了css预处理器
JavaScript(以下简称js),是一门"弱类型脚本语言"
有个Ant-Design网站,是阿里的一个前端框架网站,现在使用的比较好
可以去看一下ECMAScript(以下简称es)和js的历史
js只是当时想借java的名气,所以"取个好名字很重要"

用java语法来写js,一定不会错

es已经发展到了es6,但是现在有的浏览器还是仅支持到es5.这就导致:开发环境与线上环境不一致
我们一般需要设置idea的es6版本
js的专属标签是必须是双标签
js中的所有变量都是var
注释和java一样:请尽量在写文字前加上空格,因为es编译时,不加空格,有可能会报错
javaDoc注释会自动加上空格
代码每行结束,尽量加上 ; 号

<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script>
    /**
     * hello  world
     */  
    var name = "张三";
      
    console.log(name);//控制台输出:张三
      
  </script>
  
</head>

我们可以在控制台,进行断点,调试

数据类型

js的大部分数字都归于number类型:typeof age = number
NaN:not a number不是一个数字:typeof NaN = number
Infinity(无限大),也是一个number,首字母大写
==号是equals,=必须类型与值全部相等.坚持不用号
js不会帮我们做自动类型转换
isNaN(NaN) === true
**用Math类来做浮点值运算: Math.ceil(17.8) **
undifined未定义: typeof 长歌 == undifined
数组,集合不用纠结数据类型var array = [13,“num”,null,undifined]
找不到数据就报undifined:array[1000]

对象是{}理解成Map集合var Person = { name : “长歌”, age : 18, sex : ‘女’};,数据[]
‘use strict’:严格检查模式,预防因为代码随意性,产生问题.要求idea设置为es6,必须放在第一行
不写var或者let就是全局变量,let是局部变量,两者作用域不一样:for (let i = 0; i < 10; i++) {
反引号mes = ‘里面写多行字符串’,这个符号在tab键上面:name = 偶题 - 百度汉语作者：杜甫文章千古事，得失寸心知。作者皆殊列，名声岂浪垂。骚人嗟不见，汉道盛于斯。前辈飞腾入;
name = ${age}`;取值模板字符串,但是字符串有不可变特性 --> String[1] = s
数组可以给长度赋值var array = [14,56],array.length = 10
slice()截取数组,push(),pop(),unshift压入头,shift弹出头,concat([])拼接,但不修改原数组.join(‘-’)连接
array.slice(2) , array.pop() 从头弹出, array.push(40) 从头加入 array.unshift(30)

操作对象

**动态操作对象(增删): delete person.age;person.age = “18” **
js的方法叫做函数
判断属性是否在内’age’ in person,对象的键全部是字符串
person.hasOwnProperty(“toString”) -> false
遍历:数组foreach,返回键for in :person[value]用键获得值,普通对象不能用for of直接打印值,集合也能用

集合

Map([[‘key’,‘value’],[…]]).set(‘key’,value)与Set.get()
是否包含元素has(0)

函数

绝对值函数:function abs(x)

函数赋值时数据类型要对等,如a.click(属性) = abs;(以属性模式赋值)

**浏览器解析时,会在每一行最后加 ; 号; **
没有return语句,最后会返回undefined
一切有成本的东西只有了解就行(能看懂代码)
typeof x != ‘number’ throw ‘message’ 自定义异常
js里面写字符串不会出错,不写成字符串可能会有错

参数列表

函数默认是参数列表,存在arguments数组中:arguments[2]
es6新特性rest:获取所有未直接定义的参数:abs(a,b,…rest).rest[2]
打印rest

作用域

函数内的var,函数外不能调用,想要实现,去研究闭包
闭包就是:在函数外,访问函数内的属性,避免变量被污染
如一个业务:让num每秒加1
var num是全局变量,但是在函数内,我们就用内部函数操作它
单独运行computer()是只是让这个函数初始化一次,赋值给test后,num才真正变成全局变量

function computer(){
     var num = 0;
     function innerTest(){
         console.log(num++);
     }
     //内部函数运行
     return innerTest;
 }
 var test = computer();
 for (let i = 0; i < 10; i++) {
     //0 1 2 ... 9
     test();
 }

变量定义重名时,就近原则:模块化开发,最后代码整合的时候可能会有这种情况
js执行引擎时,会先将所有变量预声明,但不赋值.建议:先声明,再定义,后赋值
做了才能记住
全局成员都默认属于window对象,如window.alter().
js所有的东西都可以当变量用
困的时候笑一下

不要给window绑定东西:自定义一个全局变量替代它.
const es6常量.

方法和函数

方法是对象内部属性对应的函数键:name : function (){}
区分属性和方法,就是看有没有():person.name是属性,name()是方法
函数.apply(对象,[参数列表]) ~ invoke.
让函数成为一个父类,不同对象的键指向它,实现不同的效果:test.apply(person,[4,5,“null”])

内部对象(内部类)

Date日期类

typeof {} = object,函数是function
getFullYear当前年
getDate当前日,getDay星期几,星期日是0,从0~6
*getTime()时间戳,可为用来构建Date对象.1000 * 60 * 60 24都是一天的时间,因为毫秒和秒相差1000倍
new Date(getTime() - 1000 * 60 * 60 * 24)
对象.tolocalceString(),toGMTString()
用java思想来写js

JSON轻量级数据交换格式

层次结构提升网络传输效率
转换成json字符串格式对象:JSON.stringify(对象)
转换成正常对象:JSON.parse(被转换对象),必须是字符串,用’’ 号来转换:JSON.parse(‘{“name”:“则天”,“age”:“18”}’)

class,es6新语法

构造函数constructor

class Student extends Person{
    static name = "长歌";
constructor(name) {
    super();
    this.name = name;
}

原型与原型链

所有的对象都有__proto__(隐式原型)属性:arr(数组).proto = Array[]
所有对象的都调用了它的构造函数,且默认调用父类的构造函数
而这个隐式原型就默认指向了它的父类
所有函数都有一个prototype(原型或显式原型)属性,代表它自己所属的类
所有对象的隐式原型都指向它的构造函数的原型 ,就是他父类的显式原型,就是它本身的隐式原型
把__proto__理解成影子,prototype是你自己.你的影子指向你,但是只有prototype才能代表你自己
你的影子指向你父类本身,因为你没有办法操作你父类的影子(每个人的影子只有自己可以操作).
arr.proto === Array.prototype == true
Object的原型是null

BOM对象:浏览器对象模型

诞生就是为了能存浏览器运行,网景公司的第一个浏览器最初只能浏览网页,没有互动

windew浏览器窗口(全局作用域)

innerWidth和outerHeight

navigator封装了浏览器信息

一般不使用,有可能会被人为修改,使我们获取不到真实的信息

appName:浏览器厂商名字,火狐和ie的都是网景
appversion:版本号,火狐显示:window5.0
**userAgent返回一个标头,一般存储了浏览器的基本所有信息: “Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:98.0) Gecko/20100101 Firefox/98.0” **
platform:返回计算机平台,如win

screen屏幕

width和height

locathion当前页面的URL信息

**host主机 ip地址和端口号localhost:63342 **
**href::网址: “http://localhost:63342/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/…%B3%95/index.html?_ijt=8e6d42ql4tbpfnmg9obfjieh2s&_ij_reload” **
protocol:http:
reload()刷新网页
给百度挂钩子:assgin(‘你自己的网站’),要在百度下的控制台运行

document当前页面,操作HTML的DOM文档树

cookie获取cookie信息.
劫持cookie的原理演示就是:当淘宝和天猫都没有登录时,登录淘宝,天猫也会跟着登录

history页面跳转

back()回去,forward()跳转

DOM树:文档对象模型

删除一个节点时,其依附于它的节点自动死亡

DOM树

window.addEventListener(‘load’,function(){…})初始化加载页面
document.querySelector(‘css选择器’),按照选择器来获取对象i
tagName,className,id获取等,注意返回的有时会是一个数组
对象.childern获取所有子元素,firstChildern和lastChildern等
元素默认有上下两个\n元素,所有firstChildern是\n,不是真实元素.
只有childern[0]才是获取真实的第一个子元素
nextElementSibling,children[0].previousElementSibling获取下一个区上一个元素
innerTest和innerHTML = "hello>"操作其中内容
father.children[0].style.color = 'red’操作css值

元素增删改查

删除是动态的,第1个元素被删除后,第二个元素变成第一个
firstChild[0].parentElement.style.background = 'red’获取父节点
firstChild[0]父节点.removeChild(children[0]);
firstChild[0].remove();删除所有
新增元素var htmlliElement = document.createElement(“li”);
追加元素firstChild[0].append(htmlliElement)
htmlliElement.id = “html”;
htmlliElement.setAttribute(“class”,“insertLi”);
firstChild[0].append(htmlliElement);
firstChild[0]父级点.insertBefore(htmlliElement新节点,children[0]目标节点);

表单

js的对象就是Map集合

为了可读性,建议使用变量时提前定义好,且不要出现在函数内

htmlFormElement.checked = true;
htmlFormElement.onclick = function (){ console.log(444);};

md5加密

script src=“https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js”></script
let md = md5(text.value);
提交时返回false,禁止表单跳转

submit.onclick = function (){
    let md = md5(text.value);
    return false;
};

规定表单提交时是否禁止跳转:form action=“https://www.baidu.com” method=“get” οnsubmit=“return disable()”

  <script>
  
      function disable(){
          return false;
      };
  </script>
  
  <form action="https://www.baidu.com" method="get" onsubmit="return disable()">

用一个隐藏的input来中介用户的密码,进行隐式加密

window.addEventListener('load',function (){
    let submit = document.querySelector('input[type="submit"]');
    let text = document.querySelector('input[type="text"]');
    let hidden = document.querySelector('input[hidden]');

    submit.onclick = function (){

        hidden.value = text.value;

        let md = md5(hidden.value);
        console.log(md);

        return false;
    };

});
<form action="#" method="get">

  <input type="text">
  <input type="text" hidden>
  <input type="submit" value="提交">

</form>

JQurey:js的封装库,更少的js代码

基础常识

** 官网:jQuery **
更少的代码

min版本当项目上线时用,写项目时用包
**各厂商cdn加速: jQuery cdn加速 (jq22.com) **
script src=“https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script
选中代码后ctrl + shift + -:折叠代码
语法:$(‘css选择器’).action(处理)
**阿里大佬的jqery库 jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn) **

事件

页面初始加载 $docment).ready(function(){...});,或者直接$ (function(){…});
鼠标以mouse开头:mousemove鼠标移动

$(function (){
    'use strict'
    //e只是指代event,这个字母可以随便写
    $('div').mousemove(function (e){
        let pageX = e.pageX;
        let pageY = e.pageY;

        $('h2').text('座标X:'+pageX+"-y:"+pageY);
    })
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zvgRpqQE-1648530631736)(C:\Users\林木\Desktop\mousemove.jpg)]

读写结合:html()和text(),没有参数就取值,有参数就是赋值

//jqery源码,有个value被传进来
text: function( value ) {
		return access( this, function( value ) {
			return value === undefined ?
				jQuery.text( this ) :
				this.empty().each( function() {
					if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
						this.textContent = value;
					}
				} );
		}, null, value, arguments.length );
	},

$(‘h2’).html(‘座标s’);
$(this).css({‘color’:“red”,“width”:“150px”});
show()显示,hide()隐藏,toggle()自动切换显示或隐藏,底层是用display:none实现:$(this).toggle();
获取宽度参数: $(w i n d o w) . w i d t h ();$ (document).width();
widow是浏览器窗口,全局对象.document是window的一部分
万能方法:为div下的h2标签绑定click事件$(‘div’).on(‘click’,‘h2’,function (){ console.log(100);})

冒泡

冒泡就是点击子元素后,包裹子元素的父元素也会被点击
e.stopPropagation()关闭当前元素的冒泡

$(function (){
    'use strict'
    $('div').click(function (e){
        let id = this.id;
        //关闭冒泡
        e.stopPropagation();
        console.log(id);
    })

})

<div id="parentFather">
  <div id="father">
    <div id="son"></div>
  </div>
</div>
div{
    width: 300px;
    height: 300px;
    background: red;
}
#father{
	width: 250px;
	height: 250px;
	background: yellow;
}
#son{
	width: 150px;
	height: 150px;
	background: aqua;
}