HTML、CSS、JS与前端开发基础详解-优快云博客

@[toc]目录

#一、HTML

#1.表格标签

#2.表单标签

#二、CSS

#1.css修饰网页语法

#2.css的盒子模型

#三、JS（JavaScript）

#1.事件驱动

#2.在html中嵌入js

#3.基础语法

#基本数据类型

#JS的运算符

#JS的语句

#JS的数组

#JS的函数

#JS对象

#4.DOM

#四、Jquery

#1.概述：

#2.jQuery的文档就绪

#3.jQuery的语法

#4.jQuery常用函数

#5.jQuery常用事件

#五、JSON

1.语法

2.转换工具

六、AJAX

#一、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的语法修饰网页的元素

<script src="jquery-1.8.3.min.js"></script>

<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

#五、JSON
JSON是一种轻量级的数据交换格式，指定了浏览器和服务器之间数据传输的格式。

#1.语法
JSON数据: var a =' "firstName" : "John" '

JSON 对象: var a = '{ "firstName":"John" , "lastName":"Doe" }'

JSON 数组:

var a = '[{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" }]';

#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){ 请求失败后自动调用的（需要写）
}
})
————————————————
版权声明：本文为优快云博主「大小不少年」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/zhangzhanpu/article/details/120164602