了解HTML/CSS/JS/JQuery/ajax等前端知识

Posted 2020-11-26 淡泊明志，宁静致远

什么是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  hidden  select

 什么是CSS

层叠样式表
优点：
    页面表现统一  方便修改
    样式丰富，使用灵活
    减少代码量，增加加载速度，减少网络传输
    便于搜索引擎收录

 CSS选择器和常用属性

<style type="text/css">
   li{
       标签选择器
   }
    .red{
       类选择器    
    }
    #L1{
       ID选择器
    }    
</style>

常用属性
    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.直接写
    <script type=‘text/javaScript‘>
     js代码    
　　</script>
2.外部引入<script src=‘text/javaScript‘></script>

 JS类型

var = []  数组
var = {} 对象
var = 0  数字
var = “” 字符串
var = flase 布尔 

 遍历对象

var user = {id:1,name:‘zhangsan‘,age:20};
for(key in user){
         alert(key+"<<<<"+user[key]);
}

字符串转对象

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

　　var user = eval(str);

 DOM  全选、反选、全不选

document.getElementById(“标签id属性值”) 非常常用！！！

<input type="checkbox" value="游戏" name="hobby" />游戏
<input type="checkbox" value="音乐" name="hobby" />音乐
<input type="checkbox" value="体育" name="hobby" />体育
<input type="button" value="全选" onclick="quanxuan();" />
<input type="button" value="全不选" onclick="quanbuxuan();" />
<input type="button" value="反选" onclick="fanxuan();" />
      function quanxuan(){
          var cs = document.getElementsByName("hobby");
          for(var i=0;i<cs.length;i++){
                cs[i].checked=true;
          }
      }
      function quanbuxuan(){
          var cs = document.getElementsByName("hobby");
          for(var i=0;i<cs.length;i++){
                //alert(cs[i].value)
                //cs[i].checked="";
                cs[i].checked=false;
          }
      }
       function fanxuan(){
          var cs = document.getElementsByName("hobby");
          for(var i=0;i<cs.length;i++){
               //alert(cs[i].checked);
                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);