HTML、CSS、JS、JQ速查笔记

转载 于 2019-05-20 23:35:00 发布 · 287 阅读 · 2 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/StringSir/p/10462165.html
文章标签：

#javascript #后端 #人工智能 #ViewUI

  一、HTML 

1.编写html文件

a.格式

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
</head>
<body>
　　<!-- 内容 -->
</body>
</html>

b.注释

<!-- 注释内容 -->

2.标签分类

a.自闭合标签

<meta charset="UTF-8">

b.主动闭合标签　

<title>我的HTML页面</title>

3.标签<head>

a.标题<title>
b.内联样式<style>
c.引入资源<link>

<link rel="stylesheet" href="commons.css" />
<link rel="shortcut icon" href="commons.ico" />

d.引入js文件<script>

<script src='commons.js'></script>
<script> /*JavaScript代码*/ </script>

e.页面信息<meta>

编码：<meta http-equiv="content-type" content="text/html;charset=utf-8">
刷新和跳转：<meta http-equiv="Refresh" Content="10">
　　　　　　<meta http-equiv="Refresh" Content="5;Url=baidu.com"/>
关键字：<meta name="keywords" content="关键字1;关键字2;关键字3">
描述：<meta name="description" content="页面描述........">
IE兼任：(先兼任IE8，再考虑IE7):<meta http-equiv="X-UA-Compatible" content="IE=IE8;IE=IE7;" />4.body标签

a.基本分类(依据：是否独占一行)

- 块级标签：<div>
- 行内标签：<span>

b.段落标签

- H系列标签
- <p>两段落间有间距
- <br/>换行
- <hr/>水平线

c.超链接<a>

  • 页面跳转 　　<a href="www.baidu.com">百度</a> 当前页面跳转 　　<a href="www.baidu.com" target="_blank">百度</a> 新建一个页面跳转
  • 锚(位置跳转) 　　<a href="#某个标签的id">跳转</a>

d.图片标签<img>

<img src="URL" title="描述" alt="替换文本">

e.特殊符号：

- &nbsp;(space)
- &gt;(<) 
- &lt;(>)
- &amp;(&)

f.表格标签

<table>
　　<thead>
　　　　<tr>
　　　　　　<th>
　　<tbody>
　　　　<tr>
　　　　　　<td>

　　colspan = '2' 横向合并单元格
　　rowspan = '2' 纵向合并单元格
g.列表标签

  • 无序列表 　　　

　　　　<ul>

　　　　　　<li>

  • 有序列表 　　

　　　　<ol> 　　　　

　　　　　　<li>

  PS：默认：数字列表
  type="A"大写字母、type="a"小写字母
　type="I"罗马数字、type="i"小写罗马数字
  • 自定义列表 　　

　　　　<dl> 　　　　

　　　　　　<dt> 　　　　　　

　　　　　　<dd> 

h.框架标签(同一个窗口显示不止一个页面)

<iframe src="URL" width="200" height="200" frameborder="0"></iframe>

i.表单

  • 格式: 

　　　　<form action='提交的地址' methed='提交方式(GET/POST)'>

　　　　　　<!-- 表单 -->

　　　　　　<input type='submit'>

　　　　</form>

　　GET：http://dddddd?q=值&b=值
　　POST：放在报表里面传输

  • input系列

　　　　文本框：type='text'

　　　　密码框：type='password'

　　　　　　<input type='text' name="后端" value='默认值'>

　　　　提交按钮：type='submit'

　　　　普通按钮：type='button'

　　　　　　<input type='submit' value="显示">

　　　　单选按钮：type='radio'(互斥选项，name相同,得到选中的value)

　　　　复选按钮：type='checkbox'(name相同,得到选中的个value)

　　　　　　<input name='识别' checked="checked" value='1'>

　　　　文件上传按钮(依赖form属性：enctype="multipart/form-data")

　　　　　　<input type='file' value="显示">

　　　　重置按钮(重置当前页面所有按钮)

　　　　　　<input type='reset' value="值">

  • 其他控件

　　　　多行输入框：

　　　　　　<textarea name="后端">(默认值)</textarea>

　　　　下拉选择框：

　　　　　　<select name="后端" >

　　　　　　　　<option value="1">1</option>

　　　　　　　　<option value="2" selected="selected">2</option>

　　　　　　　　<option value="3">3</option>

　　　　　　</select>

　　　　下拉框分组：

　　　　　　<optgroup label="分组名称"></optgroup>

属性： size="2" 默认列数 multiple="multiple" 是否多选

  • label标签(点击文字关联的控件获得光标 )
　　　　<label for="username">用户名：</label> 
　　　　<input id="username" type="text" name="user" />
  • 控件分组框 <fieldset>

　　　　<legend>分组标题</legend>

　　　　　　<!-- 内容 -->

　　　　</fiedset>

 

  二、CSS样式 

1.结构

选择器：{
　　属性1:值;
　　属性1:值
}
/* 注释.... */

2.选择器

<标签 class="mcls" id="mid"></标签>

a.id选择器:

#mid{
　　样式。。。
}

b.class选择器

.mcls{
　　样式。。。
}

c.标签选择器

标签{
　　样式。。。
}

d.属性选择器（已选标签再通过属性二次筛选）

input[type='text']{ width:100px;height:200px; }
.c1[n='alex']{ width:100px;height:200px; }

e.组合选择器（多个属性设置同样的样式）

.c1,.c2,div{
　　样式。。。
}

f.层级选择器（层以下的标签选择样式）

.c1 .c2 div{
　　样式。。。
}

g.后代选择器(space),子元素选择器(>）,相邻兄弟选择器（+）,普通兄弟选择器（~）

3.伪类/元素选择器

a.链接标签

  • a:link {color:#000000;} /* 未访问链接*/
  • a:visited {color:#00FF00;} /* 已访问链接 */
  • a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
  • a:active {color:#0000FF;} /* 鼠标点击时 */

b.常用选择器

  • :active 选择正在活动链接
  • :hover 把鼠标放在链接上的状态
  • :checked 选择所有选中的表单元素
  • :disabled 选择所有禁用的表单元素
  • :before 在每个<p>元素之前插入内容
  • :after 在每个<p>元素之后插入内容

4.文字文本

a.文本格式

- 颜色：color
- 行高：line-height
- 对齐方式：text-align(right,center,left,justify(展开行末尾无空格))
- 删除修饰：text-decoration:none;(主要用于删除链接的下划线)

b.字体

- 字体：font-family:"宋体", "微软雅黑","华文新魏";
- 斜体：font-style(normal,italic,oblique)
- 加粗：font-weight:900;(normal,lighter,bold)
- 大小：font-size:40px;(16px=1em)

5.背景样式

a.

背景颜色：background-color:red;
背景图片：background-image:url('URL');
不重复图片：background-repeat:none;(no-repeat,repeat-x,repeat-y)
起始位置：background-position:right top;
单独设置：background-position-x/y
简写属性：background:#ffffff url('img_tree.png') no-repeat right top;

b.透明度和层

透明度：opacity:0.5; 
层级顺序：z-index

6.表格样式

a.折叠边框：border-collapse: collapse;
b.文字上下对齐：vertical-align:bottom;
c.隐藏表格：visibility: collapse;

7.盒子模型

a.高度：height(像素、百分比)
b.宽度：width(像素、百分比)
c.最大最小高宽：max,min
d.外边距：margin
e.内边距：padding
f.边框：
边框属性：border-top-color:red;[top,bottom,left,right][style,width,color]
(solid,dotted,dashed,double,groove,ridge,inset,outset)
简写属性：border:5px solid red;
圆角：border-radius:50%;圆

8.内联块属性

display:inline;(none,inline,block,inline-block)

 

9.页面布局

a.position:(top,bottom,left,right)
　　- 流水定位:static(默认定位)
　　- 固定定位：fixed(固定在页面的某个位置)
　　- 相对定位：relative + absolute(先对于块的某个位置)
　　- 绝对定位：absolute(第一次定位，可以在指定位置，滚轮滚动时就不在了)
　　- 粘性定位：sticky,-webkit-sticky(Safari)(top:0)(滚动后黏在顶部)
b.Overflow(hidden,scroll,auto,visible内容溢出)
c.float+overflow:hidden
　　clear(left,right)
　　<div style="clear:both"></div>

10.页面对齐

a.水平居中：margin: auto;需置宽度
b.左右对齐
　　- position: absolute;
　　- float:left,right;(防溢出：verflow: auto;)
c.垂直居中
　　- line-height 属性值和 height 属性值相等
　　- 相对定位 + top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);

 

  三、JavaScript 

1.JavaScript代码需要放置在<body>标签内部的最下方
2.注释：

单行注释： // 
多行注释： /* */

3.变量：

name = 'alex' ===> 全局变量
var name = 'alex' ===> 局部变量

4.基本数据类型

数字
　　a = 18
字符串
　　a = 'sjl'
　　a.chartAt(索引位置)
　　a.substring(起始位置，结束位置)
　　a.lenght 获取当前字符串长度
　　...
数组
　　a = [11,22,33,44]
字典
　　a = {'k1':'v1','k2':'v2'}
布尔类型
　　true、flase

5.for循环

1.循环时，循环的元素是索引    
    a =[11,22,33,44]
    for(var item in a){
        console.log(a[item]);
    }

    a ={'k1':'v1','k2':'v2'}
    for(var item in a){
    console.log(a[item]);
    }

2.    
    for(var i=0;i<a.lenght){
        ...
    }

6.判断

&& || 
== != 不严格比较（不比较数据类型）
=== !== 严格比较

if(条件){
　　...
}
else if(条件){
　　...
}
else{
　　...
}

var v = 条件 ? 真值 : 假值

switch(c){
　　case 1:
　　　　...
　　case 2:
　　　　...
　　case 3:
　　　　...
　　default:
　　　　...
}

7.函数

a.普通函数：
　　function func(){
　　　　console.log(666);
　　}

b.匿名函数：
　　setInterval(function(){
　　　　console.log(666);
　　},5000)

c.自执行函数（创建函数并且自动执行）
　　(function(arg){
　　　　console.log(arg);
　　})(666)

8.JavaScript库函数

1.序列化
    JSON.stringify(obj) 序列化
    JSON.parse(str) 反序列化

2.转义
    decodeURI( ) URl中未转义的字符
    encodeURI() URI中的转义字符
    decodeURIComponent() URI组件中的未转义字符
    encodeURIComponent() 转义URI组件中的字符
    escape() 对字符串转义
    unescape() 给转义字符串解码

3.eval
    eval("1+1") 表达式/代码都可以执行

4.时间
    Date类
    var d = new Date();
    d.getXXX 获取
    d.setXXX 设置

9.正则表达式

test - 判断字符串是否符合规定的正则
exec - 获取匹配的数据

/.../ 用于定义正则表达式
/.../g 表示全局匹配
/.../i 表示不区分大小写
/.../m 表示多行匹配

示例：
　　rep = /\d+/;
　　rep.text("sdkjahcuisan44454")

　　rep = /\d+/g; //全局匹配，后面加个g，匹配一个拿一个
　　rep.exec("sdkja66hcuisan44454")
　　rep.exec("sdkja66hcuisan44454")

10.作用域

a.JavaScript以函数为作用域
　　示例1：
　　　　function func(){
　　　　　　if(1==1){
　　　　　　var name = 'sjl';
　　　　}
　　　　console.log(name);
　　　　}
　　　　func();
//输出:sjl

b.函数的作用域在函数未被调用之前，已经创建

c.函数的作用域存在作用域链，而且也是在被调用前创建
　　实例2：
　　　　xo = "sjl";
　　　　function func(){
　　　　　　var xo = "lyy";
　　　　　　function inner(){
　　　　　　　　var xo = "lsm";
　　　　　　　　console.log(xo);
　　　　　　}
　　　　　　inner();
　　　　}
　　　　func();
//输出:lsm

　　示例3：
　　　　xo = "sjl";
　　　　function func(){
　　　　　　var xo = "lyy";
　　　　　　function inner(){
　　　　　　console.log(xo);
　　　　　　}
　　　　　　return inner;
　　　　}
　　　　var ret = func();
　　　　ret();
//输出:lyy

　　示例4：
　　　　xo = "sjl";
　　　　function func(){
　　　　　　var xo = "lyy";
　　　　　　function inner(){
　　　　　　　　console.log(xo);
　　　　　　}
　　　　　　var xo = "yp";
　　　　　　return inner;
　　　　}
　　　　var ret = func();
　　　　ret();
//输出:yp
　　==================================================
　　|| 全局　　　　　　|| func 　　　　 || inner 　　　　 ||
　　|| xo = sjl 　　 || xo = yp 　　  || : 　　　　　　||
　　|| 　　　　　　　　|| 　　　　　　　 || 　　　　　　　　||
　　==================================================
//func函数执行的时候xo就已经替换成"yp"了，所以执行inner函数往上一个函数链找得到的xo=yp

d.函数内局部变量在创建时就已经声明
　　示例5：
　　　　function func(){
　　　　　　console.log(xxoo);
　　　　}
　　　　func()
//程序直接报错

　　示例6：
　　　　function func(){
　　　　　　console.log(xxoo);
　　　　　　var xxoo = "sjl";
　　　　}
　　　　func();
//输出:undefined（变量声明了，但是在执行的时候才赋值）

11.JavaScript面向对象

a.this代指对象
b.创建对象时，new函数
    function foo(){
        var xo = "sjl";
    }    

    function Foo(n){
        this.name = n;
    }

    function Fooo(n){
        this.name = n;
        this.logName = function(){
            console.log(this.name);
        }
    }

    foo();
    var obj1 = new Foo("I");
    var obj2 = new Foo("WE");

c.原型：
    function Foo(n){
        this.name = n;
    }

    //Foo的原型,无论实例多少个对象，在内存里只会生成一个函数
    Foo.prototype = {
        'sayName': function(){
            console.log(this.name);
        }
    }
    obj1 = new Foo("we");
    obj1.sayName();

    obj2 = new Foo("wee");

12.JavaScrip的AO
　　active object ===>> AO
　　1.形式参数
　　2.局部变量
　　3.函数声明表达式

//示例：
    function t1(age){
        console.log(age);
        var age = 27;
        console.log(age);
        function age(){}
        console.log(age);
    }
    //输出：function 27 27


   四、DOM
1.查找标签

a.直接找
　　document.getElementById //根据ID获取一个标签
　　document.getElementsByName //根据name属性获取标签集合
　　document.getElementsByClassName //根据class属性获取标签集合
　　document.getElementsByTagName //根据标签名获取标签集合

b.间接找
　　parentNode      // 父节点
　　childNodes      // 所有子节点
　　firstChild      // 第一个子节点
　　lastChild       // 最后一个子节点
　　nextSibling     // 下一个兄弟节点
　　previousSibling // 上一个兄弟节点

　　parentElement          // 父节点标签元素
　　children               // 所有子标签
　　firstElementChild      // 第一个子标签元素
　　lastElementChild       // 最后一个子标签元素
　　nextElementtSibling    // 下一个兄弟标签元素
　　previousElementSibling // 上一个兄弟标签元素


2.操作标签

标签.innerText = "" // 仅文本，忽略标签 标签当字符串赋值进去
标签.innerHTML = "" // 全部内容 可以赋值标签

value       // 获取和赋值(input系列,textarea)
selectIndex // select标签特有的(select)


3.样式操作

className             // 获取所有类名 添加class
classList             // 获取所有类
classList.remove(cls) // 删除指定类
classList.add(cls)    // 添加类

标签.style.color           //操作单个样式
标签.style.backgroundColor //操作单个样式


4.属性操作

attributes              // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key)       // 获取指定标签属性
removeAttribute(key)    // 移除指定标签属性


5.标签操作

a.方式一
    var obj = "<input type='text' />";
    node.insertAdjacentHTML("beforeEnd",obj);
    node.insertAdjacentElement('afterBegin',document.createElement('p')) //外面套一个<p>标签
    //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

b.方式二
    var tag = document.createElement('a')
    node.appendChild(tag) //放入<a>标签里面
    document.getElementById("i1").appendChild(tag);


6.提交表单

//任何标签通过DOM提交表单
document.getElementById("form_id").submit();


7.其他操作

console.log // 控制台输出
alert       // 弹出框
confirm     // 确认框

location.href         // 获取URL
location.href = "url" // 重定向
location.reload()     // 重新加载

setInterval   // 多次定时器
clearInterval // 清除多次定时器
setTimeout    // 单次定时器
clearTimeout  // 清除单次定时器

8.事件

绑定事件的方式：
a.直接标签绑定 onclick="func()" onfocus
b.先获取Dom对象，然后进行绑定
　　document.getElementById("id").onclick
　　document.getElementById("id").onfocus
c.
　　document.getElementById("id").addEventListener("click",function(){console.log("666");},flase);
　　flase为冒泡
　　true为捕捉

this当前触发事件的标签
a.第一种绑定方式
　　<input id="i1" type="button" onclick="Clicked(this)">

　　function Clicked(self){
　　　　// self为当前点击的标签
　　}

b.第二种方法
　　<input id="i1" type="button">
　　document.getElementById("i1").onclick = function{
　　　　//this为当前标签
　　}

 

  五、JQuery
1.基本信息

a.
　　DOM/BOM/JavaScript的类库
b.转换
　　jquery对象[0] => Dom对象
　　Dom对象 => $(Dom对象)

2.选择器，直接找到某个或者某类标签

1.id
　　$('#id')

2.class
　　$('.cl')

3.标签<a></a>
　　$('a')

4.组合
　　$('a,.cl,#id')

5.层级
　　$('#id a') //子子孙孙
　　$('#id>a') //儿子

6.基本
　　:first
　　:last
　　:eq()

7.属性
　　$('[sjl]')
　　$("[sjl='123']")

　　$("input[type='text']")
　　$("input[type='text'][value='ok']")
　　$(':text')

9.事件和其他
　　$('input').click(function(){ ... })

　　$('input').each(function(k){ ... }) //循环每个元素,k为索引

3.筛选器

$(this).eq(1)           //索引
$(this).first()         //第一个
$(this).last()          //最后一个
$(this).hasClass(class) //是否具有某个class

$(this).next()      //下一个
$(this).nextAll()   //下面所有的
$(this).nextUntil() //下一个直到..

$(this).prev()      //上一个
$(this).prevAll()   //上面所有的
$(this).prevUntil() //上一个直到..

$(this).parent()      //父标签
$(this).parents()     //所有的父标签
$(this).parentUntil() //所有的父标签

$(this).children() //孩子标签
$(this).siblings() //兄弟标签

$(this).find('.content') //找到某个标签

4.文本操作

$('#id').text() //获取文本内容
$('#id').html() //获取包括标签和内容

$('#id').text('666')        //修改文本内容
$('#id').html('<a>666</a>') //解析标签

$('#id').val()      //获取input文本
$('#id').val('666') //修改input文本

5.样式操作

$('#id').removeClass()     //移除class
$('#id').addClass()        //添加class
$('#id').toggleClass('cl') //有cl就去掉，没有cl就加上

6.属性操作

- 一般用于自定义属性
　　$('#id').attr('type')        //获取type的值
　　$('#id').attr('name','sjl')  //设置type的值    
　　$('#id').removeAttr('value') //删除某个属性 

- 专门用于checkbox，radio
　　:enabled
　　:disabled
　　:checked
　　:selected

　　$('input').prop('enabled')      //得到某个属性
　　$('input').prop('enabled',true) //设置input属性

PS：$('#id').index() //索引位置

7.文档处理

$('#id').append()  //添加到标签内后
$('#id').prepend() //添加到标签内前
$('#id').after()   //添加到标签外后
$('#id').before()  //添加到标签外前

$('#id').remove() //移除标签和内容
$('#id').empty()  //移除包括标签和内容

$('#id').clone()  //复制包括标签和内容

8.css处理

$('#id').css('样式名称','样式值')

9.位置

$(window).scrollTop()   //获取位置
$(window).scrollTop(12) //设置位置
$(window).scrollLeft([val]) 

$('#id').offset().top  //指定标签在html中的坐标
$('#id').offset().left //指定标签在html中的坐标

$('#id').position()    //指定标签相对父标签(relative)中的坐标

$('#id').height([val|fn])
$('#id').innerHeight()
$('#id').outerHeight([options])

$('#id').width([val|fn])
$('#id').innerWidth()
$('#id').outerWidth([options])

10.事件

$('#id').click();
         blur([[data],fn])
         change([[data],fn])
         click([[data],fn])
         dblclick([[data],fn])
         error([[data],fn])1.8-
         focus([[data],fn])
         focusin([data],fn)
         focusout([data],fn)
         keydown([[data],fn])
         keypress([[data],fn])
         keyup([[data],fn])
         mousedown([[data],fn])
         mouseenter([[data],fn])
         mouseleave([[data],fn])
         mousemove([[data],fn])
         mouseout([[data],fn])
         mouseover([[data],fn])
         mouseup([[data],fn])
         resize([[data],fn])
         scroll([[data],fn])
         select([[data],fn])
         submit([[data],fn])

//委托，点的时候才绑定事件    
$('#id').delegate("a","click",function(){...}) 
        .undelegate

//阻止其他事件
$('#id').click(function(){
　　...
　　return false;
});

//当页面框架加载完毕后，自动执行(绑定事件和默认执行的操作)
$(function(){
　　...
})

11.扩展JQuery

示例一：
　　$.fn.extend({
　　　　"wefun1":function(){
　　　　　　return "666";
　　　　}
　　});
　　var v = $('#id').wefun1();

示例二：
　　$.extend({
　　　　"wefun2":function(){
　　　　　　return "666";
　　　　}
　　});
　　var v = $.wefun2();

　　- $.extend //$.方法
　　- $.fn.extend //$(..).方法

　　(function(){
　　　　var status = 1;
　　　　//封装变量
　　})(jquery)

 

w3cschool速查：https://www.w3cschool.cn/html/dict/

CSS3查找手册：http://css.cuishifeng.cn/

JQuery查找手册：http://jquery.cuishifeng.cn/

转载于:https://www.cnblogs.com/StringSir/p/10462165.html

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值