html css ajax,了解HTML/CSS/JS/JQuery/ajax等前端知识(示例代码)

什么是HTML

超文本标记语言

浏览器通过识别相应的标签来加载页面

通过HTTP协议传输，不是编程语言

HTML常用标签

title script style link meta link body

body标签

h1-h6

p

br

hr

strong

p

b

div

img

a

table tr td

列表标签

ul

ol

li

表单标签

input redio checkbox text submit button resit password fiel hiddenselect

什么是CSS

层叠样式表

优点：

页面表现统一 方便修改

样式丰富，使用灵活

减少代码量，增加加载速度，减少网络传输

便于搜索引擎收录

CSS选择器和常用属性

li{标签选择器}.red{类选择器}#L1{ID选择器}

常用属性

color

width

high

background-color

font-size

font-fimily

font-weight

盒模型和定位

magin 边界 桌子

border 边框 盒子

padding 填充 盒子填充

相对定位和绝对定位

position:relative

position:absolute

top: 0px

right:10px

z-index:整数 越大越靠前

什么是JS

JavaScript是一种面向对象，解释性，基于事件的脚本语言

对象即使Json格式

组成：

ECMAScript ：核心

DOM：文档对象模型 与页面交互，操作HTML CSS

BOM: 浏览器对象模型 与浏览器交互

引入方式：

1.直接写js代码2.外部引入

JS类型

var = [] 数组

var = {} 对象

var = 0 数字

var = “” 字符串

var = flase 布尔

遍历对象

var user = {id:1,name:‘zhangsan‘,age:20};

for(key in user){

alert(key+"<<<

}

字符串转对象

var str ="{id:1,name:‘zhangsan‘}";

var user = eval(str);

DOM  全选、反选、全不选

document.getElementById(“标签id属性值”) 非常常用！！！游戏音乐体育

function quanxuan(){

var cs = document.getElementsByName("hobby");

for(var i=0;i

}

function quanbuxuan(){

var cs= document.getElementsByName("hobby");for(var i=0;i

//cs[i].checked="";

cs[i].checked=false;}

}

function fanxuan(){

var cs= document.getElementsByName("hobby");for(var i=0;i

cs[i].checked= (!cs[i].checked);}

}

改变样式

function f1(){

document.getElementById("tt").style.backgroundColor="red";

}

function f2(){

document.getElementById("tt").style.color="blue";

}

什么是jQuery

是一个js框架，封装了大量js代码

核心理念是写的更少，而做的更多

百度jQuery引用地

jQuery基本选择器

$(function(){}) //页面加载完成后执行代码

ID选择器 $(“#id”)

元素选择器 $(“元素名”)

类选择器 $(“.类名”)

什么是AJAX

是一种创建交互式网页应用的网页开发技术，通过后台与服务器进行少量数据交换

AJAX请求方式

GET请求 $.get(url, [data], [callback], [type])

POST请求 $.post(url, [data], [callback], [type])

A JAX请求 $.ajax([settings])

GET请求 $.get([settings])

POST请求 $.post([settings])

$.getJSON()

$(function(){

$.ajax({

url:url,

async:true

date:date

type:‘get‘

dataType:‘json‘

success:function(){}

error:function(){}

})

}

JSON

JSON(JavaScript Object Notation) JavaScript对象表示法。

是一种轻量级数据交换格式，易编写阅读，易解析生成

JSONObject json = JSONObject.fromObject(map);