当前位置:首页 > Web开发 > 正文

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

2024-03-31 Web开发

标签:

什么是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请求方式

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/42119.html