Java教程

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

本文主要是介绍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（简称“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库操作的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航