JavaScript基础知识

HTML文件上写：
<script src="js/index.js" type="text/javascript" 
charset="utf-8"></script>
JavaScript文件上写：
alert("helloworld")

(2).直接在script标签里面书写JS代码：

<script type="text/javascript">
	console.log(1234567890);
</script>

(3).在控制台书写js代码
4.变量声明
var=XXX;
注意：
1/如果在函数内容没有用var来进行声明，那么就会创建全局变量。
2/声明会使变量提升，但不会赋值。
5.函数的声明方式
(1).第一种声明方式

function abc(){
    console.log("这是函数ABC")
}

(2).第二种声明方式

var cba = function(){
    console.log("这是函数CBA")
}

6.函数的传参
函数在调用的时候，不会对参数进行检测。
Arguments:在函数调用的时候，会将所有的参数放置进arguments数组里，可以通过arguments获取所有的参数。

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

注意：
第一种方式声明函数会将整个函数进行提升
第二种方式声明函数仅仅只会将变量提升，函数的赋值依然在后面进行。
7.定义对象
(1).字面量的方式定义对象

var student = {};//括号里面不写任何内容，那么定义的就是一个没有直接属性和方法的对象
var student = {
	name:"蔡徐坤",
	like:"ctrl",
	sayRap:function(){
	console.log("会rap")
	console.log(arguments)
	}
};

(2).工厂模式来生成对象

function Student(name){
	var student = {
	name:name,
	like:"ctrl",
	sayRap:function(){
	console.log("会rap")
	console.log(arguments)
		}
	};
	return student;
}
var s1 = Student("小明");
console.log(s1)

(3).构造函数模式生成对象

function Teacher(){
	this.name = "陈老师"
	this.gender = "男"
	this.teach = function(){
	console.log("会教学");
	}
}
var t1 = new Teacher()
var t2 = Teacher()
//如果没有使用new，就会当作普通函数调用，this的指向就会指向window，this.name就会导致在window属性生成name属性，name就变为全局变量。
console.log(t2)

(4).class方式定义类生成对象（ES6-2015的写法）

class Animal{
	constructor(){
	this.legs ="四条腿"
	}
	run(){
	console.log("跑")
	}
}
			
class Cat extends Animal{
	constructor(name){
	//关键词，调用继承的构造函数
	super()
	this.name = "猫";
	this.type = "波斯猫";
	this.nickname =name
}
say(){
	console.log("喵喵喵")
	}
}
	var c1 = new Cat("小喵")
	console.log(c1)

8.DOM对象
(1).获取文档对象的方法：

document.queryselector()
document.queryselectorAll()
document.getElementbyId()
document.getElementsbyClassName()
document.getElementsbyTagName()

(2).更改内容

//追加内容
    var h2=document.createElement("h2")
    h2.innerText="写字"
    document.body.appendChild(h2)

//删除内容
    h2.parentElement.removeChild(h2)

//插入内容
    var hobby=document.querySelector("div .hobby")
     hobby.parentElement.insertBefore(h2,hobby)

//替换内容
    document.body.querySelector("div").replaceChild(h2,hobby)
     document.body.replaceChild(h2,hobby)

(3).更改样式
1.通过style属性来修改样式的内容

//1获取元素对象
var h1 = document.querySelector("h1")
//2修改style属性
//注意：修改属性，如果属性是多个单词组成，那么去掉-,首字母大写即采用驼峰命名法来处理
//h1.style.background = "skyblue";
h1.style.color = "#fff";
h1.style.borderRadius = "10px";

2.通过修改类名达到修改样式

3.通过添加或者修改style标签来修改样式的内容

var styleTag = document.createElement("style")
styleTag.innerHTML = `
	.suofang{
		background: red;
		animation: sf 2s infinite;
	}
	@keyframes sf{
		from{
			height: 20px;
			transform: translateY(0px);
		}
		to{
			height: 200px;
			transform: translateY(200px);
		}
	}
`
document.body.appendChild(styleTag);

9.BOM对象
(1).Window:最根本的全局对象，所有的全局对象都是window的属性
常用的属性：
弹框：alert(普通弹框)/confirm(有确定和取消按钮)/prompt(可以输入内容的弹框)
注意：系统默认的弹框都是比较方便和快捷，但是用户体验不佳，UI设计跟应用可能不统一，会阻塞正常页面的渲染

(2).文档对象：document
页面前进后退：history，history.go(正数/负数)，后退history.back(),前进history.forward()
页面宽高：innerHeight/innerWidth
浏览器在屏幕所在位置：screenLeft/screenTop/screenX/screenY
滚动位置：scrollTo()

(3).Location:访问页面与路径相关的对象:

hash: ""，===> #和后面的内容。
host: "127.0.0.1:8020" ===>主机名和端口号
hostname: "127.0.0.1" ===>主机名
href: "http://127.0.0.1:8020/4-1bom%E5%AF%B9%E8%B1%A1/location.html"===>页面的路径，如果修改这个内容，会使页面跳转
origin: "http://127.0.0.1:8020"===>协议+主机名+端口号
pathname: "/4-1bom%E5%AF%B9%E8%B1%A1/location.html"===>后面的具体路径
port: "8020"===>端口号
protocol: "http:"===>协议
reload: ? reload() ===>重新加载当前页面
replace: ? () ===>替换当前的页面，不能再返回到当前页面
assign: ? assign() ===>加载新的页面

(4).Navigator:浏览器相关的信息，一般如果想要获取用户使用的浏览器信息，可以通过这个对象获取。
主要使用window.navigator.userAgent，userAgent中是浏览器信息

(5).SetInterval：间隔函数
语法：setInterval(function(){},毫秒数)
(6).clearInterval：清除间隔函数
语法：clearInterval(intervalId)

(7).SetTimeout：延迟函数
(8).clearTimeout：清除延迟函数
注意：setTimeout/setInterval里面的函数都是异步执行的函数。
会放到内存里的事件队列里面，时间触发之后，就会进入到cpu执行的等待队列里面。CPU依然会先执行正在执行的内容，执行之后才会执行等待队列里面的事件。

(9).Localstorage:本地存储，长期存放数据。只要不清除缓存，就会一直存放。
//本地存储：对数据的存放，获取，修改，删除；

//存放数据/修改数据的方式：
localStorage.setItem("username","隔壁老王");
localStorage.currentTime = new Date()
localStorage['age'] = 30;
console.log(localStorage)
//获取数据的方式
var username = localStorage.getItem("username")
console.log(username)
console.log(localStorage.currentTime)
console.log(localStorage['age'])
//通过索引值来获取内容
var item = localStorage.key(0)
console.log(item)
//删除数据
localStorage.removeItem("age")
console.log(localStorage)
//清除所有数据
localStorage.clear()
console.log(localStorage)

(10).SessionStorage:临时性的本地存储，只要已关闭浏览器，就会被清除掉。当次会话有效。

//添加和修改数据
sessionStorage.username = "小黑";
sessionStorage['age'] = 16;
sessionStorage.setItem("userType","vip")
//获取数据
var username = sessionStorage.username;
var age = sessionStorage.getItem("age");
var userType = sessionStorage['userType'];
console.log(username,age,userType)
//清除数据
sessionStorage.removeItem("age")
console.log(sessionStorage)
sessionStorage.clear()
console.log(sessionStorage)

注意：所有存放在本地存储的数据都是字符串。

(11).AJax

Ajax：在不刷新页面的情况下，异步的服务器进行交互；

function getAjax(httpUrl,fn){
//1实例化xhr对象
var xhr = new XMLHttpRequest()
//2设置请求的路径和方法
xhr.open("GET",httpUrl);
//3发送请求
xhr.send()
//4监听事件，接收请求
xhr.onreadystatechange = function(){
	if(xhr.readyState==4&&xhr.status==200){
		/*console.log(xhr.readyState);
		console.log(xhr.status)
		console.log(xhr)*/
			
		fn(xhr)		
		}
	}
}

getAjax("http://127.0.0.1:8020/5-1ajax/hello.txt",function(xhr){
	var h1 = document.createElement("h1");
	h1.innerHTML = xhr.responseText;
	h1.style.color = "pink"
	document.body.appendChild(h1)
})

(12).JQuery

(1).JQuery的引用
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

(2).修改DOM元素的内容
//设置和修改HTML的内容
$('h1').html('今晚吃啥？');
document.querySelector("h1").innerHTML = "今晚吃啥？"

//获取DOM对象上的内容,不传参数就是获取内容
var html = $('h1').html()
console.log(html)

(3).修改DOM元素的属性
//设置和修改dom元素的属性
$('img').attr("src","img/cxk.gif")
//获取dom属性的值
var imgSrc = $("img").attr("src")
console.log(imgSrc)

(4).修改DOM元素的样式(注意：属性是由多个单词组成，那么key要用引号引起来，或者使用驼峰命名法，如下所示)
//一次性设置多个样式
$(".abc").css({
	background:"skyblue",
	color:"#fff",
	"border-bottom":"10px solid purple",
	borderTop:"10px solid yellow"
})
//一次性只设置1个样式
//$(".abc").css("border","10px solid pink")

添加和删除classname
$('button').click(function(e){
	console.log($('.d1').attr("class"))
	if($('.d1').attr("class")=="d1"){
		$('.d1').addClass("swiper");//添加类名
	}else{
		$('.d1').removeClass("swiper");//删除类名
	}
	//$('.d1').addClass("swiper");
	//$('.d1').toggleClass("swiper");//切换类名
})

(5).插入和删除DOM元素
<img src="img/cxk.gif"/>
<h1>-------------------------------------</h1>
<div id="main">
	
</div>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	//可以追加html代码
	$('#main').append("<h1>helloworld</h1>")
	//可以追加既存在的元素对象
	$('#main').append($("img"))
    //删除元素
	$(".delete").remove()
</script>

(6).DOM相关的事件
语法：$('css选择器').事件名称(function(事件对象){})
$(".d1").click(function(e){
	console.log("1")
})
$(".d1").click(function(e){
	console.log("2")
})
$('body').keypress(function(e){
	console.log(e)
})