Javascript和jQuery

JavaScript基础知识

什么是JavaScript

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

最新版本已经到ES6版本

插入JavaScript

有两种

在页面插入JavaScript代码，使用标签包起来。

<script type="text/javascript">
    alert("hello world");
</script>

引入js文件，使用标签，在src属性输入js文件的位置

<script src="js/JavaScript.js" type="text/javascript" charset="utf-8"></script>

注释

单行注释

//单行注释
多行注释

/*多行注释*/

输出到控制台

console.log();

数据类型

数据类型	描述
number	数值类型，包括整数和浮点数
string	字符串类型，给字符串类型赋值时即可以单引号也可以用双引号
boolean	布尔类型，值true或false
object	对象类型
null	用于尚未存在的对象
undefined	声明变量未初始化时，值为undefined

类型转换：

强制转换

使用Number()、Boolean()、String()来强转
```
var a='123';
var b=Number(a);
```

函数转换

使用toString()、parseInt()等

var a=10;
var b=a.toString();

var a='123';
var b=parseInt(a);

注：parseInt()默认是十进制转换、也可以进行其他进制的转换

var a='10';
//var b=parseInt(a,2);//结果是2
//var b=parseInt(a,8);//结果是8

隐式转换

var a=1+"hello";//先将1转换为字符串再与后面的字符串连接

运算符、控制语句

运算符

一元运算符：
- delete：用于删除自定义的对象属性及方法的引用
- void：对如何值都是输出undefined，用于避免输出不必要的值
  
  例如： <a href="JavaScript:void(0);">啦啦啦
算数运算符

++、--、+、-、*、/、%
位运算符

&、|、^、~、>>、<<
赋值运算符
- +=
- -=
- *=
- /=
- %=
- >>=
- <<=
关系运算符
- ==：等于运算符，判断两个变量是否相等时，都会进行类型转换
- ===：恒等运算符，除了比较值之外，还会比较数据类型
- ！=：不等
- ！==：不恒等
- >、<、>=、<=
逻辑运算符

&&、||、！
条件运算符

? :

控制语句

if
if(){}...else{}
if(){}...else if(){}...else{}
while(){}
do{}...while();
switch()
for(;😉{}

for...in

for(var 变量名 in 变量名){}

例如：

for(var index in age){
	console.log(age[index]);
}

forEach循环

var age = [12,3,45,123,5,3,6,4,8]
age.forEach(function (value) {
    console.log(value);
})

局部变量

<script type="text/javascript">
    for(var i=0;i<10;i++){
        console.log(i);
    }
	console.log("i第值"+i);//i第值10
</script>

以上方式最后局部变量i在外部依旧可以被使用，这样不好，改进用关键字let来声明局部变量

<script type="text/javascript">
    for(let i=0;i<10;i++){
        console.log(i);
    }
	console.log("i第值"+i);//报错Uncaught ReferenceError: i is not defined
</script>

函数

函数的声明，用关键字function

//方式一
function 函数名(参数1，参数2，...){
	//代码
}

//方式二
var 函数名=function(参数1，参数2，...){
    //代码
}

rest：获取除了已经定义的参数，ES6引入的新特性

function arg(a,b,...rest) {
    console.log(a);
    console.log(b);
    console.log(rest);//a,b赋完剩下的参数都给rest
}

注意:rest只能写在最后，必须用...标识

函数的重载，利用arguments，使用arguments.length来知道有多少个参数，然后模拟出函数的重载。

function Add(){
    if(arguments.length==1){
        alert(arguments[0]);
    }else if(arguments.length==2){
        alert(arguments[0]+arguments[1]);
    }
}

函数的返回值，使用return

function a(){
    return 1;
}

全局变量，全局函数

<script type="text/javascript">
    var x=1;//全局变量
    console.log(window.x);//1

    var fun=function(){//全局函数
        console.log("fun");
    }
    console.log(window.fun());//fun
</script>

直接声明的变量和函数是全局变量和全局函数，都绑定在window上，多人合作写项目容易发生重名问题。

解决方法是创一个自己的全局对象，把自己定义的全局变量都绑定到该全局对象上。

<script type="text/javascript">
    var MyWindow={};//自己的全局对象

    MyWindow.x=1;
    console.log(MyWindow.x);//1

    MyWindow.fun=function(){
        console.log("fun");
    }
    console.log(MyWindow.fun());//fun
</script>

常量

在ES6引入了常量关键字：const

<script type="text/javascript">
    const PI='3,14';
	console.log(PI);
</script>

this

在javaScript中this可以使用apply来控制this指向的对象

类，继承

在ES6中引入了class关键字，constructor声明构造器，可以用extends实现继承，类似java。之前是用原型链

<script type="text/javascript">
    class student{
        constructor(name,age) {
            this.name=name;
            this.age=age;
        }
        say(){
            console.log(this.name+"->"+this.age);
        }
    }
    class people extends student{
        constructor(name,age) {
            super(name,age);
        }

    }
    var tom=new people("tom",18);
    tom.say();
</script>

对象

对象的声明

var people = new Object();
var people1 = {};

对象成员、方法

var People1 = {
    name:"人",//定义成员,多个用逗号隔开
    age:12,
    run:function(){//定义方法
        console.log(this.name);
    }
};

动态删除属性，使用delete关键字

delete People1.age;

动态添加属性，直接给属性赋值

People1.sex="男";

常见的对象

Math对象

该对象存放着一些常用的数学运算方法。

abc() 绝对值
ceil() 向上取整
floor() 向下取整
max() 返回两个数值的最大值
min() 返回两个数值的最小值
pow() 返回x的y次幂
random() 返回介于0~1的伪随机数
round() 四舍五入为整数

<script type="text/javascript">
    console.log(Math.abs(-1));//结果1
    console.log(Math.ceil(4.1));//结果5
    console.log(Math.floor(5.9));//结果5
    console.log(Math.max(4,9));//结果9
    console.log(Math.min(9,3));//结果3
    console.log(Math.pow(2,3));//结果8
    console.log(Math.random());//结果0.23566094517973157
    console.log(Math.round(5.5));//结果6
</script>

Date对象

有着一些常用的关于时间的方法

getFullYear() 获取4位数的年份
getMonth() 获取月份（0~11）
getDate() 获取月中天(1~31)
getHours() 获取时(0~23)
getMinutes() 获取分（0~59）
getSeconds() 获取秒（0~59）
getMilliseconds() 获取毫秒(0~999)
getDay() 获取星期(0~6)
getTime() 获取从1970.1.1至今的毫秒数

相应的设置方法是将get换成set

toString() 把Date对象转换位字符串

<script type="text/javascript">
    var myDate=new Date("2021-10-23 12:52:00");
    console.log(myDate.getFullYear());//2021
    console.log(myDate.getMonth());//9
    console.log(myDate.getDate());//23
    console.log(myDate.getHours());//12
    console.log(myDate.getMinutes());//52
    console.log(myDate.getSeconds());//0
    console.log(myDate.getMilliseconds());//0
    console.log(myDate.getDay());//6
    console.log(myDate.getTime());//1634964720000
    console.log(myDate.toString());
    //Sat Oct 23 2021 12:52:00 GMT+0800 (中国标准时间)
</script>

RegExp对象

正则表达式对象，通常用于限制输入数据格式

除非要自己设置指定的限制格式，否则，一些常用的可以上网查，不需要硬记。正则表达式

Array对象

定义数组

var myArray1 = new Array();//空数组
var myArray2 = new Array(3);//包含3个元素的数组
var myArray3 = new Array(1，2，3);//定义并赋值
//简写
var myArray1_1 = [];//定义空数组,这样比较方便
var myArray3_3=[1,2,3]//定义并赋值

数组对象常用方法

concat()连接两个或更多个数组并返回一个新的结果数组
join() 用指定的分隔符将数组的所有元素连接成一个字符串
push() 在数组末尾添加一个或多个元素
pop() 删除并返回数组末尾的一个元素
sort() 排序
unshift() 在数组头部添加一个或多个元素

<script type="text/javascript">
    var Array1=[1,2,3];
    var Array2=[4,5,6];
    console.log(Array1.concat(Array2));//[1, 2, 3, 4, 5, 6]
    console.log(Array1.join("-"));//1-2-3
    Array1.push(1,4,7);
    console.log(Array1);//[1, 2, 3, 1, 4, 7]
    Array1.pop();
    console.log(Array1);//[1, 2, 3, 1, 4]
    Array1.sort()
    console.log(Array1);//[1, 1, 2, 3, 4]
    Array1.unshift(5,2,0);
    console.log(Array1);//[5, 2, 0, 1, 1, 2, 3, 4]
</script>

String对象

String对象常用方法

charAt() 返回字符串对象指定位置的字符
indexOF() 查找指定字符串在字符串对象中的位置
lastIndexOf() 查找指定字符串在字符串对象中最后的位置
substr() 返回一个指定位置开始截取指定长度的子字符串
toLowerCase() 转小写
toUpperCase() 转小写

<script type="text/javascript">
    var myString = "This is my Hello World!"
    console.log(myString.charAt(9));//y
    console.log(myString.indexOf("my"));//8
    console.log(myString.lastIndexOf("is"));//5
    console.log(myString.substr(1,3));//his
    console.log(myString.toLowerCase());//this is my hello world!
    console.log(myString.toUpperCase());//THIS IS MY HELLO WORLD!
</script>

模板字符串，作用可重复利用

<script type="text/javascript">
    var name="fengmo";
    var age="18";
    var end=`我是,${name}`;
    console.log(end);//我是,fengmo
</script>

window对象

常用方法

alter() 弹出警告对话框
confirm() 弹出确认对话框
prompt() 弹出用户输入的对话框
setInterval(函数名或语句,间隔的毫秒数) 设置间隔多久后执行函数
clearInterval(数据间隔ID) 清除间隔
setTimeout(函数名或语句,延时的毫秒数) 设置延时多久后执行函数
clearTimeout(延时ID) 清除间隔

<script type="text/javascript">
    alert("警告框");
    console.log(confirm("确认框"));//当按确认键返回true，按取消键返回false
    console.log(prompt("用户输入对话框"));//返回输入的数据
    var interval=setInterval(fun1,5000);
    clearInterval(interval);
    var timeout=setTimeout(fun1,3000);
    clearTimeout(fun2,timeout);

    function fun1(){
        console.log("数据间隔");
    }
    function fun2(){
        console.log("延时")
    }
</script>

自定义对象

prototype属性，可以指定对象的原型，用来添加方法，从而后代可拥有该方法

Map和Set对象

ES6的新特性

Map是以键值对来存数据

<script type="text/javascript">
    //名字对应成绩
    var map=new Map([['jack',100],['make',98],['tom',80]]);
    var jack=map.get('jack');
    console.log(jack);//100
    //插入数据
    map.set('aaa',88);
    //上传数据
    map.delete('tom');
    console.log(map);//Map(3) {'jack' => 100, 'make' => 98, 'aaa' => 88}
</script>

遍历Map

for(let x of map){
    console.log(x);
}

Set是存不重复的数据

<script type="text/javascript">
    var set=new Set([1,3,1,4,5,3,6]);
    console.log(set);//Set(5) {1, 3, 4, 5, 6}
    //添加数据
    set.add(8);
    console.log(set);//Set(6) {1, 3, 4, 5, 6, 8}
    //删除数据
    set.delete(1);
    console.log(set);//Set(5) {3, 4, 5, 6, 8}
</script>

遍历Set

for(let x of set){
    console.log(x);
}

JSON

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式

JSON格式

var student={"name":"张三","age":"18"};

JSON字符串和JS对象的转换

var jsonPeople1=JSON.stringify(People1);//JS对象转JSON	序列化
var people1= JSON.parse(jsonPeople1);//JSON转JS对象 反序列化

DOM操作

节点编程

查找节点

document.getElementsByTagName()通过标签来获取节点
document.getElementsByClassName() 通过类名来获取节点
document.getElementById()通过id名来获取节点
document.querySelectorAll()通过css选择器来获取指定所有节点
document.querySelector()通过css选择器来获取指定所有节点的第一个节点

处理属性

getAttribute("属性名")获取节点的属性值
setAttribute("属性名","属性值")设置节点的属性值
removeAttribute("属性名")移除节点的属性

处理内容

innerHTML
innerText

节点操作

创建节点：

createDocument("标签")
createTextNode("text内容")
appendChild()

<script type="text/javascript">
    var odiv=document.createElement("div");//创建div节点	<div></div>
    odiv.setAttribute("id","father");//设置节点id属性	<div id="father"></div>
    var otext=document.createTextNode("father");//创建文本节点
    odiv.appendChild(otext);//将文本节点添加到div节点里	<div id="father">father</div>
    document.body.appendChild(odiv);//最后将创建的节点添加到body里这样就添加在页面了
    <!-- <body>
        <div id="father">father</div>
    </body> -->
</script>

删除节点：父节点.removeChild（要移除的子节点）

<div id="father">
    father
    <div id="child">
        child
    </div>
</div>

<script type="text/javascript">
    var child=document.getElementById("child");//要移除的节点
	child.parentNode.removeChild(child);//通过父节点来移除节点
</script>

替代节点:父节点.replaceChild(新节点，要被代替的节点)

<script type="text/javascript">
    var child=document.getElementById("child");//要代替的节点
	var newId=document.getElementById("newId");//新节点
	child.parentNode.replaceChild(newId,child);
</script>

在指定节点前插入新节点：父节点.inserBefore(要插入的新节点，指定的节点)

<script type="text/javascript">
    var newdiv=document.createElement("div");//创建要添加的节点
    var newtext=document.createTextNode("New");//添加节点的文本
    newdiv.appendChild(newtext);//文本加到节点
    var divchild=document.getElementById("child");//指定节点
    divchild.parentNode.insertBefore(newdiv,divchild);//通过父节点将新节点插入到指定节点之前
</script>

样式编程

className获取类名

var odiv=document.getElementById("myID");
odiv.className="class1";

classList可获取多个类名

var odiv2=document.getElementById("myID2");
var odiv2ClassList=odiv2.classList;
alert(odiv2ClassList.length);

style对象，设置单个样式属性的值

var odiv=document.getElementById("myID");
odiv.style.fontSize="100px";//注意传入的参数要用字符串类型

事件编程

事件

常用事件与详情

内联事件

内联事件是指在标签里的事件

<div id="even" onclick="alert('hello')"></div>

DOM属性监听事件

属性监听事件是在script里给节点编写事件，解决代码的耦合问题

var odiv=document.getElementById("even");
    odiv.onclick=sayHello;//注意赋的是函数名
    function sayHello(){
    	alert("hello");
}

标准事件监听函数

增加标准事件监听函数，格式:

addEventListener(eventName,callback,usecapture)

eventName：事件名

callback：方法名

usercapture：监听阶段，“捕获”阶段用true,“冒泡“阶段用false，一般用false

var odiv=document.getElementById("even");
odiv.addEventListener("click",sayHello,false);
function sayHello(){
    alert("hello");
}

移除标准事件监听函数，格式:

removeEventListener(eventName,callback,usecapture)

odiv.removeEventListener("click",sayHello,false);

操作表单

获取提交的信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="#" method="post" onsubmit="return subm()">
		    <p>
		        <span>用户名：</span><input type="text" id="username">
		    </p>
		    <p>
		        <span>性别：</span>
		        <input type="radio" name="sex" value="man" id="boy">男
		        <input type="radio" name="sex" value="woman" id="girl" >女
			</p>
			<input type="submit" name="" id="" value="提交" />
		    <script>
				function subm(){
					var input_text = document.getElementById('username');
					console.log(input_text.value);//得到输入框的值
					
					var boy_radio = document.getElementById('boy');
					var girl_radio = document.getElementById('girl');
					//对于单选框、多选框等等固定的值，通过判断checked属性来确定是否被选中，选中为true,没选中为false
					console.log(boy_radio.checked);
					console.log(girl_radio.checked);
					
					return false;//返回false，提交失败，不会跳转
				}
		       
		    </script>
		</form>
	</body>
</html>

但当单选框或多选框有多个时，通过判断checked返回的true/false会非常麻烦，所以可以通过调用querySelector（）和querySelectorAll（）方法，传入css选择器来过滤筛选出来。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="https://www.baidu.com" method="post" onsubmit="return fun()">
			<input type="radio" name="sex" id="man" value="man" />男
			<input type="radio" name="sex" id="woman" value="woman" />女
			
			<input type="checkbox"  value="east" />东
			<input type="checkbox" value="west" />西
			<input type="checkbox"  value="south" />南
			<input type="checkbox"  value="north" />北
			<input type="submit" value="提交" />
		</form>
		<script type="text/javascript">
			function fun(){
				var radio=document.querySelector('input[type="radio"]:checked');	
				console.log(radio.value);
				
				var chbox=document.querySelectorAll('input[type="checkbox"]:checked');
				chbox.forEach(function(checkBox){
					console.log(checkBox.value);
				})
				return false;
			}
		</script>
	</body>
</html>

提交表单：MD5加密，表单优化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入md5工具 -->
		<script src="lib/md5.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<form action="https://www.baidu.com" method="post" onsubmit="return sub2();">
			<p>
				<span>用户名：</span><input type="text" name="username" id="username" value="" />
			</p>
			<p>
				<span>密码：</span><input type="password" id="password" value="" />
				<input type="hidden" name="mdPassword" id="mdPassword" value="" />
			</p>
			<input type="submit" value="提交"/>
		</form>
		
		
		<script type="text/javascript">
			function sub1(){
				var username=document.getElementById("username");
				var password=document.getElementById("password");
				
				//MD5加密 方法一：直接加密，缺点前端密码框可看出密码变长了
				password.value=md5(password.value);
				return true;
			}
			function sub2(){
				var username=document.getElementById("username");
				var password=document.getElementById("password");
				var mdPwd=document.getElementById("mdPassword");
				
				//MD5加密 方法二：利用隐藏框加密，记得把密码输入框的name属性去掉，可以解决方法一中的缺点
				mdPwd.value=md5(password.value);
				return true;
			}
		</script>
	</body>
</html>

jQuery

以下只是列出一部分方法，更详细与具体用法可以查看JQuery API文档

引入

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

基本结构

$(selector).action();

自定义选择器

JQuery可以使用CSS的选择器也可以使用JQuery的自定义选择器，但为了确保性能，JQuery自定义的选择器建议少用。具体可查JQuery API文档。

基本过滤选择器：

:first匹配找到的第一个元素
:last匹配找到的最后一个元素

内容过滤选择器：

:has(selector) 匹配包含有选择器所匹配的元素的元素

jQuery对象与DOM对象转换

jQuery->DOM

var $mydiv=$("#mydiv");//获取jQuery对象
var oDiv=$mydiv[0];//转换成DOM对象
DOM->jQuery

var odiv=document.getElementById("mydiv");//获取DOM对象
var $mydiv=$(odiv);//转换成jQuery对象

页面加载后执行简写

$(document).ready(function(){
    //代码
});

//等效写法
$(function(){
    //代码
});

节点编程

创建元素
```
$("<div></div>");
```
插入元素

Append()或AppendTo()尾部插入

prepend()或prependTo()头部插入
删除元素

remove()
替换元素

replaceWith()
属性处理

attr()、removeAttr()
内容处理

html()、text()

基本用法是

.attr(name);//读取值

.attr(name,value);//设置值

.removeAttr(name);//移除值

样式编程

增加类名

addClass()
是否有类名

hasClass()
移除类名

removeClass()

事件编程

click()
mousedown()
mouseup()

posted @ 2021-10-24 11:42 Java小羊阅读(172) 评论(0) 收藏举报

刷新页面返回顶部

Java小疯魔

Javascript和jQuery

JavaScript基础知识

什么是JavaScript

插入JavaScript

注释

输出到控制台

数据类型

运算符、控制语句

局部变量

函数

全局变量，全局函数

常量

this

类，继承

对象

常见的对象

Map和Set对象

JSON

DOM操作

节点编程

查找节点

处理属性

处理内容

节点操作

样式编程

事件编程

事件

内联事件

DOM属性监听事件

标准事件监听函数

操作表单

jQuery

引入

基本结构

自定义选择器

jQuery对象与DOM对象转换

页面加载后执行简写

节点编程

样式编程

事件编程

公告