web前端：Javascript学习笔记和jQuery库操作

程序员文章站 2022-05-10 15:36:31

...

导读：
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。（本篇文章主要讲解的是web编程）

JavaScript最初由Netscape的Brendan Eich设计，最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。

特性

ECMAScript，描述了该语言的语法和基本对象。
文档对象模型（DOM），描述处理网页内容的方法和接口。
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口

计算机是一个非常庞大而精彩的世界，也不缺乏美好，而web作为近几十年来一种蓬勃发展的存在，其成长性是有目共睹的，因此，学习web应当成为一种必备技能，不求深，能写出一个管理信息系统，写一个简单的博客网站，即可。

希望大家能找到自己的最终归属，找到心之所向。

贴个宣传博客HTML&&CSS（持续更新中）

Javascript

书写位置

// 行内
<input type="submit" value="sub" onclick="alert('HelloWorld')">
// 内嵌
<script><script>
// 外部引入
<script src="xxx.js"><script>

ECMAScript

IO和数据类型

输入和输出语句

// 输出
console.log(msg)
// 输入语句
prompt(info)

声明变量

var variable_name

数据类型

简单数据类型：Number，String，Boolean，Undefined，Null
复杂数据类型：object

检测数据类型

typeof variable_name

数据类型转换

// 转化成字符串
variable.toString()
// 转化成数字
variable.parseInt()
variable.parseFloat()
// 强制类型转换
Number(variable)
// 转换成布尔型
Boolean(variable)

运算符和表达式

略

流程控制

顺序结构

var a = 1

分支结构

if () {
	// do something
}
else if () {
	// do something
}
else {
	// do something
}

switch () {
	case 1:
		// do something
	case 2:
		// do something
	default:
		// do something
}

循环结构

for (var i = 0; i < 100; i++) {
	// do something
}

while (i < 100) {
	// do something
}

do while
// 不看这个

循环终止

// 终止所有循环
break
// 终止本次循环
continue

数组

创建数组

var arr = {a, b, c};

遍历访问数组

for (var i = 0; i < arr.length; i++) {
	console.log(arr[i])
}

修改数组长度

arr.length = 10

函数

定义函数

function getpwd() {
	// do something
}

传入参数

function getpwd(aru) {
	// do something
}

函数的返回值

function getpwd() {
	// do something
	return vari;
}

函数的声明方式

// 1
function getpwd() {
	// do something
}
// 2
var f = function getpwd() {
	// do something
}

面向对象

// 字面量创建对象
var obj = {
	name: "lh"
	age: 12
	f: function() {
		// do something
	}
}
// new
var obj = new Object();
obj.name = "lh";
obj.age = 10;
obj.f = function() {
	// do something
}
// 构造函数
function obj() {
	this.attribute = value;
	this.method = function()
}
new obj();

遍历对象属性

for (variable in obj) {
	// do something
}

多看看js都标准库MDN
MDN

常见API

Math，Date，Array

DOM

DOM是一个接口，改变网页样式

获取元素

// 根据ID获取
document.getElementById()
// 根据class
document.getElementsByClassName()
// 根据类名
document.getElementsByName()
// 根据标签名
document.getElementsByTagName()
// 获取body
document.body
// 获取HTML
document.documentElement
// 根据指定选择器返回第一个对象, .xx, #xx, xx
document.querySelector()
// 根据指定选择器返回
document.querySelectorAll()

// 以源码形式返回
console.log()
// 以对象形式返回
console.dir()

事件

触发—响应机制
事件三要素：

事件源：事件被触发点对象，按钮
事件类型：如何触发（onclick）还是鼠标，键盘按下
事件处理程序：通过一个程序赋值的程序

var btn = document.getElementById("click")
btn.onclick = function() {
	alert("Hello World!");
}

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

修改元素内容

// 从起始到终止，但去除了HTML标签，同时空格和换行也会被去除
element.innerText
// 改变所有内容
element.innerHTML

修改元素属性

xxx.src = "xxx"

获取元素属性

// 第一种
console.log(xxx.id);
// 第二种
var p = querySelector('div');
console.log(p.getAttribute('id'));

设置属性

// 第一种
p.id = 1;
// 第二种
p.setAttribute('id', 1);

移除属性

p.removeAttribute('index');

修改元素样式

xxx.style.color = "red";

拷贝节点

// 浅拷贝,默认为false
var p = ul.children[0].cloneNode();
ul.appendChild(p)
// 深拷贝
var p = ul.children[0].cloneNode(true);

操作表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>操作</th>
                <th>成绩</th>
                <th>科目</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        let dates = [
            {
            name: "lh",
            subject: "C++",
            score: "100"
            },
            {
                name: "hl",
                subject: "C++",
                score: "100"
            },
        ];
        let tbody = document.querySelector('tbody');
        for (let i = 0; i < dates.length; i++) {
            let tr = document.createElement('tr');
            tbody.appendChild(tr);
            for (let k in dates[i]) {
                let td = document.createElement('td');
                td.innerHTML = dates[i][k]
                tr.appendChild(td);
            }
            let td = document.createElement('td')
            td.innerHTML = '<a href="javascript:;">删除</a>'
            tr.appendChild(td)
        }
        let as = document.querySelectorAll('a');
        for (let i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                tbody.removeChild(this.parentNode.parentNode)
            }
        }
    </script>
</body>
</html>

BOM

浏览器对象模型，独立于内容和而与浏览器窗口进行交互的对象，其核心对象是window

窗口页面加载

window.onload是窗口页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。

// 第一种
window.onload = function() {}
// 第二种
window.addEventListener("load", function(){
	// do something
})

1.有了window.onload就可以把JS代码写到页面元素的上方,因为onload是等页面内容全部加载完毕，
再去执行处理函数。
2. window.onload传统注册事件方式只能写一次,如果有多个,会以最后-个window.onload为准。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Register</title>
	<script type="text/javascript">
		window.addEventListener('load', function() {
			let btn = document.querySelector('button');
			btn.addEventListener('click', function() {
				alert("pp");
			})
		})
	</script>
</head>
<body>
	<button>H</button>
</body>
</html>

调整窗口大小事件

window.innerWidth代表浏览器窗口大小

<script type="text/javascript">
	window.addEventListener('resize', function() {
		// do something
	})
</script>

定时器

<script type="text/javascript">
	window.setTimeout(function() {
		console.log("A")
	}, 10)
</script>

停止定时器

window.clearTimeout()

定时回调定时器

setInterval(回调函数，间隔的毫秒)
// 清楚定时器
clearInterval

JS执行机制

JS是单线程
JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为Javascript这门脚
本语言诞生的使命所致一JavaScript 是为处理页面中用户的交互,以及操作DOM而诞生的。比如我们对
某个DOM元素进行添加和删除操作,不能同时进行。应该先进行添加,之后再删除。

同步：任务依次执行
异步：在同一时间做多件事

JS的异步是通过回调函数实现的。
-般而言,异步任务有以下三种类型:

普通事件，如click. resize等
资源加载，如load. error等
定时器，包括setInterval. setTimeout 等
异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)。

执行机制

先执行执行栈中的同步任务。
异步任务(回调函数)放入任务队列中。
-旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任
务结束等待状态,进入执行栈,开始执行。

Location对象

window对象给我们提供了-个location属性用于获取或设置窗体的URL ,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。

属性

location对象属性	返回值
location.href	获取或者设置整个URL
location. host	返回主机(域名) www.itheima.com
location.port	返回端口号如果未写返回空字符串
location.pathname	返回路径
location. search	返回参数
location. hash	返回片段#后面内容常见于链接锚点

方法

location对象方法	返回值
location.assign()	跟href- -样,可以跳转页面(也称为重定向页面)
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或者f5 如果参数为true强制刷新ctrl+f5

navigator对象

navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent ,该属性可以返回由客户机发送服务器的user- agent头部的值。

history对象

window对象给我们提供了一个history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL.

history对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能参数如果是1前进1个页面如果是-1后退1个页面

jQuery

jQuery库下载

引入jQuery

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

两种写法

$
jQuery()

jQuery对象和DOM对象

用原生JS获取来的对象就是DOM对象
jQuery方法获取的元素就是jQuery对象。
jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储)。

// DOM对象
var btm = document.querySelector('div');
console.dir(btm);
// jQuery对象
$('div')

相互转化:
DOM对象转换成jQuery对象

var ptr = document.querySelector('id');
$(ptr);

jQuery对象转换成DOM对象

// 第一种
$('div')[index]
// 第二种
$('div').get([index])

jQuery选择器

基本和层级选择器

$('选择器')	// 里面直接写CSS选择器即可，但是要加引号

名称	用法	描述
ID选择器	$("#id")	获取指定ID的元素
全选选择器	$(’*’)	匹配所有元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div,p,li”)	选取多个元素
交集选择器	$(“li.current”)	交集元素

层级选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取uI下的所有li元素，包括孙子等

隐式迭代

// 获取四个div
$('div')

遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。

简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作，方便我们调用。

筛选选择器

语法	用法	描述
:first	$(li:first’)	获取第一个i元素
:last	$(li:last’)	获取最后一个
:eq(index)	$(“li:eq(2)”)	获取到的i元素中，选择索引号为2的元素,索引号index从0开始。
:odd	$(“l:odd”)	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”)	获取到的li元素中，选择索引号为偶数的元素

jQuery筛选方法

语法	用法	说明
parent()	$(“li”). parent();	查找父级
children(selector)	$(“u1”). children(“li”)	相当于$(“ul>li”)，最近- -级(亲儿子)
find(selector)	$(“ul”). find(“li”);	相当于$(“ul li”),后代选择器
siblings(selector)	$(". first").siblings(“li”);	查找兄弟节点，不包括自己本身
nextAll([expr])	$(". first"). nextAll()	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(" .last"). prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(‘div’).hasClass( “protected”)	检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(“li”). eq(2);	相当于$(“li:eq(2)”), index从0开始

案例：新浪下拉菜单

$(function() {
	// 鼠标经过
	$('.nav>li').mouseover(function() {
		// $(this) jQuery 当前元素
		// show() 显示元素 hide() 隐藏元素
		$(this).children('ul').show();
	});
	// 鼠标离开
	$('nav>li').mouseout(function() {
		$(this).children('ul').hide();
	})
})

排他思想
想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。

$(function() {
	// 隐式迭代，给所有按钮都绑定了点击事件
	$("button").click(function() {
		// 当前的元素变化背景颜色
		$(this).css("background", "pink");
		// 其他的兄弟去掉背景颜色，隐式迭代
		$(this).siblings("button").css("background", "");
	});
})

jQuery链式编程

链式编程是为了节省代码量,看起来更优雅。

$(this).css("background", "pink").siblings("button").css("background", "");

jQuery样式操作

操作CSS方法
参数只写属性名,则是返回属性值

$(this).css("color");

参数是属性名,属性值,逗号分隔,是设置-组样式,属性必须加引号,值如果是数字可以不用跟单位和引号

$(this).css("color", "red");

参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号,

$(this).css({"color": "red", "width": 200});

添加类

<style>
	.current {
		background: red;
	} 
</style>
<div></div>
<script>
	$function() {
		$('div').click(function() {
			$(this).addClass('current');
		})
	}
</script>

移除类

<script>
	...removeClass();
</script>

切换类

<script>
	...toggleClass();
</script>

jQuery效果

显示和隐藏

show();	// 显示
hide();	// 隐藏
toggle();	// 切换

滑动

slideUp();	// 下拉滑动
slideDown();	// 下拉隐藏
slideToggle();	// 下拉滑动

鼠标经过，鼠标离开

mouseover		// 鼠标经过
mouseout	// 鼠标离开
hover	// 经过和离开

淡入淡出

fadeIn();		// 淡入
fadeOut();		// 淡出
fadeToggle();	// 淡入淡出切换
fadeTo();		// 修改透明度和速度

自定义动画

animate(
	params, 	// 想要修改的样式属性
	speed, 		// 速度
	easing,		// 切换效果
	fn, 		// 回调函数
)

jQuery属性操作

获取固有属性

// 获取属性
prop("index");
// 修改属性
prop("index", 1);		// 固有属性

获取和设置自定义属性

attr()

jQuery元素内容

// 获取元素内容
html()
// 修改元素内容
html('123');

获取普通元素文本内容

text();
text('123');

获取表单内容

val();
val("asd");

jQuery元素操作

jQuery隐式迭代是对同一元素做了同样的操作。如果想要给同一一元素做不同操作,就需要用到遍历。

// domEle是DOM对象
$('div').each(function(index, domEle) {
	// do something
	$(domEle).css("color", "red")
})

jQuery尺寸、位置操作

尺寸

语法	用法
width() / height()	取得匹配元素宽度和高度值只算width 1 height
innerWidth()/ innerHieght()	取得匹配元素宽度和高度值包含padding
outerWidth() / outerHeight()	取得匹配元素宽度和高度值包含padding、border
outerWidth(true) / outerHeight(true)	取得匹配元素宽度和高度值包含padding、borde、 margin

位置

offset()设置或获取元素偏移

offset()方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。
该访法有2个属性left、 top。offset).top用于获取距离文档顶部的距离, offset).left用于获取距离文档左侧的距离。
可以设置元素的偏移: offset({ top: 10, left: 30 });

position(获取元素偏移

position()方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。

jQuery自动触发事件

// 第一种
click()
// 第二种
trigger('click')
// 第三种
on('foucs', function() {});

web前端：Javascript学习笔记和jQuery库操作

Javascript

Javascript

ECMAScript

IO和数据类型

运算符和表达式

流程控制

数组

函数

面向对象

常见API

DOM

获取元素

事件

修改元素内容

修改元素属性

修改元素样式

操作表格

BOM

窗口页面加载

调整窗口大小事件

定时器

JS执行机制

Location对象

navigator对象

history对象

jQuery

jQuery对象和DOM对象

jQuery选择器

jQuery样式操作

jQuery效果

jQuery属性操作

jQuery元素内容

jQuery元素操作

jQuery尺寸、位置操作

jQuery自动触发事件

前端学习笔记三：JavaScript（2）变量的分类和作用域+利用浏览器调试模式测试+HTML事件+表示特殊字符（+运算符+各种循环和条件语句【略】）

web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记，web进阶jquerydom

web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记，web进阶jquerydom

web前端JavaScript高级#学习笔记01

WEB前端学习笔记-jQuery

Web前端学习笔记—— jQuery之样式、动画

web前端：Javascript学习笔记和jQuery库操作

web前端学习笔记——Day9(jQuery)

Web前端学习笔记——JavaScript之事件、创建元素、节点操作

web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记