• 了解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 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);
    我凝视这恒星,等待这那场风暴,我已经准备好了
  • 相关阅读:
    Vue 插件写法
    js创建对象的多种方式及优缺点
    webpack原理与实战
    发布高性能迷你React框架anu
    Windows 同一时候开启核心显卡与独立显卡(不接显示器启动核芯显卡)
    基于QT和OpenCV的人脸检測识别系统(1)
    Cocos2d-x中背景音乐播放暂停与继续
    使用Xcode和Instruments调试解决iOS内存泄露
    Shell 命令行快捷键
    ExtJS学习-----------Ext.Array,ExtJS对javascript中的Array的扩展(实例)
  • 原文地址:https://www.cnblogs.com/cheng5350/p/11963578.html
Copyright © 2020-2023  润新知