1、web1.0时代的网页制作：静态网页 网页三剑客 Dreamweaver+Fireworks+Flash”吧，这个组合就是web1.0时代的产物。
2、web2.0时代的前端开发，动态网页
动态页面，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。
3、HTML标签 在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<p>`都是标签。
4、html结构介绍
首先，<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。 <html></html> 称为根标签，所有的网页标签都在<html></html>中。 <head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签，头部标签在下一节中会有详细介绍。 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容（图中淡绿色部分内容）最终会在浏览器中显示出来。 HTML文档包含了HTML标签及文本内容，不同的标签在浏览器上会显示出不同的效果，所以我们需要记住最常见的标签的特性。
5、
javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码。 例如：<a href="javascript:alert()">内容</a> javascript:;表示什么都不执行，这样点击<a>时就没有任何反应 例如：<a href="javascrip:;">内容</a
6、列表标签 ul，ol 。通常后面跟<li>标签一起用，每条li表示列表的内容
总结： 1.块级元素 特点：独占一行，可设宽高，如果不设宽度，则是浏览器的宽度 (div p h ul ol li ) 2.行内元素 特点：在一行内展示，不能设置宽高，它的宽高时根据内容去填充 (a span )
3.行内块元素 特点：在一行内展示，可设宽高 （img）
7、标签分类
2.标签分类： HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。 常用的块状元素： <div> <p> <h1>~<h6> <ol> <ul> <table><form> <li> 常用的行内元素 <a> <span> <br> <i> <em> <strong> <label> 常用的行内块状元素： <img> <input>
8、CSS是指层叠样式表---HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。
9、引入css三种方式
1、内嵌式--不方便维护，不建议使用 <style type="text/css"></style> 2、外链式-链接式（主要使用这种方法） <link rel="stylesheet" href="./index.css"> 3、@import url()方式 导入式 @import url(other.css) 了解即可
10、css选择器：
css的选择器：1.基本选择器 2.高级选择器 1、基本选择器：标签选择器；类选择器；ID选择器；通用选择器 2、高级选择器：并集选择器：交集选择器：后代选择器子代选择器：属性选择器:
伪类选择器和伪元素选择器
11、表单form
<form>允许出现表单控件</form>；表单用于显示信息，并将信息提交给服务器 表单控件： 按钮：button reset submit 文本：label text password radio checkbox file textarea(文本域) 下拉框：select option -------------------------------------------------------------- <label for="sel">城市：</label> <select name="sel" id="sel"> <option value="北京">北京</option> <option value="上海" selected>上海</option> <option value="广州">广州</option> <option value="深圳">深圳</option> </select>
12、选择器的优先级
通过不同的选择器找到某个元素给其设置样式，听谁的呢？看权重，谁的权重大就听谁的
13、边框有三个要素： 粗细 线性样式 颜色
border: 5px solid red;
14、行内元素和块级元素转换
.box1{ /*将块元素转化成行内元素*/ display: inline-block; width: 200px; height: 40px; border: 1px solid red; } --------------------------------------------- span{ background-color: yellow; width: 100px; height: 40px; /*将行内元素转化成块级元素*/ display: block; ---------------------------------------------- /*隐藏当前的标签 不占位置*/ /*display: none;*/ /*隐藏当前的标签，占位置*/ visibility: hidden;
15、浮动问题：
<div class="father"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <div class="father2"></div>
先不浮动box1,box2,box3
黑色为father2(长宽设置成60px)-----三个子盒子长宽都设置为20px----该图片宽60px 长120pxbox1,box2,box3同时左浮动
如果不给父盒子一个高度，那么浮动子元素是不会填充父盒子的高度，那么此时.father2的盒子就会跑到第一个位置上，影响页面布局
--------------------
给父盒子设置高度
clear:both
伪元素清除法
overflow：hidden，给浮动元素的父盒子添加css
------------------------------------
给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。
给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置
16、盒子水平居中
1.使用margin: 0 auto;水平居中盒子 必须有width，要有明确width，文字水平居中使用text-align: center; 2.只有标准流下的盒子 才能使用margin:0 auto; 当一个盒子浮动了，固定定位，绝对定位了，margin:0 auto; 不能用了 3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
17、文本和字体-背景颜色
text-align 文本对齐
text-decoration文字装饰。
18、定位有三种： 1.相对定位 2.绝对定位 3.固定定位
/*top 给正值是向下运动 left 给正值是向右运动 反之相反 */
相对定位三大特性： 1.不脱标 2.形影分离 3.老家留坑 :占着坑位，不干事 。
/*绝对的定位： 1.脱标 2.做遮盖效果，提升层级 3.设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。*/
/*固定定位：固定当前的元素不会随着页面滚动而滚动， 特性：1.脱标 2.提升层级 3.固定不变 不会随页面滚动而滚动
19、Z-index
z-index 这个东西非常简单，它有四大特性，每个特性你记住了，页面布局就不会出现找不到盒子的情况。 z-index 值表示谁压着谁，数值大的压盖住数值小的， 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。 从父现象：父亲怂了，儿子再牛逼也没用
js部分
1、函数关键字 function
2、DOM
DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
（1）找对象（元素节点）（获取DOM）
（2）设置标签的属性值 （对于标签属性的操作）//每个标签中id，class，title、img
标签的src属性和alt属性、a标签的href属性、input标签中的name、type属性等等
（3）设置标签的样式 （对于样式属性的操作）
(4) 设置标签值的操作
（5）动态的创建元素和删除元素 （对于DOM的建增删改）
（6）事件的触发响应： 事件源 、事件、事件的驱动程序（js事件,ECMAScript相关知识点对DOM进行操作）
---------------------------------------------------------------------------------------
获取其它DOM（事件源）的三种方式
var oDiv1 = document.getElementById("box1"); //方式一：通过id获取单个标签
var oDiv2 = document.getElementsByTagName("div")[0]; //方式二：通过 标签名 获得 标签数组，所以有s
var oDiv3 = document.getElementsByClassName("box")[0]; //方式三：通过 类名 获得 标签数组，所以有s
事件的三要素
事件的三要素：事件源、事件、事件驱动程序。
3、DOM的各种操作
一、对节点的操作（增删改查） 1.创建节点 新的标签(元素节点) = document.createElement("标签名"); var a1=document.createElement('li') 2.插入节点 父节点.appendChild(新的子节点); 父节点.insertBefore(新的子节点,作为参考的子节点);
3.删除节点
父节点.removeChild(子节点); 解释：用父节点删除子节点。必须要指定是删除哪个子节点。
-------------------------
对页面元素的曾删改查操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .div1{width: 200px;height: 200px;background: #c7254e} button{width: 40px;height: 40px} </style> </head> <body> <div class="div1"> <p class="p1"></p> <p class="p2"></p> <input id="input"> <img id="img" src="http://www.example.com/"> <button id="btn">变大</button> <button id="btn2">变小</button> </div> <script type="text/javascript"> //创建节点 var a1 = document.createElement('p'); //插入节点 var div1=document.getElementsByClassName('div1')[0]; div1.appendChild(a1); //删除节点 div1.removeChild(a1); //******标签属性的操作增删改查********** //每个标签中id，class，title、img //标签的src属性和alt属性、a标签的href属性、input标签中的name、type属性等等 // 对盒子标签 曾 div1.setAttribute('id','unique'); div1.title='box'; // div1.setAttribute('title','box'); //删 //div1.removeAttribute('title'); //改 就是重新设置一下 //div1.setAttribute('class','box'); // 查 console.log(div1.getAttribute('class')); // ***********样式属性的操作(css操作)************ //（width,height等），控制盒子的显示隐藏（display:none|block）,控制盒子的颜色切换（background：red|green）等等 div1.style.backgroundColor='blue'; // **********值的操作********** //所谓值的操作，就是对前闭合标签和后闭合标签中间的文本内容的设置和获取。 // 双闭合标签： innerText或者innerHTML // 单闭合标签：除了img标签，就剩input了，使用value进行赋值 var p1=document.getElementsByClassName('p1')[0]; p1.innerHTML='python is on the way'; // 特殊情况的值操作 img和input var input=document.getElementById('input'); input.value='请输入'; var img=document.getElementById('img'); img.alt='图片'; //事件 //函数入口 window.onload=function () { var tbn=document.getElementById('btn'); var tbn2=document.getElementById('btn2'); tbn.onclick=function () { div1.style.width='300px'; div1.style.height='300px'; }; tbn2.onclick=function () { div1.style.width='180px'; div1.style.height='180px'; } } </script> </body> </html>
jQuery部分
1、jquery的引入
1 <!--引用包--> <script type="text/javascript" src="jquery-3.3.1.js"></script> 2<!--jquery是全局的一个函数 当调用$() 内部 会帮咱们new jQuery() 创建出对象之后 对象：属性和方法-->
jquery对象转化成DOM对象
第一种方式：
$('button')[0]
第二种方式：
$('button').get(0)
// this 指的是js对象
2、jquery选择器分类
1、基础选择器 id选择器 $('#brother').css('color','black'); .标签选择器 $('a').css('color','yellow') .类选择器 $('.item').css('background','#FC4708') 通配符选择器 // console.log($('*').html()) console.log($('a').val() ---------------------------------------------------- 2、层级选择器 后代选择器 console.log($('div p')) $('div p').css('color','red') 子代选择器 $('div >p').css('background','green') 毗邻选择器 匹配 所有紧接在#brother元素后的下一个元素 $('#brother+ li').css('color','yellow') 兄弟选择器 // 匹配所有#brother之后的所有兄弟姐妹元素 $('#brother~li').css('background','#996633') ----------------------------------------------------------- 3.基本过滤选择器 :first 获取第一个元素 $('li:first').text('真的吗？') :last 获取最后一个元素 $('li:last').html('我是最后一个元素？') :odd 匹配所有索引值为奇数的元素，从0开始计数 $('li:odd').css('color','green'); :even 匹配所有索引值为偶数的元素，从0开始计数 $('li:even').css('color','red') :eq(index) 获取给定索引值的元素 从0开始计数 $('li:eq(1)').css('font-size','30px') :gt(index)匹配所有大于给定索引值的元素 $('li:gt(1)').css('font-size','40px') :lt(index) 匹配所有小于给定索引值的元素 $('li:lt(1)').css('font-size','40px') ------------------------------------------------------------ 4.属性选择器 标签名[属性名] 查找所有含有id属性的该标签名的元素 -------------------------------------------------------------- 5.筛选选择器 获取第n个元素 数值从0开始 $('span').eq(0).css('font-size','30px') first()获取第一个元素 $('span').first().css('background','red') last()获取最后一个元素 .parent() 选择父亲元素 $('span').parent('.p1').css({width:'300px',height:'300px',background:'yellow'}) .siblings()选择所有的兄弟元素 $('.list').siblings('li').css('color','red') .find() //查找所有的后代元素 $('div').find('button').css('background','#313131')
3、元素的隐藏和显示
两种方式
p{
display: none;
margin-left: 20px;
}
p.active{
display: block;
}
$('p').eq(i).addClass('active').siblings('p').removeClass('active'); ------------------------------------------------------------------------
$('p').eq(i).show().siblings('p').hide()
------------------------------------------------------------------------
“display:none”和“visibility:hidden"
（1）display:none：元素被隐藏之后，不占用原来的位置
（2）visibility:hidden：元素隐藏之后，占原来的位置
4、元素的淡入淡出、滑入滑出
$(selector).slideDown(speed, 回调函数); $(selector).slideUp(speed, 回调函数); **3、滑入滑出切换动画效果：** $(selector).slideToggle(speed, 回调函数); ------------------------------------------------------- $(selector).fadeIn(speed, callback); $(selector).fadeOut(1000); $(selector).fadeToggle('fast', callback); ------------------------------------------------- 自定义动画： $(selector).animate({params}, speed, callback); --------------------------------------------------------- 下拉菜单 jqli.mouseenter(function () { $(this).children("ul").stop().slideDown(1000); }); //绑定事件(移开隐藏) jqli.mouseleave(function () { $(this).children("ul").stop().slideUp(1000);
5、jquery属性操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{width: 200px;height: 200px;background: #2aabd2} </style> </head> <body> <div class="box"> <a id="a" href="#" target="_blank">百度</a> <button id="btn">放大</button> <button id="btn2">缩小</button> </div> <div class="box2"> <p>haha</p> <p>haha</p> <input type="text" value="aaaa">用户名</input> <input type="password">密码</input> </div> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> // html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr() // // DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp() // // 类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass() // // 值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val() //1 标签属性操作 $('div a').click(function () { // 查询标签属性属性 console.log($(this).attr('id')); // 设置 $(this).attr({'class':'a1','href':'http://www.baidu.com'}); //删除 $(this).removeAttr('id') //删除多个属性 // $('div').removeAttr('name class'); }); // 创建节点 var li="<li id='test'>hello world !</li>"; var p="<p id='test'>hello world !</p>"; var span="<span id='test'>hello world !</span>"; $('.box').append(li); $('.box').append(p); $('.box').append(span); // append() - 在被选元素的结尾插入内容 // prepend() - 在被选元素的开头插入内容 // after() - 在被选元素之后插入内容 // before() - 在被选元素之前插入内容 //删除节点 // $('li').remove(); // $('span').detach(); //detach()移除的元素可以通过append()追加到文档，并且该元素的事件和属性不会改变 // 2 样式属性操作 $('#btn').click(function () { $(this).parent('div').css({width:'300px',height:'300px'}) }); $('#btn2').click(function () { $(this).parent('div').css({width:'180px',height:'180px'}) }); // 3 值的操作 //text() 获取匹配元素包含的文本内容 //val()用于表单控件中获取值，比如input textarea select等等 // 1 获取值 console.log($('.box2 p').eq(0).text()); // 2 设置值 console.log($('.box2 p').eq(1).text('python')); // val() console.log($('.box2 input').eq(0).val()); console.log($('.box2 input').eq(1).val('pwd')); // 替换 // 将所有匹配的元素替换成指定的string、js对象、jquery对象。 // // ``` // //将所有的h5标题替换为a标签 // $('h5').replaceWith('<a href="#">hello world</a>'); // //将所有h5标题标签替换成id为app的dom元素 // $('h5').replaceWith($('#app')); </script> </body> </html>
6、jquery on方法
$(selector).on(event,childSelector,data,function)
---------------------------------------------------------------------------
88989999
33333
悟已往之不谏，知来者之可追。
浙公网安备 33010602011771号