本文详细介绍了HTML的表格和表单标签，CSS的修饰语法和盒子模型，JavaScript的事件驱动、基础语法、DOM操作，Jquery的概述、常用函数和事件，以及JSON的语法和转换工具。此外，还涵盖了AJAX和回调函数的概念，是Web前端开发的重要参考资料。
目录
一、HTML
1.表格标签
table:表示表格的标签 bgcokor：设置背景颜色 width：设置宽度 heigh：设置高度 border：设置边框 cellspacing：设置单元格间距 tr：行 td：列 colspan：合并列 rowspan：合并行
2.表单标签
form：用来提交表单里的数据 img：表示插入图片 select：表示下拉框 option：下拉选项 textarea：文本域 input：输入框 text：普通的文本输入框 password：密码输入框 email：邮箱输入框 file：上传文件 radio：单选框 checkbox：多选框 button：普通按钮 submit：提交按钮 align：设置元素位置，center bordercolor：设置边框颜色
二、CSS
1.css修饰网页语法
方式1：行内css <div style="background-color:red;">我是div2</div>
方式2: 内部css 头部添加 <style> div{ color:green; }</style>
方式3: css选择器
（1）标签名选择器：
div{
background-color: #008000;
color: black;
font-size: 30px ;
font-family: "宋体" ;
}
input{
background-color: pink;
}
（2）class选择器：
先设置class属性 例如：<div class="a">我是div1</div>
通过.获取class的值
.a{ color: yellow; }
注：网页中class=a 的元素可以同时又很多，相当于同时被选中
（3）id选择器：
先设置id属性 例如：<div id="x">我是div2</div>
通过#获取id的值
#x{ font-size: 100px; }
注： 选中网页中id=x的元素，由于id的值不能相同，所以只选中了一个元素
（4）分组选择器：把多种选择器选中的元素分成一组，统一设置样式
div , #s1 {
color: #008000;
}
（5）属性选择器：根据标签的不同属性选择元素
input [ type='text' ] {
background-color: #FFFF00;
}
2.css的盒子模型
css把网页中的每个元素看做是一个盒子。 margin：外边距，是指盒子和盒子之间的距离 padding：内边距，是盒子里的内容和边距的距离 width/height：内容的宽度.高度 border：边框
三、JS（JavaScript）
1.事件驱动
onclick：单击 ondblclick：双击 onmouseenter：鼠标进入 onmouseleave：鼠标移出 alert：弹出框 prompt：输入框 confirm：确认框
2.在html中嵌入js
1.行内js：
<a href="#" οnclick="alert(10);"> 单击弹框 </a> <a href="#" οnclick="prompt();"> 单击输入框 </a>
2.内部js：
<head>
<meta charset="utf-8">
<title>测试 js的入门案例</title>
<script>
alert(100);
confirm();
prompt("请输入年龄：");
</script>
</head>
3.基础语法
基本数据类型
（1）数值类型-number： 在js中数值类型只有浮点型，需要时浮点型和整数型会自动转换
例：2.4+3.6=6；
（2）字符串类型-string： 在js中字符串是基本数据类型，是通过单引号或者双引号引起来
例： var str1=“hello”； var str2=‘cgb2105’；
（3）布尔类型-boolean： 值为true或者false
（4）undefined： 值只有一个就是undefined，表示变量没有初始值
a) var num; alert(num); 声明了变量但是没有为变量赋值，该变量的值就是undefined。
b) 访问一个对象上不存在的属性时，也是undefined。
c) 访问数组中一个没有的元素的位置时，该位置处的值也是undefined.
（5）null： 值只有一个，就是null。表示空值或者不存在的对象。
（6）复杂数据类型：函数、数组、对象（自定义对象、内置对象、DOM对象、BOM对象…）
JS的运算符
1.三元运算符： 求两个数里的大值 var j=10; var k=20; alert( j < k ? k : j );
2.== === ： alert(1==1); 比值，true alert(1===1); 比类型和值，true alert(1==='1'); 比类型和值，false
3. % / ： 求25的个位数和十位数 var g=25; alert( g%10 ); %取余，个位数 alert( g/10 ); 2.5 （js除不取整，除后结果是多少就显示多少）
4. ++ -- var h = 10; h = h++ ; alert(h); //10 （与java规则一样）
JS的语句
1.循环结构：
for(var i = 1;i < 11;i++) { console.log(i); }
while( g > 1) { g = g/2; f++; } console.log(f);
2.分支结构：
（1）switch-case-breake； （2）if-else； （3）if - else if - else
JS的数组
特点：长度可变，数据类型丰富，可以存放任意的数据类型
方式1： var arr1 = new Array(); 声明一个空数组 var arr2 = new Array("abc", "hello", true); 声明一个具有初始值的数组 方式2： var arr4=[] ; 声明一个空数组 var arr5 = ["abc", "hello", true]; 声明一个具有初始值的数组 遍历数组： for...in for(var i in a) { console.log("i："+i); }
JS的函数
函数的写法1.1： function 函数名(参数列表){函数体}
例：function a(){} 调用函数： a（）；
函数的写法2： var 函数名 = function(参数列表){函数体}
例：var b = function(){} 调用函数：b（）； 被调用的函数必须存在
函数的写法1.2： 定义含参函数： function c(a,b){ console.log(a+b); } 调用： c（1，2）；
函数的写法1.3： 定义含参的有返回值的函数：function e(a,b){ return a+b;} 调用： var f=e（1，2）；
JS对象
创建对象方式1：
function Person(){} 声明对象
var p = new Person(); 创建对象
动态绑定属性
p.name="张三" ;
p.age=18 ;
动态绑定函数
p.eat=function(){
console.log("吃猪肉");
}
console.log(p); 查看
p.eat(); 调用函数
创建对象方式2： var p2 = {
绑定了属性
name:"张三",
age:19,
绑定了函数
eat:function(a){
console.log(a);
}
}
console.log(p2);
p2.eat(10);//调用函数
4.DOM
作用： 使用document对象的各种方法属性。解析网页里的各种元素。
按照id获取元素-----getElementById(“id属性的值”) 例： var a = window.document.getElementById("a1"); 得到一个元素 a.innerText = "<h1>hello</h1>" ; 修改内容 document.write( a.innerHtml ); 直接向网页写出数据
按照name获取元素-----getElementsByName(“name属性的值”) 例：var b = document.getElementsByName("d"); 得到多个元素
按照class获取元素-----getElementsByClassName(“class属性的值”) 例：var c = document.getElementsByClassName("f");
按照标签名获取元素-----getElementsByTagName(“标签名”) 例：var d = document.getElementsByTagName("p");
四、Jquery
1.概述：
用来简化JS的写法，综合使用了HTML css js。
语法：$(选择器）.事件
使用步骤：在HTML里使用script标签引入jQuery的文件，使用jQuery的语法修饰网页的元素
<!-- 1. 引入jQuery文件 -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 2. 在网页中嵌入JS代码 -->
<script>
案例： 点击p标签，修改文字
function fun(){
var a = document.getElementsByTagName("p");
a[0].innerHTML="我变了。。。";
jq获取元素 -- jq语法： $(选择器).事件
$("p").hide(); 隐藏元素
$("p").text("我变了33333。。。"); 修改文字
}
</script>
2.jQuery的文档就绪
<script>
$(function(){
$("h1").text("我变了。。");
});
</script>
3.jQuery的语法
标签名选择器： $(“div”) 选中div
id选择器： $("#d1") 选中id=d1的元素
class选择器： $(".cls") 选中class=cls的元素
属性选择器： $("[href]") 选中有href属性的元素
高级选择器： $(“div.d3”) 选中class=d3的div
4.jQuery常用函数
text() html() val() 获取或者设置值
hide() 隐藏
$(“p”).css(“background-color”,“yellow”); 设置样式
show() 显示
fadeIn() 淡入
fadeOut() 淡出
5.jQuery常用事件
单击事件–click
双击事件–dblclick
鼠标移入事件–mouseenter
鼠标移出事件–mousleave
鼠标悬停事件–hover
键盘事件–keydown keyup keypress
6.jQuery前后端调用-js循环写法
（1）基础循环写法
//JS可以将接收的JSON串动态转化为JS对象
$.get(url,function(data){
//循环遍历返回值
for(var i=0; i<data.length;i++){
console.log(data[i])
}
})
（2）in关键字
//JS可以将接收的JSON串动态转化为JS对象
$.get(url,function(data){
//循环遍历返回值
//in 遍历数组下标
for(index in data){//从0开始
console.log(data[index])
}
})
（3）of关键字
//JS可以将接收的JSON串动态转化为JS对象
$.get(url,function(data){
//循环遍历返回值
//of 关键字 直接获取遍历对象
for(user of data){
console.log(user)
}
})
7.模板字符串
说明: 模版字符串语法从ES5以后提供的
语法: 反引号
特点:
1. 被反引号包裹的都是字符串 可以随意换行 可以保留代码结构.
2. 可以动态的从对象中获取数据 语法: ${对象.属性}
用法：
for(user of data){
//获取数据信息
var tr =
`<tr align="center">
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.age}</td>
<td>${user.sex}</td>
</tr>`
//将tr标签追加到表格中
$("#tab1").append(tr)
}
五、JSON
JSON是一种轻量级的数据交换格式，指定了 浏览器 和 服务器 之间数据传输的格式。
1.语法
（1）JSON数据： var a =' "firstName" : "John" '
（2）JSON 对象：（Object格式）: var a = '{ "firstName":"John" , "lastName":"Doe" }'
（3）JSON 数组：
var a = '[{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" }]';
或 [100,"张三"，“李四”]
（4）嵌套结构：
[
{
"Id":100,
"name":"黑熊精"
},
{
"Id":200,
"name":"白龙马",
"color":[
"白色",
"黑色",
"蓝色",
"红色"
],
"装备":[
{
"name":"上古马鞍",
"level":"顶级"
},
{
"name":"上古马蹬",
"level":"顶级"
}
]
}
]
2.转换工具
给服务器发送数据: 将JS对象转换成JSON字符串 JSON.stringify(js对象)
例: var str = JSON.stringify(jsa)
接收服务器的数据: JSON字符串转成JS对象 JSON.parse("json字符串")
例: var jsa=JSON.parse(" 'name' : '张三' ")
六、AJAX
是异步的技术，用来局部刷新、异步访问
好处是：在不刷新整个网页的前提下，局部更新数据
语法：
$.ajax({
type: , 请求的方式，get/post（需要写）
url: , 交给具体的哪个程序去处理 （需要写）
contentType: , 请求时的数据的类型 text html jpg json （可以省略）
data: , 请求时要携带的参数 （需要写）
dataType: , 服务器返回数据的类型 text html jpg json （可以省略）
success: function(data){ 请求成功后自动调用的 （需要写）
},
error: function(data){ 请求失败后自动调用的 （需要写）
}
})
注解解决跨域：@CrossOrigin
七、回调函数
{"input":"(function(val,that){
if(that.formData.colvarchar13 && that.formData.colvarchar14){
var startDate = Date.parse(that.formData.colvarchar13);
var endDate = Date.parse(that.formData.colvarchar14);
if (startDate>endDate){
that.$set(that.formData,'colvarchar15','');
return;
}
if (startDate==endDate){
that.$set(that.formData,'colvarchar15',1);
return;
}
var days=(endDate - startDate)/(1*24*60*60*1000);
that.$set(that.formData,'colvarchar15',days+1);
}
})"
}
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
