h5 +css +js +jq 基础知识总结

l软件架构

1，C/S   client/server  客户端/服务器

    本地需要安装一个客户端，远程需要一个服务器端

    如：电脑上安装软件，QQ，迅雷

    安装、部署、开发比较麻烦

    用户体验好点

2，B/S   browser/server  浏览器/服务器

    用户只需要安装浏览器，然后输入不同的网址，访问不同的服务器

    如:淘宝网、京东、百度...

    安装、部署、开发比较简单

    缺点：对于服务器的硬件要求比较高，用户量大的时候，体验差

    

BS架构

资源划分

静态资源：

    特点，所有的用户访问看到的内容都是一样的‘

    分类：文本、图片、视频、HTML、CSS、JS...

动态资源：

    用户访问的时候，得到的内容可能不一样

    

    如果用户访问的时候，访问的是动态资源的话，服务器先把动态资源转换成静态资源，在发送给浏览器

    

    

静态资源  

HTML：搭建基础网页的，展示网页的内容

CSS：用户美化页面，布局页面的

JavaScript：控制页面的元素，让页面和用户产生交互

HTML

概念：Hyper Text  Markup Language：超文本标记语言

    超文本：使用超链接的方式，把不同空间的文字信息组织在一起的一种网状文本

    标记语言：标签构成的语言

    标签格式:

    

 

    

    

    

HTML入门

1，  声明文档为html类型   lang=en /zh-CN 定义页面为英文或者中文,不区分大小写

2，  ：页面根元素

3， ：一般包含一些页面元数据

        如：  设置编码环境

                 定义页面的作者

                 每30秒刷新页面

                 .menu{ cursor: pointer; } function dian(thisa){ nextnode = thisa.nextElementSibling; //获取下一个节点信息 if(nextnode.style.display == 'none'){ nextnode.style.display = 'block'; }else{ nextnode.style.display = 'none'; } } 导航一 菜单1 
菜单2 
菜单3 
菜单4 
菜单5 
导航一 菜单6 
菜单7 
菜单8 
菜单9 
菜单10 
导航一 菜单11 
菜单12 
菜单13 
菜单14 
菜单15 

    

事件

    指的是在浏览器窗体中或HTML元素上发生的，可以触发JS代码的块运行的行为

窗口事件 ：用户与页面其他元素交互时发生的事件，如，页面加载、窗口大小改变、滚动页面..

    load事件

        页面完全加载完以后，window触发load事件，

        如     window.onload =  function(){   }

        

window.onload = function(){ var mydiv = document.getElementById('mydiv'); alert('页面加载完，mydiv内容是:'+mydiv.innerHTML); } 这是一个文本内容

        

    resize事件  

        将浏览器窗口调整到一个新的高度或者宽度的时候，可以触发resize事件

html,body{   /*设置宽高，js中才能获取到值*/ height: 100%; width: 100%; } function winresize(){ winWidth = document.body.clientWidth; //获取body宽度 winHeight = document.body.clientHeight; //获取body高度 alert('窗口发生改变,宽为:'+winWidth+',高为:'+winHeight); }

        

    scroll事件:文或者浏览器窗口被滚动期间，会触发scroll事件

html,body{ width: 100%; height: 100%; } function winScroll(){ text = document.getElementById('text'); //获取滚动距离，并且把距离写入文档中 text.innerText = '滚动条滚动到了'+ document.documentElement.scrollTop+'px'; text.style.top = document.documentElement.scrollTop + 'px'; }

滚动条滚动到了0px

焦点事件 ：指的是页面元素对焦点的获得与失去

    如，文本框，点击文本框可以在文本框中输入文字，其实就是文本框获得了焦点

    focus   获取焦点触发

    blur      失去焦点触发

var note; function myfocus(notename){  //获取焦点的函数 note = document.getElementById(notename); note.innerText = "获取焦点，开始输入"; } function myblur(notename){   //失去焦点的函数 note = document.getElementById(notename); note.innerText = "失去焦点，开始判断"; }

鼠标事件

    主要是鼠标操作所触发的事件 ，单击、双击、单击按下、单击抬起、鼠标滑过

    鼠标的单击事件  click

        示例，通过鼠标单击确定鼠标点击的位置

        clientX    clientY    获取坐标位置

html,body{ width: 100%; height: 100%; } function dian(e){ dianX = e.clientX;   //获取点击坐标横向 dianY = e.clientY;  //获取点击坐标纵向 alert('x:'+dianX+',y:'+dianY); }

鼠标的悬停和离开

mouseover    鼠标悬停

mouseout     鼠标离开

function showmenu(e){ e.style.height = 180+'px'; } function hidemenu(e){ e.style.height = 30+'px'; }

      

下拉菜单

菜单1

菜单2

菜单3

菜单4

菜单5

鼠标拖拽

mousedown   鼠标按下

mouseup    鼠标抬起

mousemover 鼠标移动

html,body{ width: 100%; height: 100%; } #dd{ width: 120px; height: 120px; background: blue; position: absolute; } var dd;   //获取盒子的节点信息 var flag = false; function ondown(){  //鼠标按下以后，才能移动，获取移动节点信息 dd = document.getElementById('dd'); flag = true; } function onmove(e){  //移动的时候执行的函数 if(flag){ dd.style.left = e.clientX-60+'px'; dd.style.top = e.clientY-60+'px'; } } function onup(){ flag = false; }

键盘事件：有关键盘操作触发的事件，按下键盘，键盘抬起...

keydown  ：当用户按下键盘上的任意键时触发，按住不放，重复触发

keypress：当用户按下键盘上的字符键时触发，按住不放，重复触发

keyup   :用户释放键盘按键触发

keycode   键盘对应的编码值

    

html,body{ height: 100%; width: 100%; } var tank = {}; var movestate,attchstate; window.onload = function(){ tank['37'] = '左移'; tank['38'] = '上移'; tank['39'] = '右移'; tank['40'] = '下移'; tank['32'] = '开火'; movestate = document.getElementById('movestate'); attchstate = document.getElementById('attchstate'); } function keydown(e){  //键盘按下的函数 keycode = e.keyCode;  //获取按键的编码 if(keycode !=32&&tank[keycode]){ movestate.innerHTML = tank[keycode]; //获取keycode值对应的移动效果 } if(keycode == 32){ attchstate.innerHTML = tank[keycode]; } } function keyup(e){  //键盘抬起 keycode = e.keyCode;  //获取按键的编码 if(keycode !=32&&tank[keycode]){ movestate.innerHTML = '静止'; //把节点内容恢复为静止 } if(keycode == 32){ attchstate.innerHTML = ''; } } 坦克运行的状态: 静止  
坦克攻击的状态:

    

JQuery

JQuery基础

    JQuery是JavaScript的函数库，包含以下功能 ：HTML元素的选取、HTML元素的操作、CSS操作、HTML事件函数、JS的特效动画、HTML中DOM遍历修改、AJAX。。。

    优势：

            轻量级

            强大的选择器

            出色的DOM封装

            可靠的事件处理机制

            完善的AJAX

            丰富的插件、开源、完善的文档

        JQuery的安装、引入

//$(document).ready(function(){//jquery 代码引入语句 // alert('hello,jquery!!!') //}) //简写方式 $(function(){ alert('hello,jquery!!!'); })

    JQuery入口函数和JS入口函数的区别:

    Jquery的入口函数是再HTML所有标签(DOM)都加载完之后执行

    JavaScript的window.onload是HTML所有内容加载完（包括外部的图片）,才会执行

    

    JQuery语法：

        通过选取HTML元素，并对选取的元素执行操作

        基本语法:

            $(选择器).操作()

            $ :用来定义JQuery

            选择器是用来查询查找HTML元素的

            操作是指对选中的元素执行的操作

            如 :  

                $(this).hide();  把当前的元素隐藏

                $("p").hide()    把所有的p元素隐藏

            

    JQuery选择器

        语法：  $("选择器")

        如：  $("#id值")   == document.getElementById()

         $(" ")  可以看作是一个函数，$是函数名称，后面括的内容其实是函数的参数 传递

        选择器的分类

        1，id选择器   ：通过HTML元素中的id值来选取指定元素

            语法 ： $("#id值")   

div{ width: 100px; height: 100px; background-color: blue; float: left; margin: 5px; padding: ; }

id = test0

js选中