一、HTML
1.编写html文件
<!Doctype html> doctype对应关系 <html></html> 标签内可以写属性 ===> 只能有一个 <head></head>和<body></body><!-- 注释内容 --> 注释
2.标签分类
- 自闭合标签 <meta charset="UTF-8"> - 主动闭合标签 <title>我的HTML页面</title>
3.<head>标签中
- <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;" /> <title>标签 <link /> <link rel="stylesheet" href="commons.css" /> <link rel="shortcut icon" href="commons.ico" /> <style> <script> a.<script src=‘commons.js‘></script> b.<script> JavaScript代码 </script>
4.body标签
- 图标： 、> 、< - <p>段落 - <br />换行 - <div> - <span> - H系列 =======小节======== - 块级标签：<div>（白板），H系列（加大加粗），p标签（段落和段落之间有间距） - 行内标签：<span>（白板） ================== - 表单 <form action="提交的地址" method="提交方式"(get/post)> </form> - form标签 <form action=‘http://dddddd‘ methed=‘GET‘> <... <input type=‘submit‘> </form> GET：http://dddddd?q=值&b=值 POST：放在报表里面传输 - input系列：type , value <input type=‘text‘ name="后端识别" value=‘默认值‘ <input type=‘password‘ name="后端识别" value=‘默认值‘ <input type=‘submit‘ value="显示的文字"（提交表单按钮） <input type=‘button‘ value="显示的文字"（按钮） <input type=‘radio‘ name=‘识别‘ checked="checked" value=‘1‘（互斥选项，name相同就能选,选中哪个就得到哪个value） <input type=‘checkbox‘ name=‘识别‘ checked="checked" value=‘1‘（name相同就能选,选中哪个就得到哪几个value） <input type=‘file‘ -依赖一个form属性：enctype="multipart/form-data" <input type=‘reset‘ value="值" 重置当前页面所有按钮 - 其他控件 <textarea name="后端识别">(默认值)</textarea> 多行输入 <select name="后端识别" > size="2":（默认几列） multiple="multiple"（多选） <option value="1">1<option> <option value="2" >...<option> selected="selected"（默认选项中） </select>
分组：<optgroup label="分组名称"></optgroup> -<a>标签 -跳转 <a href="www.baidu.com">百度</a> target="_blank"：新建一个页面 -锚 <a href="#某个标签的id">跳转</a> id不能重复 -<img>标签 <img src="路径" title="鼠标悬停显示的描述" alt="路径找不到显示的文字"> -列表类 <ul> <li> <ol> <li> <dl> <dt> <dd>
- 表格 <table> <thead> <tr> <th> <tbody> <tr> <td> colspan = ‘‘ rowspan = ‘‘
- label标签 用于点击文字，使得关联的控件获得光标 <label for="username">用户名：</label> <input id="username" type="text" name="user" />
- 分组框 <fieldset> <legend>分组标题</legend> 内容。。。。。。 </fiedset>
二、CSS样式
1.标签的style属性。
2.写在head里面，style标签中编写样式。
- id选择器 #i1{ background-color:#2459a2; height:48px; } - class选择器 .名称{ 样式。。。 } <标签 class="名称"></标签> - 标签选择器 标签{ 样式。。。 } 把html中所有此标签设置成此样式 - 层级选择器（空格） .c1 .c2 div{ 样式。。。 } 哪一层以下的标签才适用此样式 - 组合选择器（逗号） .c1,.c2,div{ 样式。。。 } - 属性选择器 对选择到的标签再通过属性进行一次筛选 input[type=‘text‘]{ width:100px;height:200px; } .c1[n=‘alex‘]{ width:100px;height:200px; }
3.注释
/* .... */
4.边框
-宽度，样式，颜色 {border:4px dotted red;} -border-left ( bottom,top,right ) -border-radius：50% 圆，加圆角
5.
height ===>高度、百分比
width ===>宽度、像素、百分比
color ===>字体颜色
font-size ===>字体大小
font-weight ===>字体加粗
text-align:center ===>水平分享居中
6.float
让标签浪起来，块级标签也可以堆叠
<div style="both:clear"></div>
7.display:
8.
padding ===> 自身发生变化
margin:0 auto; ===> 外边距
line-height ===> 块上下居中(直方向根据标签高度)
9.position:(top,bottom,left,right)
a.fixed ===> 固定在页面的某个位置
b.relative + absolute 固定在块内的某个位置
<div style="position:relative">
<div style="position:absolute;top:0;left:0"></div>
</div>
c.absolute 第一次定位，可以在指定位置，滚轮滚动时就不在了
10.
opacity:0.5; ===> 透明度
z-index: ===> 层级顺序
overflow:hidden,auto ===> 内容超过出现滚动条
hover ===> 鼠标悬停事件
background-image:url(‘PATH‘); 默认，div大，图片重复
background-repeat:repeat-y:none
background-position-x:
background-position-y:
三、JavaScript
独立的语言，浏览器具有js解释器
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)
HTML、CSS、JS、JQ速查手册：https://www.w3cschool.cn/html/dict/
CSS3查找手册：http://css.cuishifeng.cn/
JQuery查找手册：http://jquery.cuishifeng.cn/
原文：https://www.cnblogs.com/StringSir/p/10462165.html