了解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:10pxz-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:truedate:datetype:‘get‘dataType:‘json‘success:function(){}error:function(){}})}

JSON

JSON(JavaScript Object Notation) JavaScript对象表示法。
是一种轻量级数据交换格式,易编写阅读,易解析生成JSONObject json = JSONObject.fromObject(map);

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

时间: 2024-12-20 11:09:17

了解HTML/CSS/JS/JQuery/ajax等前端知识的相关文章

JS jquery ajax

4.form中的input可以设置为readonly和disable,请问2者有什么区别? readonly不可编辑,但可以选择和复制:值可以传递到后台 disabled不能编辑,不能复制,不能选择:值不可以传递到后台 5.js中的3种弹出式消息提醒(警告窗口,确认窗口,信息输入窗口)的命令式什么? alertconfirmprompt 2.列举Java和JavaScript之间的区别? Java是一门十分完整.成熟的编程语言.相比之下,JavaScript是一个可以被引入HTML页面的编程语言

下拉列表多选(js,JQuery,ajax)

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery MultiSelect Widget Demo</title> <link rel="stylesheet&quo

html+css+js(+JQuery)制作扑克牌图片切换效果

要实现的效果图: 先把静态页面写出来: index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery制作扑克牌图片切换效果<

一个基于html,css,js,JQuery的登录界面

github地址:https://github.com/BgirlStar/myTest_final 任务需求: 可进行部分改变,但颜色和风格要保持不变. 完成点:1.login按钮的隐藏与弹出 2.弹出框样式(三角,阴影,圆角) 3.输入框图片和默认字符 4.背景按钮渐变 5.js内置用户名密码,点击登录后弹出对话框 完成后图片: 加入jquery插件 实现了弹出框的隐藏与弹出,代码见js/index.js js/jquery.js 内置email和密码 代码见js/need.js 素材包见j

.net jquery ajax应用(前端)

//一般处理程序,GET方式提交(data:要传送的数据键值对)                  jQuery.ajax(                                                { type: 'GET',                                                    url: 'GradeHandler.ashx?startCount&starDescri',                           

NodeJ node.js Jquery Ajax 跨域请求

Jquery + Ajax 跨域请求 说白了就是前台请求ajax数据(JSON)但是请求的数据不在本地的绝对路径下,接口数据 是没有这个安全性的我对外公开的接口数据,只要你找到接口你就可以使用里面的数据 ,但是在浏览器端他做了一套机制就是 不让你随意的访问别人服务器的外来接口,如果是好的数据的化  你可以学习使用,如果是一些恶意数据,对服务器对个人来说都是没有安全性的,目前明白一点就是 阻止跨域请求就是 浏览器的原因,也算是ajax的原因,所以这个前台你是无能为力的. 解决办法: 服务器端进行权

jQuery.form.js jQuery ajax异步提交form

jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 官网下载地址:http://plugins.jquery.com/form/ API ajaxForm 增加所有需要的事件监听器,为ajax提交表单做准备.ajaxForm并不能提交表单.在document的ready函数中,使用ajaxForm来为ajax提交表单进行准备. 接受0个或1个参数.参数可以是一个回调函数,也可以是一个Options对象. $("#formid").ajaxForm(

分别用html+css,js,jquery实现二级下拉列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

gVIM+zencoding快速开发HTML/CSS/JS(适用WEB前端)

一.真正解决了UTF-8中文乱码的各种问题(菜单乱码,内容乱码,提示信息乱码),不用担心WIN用默认编码写的东西在Linux乱码,或在Linux(zh_CN.UTF-8时)写的东西在WIN下乱码.在Arch.CentOS 6.2.win 7 SP1,使用GVIM 7.3.46测试通过,无问题. 二.添加了zenconding,配色方案包,JS,自动补全插件,使前端开发更快速. 三.使用时将vimfiles._vimrc覆盖至安装目录即可. 四.参考了论坛里一些网友的设置,并附上其教程,表示感谢.