码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-11-30 21:14:52      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:修改   pre   tle   网络   json   title   定位   put   padding   

什么是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);

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

标签:修改   pre   tle   网络   json   title   定位   put   padding   

原文地址:https://www.cnblogs.com/cheng5350/p/11963578.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!