前端开发语言整理

前端开发语言

1、JavaScript

1.1）作用：

实现网站的交互，ES6，简称js
前端的基本语法

1.2）语法

定义变量

var a=1; alert(a);

var x=true; alert(x);

var y=10.8; alert(y);
var arr1 = new Array();//声明一个空数组
var arr2 = new Array("abc", "hello", true);//声明一个具有初始值的数组
var arr4 = [];//声明一个空数组

定义函数

声明：
	function 函数名称([参数列表]){ 函数体 }
	或者
	var a = function 函数名称([参数列表]){ 函数体 }

调用: 
	函数名称([参数列表]);

2、 jQuery

2.2） 作用

JavaScript 形成交互，jQuery 封装JavaScript，代码更加简洁高效
ajax 异步请求
json 数据传输
Web中间件(tomcat) 处理请求和响应
mysql数据库，存取数据
简称jq
使用时，需要导包

2.3） 语法

	$(选取的html元素).事件/操作()
	$(selector).action()	

案例：

$("p").hide() - 隐藏所有<p></p>标签
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素

2.3） jQuery 、JavaScript写法对比

var ele = document.getElementById("username");			//js
var ele = $("#username");								// jQuery

var ele = document.getElementsByTagName("p");			//js
var ele = $("p");										//jQuery

var ele = document.getElementsByName("username");		//js
var ele = $('input[name="username"]');					// jQuery

var ele = document.getElementsByClassName("info");		//js
var ele = $(".info");									// jQuery

$("div").css("background", "red");	//选取所有<div></div>标签，css事件（事件内容）					
$("div").css({
	"background" : "blue",
	"border" : "2px solid red",
	"font-size" : "30px"
});

2.4）js与json之间互转

给服务器发送数据: 将JS对象转成JSON字符串 	JSON.stringify(Js对象)
接受服务器的数据: JSON字符串转成JS对象		JSON.parse("json字符串

//接受服务器的数据:JSON字符串转成JS对象 		JSON.parse("json字符串")
var jsa = JSON.parse(a);
//注意：parse解析的内容一定要被单引号包裹，里面的值要被双引号包裹
console.log(jsa);
console.log(jsa[0].name); //张三，获取下标为0的name值
console.log(jsa[1].age); 	//20，获取下标为0的age值
			
//给服务器发送数据:将S对象转成JSON字符串 	JSON.stringify(Js对象)
//json串可以对字符串拼接、长度、截取、替换....
var str = JSON.stringify(jsa);
console.log(str);
			
//拼接、长度、截取
console.log(str.concat(123)); 	//拼接字符串
console.log(str.length);			//长度
console.log(str.substring(3));	//从3开始向后截取
console.log(str.substring(3,5));	//从3开始，到5结束截取，含头不含尾截取

3、css

3.1）作用

CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。

主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。

3.2）外部引入css

	<link rel="stylesheet" href="2.css">
		rel：定义一个外部加载的样式表
		href：样式表的路径

/* 选中class=a的元素*/
/* class查询*/
.a{
	width: 275px; 	/*宽度*/
	 height: 30px;	/*高度*/
	border: 2px solid red;
	border-radius: 12px;
}

/*修饰input的标签的，类型是submit保存按钮的*/
/* 类型查询 */
input[type="submit"]{
	width: 45px; 	/*宽度*/
	height: 30px;	/*高度*/
	color: white;	/*字体颜色*/
	background-color: blue; /*背景颜色*/
	border: 2px solid blue;/*边框：宽度2px，dashed虚线，solid实线 ，颜色blue*/
	border-radius: 8px;
}

/*修饰id=m的*/
/* id查询 */
#m{
	padding-left: 25px; /* 调整内容距离左边框的距离,左内边距 */
}