感觉不一样

web前端学习笔记

一、HTML

htyper text markup language  即超文本标记语言

超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标记语言: 标记（标签）构成的语言.
网页==HTML文档，由浏览器解析，用来展示的

静态网页：静态的资源，如xxx.html

动态网页：html代码是由某种开发语言根据用户请求动态生成的

标签:

由一对尖括号包裹的单词构成

标签不区分大小写

标签分为两部分: 开始标签和结束标签. 两个标签之间的部分我们叫做标签体.

自闭和标签.例如:

标签可以嵌套.但是不能交叉嵌套.

标签的属性:

以键值对形式出现的. 例如 name="alex"

只能出现在开始标签或自闭和标签中.

属性名字全部小写. *属性值必须使用双引号或单引号包裹例如 name="alex"

如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly

标签:W3C的解析渲染页面标准

head标签:

name属性主要用于描述网页

http-equiv，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，

每个主要版本IE新增的功能都是为了让浏览器更容易使用、增加安全性及更支持业界标准。以这些作为IE的特色，其中
一个风险就是旧版本网站无法正确的显示。

为了将这个风险降到最低，IE6允许网页开发人员选择IE编译和显示他们网页的方式。"Quirks mode"为预设，这会
使页面以旧版本浏览器的视点显示，"Standards mode"(也称为"strict mode")特点是支持业界标准最为完善。
然而要利用这个增强的支持功能，网页必须包含恰当的<!DOCTYPE>指令。

若一个网页没有包含<!DOCTYPE>指令，IE6会将它以quirks mode显示。若网页包含有效的<!DOCTYPE>指令但浏
览器无法辨识，IE6会将它以IE6 standards mode显示。因为少数网站已经包含<!DOCTYPE>指令，兼容性模式的
切换相当成功。这使网页开发人员能选择将他们的网页转移为standards mode的最佳时机。

随著时间经过，更多网站开始使用standards mode。它们也开始使用IE6的特性和功能来检测IE。举例来说，IE6
不支持universal selector(即css之全局选择器 * {})，一些网站便使用它来针对IE做特定的对应。

当 IE7增加了对全域选择器的支持，那些依赖IE6特点的网站便无法侦测出这个新版本的浏览器。因此那些针对IE的
特定对应无法应用于IE7，造成这些网站便无法如他们预期的显示。由于<!DOCTYPE>只支持两种兼容性模式，受到影
响的网站拥有者被迫更新他们的网站使其能支持IE7。

IE8 比之前的任何版本浏览器都更支持业界标准，因此针对旧版本浏览器设计的网页可能无法如预期般呈现。为了帮
助减轻所有问题，IE8引入文件兼容性的概念，使你能选择你的网页设计要对应的特定IE版本。文件兼容性在IE8增加
了一些新的模式，这些模式能告诉浏览器如何解析和编译一个网页。若你的网页无法在 ie8正确的显示，你可以更新
你的网站使它支持最新的网页标准(优先选项)或在你的页面上新增一个meta元素用于告诉IE8如何依照旧版本浏览器
编译你的页面。

这能让你选择将你的网站更新支持IE8新特点的时机。

当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用 <!DOCTYPE> 指令来确
定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式
（Quirks 模式）显示该网页。

注意：X-UA-Compatible

	<title>sbtitle>
    <link rel="icon" href="http://www.jd.com/favicon.ico">
    <link rel="stylesheet" href="css.css">
    <script src="hello.js">script>

非meta标签

body标签:

<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角表.

<br>:换行.

<hr>:水平线

<div><span>

基本标签

块级标签：

内联标签：_{^{
 
block（块）元素：
<li>
<div>
总是在新行上开始； 
</div></li>
<li>
<div>
宽度缺省是它的容器的100%，除非设定一个宽度； 
</div></li>
<li>
<div>
它可以容纳内联元素和其他块元素。
</div></li>
inline元素：
<li>和其他元素都在一行上；</li>
<li>宽度就是它的文字或图片的宽度，不可改变</li>
<li>内联元素只能容纳文本或者其他内联元素</li>
特殊字符
 < >；"；©®
<h6>图形标签：</h6>
<li>src: 要显示图片的路径. </li>
<li>alt: 图片没有加载成功时的提示. </li>
<li>title: 鼠标悬浮时的提示信息. </li>
<li>width: 图片的宽 </li>
<li>height:图片的高 (宽高两个属性只用一个会自动等比缩放.)</li>
<h6>超链接标签<a>：
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_0ba491d9-83b5-4e6d-a92a-a10d28d1c98a" alt="" src="http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif" width="11" height="16"><img class="code_img_opened" id="code_img_opened_0ba491d9-83b5-4e6d-a92a-a10d28d1c98a" style="display: none;" alt="" src="http://img.e-com-net.com/image/info8/118a089070624154b4c3dd9bad0bd075.gif" width="11" height="16"> 
<div class="cnblogs_code_hide" id="cnblogs_code_open_0ba491d9-83b5-4e6d-a92a-a10d28d1c98a">
<pre>href:要连接的资源路径格式如下: href="http://www.baidu.com"

target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.

name: 定义一个页面的书签.

用于跳转 href : #id.（锚）</pre>
 
</div>
 超链接标签(锚标签)
</div></h6>
<h6>列表标签:</h6>
<li><ul>: 无序列表 </li>
<li> <ol>: 有序列表 <li>:列表中的每一项. </li>
<li><dl> 定义列表 <dt> 列表标题 <dd> 列表项</li>
<h6>表格标签</h6>
<h6><table></h6>
<h6>五表格标签: <table></h6>
<div class="cnblogs_code">
<pre>border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

width: 像素百分比.（最好通过css来设置长宽）

<tr>: table row

<th>: table head cell

<td>: table data cell

rowspan: 单元格竖跨多少行

colspan: 单元格横跨多少列（即合并单元格）

<th>: table header <tbody>(不常用): 为表格进行分区.</pre>
</div>
<h6>六表单标签<form></h6>
 表单用于向服务器传输数据。
 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
 表单还可以包含textarea、select、fieldset和 label 元素。
1.表单属性
　　HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.
 action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web
 method: 表单的提交方式 post/get 默认取值就是 get（信封）
 get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
 post:1.提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
 get/post是常见的两种请求方式.
2.表单元素
<input> 标签的属性和对应值
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_ed6d4061-87ed-49b3-97a5-d084326a7082" alt="" src="http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif" width="11" height="16">
<img class="code_img_opened" id="code_img_opened_ed6d4061-87ed-49b3-97a5-d084326a7082" style="display: none;" alt="" src="http://img.e-com-net.com/image/info8/118a089070624154b4c3dd9bad0bd075.gif" width="11" height="16">
<div class="cnblogs_code_hide" id="cnblogs_code_open_ed6d4061-87ed-49b3-97a5-d084326a7082">
<pre>type: text 文本输入框

password 密码输入框

radio 单选框

checkbox 多选框

submit 提交按钮

button 按钮(需要配合js使用.) button和submit的区别？

file 提交文件：form表单需要加上属性enctype="multipart/form-data"

name: 表单提交项的键.注意和id属性的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客
户端编程，而在css和javascript中使用的
value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同：

?12345type="button", "reset", "submit" - 定义按钮上的显示的文本 type="text", "password", "hidden" - 定义输入字段的初始值 type="checkbox", "radio", "image" - 定义与输入相关联的值

checked: radio 和 checkbox 默认被选中

readonly: 只读. text 和 password

disabled: 对所用input都好使.</pre>
</div>

</div>
 <select> 下拉选标签属性
 
<textarea> 文本域
<pre>name: 表单提交项的键. 
cols: 文本域默认有多少列 
rows: 文本域默认有多少行</pre>
 <label>
 
<code><label </code><code>for</code><code>=</code><code>"www"</code><code>>姓名<</code><code>/</code><code>label></code>
<code><</code><code>input</code> <code>id</code><code>=</code><code>"www"</code> <code>type</code><code>=</code><code>"text"</code><code>></code>
<fieldset>
 
<code><fieldset></code>
<code> </code><code><legend>登录<</code><code>/</code><code>legend></code>
<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"text"</code><code>></code>
<code><</code><code>/</code><code>fieldset></code>

<code> </code>
<code> </code>
<h1><code>二、CSS</code></h1>
<code>CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。</code>
 
引入方式:
1.行内式
<div class="cnblogs_code">
<pre><p style="background-color: rebeccapurple">hello yuan</p></pre>
</div>
2.嵌入式
<div class="cnblogs_code">
<pre><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head></pre>
</div>
3 链接式
<div class="cnblogs_code">
<pre><link href="mystyle.css" rel="stylesheet" type="text/css"/></pre>
</div>
4.导入式
<div class="cnblogs_code">
<pre><style type="text/css">

@import"mystyle.css"; 此处要注意.css文件的路径

</style></pre>
</div>
 
css的选择器:
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_8daebd9b-6b24-4134-8e7b-902b00f8308d" alt="" src="http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif" width="11" height="16">
<img class="code_img_opened" id="code_img_opened_8daebd9b-6b24-4134-8e7b-902b00f8308d" style="display: none;" alt="" src="http://img.e-com-net.com/image/info8/118a089070624154b4c3dd9bad0bd075.gif" width="11" height="16">
<div class="cnblogs_code_hide" id="cnblogs_code_open_8daebd9b-6b24-4134-8e7b-902b00f8308d">
<pre>＊：通用元素选择器，匹配任何元素 * { margin:0; padding:0; }

E ：标签选择器，匹配所有使用E标签的元素 p { color:green; }

.info和E.info: class选择器，匹配所有class属性中包含info的元素 .info { background:#ff0; } p.info { background:blue; }

#info和E#info id选择器，匹配所有id属性等于footer的元素 #info { background:#ff0; } p#info { background:#ff0; }</pre>
</div>
基础选择器
</div>
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_fd8456ae-5260-469b-8c1f-39c131963029" alt="" src="http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif" width="11" height="16">
<img class="code_img_opened" id="code_img_opened_fd8456ae-5260-469b-8c1f-39c131963029" style="display: none;" alt="" src="http://img.e-com-net.com/image/info8/118a089070624154b4c3dd9bad0bd075.gif" width="11" height="16">
<div class="cnblogs_code_hide" id="cnblogs_code_open_fd8456ae-5260-469b-8c1f-39c131963029">
<pre>E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 div,p { color:#f00; }

E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 li a { font-weight:bold;
E > F 子元素选择器，匹配所有E元素的子元素F div > p { color:#f00; }

E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F div + p { color:#f00; }</pre>
</div>
组合选择器
</div>
嵌套规则：
<code><li>块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。 </li><li>有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt </li><li>li内可以包含div </li><li>块级元素与块级元素并列、内联元素与内联元素并列</li> 
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_b7b131ff-eeb7-4c36-900e-46f346703263" alt="" src="http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif" width="11" height="16">
<img class="code_img_opened" id="code_img_opened_b7b131ff-eeb7-4c36-900e-46f346703263" style="display: none;" alt="" src="http://img.e-com-net.com/image/info8/118a089070624154b4c3dd9bad0bd075.gif" width="11" height="16">
<div class="cnblogs_code_hide" id="cnblogs_code_open_b7b131ff-eeb7-4c36-900e-46f346703263">
<pre>E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }

E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }

E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }

E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}

E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}

E[attr=val] 匹配属性值中包含指定值的每个元素 div[class="test"]{background:#ffff00;}</pre>
</div>
属性选择器
</div> <h6>伪类(Pseudo-classes)</h6>CSS伪类是用来给选择器添加一些特殊效果。 
<div class="cnblogs_code">
<pre>a:link（没有接触过的链接）,用于定义了链接的常规状态。

a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

伪类选择器 : 伪类指的是标签的不同状态:

a ==> 点过状态没有点过的状态鼠标悬浮状态激活状态

a:link {color: #FF0000} /* 未访问的链接 /

a:visited {color: #00FF00} / 已访问的链接 /

a:hover {color: #FF00FF} / 鼠标移动到链接上 /

a:active {color: #0000FF} / 选定的链接 / 格式: 标签:伪类名称{ css代码; }</pre>
</div></code>

<div class="cnblogs_code">
<pre>:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容

p:before 在每个 <p> 元素的内容之前插入内容
p:before{content:"hello";color:red}
p:after 在每个 <p> 元素的内容之前插入内容
p:after{ content:"hello"；color:red}
</pre>
</div>
<h6> </h6>
<h6>css优先级和继承:</h6>
CSS优先级，是指CSS样式在浏览器中被解析的先后顺序。
<div class="cnblogs_code">
<pre>样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1 内联样式表的权值最高 style=""-------------------1000；</pre>
<pre>2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p</pre>
<pre>－－－－－－－－－－－－－-1</pre>
</div>
 
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代.
有一些属性不能被继承，如：border, margin, padding, background等。
 
常用属性:
<div class="cnblogs_code">
<pre><div style="color:blueviolet">ppppp</div>

font-size: 20px/50%/larger

font-family:'Lucida Bright'

font-weight: lighter/bold/border/

<h1 style="font-style: oblique">sb</h1>

background-color: cornflowerblue

background-image: url('1.jpg');

background-repeat: no-repeat;(repeat:平铺满)

background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)

简写：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">

<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')"></pre>
</div>
如果将背景属性加在body上，要给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片；
<h6>外边距和内边:</h6>

<a href="http://img.e-com-net.com/image/info8/92b9306ef08c48009034d86aa74a81db.jpg" target="_blank"><img width="650" height="392" alt="web前端学习笔记_第2张图片" src="http://img.e-com-net.com/image/info8/92b9306ef08c48009034d86aa74a81db.jpg" style="border:1px solid black;"></a>
 
<li>margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。</li>
<li>padding: 用于控制内容与边框之间的距离； </li>
<li>Border(边框) 围绕在内边距和内容外的边框。</li>
<li>Content(内容) 盒子的内容，显示文本和图像。</li>
float属性:
<li>block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；</li>
<li>inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效。</li>
 
<li>常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。 </li>
<li>常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等 </li>
文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
只有绝对定位absolute和浮动float才会脱离文档流。
<li>float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)。</li>
<li>absolute position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。(可以说是完全无视)</li>
<h6>浮动的表现</h6>
 定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的浮动框之后的块框表现得就像浮动框不存在一样。（注意这里是块框而不是内联元素；浮动框只对它后面的元素造成影响）
注意 float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是float的特性，即float是一种不彻底的脱离文档流方式。无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。
<h6>清除浮动：</h6>
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
<div class="cnblogs_code">
<pre>clear语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。</pre>
</div>
 
 
position(定位):
<h6>1 static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。</h6>
<h6>2 position: relative／absolute</h6>
 relative 相对定位。相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
 
<h6> absolute 绝对定位。</h6>
 定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
 对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
 
 总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。
<h6>position:fixed</h6>
 fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
 在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
<h6>仅使用margin属性布局绝对定位元素:</h6>
margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
 
<h1>三、JavaScript</h1>
JavaScript 实现是由以下 3 个不同部分组成的：
 
<li>核心（ECMAScript） </li>
ECMAScript 标准描述了以下内容：
 语法、类型、语句、关键字、保留字、运算符、对象 (封装继承多态) 基于对象的语言.使用对象。
 
<li>文档对象模型（DOM） Document object model (整合js，css，html)</li>
<li>浏览器对象模型（BOM） Broswer object model（整合js和浏览器）</li>
<li>Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的.</li>
<div class="cnblogs_code">
<pre>Undefined 类型
Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。
当函数无明确返回值时，返回的也是值 "undefined";
Null 类型
另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。
var person=new Person()
var person=null</pre>
</div>
<div class="cnblogs_code">
<pre>JavaScript属于松散类型的程序语言
变量在声明的时候并不需要指定数据类型
变量只有在赋值的时候才会确定数据类型
表达式中包含不同类型数据则在计算过程中会强制进行类别转换

数字 + 字符串：数字转换为字符串
数字 + 布尔值：true转换为1，false转换为0
字符串 + 布尔值：布尔值转换为字符串true或false</pre>
</div>
<div class="cnblogs_code">
<pre>逻辑 AND 运算符(&&)

逻辑 AND 运算的运算数可以是任何类型的，不止是 Boolean 值。

如果某个运算数不是原始的 Boolean 型值，逻辑 AND 运算并不一定返回 Boolean 值：

如果某个运算数是 null，返回 null。
如果某个运算数是 NaN，返回 NaN。
如果某个运算数是 undefined，返回undefined。

逻辑 OR 运算符(||)

与逻辑 AND 运算符相似，如果某个运算数不是 Boolean 值，逻辑 OR 运算并不一定返回 Boolean 值</pre>
</div>
<div class="cnblogs_code">
<pre>异常处理

try {
//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
//e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}

注：主动抛出异常 throw Error('xxxx')</pre>
</div>
<div class="cnblogs_code">
<pre>11种内置对象

包括：

Array ,String , Date, Math, Boolean, Number Function, Global, Error, RegExp , Object

简介：

在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象，也可以用创建对象的方法定义变量，String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象，在JavaScript程序大多数功能都是通过对象实现的
复制代码

<script language="javascript">
var aa=Number.MAX_VALUE;
//利用数字对象获取可表示最大数
var bb=new String("hello JavaScript");
//创建字符串对象
var cc=new Date();
//创建日期对象
var dd=new Array("星期一","星期二","星期三","星期四");
//数组对象
</script>

</pre>
</div>
 
<h6>作用域链(Scope Chain)：</h6>
 在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。
 
BOM对象：
BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
 
<pre>window对象
所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.

<div class="cnblogs_code">

<pre>alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。

open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。</pre>

</div></pre>
 
<h6>History 对象属性</h6>
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
<div class="cnblogs_code">
<pre>length 返回浏览器历史列表中的 URL 数量。
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面</pre>
</div>
 
Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
<div class="cnblogs_code">
<pre>location.assign(URL)
location.reload()
location.replace(newURL)//注意与assign的区别</pre>
</div>
 
DOM对象(DHTML)
DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：
W3C DOM 标准被分为 3 个不同的部分：
<li>核心 DOM - 针对任何结构化文档的标准模型</li>
<li>XML DOM - 针对 XML 文档的标准模型</li>
<li>HTML DOM - 针对 HTML 文档的标准模型</li>
<li> XML DOM？－－－－>XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。 </li>
<li> HTML DOM？－－－－>HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。 </li>
 
DOM 节点：
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：
<li>整个文档是一个文档节点(document对象)</li>
<li>每个 HTML 元素是元素节点(element 对象)</li>
<li>HTML 元素内的文本是文本节点(text对象)</li>
<li>每个 HTML 属性是属性节点(attribute对象)</li>
<li>注释是注释节点(comment对象)</li>
节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
<li>在节点树中，顶端节点被称为根（root）</li>
<li>每个节点都有父节点、除了根（它没有父节点）</li>
<li>一个节点可拥有任意数量的子</li>
<li>同胞是拥有相同父节点的节点</li>
访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：
页面查找：
<li>通过使用 getElementById() 方法 </li>
<li>通过使用 getElementsByTagName() 方法 </li>
<li>通过使用 getElementsByClassName() 方法 </li>
<li>通过使用 getElementsByName() 方法 </li>
<div class="cnblogs_code">
<pre><script>

var div1=document.getElementById("div1");

////支持;
// var ele= div1.getElementsByTagName("p");
// alert(ele.length);
////支持
// var ele2=div1.getElementsByClassName("div2");
// alert(ele2.length);
////不支持
// var ele3=div1.getElementById("div3");
// alert(ele3.length);
////不支持
// var ele4=div1.getElementsByName("yuan");
// alert(ele4.length)

</script></pre>
</div>
 
HTML DOM Event(事件)：
HTML 4.0 有能力使 HTML 事件触发浏览器中的动作（action）
<div class="cnblogs_code">
<pre>onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。

onfocus 元素获得焦点。 //练习：输入框
onblur 元素失去焦点。应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown 某个键盘按键被按下。应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开

onselect 文本被选中。
onsubmit 确认按钮被点击。</pre>
</div>
 
<div class="cnblogs_code">
<pre><script>
function change() {
var img=document.createElement("img");//<img src="">
// img.setAttribute("src","123.png");
img.src="123.png";

var ele=document.getElementsByTagName("p")[0];
var father=document.getElementsByClassName("div3")[0];
father.replaceChild(img,ele);
}
function add() {
var ele=document.createElement("p");//<p>
ele.innerHTML="hello p";

ele.style.color="red";
ele.style.fontSize="10px";

var father=document.getElementsByClassName("div1")[0];
father.appendChild(ele); //父节点来调用
}
function del() {
var father=document.getElementsByClassName("div1")[0];
var sons=father.getElementsByTagName("p")[0];
father.removeChild(sons) ; //父节点来调用
}
</script></pre>
</div>
<div class="cnblogs_code">
<pre>改变 HTML 内容

改变元素内容的最简答的方法是使用 innerHTML ，innerText。

改变 CSS 样式

<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";<br> .style.fontSize=48px

改变 HTML 属性

elementNode.setAttribute(name,value)

elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)

创建新的 HTML 元素

createElement(name)

删除已有的 HTML 元素

elementNode.removeChild(node)

关于class的操作

elementNode.className

elementNode.classList.add

elementNode.classList.remove</pre>
</div>
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_7fcb046b-1774-47d8-b24b-9fce87259374" alt="" src="http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif" width="11" height="16">
<img class="code_img_opened" id="code_img_opened_7fcb046b-1774-47d8-b24b-9fce87259374" style="display: none;" alt="" src="http://img.e-com-net.com/image/info8/118a089070624154b4c3dd9bad0bd075.gif" width="11" height="16">
<div class="cnblogs_code_hide" id="cnblogs_code_open_7fcb046b-1774-47d8-b24b-9fce87259374">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<input type="text" id="search" value="请输入用户名" onfocus="f1()" onblur="f2()">

<script>
var ele=document.getElementById("search");
function f1() {
if(ele.value="请输入用户名"){
ele.value="";
}
}
function f2() {
if(!ele.value.trim())
ele.value="请输入用户名"
}
</script>
</body>
</html></pre>
</div>
搜索框
</div>
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_4a5d2d69-159e-414f-8e32-9b6e5c6fad05" alt="" src="http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif" width="11" height="16">
<img class="code_img_opened" id="code_img_opened_4a5d2d69-159e-414f-8e32-9b6e5c6fad05" style="display: none;" alt="" src="http://img.e-com-net.com/image/info8/118a089070624154b4c3dd9bad0bd075.gif" width="11" height="16">
<div class="cnblogs_code_hide" id="cnblogs_code_open_4a5d2d69-159e-414f-8e32-9b6e5c6fad05">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
height: 1800px;
background-color: white;
}
.shade{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: gray;
opacity: 0.3 ;
}
.model{
width: 200px;
height: 200px;
background-color: bisque;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.hide{
display: none;
}
</style>
</head>
<body>

<div class="content">
<button onclick="show()">show</button>
</div>
<div class="shade hide"></div>

<div class="model hide">
<button>show</button>
</div>

<script>
function show() {
var ele_shade=document.getElementsByClassName("shade")[0];
var ele_model=document.getElementsByClassName("model")[0];

ele_shade.classList.remove("hide")
ele_model.classList.remove("hide")
}
</script>
</body>
</html></pre>
</div>
对话框
</div>
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_7c8326d9-5c39-4321-90a5-a4ab5cbf5e01" alt="" src="http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif" width="11" height="16">
<img class="code_img_opened" id="code_img_opened_7c8326d9-5c39-4321-90a5-a4ab5cbf5e01" style="display: none;" alt="" src="http://img.e-com-net.com/image/info8/118a089070624154b4c3dd9bad0bd075.gif" width="11" height="16">
<div class="cnblogs_code_hide" id="cnblogs_code_open_7c8326d9-5c39-4321-90a5-a4ab5cbf5e01">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="selectAll()">全选</button>
<button onclick="Cancel()">取消</button>
<button onclick="reverse()">反选</button>
<table border="1px">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr><tr>
<td><input type="checkbox"></td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
</table>
<script>
function selectAll() {
var inputs=document.getElementsByTagName("input");
for (var i=0;i<inputs.length;i++ ){
var input=inputs[i];
input.checked=true;
}
}
function Cancel(){
var inputs=document.getElementsByTagName("input");
for (var i=0;i<inputs.length;i++ ){
var input=inputs[i];
input.checked=false;
}
}
function reverse() {
var inputs=document.getElementsByTagName("input");
for (var i=0;i<inputs.length;i++ ){
var input=inputs[i];
input.checked=!input.checked;//取反

// if (input.checked){
// input.checked=false;
// }else {
// input.checked=true;
// }
}
}
</script>
</body>
</html></pre>
</div>
正反选
</div>
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_5d0b57ae-0115-4c98-9766-c4a06f4f5a67" alt="" src="http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif" width="11" height="16">
<img class="code_img_opened" id="code_img_opened_5d0b57ae-0115-4c98-9766-c4a06f4f5a67" style="display: none;" alt="" src="http://img.e-com-net.com/image/info8/118a089070624154b4c3dd9bad0bd075.gif" width="11" height="16">
<div class="cnblogs_code_hide" id="cnblogs_code_open_5d0b57ae-0115-4c98-9766-c4a06f4f5a67">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="provinces">
<option value="">请选择省份</option>



</select>
<select id="citys">
<option value="">请选择城市</option>
</select>
<script>
data={"河北省":["石家庄","廊坊"],"河南省":["石家庄","廊坊"],"河西省":["石家庄","廊坊"]};
var pro_ele=document.getElementById("provinces");
var city_ele=document.getElementById("citys");

//动态添加省份
for (var i in data){
var ele=document.createElement("option");
ele.innerHTML=i;
pro_ele.appendChild(ele)
}
pro_ele.onchange=function () {
console.log(this.selectedIndex);//options的索引
console.log(this.options[this.selectedIndex]);//options标签

var citys=data[this.options[this.selectedIndex].innerHTML];

city_ele.options.length=1;
for(var i=0; i<citys.length;i++){
var ele=document.createElement("option");
ele.innerHTML=citys[i];
city_ele.appendChild(ele)
}

}
</script>
</body>
</html></pre>
</div>
二级联动
</div>
 
<h1>四、Jquery</h1>
jQuery由美国人John Resig创建
一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择
 
 
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
<div class="cnblogs_code">
<pre>$("#test").html()
//意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

// 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;

//虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

//约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.

var $variable = jQuery 对象
var variable = DOM 对象

$variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML</pre>
</div>
jquery的基础语法：$(selector).action()
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_e63ad5d5-8a5b-45e6-9680-26718f76dc05" alt="" src="http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif" width="11" height="16">
<img class="code_img_opened" id="code_img_opened_e63ad5d5-8a5b-45e6-9680-26718f76dc05" style="display: none;" alt="" src="http://img.e-com-net.com/image/info8/118a089070624154b4c3dd9bad0bd075.gif" width="11" height="16">
<div class="cnblogs_code_hide" id="cnblogs_code_open_e63ad5d5-8a5b-45e6-9680-26718f76dc05">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left_menu</title>

<style>
.menu{
height: 500px;
width: 30%;
background-color: gainsboro;
float: left;
}
.content{
height: 500px;
width: 70%;
background-color: rebeccapurple;
float: left;
}
.title{
line-height: 50px;
background-color: #425a66;
color: forestgreen;}

.hide{
display: none;
}

</style>
</head>
<body>

<div class="outer">
<div class="menu">
<div class="item">
<div class="title">菜单一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>

</div>
<div class="content"></div>

</div>
<script src="jquery-3.2.1.js"></script>
<script>
$(".item .title").click(function () {
$(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");

// $(this).next().removeClass("hide");
// $(this).parent().siblings().children(".con").addClass("hide");
})
</script>

</body>
</html></pre>
</div>
左侧菜单
</div>
 
<div class="cnblogs_code">
<pre><input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

<script>

//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
//需要使用prop方法去操作才能获得正确的结果。

// $("#chk1").attr("checked")
// undefined
// $("#chk1").prop("checked")
// false

// ---------手动选中的时候attr()获得到没有意义的undefined-----------
// $("#chk1").attr("checked")
// undefined
// $("#chk1").prop("checked")
// true

console.log($("#chk1").prop("checked"));//false
console.log($("#chk2").prop("checked"));//true
console.log($("#chk1").attr("checked"));//undefined
console.log($("#chk2").attr("checked"));//checked
</script>

attr和prop</pre>
</div>
 
<div class="cnblogs_code">
<pre>//创建一个标签对象
$("<p>")

//内部插入

$("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo");

//外部插入

$("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");

//替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除

$("").empty()
$("").remove([expr])

//复制

$("").clone([Even[,deepEven]])</pre>
</div>
<div class="cnblogs_code">
<pre>CSS
$("").css(name|pro|[,val|fn])
位置
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
尺寸
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])</pre>
</div>
<div class="cnblogs_code">
<pre>页面载入
ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){})

事件处理
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。

// .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
// $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
// click事件；

[selector]参数的好处:
好处在于.on方法为动态添加的元素也能绑上指定事件；如：

//$('ul li').on('click', function(){console.log('click');})的绑定方式和
//$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个
//li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的

//但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加
//li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件

[data]参数的调用:
function myHandler(event) {
alert(event.data.foo);
}
$("li").on("click", {foo: "bar"}, myHandler)</pre>
</div>
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_0ca98a11-91d3-4cb1-9af0-811603b08e44" alt="" src="http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif" width="11" height="16">
<img class="code_img_opened" id="code_img_opened_0ca98a11-91d3-4cb1-9af0-811603b08e44" style="display: none;" alt="" src="http://img.e-com-net.com/image/info8/118a089070624154b4c3dd9bad0bd075.gif" width="11" height="16">
<div class="cnblogs_code_hide" id="cnblogs_code_open_0ca98a11-91d3-4cb1-9af0-811603b08e44">
<pre><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid #ddd;width: 600px;position: absolute;">
<div id="title" style="background-color: black;height: 40px;color: white;">
标题
</div>
<div style="height: 300px;">
内容
</div>
</div>
<script type="text/javascript" src="jquery-2.2.3.js"></script>
<script>
$(function(){
// 页面加载完成之后自动执行
$('#title').mouseover(function(){
$(this).css('cursor','move');
}).mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
// 原始鼠标横纵坐标位置
var ord_x = _event.clientX;
var ord_y = _event.clientY;

var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;

$(this).bind('mousemove', function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY;

var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y);

$(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px');

})
}).mouseup(function(){
$(this).unbind('mousemove');
});
})
</script>
</body>
</html></pre>
</div>
面板拖动
</div>
<div class="cnblogs_code">
<img class="code_img_closed" id="code_img_closed_5ef79df7-d3e8-45e3-a6bf-442bc6fb19f4" alt="" src="http://img.e-com-net.com/image/info8/2b246dbcfe82488397e9aa432bbc4e31.gif" width="11" height="16">
<img class="code_img_opened" id="code_img_opened_5ef79df7-d3e8-45e3-a6bf-442bc6fb19f4" style="display: none;" alt="" src="http://img.e-com-net.com/image/info8/118a089070624154b4c3dd9bad0bd075.gif" width="11" height="16">
<div class="cnblogs_code_hide" id="cnblogs_code_open_5ef79df7-d3e8-45e3-a6bf-442bc6fb19f4">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<SCRIPT src="jquery-3.4.1.js"></SCRIPT>
</head>
<body>
<div>hello</div>

<button onclick="f1()">显示</button>
<button onclick="f2()">隐藏</button>
<button onclick="f3()">切换</button>

<script>
function f1() {
$("div").show(1000)
}
function f2() {
$("div").hide(1000)
}
function f3() {
$("div").toggle(1000)
}

</script>
</body>
</html></pre>
</div>
动画效果
</div>
 
 
<div class="cnblogs_code">
<pre><script>

$.extend(object) //为JQuery 添加一个静态方法。
$.fn.extend(object) //为JQuery实例添加一个方法。

jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
console.log($.min(3,4));

//-----------------------------------------------------------------------

$.fn.extend({
"print":function(){
for (var i=0;i<this.length;i++){
console.log($(this)[i].innerHTML)
}

}
});

$("p").print();
</script></pre>
</div>
 
定义一个JQuery插件，首先要把这个插件的代码放在一个不受外界干扰的地方，要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。
 
 
 







</div>
</div>
</div>
</div>

<div id="SOHUCS" sid="1179349885296627712"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js"></script>

<div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
</div>
<div class="col-md-3">
<div class="row" id="ad">

<div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_1"> </div>
</div>

<div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_2"></div>
</div>

<div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(web前端学习笔记)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1755621366918299648.htm"
title="Web前端学习笔记" target="_blank">Web前端学习笔记</a>
jusw123456
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>文章目录HTML+CSS系列学习笔记①之拨云见日1、什么是HTML、CSS？2、VSCode编译器（宇宙第一编译器）3、五大浏览器4、深入了解网站开发5、web前端的三大核心技术6、HTML基本结构和属性7、HTML初始代码8、HTML注释9、标题与段落10、文本修饰标签11、引入文件的地址路径12、图片标签13、跳转链接14、跳转锚点15、特殊符号16、列表标签17、表格标签18、表格属性19、</div>
</li>
<li><a href="/article/1730023698154467328.htm"
title="web前端学习笔记之Node.js" target="_blank">web前端学习笔记之Node.js</a>
偷到月亮了吗.
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">学习笔记</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>文章目录01浏览器中的JavaScript运行环境02什么是Node.js03安装Node.js04使用Node运行JS代码05fs模块文件操作05.1什么是fs模块05.2读取指定文件内容fs.readFile()05.3写入文件内容fs.writeFile()05.4fs-整理成绩案例05.5fs-路径动态拼接问题05.6fs-使用注意事项06path模块路径操作06.1path模块是什么06</div>
</li>
<li><a href="/article/1729450369001533440.htm"
title="Web前端学习笔记（1）" target="_blank">Web前端学习笔记（1）</a>
周日happy
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>文章目录一、第一部分1.1内容一Web前端导入二、第二部分2.1内容一HTML和CSS的定义三、第三部分3.1内容一宇宙第一编译器VsCode3.2内容二快捷键的使用四、第四部分4.1内容一Chrome浏览器4.2内容一五大浏览器五大浏览器的介绍五、第五部分5.1内容一深入了解网站开发5.2内容二JV与HTML与CSS的关系第六部分6.1内容一web的三大核心技术6.2内容二结构,样式,行为七、第</div>
</li>
<li><a href="/article/1727698718527926272.htm"
title="Web前端学习笔记13：JavaScript_作用域_预解析_对象_内置对象_数据类型" target="_blank">Web前端学习笔记13：JavaScript_作用域_预解析_对象_内置对象_数据类型</a>
JasonYangQ
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>文章目录JavaScript基础第05天笔记1-作用域1.1作用域概述1.2全局作用域1.3局部作用域1.4jS没有块级作用域4-预解析5-对象5.1对象的相关概念5.2创建对象的三种方式利用字面量创建对象利用newObject创建对象利用构造函数创建对象5.3遍历对象JavaScript基础第06天笔记1-内置对象1.1内置对象1.2查文档1.3Math对象1.4日期对象1.5数组对象创建数组的</div>
</li>
<li><a href="/article/1727599197663866880.htm"
title="Web前端学习笔记" target="_blank">Web前端学习笔记</a>
DAOkonglong
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
<div>Web前端学习笔记目录Web前端学习笔记前言一、拨开云雾见天日，守得云开见月明1.1.1什么是HTML和CSS1.1.2VSCode编辑器1.1.3深入了解网站开发（部分）1.1.4Web前端三大核心技术1.1.5HTML基本结构和属性1.1.6HTML的初始代码1.1.7HTML中的注释1.1.8HTML语义化1.1.9HTML标签的使用标题标签段落标签文本修饰标签图片标签和图片属性跳转链接跳转</div>
</li>
<li><a href="/article/1726118648759791616.htm"
title="Web前端学习笔记" target="_blank">Web前端学习笔记</a>
.徐十三.
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/1.htm">Web前端基础</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a>
<div>HTML学习day01一、了解软件架1.C/S2.B/S3.B/S软件的优缺点二、HTMLHTML标签相关1.HTML标签2.HTML标签大小写问题3.HTML标签属性4.HTML颜色值的设置5.HTML注释6.HTML代码格式7.HTML实体字符HTML主体结构三、head标签中常用的标签一、了解软件架1.C/S1）C客户端（client）/S服务器（server）2）特点：a:C/S软件通常需</div>
</li>
<li><a href="/article/1721218555329982464.htm"
title="Web前端学习笔记——VueJS-APP案例" target="_blank">Web前端学习笔记——VueJS-APP案例</a>
唯恋殊雨
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/WEB%E5%89%8D%E7%AB%AF/1.htm">WEB前端</a>
<div>源代码下载将项目源码托管到oschina中点击头像->修改资料->SSH公钥如何生成SSH公钥创建自己的空仓储，使用gitconfig--globaluser.name"用户名"和gitconfig--globaluser.email@.com来全局配置提交时用户的名称和邮箱使用gitinit在本地初始化项目使用touchREADME.md和touch.gitignore来创建项目的说明</div>
</li>
<li><a href="/article/1707779528044130304.htm"
title="Web前端学习笔记——Canvas 02" target="_blank">Web前端学习笔记——Canvas 02</a>
唯恋殊雨
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/canvas/1.htm">canvas</a>
<div>三、canvas进阶3.1Canvas颜色样式和阴影3.1.1设置填充和描边的颜色（掌握）fillStyle:设置或返回用于填充绘画的颜色strokeStyle:设置或返回用于笔触的颜色以上两个值都可以接受颜色名,16进制数据，rgb值，甚至rgba.一般先进行设置样式然后进行绘制。例如：ctx.strokeStyle="red";ctx.strokeStyle="#ccc";ctx.stroke</div>
</li>
<li><a href="/article/1705387560714448896.htm"
title="Web前端学习笔记09：移动web开发流式布局_flex布局" target="_blank">Web前端学习笔记09：移动web开发流式布局_flex布局</a>
JasonYangQ
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a>
<div>文章目录移动web开发流式布局1.0移动端基础1.1浏览器现状1.2手机屏幕的现状1.3移动端调试方法2.0视口2.1布局视口layoutviewport2.3理想视口idealviewport2.4meta标签3.0二倍图3.2背景缩放background-size4.0移动开发选择和技术解决方案4.2移动端技术解决方案4.3移动端大量使用CSS3盒子模型box-sizin4.4移动端特殊样式5</div>
</li>
<li><a href="/article/1698053315415322624.htm"
title="Web前端学习笔记14： Web APIs_DOM_元素_事件_排他操作_自定义属性_节点操作" target="_blank">Web前端学习笔记14： Web APIs_DOM_元素_事件_排他操作_自定义属性_节点操作</a>
JasonYangQ
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
<div>文章目录day01-WebAPIs1.1.WebAPI介绍1.1.1API的概念1.1.2WebAPI的概念1.1.3API和WebAPI总结1.2.DOM介绍1.2.1什么是DOM1.2.2.DOM树1.3.获取元素1.3.1.根据ID获取1.3.2.根据标签名获取元素1.3.3.H5新增获取元素方式1.3.4获取特殊元素（body，html）1.4.事件基础1.4.1.事件概述1.4.2.事件</div>
</li>
<li><a href="/article/1684793846820581376.htm"
title="Web前端学习笔记6（align-items，align-content，flex-flow，flex，align-self，order）" target="_blank">Web前端学习笔记6（align-items，align-content，flex-flow，flex，align-self，order）</a>
rootting
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>align-items让子盒子沿侧轴来对齐侧轴居中对齐：align-items:center;拉伸，子盒子不要给高度：align-items:stretch;div{display:flex;width:800px;height:400px;background-color:pink;flex-direction:column;/默认主轴为x轴/justify-content:center;/</div>
</li>
<li><a href="/article/1669463824899596288.htm"
title="Web前端学习笔记06：CSS_浮动_清除浮动_Photoshop 切图_定位" target="_blank">Web前端学习笔记06：CSS_浮动_清除浮动_Photoshop 切图_定位</a>
JasonYangQ
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a>
<div>文章目录1.浮动(float)目标1.1CSS布局的三种机制1.2为什么需要浮动？1.3什么是浮动(float)作用语法1).浮动口诀之浮2).浮动口诀之漏3).浮动口诀之特1.4浮动(float)小结1.5浮动(float)的应用（重要）浮动和标准流的父盒子搭配浮动应用案例导航栏案例1.6浮动(float)的扩展1).浮动元素与父盒子的关系2).浮动元素与兄弟盒子的关系2.清除浮动2.1为什么要</div>
</li>
<li><a href="/article/1669463825461633024.htm"
title="Web前端学习笔记07：CSS_高级技巧_定位" target="_blank">Web前端学习笔记07：CSS_高级技巧_定位</a>
JasonYangQ
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>文章目录CSS高级技巧1.元素的显示与隐藏1.1display显示（重点）1.2visibility可见性(了解)1.3overflow溢出(重点)1.4显示与隐藏总结2.CSS用户界面样式2.1鼠标样式cursor2.2轮廓线outline2.3防止拖拽文本域resize2.4用户界面样式总结3.vertical-align垂直对齐3.1图片、表单和文字对齐3.2去除图片底侧空白缝隙4.溢出的文</div>
</li>
<li><a href="/article/1645905195399471104.htm"
title="Web前端学习笔记02：HTML常用标签_标签属性_路径_表格" target="_blank">Web前端学习笔记02：HTML常用标签_标签属性_路径_表格</a>
JasonYangQ
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>文章目录1.HTML常用标签1.1排版标签1）标题标签h(熟记)2）段落标签p(熟记)3）水平线标签hr(认识)4）换行标签br(熟记)5）div和span标签(重点)排版标签总结1.2文本格式化标签(熟记)1.3标签属性1.4图像标签img(重点)1.5链接标签(重点)1.6注释标签团队约定2.路径(重点、难点)相对路径绝对路径3.今日总结4.综合案例：圣诞5.@拓展阅读5.1锚点定位（难点）5</div>
</li>
<li><a href="/article/1644514418194702336.htm"
title="Ajax笔记" target="_blank">Ajax笔记</a>
肥宅洛夫特斯基
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">web前端学习笔记</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a>
<div>title:Ajaxcategories:web前端学习笔记date:2022-03-0115:27:51tags:什么是AJAX？AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用AJAX）如果需要更新内容，必</div>
</li>
<li><a href="/article/1642848242590867456.htm"
title="web前端学习笔记——列表" target="_blank">web前端学习笔记——列表</a>
eliauk-123
<a class="tag" taget="_blank" href="/search/html%2Bcss/1.htm">html+css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%88%97%E8%A1%A8/1.htm">列表</a>
<div>对于一些内容相似、结构相似、样式相似的内容使用列表结构进行搭建一、无序列表标签：ulli（嵌套关系，ul>li）ul：unorderedlist,表示一个无序列表的大结构li：listitem，列表项，定义无序列表内的某一项列表项1列表项2列表项3列表项4效果：注：一个列表中可以有任意个列表项ul内部只能嵌套li，并且li标签不能脱离ul单独书写li标签是一个容器级标签，可以放置任何内容li标签之</div>
</li>
<li><a href="/article/1642847220623532032.htm"
title="Web前端学习笔记——HTML" target="_blank">Web前端学习笔记——HTML</a>
宇宙☆空间站
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>web前端开发基础第一章——HTML传送门：第二章：CSS|第三章：html5和CSS3|第四章：Javascript（part1）|第四章：Javascript（part2）目录web前端开发基础第一章——HTML概述一、html标题标签二、html段落标签、换行标签与字符实体1.html段落标签2.html换行标签3.html字符实体三、html块标签、含样式的标签1.html块标签2.含样式</div>
</li>
<li><a href="/article/1640750344369659904.htm"
title="【Web前端学习笔记】第三章 JavaScript常见使用方法" target="_blank">【Web前端学习笔记】第三章 JavaScript常见使用方法</a>
阿达斯加
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">学习笔记</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
<div>【Web前端学习笔记】第三章JavaScript常见使用方法文章目录【Web前端学习笔记】第三章JavaScript常见使用方法前言一、JavaScript是什么？二、JavaScript特点三、JavaScript常见使用方法变量数据类型运算符各种语句方法/函数DOM文档对象模型NaNJavaScript对象分类BOM浏览器对象模型DOM文档对象模型三、前端MVC设计模式四、Vue总结前言本文记</div>
</li>
<li><a href="/article/1626809347923300352.htm"
title="Web前端学习笔记，学习路线图，完整前端自学教程+工具+框架" target="_blank">Web前端学习笔记，学习路线图，完整前端自学教程+工具+框架</a>
web前端01

<div>问题釐清什麽是＂滚动条＂？滚动条指的是下图右侧被红线框起来的部分：在这里我还是要推荐下我自己建的web前端开发学习群：731669587，群里都是学web前端开发的，如果你正在学习前端，小编欢迎你加入，今天分享的这个案例已经上传到群文件，大家都是软件开发党，不定期分享干货（只有前端软件开发相关的），包括我自己整理的一份2018最新的前端进阶资料和高级开发教程，欢迎进阶中和进想深入前端的小伙伴。只要</div>
</li>
<li><a href="/article/1594199081457131520.htm"
title="Web前端学习笔记" target="_blank">Web前端学习笔记</a>
rrrrrhhh
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
<div>[声明]学习于【千锋教育_Web前端最全教程从入门到精通（HTML+CSS全套）-哔哩哔哩】1,了解HTML,CSS1.1什么是HTtMLHTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。[1</div>
</li>
<li><a href="/article/1543741475790065664.htm"
title="Web前端学习笔记15：Web前端开发：jQuery总结" target="_blank">Web前端学习笔记15：Web前端开发：jQuery总结</a>
JasonYangQ
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
<div>文章目录day01-jQuery1.1.jQuery介绍1.1.1JavaScript库1.1.2jQuery的概念1.1.3jQuery的优点1.2.jQuery的基本使用1.2.1jQuery的下载1.2.2.体验jQuery1.2.3.jQuery的入口函数1.2.4.jQuery中的顶级对象$1.2.5.jQuery对象和DOM对象1.2.6.jQuery对象和DOM对象转换1.3.jQu</div>
</li>
<li><a href="/article/1533244436778086400.htm"
title="Web前端学习笔记" target="_blank">Web前端学习笔记</a>
努力提升的小宇同学
<a class="tag" taget="_blank" href="/search/%E5%B0%8F%E5%AE%87%E7%9A%84%E7%AC%94%E8%AE%B0/1.htm">小宇的笔记</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>Web前端学习笔记2020-9-3整理2019-9月-19学完作者:小宇HTML基础知识互联网中的三大基石Html(HyperTextMarkupLanguage)超文件标记语言Http(HyperTextTransferProtocol)超文本传输协议Url(UniformResourceLocator)统一资源定位符HTML、CSS、JS之间的关系如果说HTML是肉身、CSS就是皮相、Java</div>
</li>
<li><a href="/article/1533036655148036096.htm"
title="Web前端学习笔记11：JavaScript_注释_输入输出_变量_数据类型_关键字_保留字_运算符_流程控制" target="_blank">Web前端学习笔记11：JavaScript_注释_输入输出_变量_数据类型_关键字_保留字_运算符_流程控制</a>
JasonYangQ
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>文章目录JavaScript基础第01天1-编程语言1.1编程1.2计算机语言1.3编程语言1.4翻译器1.5编程语言和标记语言区别总结2-计算机基础2.1计算机组成2.2数据存储2.3数据存储单位2.4程序运行3-初始JavaScript3.1JavaScript是什么3.2JavaScript的作用3.3HTML/CSS/JS的关系3.4浏览器执行JS简介3.5JS的组成**ECMAScrip</div>
</li>
<li><a href="/article/1451202150871941120.htm"
title="Web前端学习笔记20：Vue_路由_Vue Router_模块化的分类_babel_webpack_Element-UI" target="_blank">Web前端学习笔记20：Vue_路由_Vue Router_模块化的分类_babel_webpack_Element-UI</a>
JasonYangQ
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
<div>文章目录第一阶段学习1.路由的概念2.前端路由的初体验3.VueRouter简介4.VueRouter的使用步骤(★★★)5.嵌套路由，动态路由的实现方式A.嵌套路由的概念(★★★)B.动态路由匹配(★★★)7.命名路由以及编程式导航A.命名路由：给路由取别名B.编程式导航(★★★)8.实现后台管理案例(★★★)第二阶段学习1.模块化的分类A.浏览器端的模块化B.服务器端的模块化C.ES6模块化2</div>
</li>
<li><a href="/article/1385392096483037184.htm"
title="Web前端学习笔记：HTML5四部曲之二——HTML5块级标签、行级标签、结构标签" target="_blank">Web前端学习笔记：HTML5四部曲之二——HTML5块级标签、行级标签、结构标签</a>
余欲与鱼语渔

<div>1.块级标签与行级标签块级标签行级标签自动换行，前后隔一行不会自动换行，从左往右依次显示宽度默认是100%宽度由文字内容撑开可以设置宽度、高度、边距等属性不能设置上述属性标题、段落、列表、分区…图片、超链接2.块级标签块级标签，此类标签在网页中显示为块，一般独占一行。新的块级标签将从新的一行开始排列，它可以容纳内联元素和其他块级元素。2.1标题标签：＜h1＞＜/h1＞…＜h6＞＜/h6＞一级标题二</div>
</li>
<li><a href="/article/1356936467116535808.htm"
title="Web前端学习笔记——关于React" target="_blank">Web前端学习笔记——关于React</a>
是纽扣也是烤奶

<div>React：是一个声明式，高效且灵活的用于构建用户界面的JavaScript库。作用：可以将一些简短、独立的代码片段组合成复杂的UI界面即“组件”。特点：数据驱动视图原则创建react项目：在命令行下使用以下命令：create-react-app项目文件夹名称进入项目文件夹：cd项目文件夹名称开启服务：npmstart注意：遇到“Pleaseremoveanyglobalinstallswitho</div>
</li>
<li><a href="/article/1455405875568095232.htm"
title="web前端学习笔记——html5和CSS3" target="_blank">web前端学习笔记——html5和CSS3</a>
ujung_S2
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>web前端开发基础第三章——html5和CSS3传送门：第一章：HTML|第二章：CSS|第四章：Javascript（part1）|第四章：Javascript（part2）目录web前端开发基础第三章——html5和CSS3一、HTML5新增标签新增语义标签音频视频二.HTML5新增表单控件三、CSS权重四、CSS3新增选择器五、CSS3圆角、rgbaCSS3圆角rgba（新的颜色值表示法）六</div>
</li>
<li><a href="/article/1356577801397940224.htm"
title="Web前端学习笔记——CSS" target="_blank">Web前端学习笔记——CSS</a>
ujung_S2
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>web前端开发基础第二章——CSS传送门：第一章：HTML|第三章：html5和CSS3|第四章：Javascript（part1）|第四章：Javascript（part2）目录web前端开发基础第二章——CSS概述一、css基本语法及页面引用1.css基本语法2.css页面引入方法：二、css文本设置三、css颜色表示法四、css选择器1.标签选择器2.id选择器3.类选择器（应用最多）4.层</div>
</li>
<li><a href="/article/1356936339186069504.htm"
title="Web前端学习笔记——CSS部分" target="_blank">Web前端学习笔记——CSS部分</a>
是纽扣也是烤奶

<div>关于CSSCSS：用于描述页面展示的语言。CSS规则=选择器+声明块例如：选择器：选中元素，确定样式范围。选择器类型：基础选择器：复杂选择器：选择器权重值：声明冲突：同一样式（同一属性不同值）多次应用到同一元素。层叠：解决声明冲突的过程，即浏览器自动处理（权重计算）。比较重要性（由高到低）：作者样式表中的！important样式>作者样式表的普通样式>浏览器默认样式表中的样式（作者样式表：开发者书</div>
</li>
<li><a href="/article/1356936338758250496.htm"
title="Web前端学习笔记——HTML部分" target="_blank">Web前端学习笔记——HTML部分</a>
是纽扣也是烤奶

<div>关于HTMLHTML（HyperTextMarkupLanguage）：超文本标记语言。HTML的作用：由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，用于定义页面结构。元素=起始标签+元素内容+结束标签+[标签属性]标签属性=属性名称+属性值；属性分类：全局属性：所有标签通用。局部属性：某些标签所特有的。对于布尔属性，只有两种状态即不写或者取值只能为其属性名。（在HT</div>
</li>
<li><a href="/article/17.htm"
title="分享100个最新免费的高匿HTTP代理IP" target="_blank">分享100个最新免费的高匿HTTP代理IP</a>
mcj8089
<a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%90%86IP/1.htm">代理IP</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">代理服务器</a><a class="tag" taget="_blank" href="/search/%E5%8C%BF%E5%90%8D%E4%BB%A3%E7%90%86/1.htm">匿名代理</a><a class="tag" taget="_blank" href="/search/%E5%85%8D%E8%B4%B9%E4%BB%A3%E7%90%86IP/1.htm">免费代理IP</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E6%96%B0%E4%BB%A3%E7%90%86IP/1.htm">最新代理IP</a>
<div>
推荐两个代理IP网站：

1. 全网代理IP：http://proxy.goubanjia.com/

2. 敲代码免费IP：http://ip.qiaodm.com/

120.198.243.130:80,中国/广东省
58.251.78.71:8088,中国/广东省
183.207.228.22:83,中国/</div>
</li>
<li><a href="/article/144.htm"
title="mysql高级特性之数据分区" target="_blank">mysql高级特性之数据分区</a>
annan211
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%8C%BA/1.htm">分区</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div>

mysql高级特性
1 以存储引擎的角度分析，分区表和物理表没有区别。是按照一定的规则将数据分别存储的逻辑设计。器底层是由多个物理字表组成。

2 分区的原理
分区表由多个相关的底层表实现，这些底层表也是由句柄对象表示，所以我们可以直接访问各个分区。存储引擎管理分区的各个底层
表和管理普通表一样(所有底层表都必须使用相同的存储引擎)，分区表的索引只是</div>
</li>
<li><a href="/article/271.htm"
title="JS采用正则表达式简单获取URL地址栏参数" target="_blank">JS采用正则表达式简单获取URL地址栏参数</a>
chiangfai
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E5%9C%B0%E5%9D%80%E6%A0%8F%E5%8F%82%E6%95%B0%E8%8E%B7%E5%8F%96/1.htm">地址栏参数获取</a>
<div>GetUrlParam:function GetUrlParam(param){
var reg = new RegExp("(^|&)"+ param +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null</div>
</li>
<li><a href="/article/398.htm"
title="怎样将数据表拷贝到powerdesigner (本地数据库表)" target="_blank">怎样将数据表拷贝到powerdesigner (本地数据库表)</a>
Array_06
<a class="tag" taget="_blank" href="/search/powerDesigner/1.htm">powerDesigner</a>
<div>==================================================

1、打开PowerDesigner12，在菜单中按照如下方式进行操作
file->Reverse Engineer->DataBase
点击后，弹出 New Physical Data Model 的对话框
2、在General选项卡中
Model name:模板名字，自</div>
</li>
<li><a href="/article/525.htm"
title="logbackのhelloworld" target="_blank">logbackのhelloworld</a>
飞翔的马甲
<a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%BF%97/1.htm">日志</a><a class="tag" taget="_blank" href="/search/logback/1.htm">logback</a>
<div>一、概述

1.日志是啥？
当我是个逗比的时候我是这么理解的：log.debug()代替了system.out.print();
当我项目工作时，以为是一堆得.log文件。
这两天项目发布新版本，比较轻松，决定好好地研究下日志以及logback。
传送门1：日志的作用与方法：
http://www.infoq.com/cn/articles/why-and-how-log
上面的作</div>
</li>
<li><a href="/article/652.htm"
title="新浪微博爬虫模拟登陆" target="_blank">新浪微博爬虫模拟登陆</a>
随意而生
<a class="tag" taget="_blank" href="/search/%E6%96%B0%E6%B5%AA%E5%BE%AE%E5%8D%9A/1.htm">新浪微博</a>
<div>转载自：http://hi.baidu.com/erliang20088/item/251db4b040b8ce58ba0e1235

近来由于毕设需要，重新修改了新浪微博爬虫废了不少劲，希望下边的总结能够帮助后来的同学们。
 现行版的模拟登陆与以前相比，最大的改动在于cookie获取时候的模拟url的请求</div>
</li>
<li><a href="/article/779.htm"
title="synchronized" target="_blank">synchronized</a>
香水浓
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a>
<div> Java语言的关键字，可用来给对象和方法或者代码块加锁，当它锁定一个方法或者一个代码块的时候，同一时刻最多只有一个线程执行这段代码。当两个并发线程访问同一个对象object中的这个加锁同步代码块时，一个时间内只能有一个线程得到执行。另一个线程必须等待当前线程执行完这个代码块以后才能执行该代码块。然而，当一个线程访问object的一个加锁代码块时，另一个线程仍然</div>
</li>
<li><a href="/article/906.htm"
title="maven 简单实用教程" target="_blank">maven 简单实用教程</a>
AdyZhang
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
<div>1. Maven介绍 1.1. 简介 java编写的用于构建系统的自动化工具。目前版本是2.0.9，注意maven2和maven1有很大区别，阅读第三方文档时需要区分版本。 1.2. Maven资源见官方网站；The 5 minute test，官方简易入门文档；Getting Started Tutorial，官方入门文档；Build Coo</div>
</li>
<li><a href="/article/1033.htm"
title="Android 通过 intent传值获得null" target="_blank">Android 通过 intent传值获得null</a>
aijuans
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
<div>我在通过intent 获得传递兑现过的时候报错，空指针,我是getMap方法进行传值，代码如下 1 2 3 4 5 6 7 8 9
public
void
getMap(View view){

Intent i =</div>
</li>
<li><a href="/article/1160.htm"
title="apache 做代理报如下错误：The proxy server received an invalid response from an upstream" target="_blank">apache 做代理报如下错误：The proxy server received an invalid response from an upstream</a>
baalwolf
<a class="tag" taget="_blank" href="/search/response/1.htm">response</a>
<div>网站配置是apache＋tomcat,tomcat没有报错，apache报错是：
The proxy server received an invalid response from an upstream server. The proxy server could not handle the request GET /. Reason: Error reading fr</div>
</li>
<li><a href="/article/1287.htm"
title="Tomcat6 内存和线程配置" target="_blank">Tomcat6 内存和线程配置</a>
BigBird2012
<a class="tag" taget="_blank" href="/search/tomcat6/1.htm">tomcat6</a>
<div>1、修改启动时内存参数、并指定JVM时区（在windows server 2008 下时间少了8个小时）
在Tomcat上运行j2ee项目代码时，经常会出现内存溢出的情况，解决办法是在系统参数中增加系统参数：
window下，在catalina.bat最前面
set JAVA_OPTS=-XX:PermSize=64M -XX:MaxPermSize=128m -Xms5</div>
</li>
<li><a href="/article/1414.htm"
title="Karam与TDD" target="_blank">Karam与TDD</a>
bijian1013
<a class="tag" taget="_blank" href="/search/Karam/1.htm">Karam</a><a class="tag" taget="_blank" href="/search/TDD/1.htm">TDD</a>
<div>一.TDD
测试驱动开发（Test-Driven Development,TDD）是一种敏捷（AGILE）开发方法论，它把开发流程倒转了过来，在进行代码实现之前，首先保证编写测试用例，从而用测试来驱动开发（而不是把测试作为一项验证工具来使用）。
TDD的原则很简单：
a.只有当某个</div>
</li>
<li><a href="/article/1541.htm"
title="[Zookeeper学习笔记之七]Zookeeper源代码分析之Zookeeper.States" target="_blank">[Zookeeper学习笔记之七]Zookeeper源代码分析之Zookeeper.States</a>
bit1129
<a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a>
<div> public enum States {
CONNECTING, //Zookeeper服务器不可用，客户端处于尝试链接状态
ASSOCIATING, //？？？
CONNECTED, //链接建立，可以与Zookeeper服务器正常通信
CONNECTEDREADONLY, //处于只读状态的链接状态，只读模式可以在</div>
</li>
<li><a href="/article/1668.htm"
title="【Scala十四】Scala核心八：闭包" target="_blank">【Scala十四】Scala核心八：闭包</a>
bit1129
<a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a>
<div>Free variable A free variable of an expression is a variable that’s used inside the expression but not defined inside the expression. For instance, in the function literal expression (x: Int) => (x</div>
</li>
<li><a href="/article/1795.htm"
title="android发送json并解析返回json" target="_blank">android发送json并解析返回json</a>
ronin47
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
<div>package com.http.test;

import org.apache.http.HttpResponse;
import org.apache.http.HttpStatus;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import </div>
</li>
<li><a href="/article/1922.htm"
title="一份IT实习生的总结" target="_blank">一份IT实习生的总结</a>
brotherlamp
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/php%E8%B5%84%E6%96%99/1.htm">php资料</a><a class="tag" taget="_blank" href="/search/php%E6%95%99%E7%A8%8B/1.htm">php教程</a><a class="tag" taget="_blank" href="/search/php%E5%9F%B9%E8%AE%AD/1.htm">php培训</a><a class="tag" taget="_blank" href="/search/php%E8%A7%86%E9%A2%91/1.htm">php视频</a>
<div>今天突然发现在不知不觉中自己已经实习了 3 个月了，现在可能不算是真正意义上的实习吧，因为现在自己才大三，在这边撸代码的同时还要考虑到学校的功课跟期末考试。让我震惊的是，我完全想不到在这 3 个月里我到底学到了什么，这是一件多么悲催的事情啊。同时我对我应该 get 到什么新技能也很迷茫。所以今晚还是总结下把，让自己在接下来的实习生活有更加明确的方向。最后感谢工作室给我们几个人这个机会让我们提前出来</div>
</li>
<li><a href="/article/2049.htm"
title="据说是2012年10月人人网校招的一道笔试题-给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。将重物放到天平左侧，问在两边如何添加砝码" target="_blank">据说是2012年10月人人网校招的一道笔试题-给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。将重物放到天平左侧，问在两边如何添加砝码</a>
bylijinnan
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>
public class ScalesBalance {

/**
* 题目：
* 给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。（假设N无限大，但一种重量的砝码只有一个）
* 将重物放到天平左侧，问在两边如何添加砝码使两边平衡
*
* 分析：
* 三进制
* 我们约定括号表示里面的数是三进制，例如 47=(1202</div>
</li>
<li><a href="/article/2176.htm"
title="dom4j最常用最简单的方法" target="_blank">dom4j最常用最简单的方法</a>
chiangfai
<a class="tag" taget="_blank" href="/search/dom4j/1.htm">dom4j</a>
<div>要使用dom4j读写XML文档,需要先下载dom4j包,dom4j官方网站在 http://www.dom4j.org/目前最新dom4j包下载地址:http://nchc.dl.sourceforge.net/sourceforge/dom4j/dom4j-1.6.1.zip
解开后有两个包,仅操作XML文档的话把dom4j-1.6.1.jar加入工程就可以了,如果需要使用XPath的话还需要</div>
</li>
<li><a href="/article/2303.htm"
title="简单HBase笔记" target="_blank">简单HBase笔记</a>
chenchao051
<a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a>
<div> 一、Client-side write buffer 客户端缓存请求描述：可以缓存客户端的请求，以此来减少RPC的次数，但是缓存只是被存在一个ArrayList中，所以多线程访问时不安全的。可以使用getWriteBuffer()方法来取得客户端缓存中的数据。默认关闭。二、Scan的Caching 描述： next( )方法请求一行就要使用一次RPC,即使</div>
</li>
<li><a href="/article/2430.htm"
title="mysqldump导出时出现when doing LOCK TABLES" target="_blank">mysqldump导出时出现when doing LOCK TABLES</a>
daizj
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/mysqdump/1.htm">mysqdump</a><a class="tag" taget="_blank" href="/search/%E5%AF%BC%E6%95%B0%E6%8D%AE/1.htm">导数据</a>
<div>　　执行　mysqldump -uxxx -pxxx -hxxx -Pxxxx database tablename > tablename.sql　
导出表时，会报

mysqldump: Got error: 1044: Access denied for user 'xxx'@'xxx' to database 'xxx' when doing LOCK TABLES

解决</div>
</li>
<li><a href="/article/2557.htm"
title="CSS渲染原理" target="_blank">CSS渲染原理</a>
dcj3sjt126com
<a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a>
<div> 从事Web前端开发的人都与CSS打交道很多，有的人也许不知道css是怎么去工作的，写出来的css浏览器是怎么样去解析的呢？当这个成为我们提高css水平的一个瓶颈时，是否应该多了解一下呢？

一、浏览器的发展与CSS

</div>
</li>
<li><a href="/article/2684.htm"
title="《阿甘正传》台词" target="_blank">《阿甘正传》台词</a>
dcj3sjt126com

<div>Part Ⅰ:
《阿甘正传》Forrest Gump经典中英文对白
Forrest: Hello! My names Forrest. Forrest Gump. You wanna Chocolate? I could eat about a million and a half othese. My momma always said life was like a box ochocol</div>
</li>
<li><a href="/article/2811.htm"
title="Java处理JSON" target="_blank">Java处理JSON</a>
dyy_gusi
<a class="tag" taget="_blank" href="/search/json/1.htm">json</a>
<div>Json在数据传输中很好用，原因是JSON 比 XML 更小、更快，更易解析。
在Java程序中，如何使用处理JSON，现在有很多工具可以处理，比较流行常用的是google的gson和alibaba的fastjson，具体使用如下：
1、读取json然后处理
class ReadJSON
{
public static void main(String[] args)
</div>
</li>
<li><a href="/article/2938.htm"
title="win7下nginx和php的配置" target="_blank">win7下nginx和php的配置</a>
geeksun
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a>
<div>1. 安装包准备
nginx : 从nginx.org下载nginx-1.8.0.zip
php：从php.net下载php-5.6.10-Win32-VC11-x64.zip， php是免安装文件。
RunHiddenConsole: 用于隐藏命令行窗口

2. 配置
# java用8080端口做应用服务器，nginx反向代理到这个端口即可
p</div>
</li>
<li><a href="/article/3065.htm"
title="基于2.8版本redis配置文件中文解释" target="_blank">基于2.8版本redis配置文件中文解释</a>
hongtoushizi
<a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a>
<div>转载自： http://wangwei007.blog.51cto.com/68019/1548167
在Redis中直接启动redis-server服务时, 采用的是默认的配置文件。采用redis-server xxx.conf 这样的方式可以按照指定的配置文件来运行Redis服务。下面是Redis2.8.9的配置文</div>
</li>
<li><a href="/article/3192.htm"
title="第五章常用Lua开发库3-模板渲染" target="_blank">第五章常用Lua开发库3-模板渲染</a>
jinnianshilongnian
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/lua/1.htm">lua</a>
<div>动态web网页开发是Web开发中一个常见的场景，比如像京东商品详情页，其页面逻辑是非常复杂的，需要使用模板技术来实现。而Lua中也有许多模板引擎，如目前我在使用的lua-resty-template，可以渲染很复杂的页面，借助LuaJIT其性能也是可以接受的。

如果学习过JavaEE中的servlet和JSP的话，应该知道JSP模板最终会被翻译成Servlet来执行；而lua-r</div>
</li>
<li><a href="/article/3319.htm"
title="JZSearch大数据搜索引擎" target="_blank">JZSearch大数据搜索引擎</a>
颠覆者
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
<div>系统简介：

大数据的特点有四个层面：第一，数据体量巨大。从TB级别，跃升到PB级别；第二，数据类型繁多。网络日志、视频、图片、地理位置信息等等。第三，价值密度低。以视频为例，连续不间断监控过程中，可能有用的数据仅仅有一两秒。第四，处理速度快。最后这一点也是和传统的数据挖掘技术有着本质的不同。业界将其归纳为4个“V”——Volume，Variety，Value，Velocity。大数据搜索引</div>
</li>
<li><a href="/article/3446.htm"
title="10招让你成为杰出的Java程序员" target="_blank">10招让你成为杰出的Java程序员</a>
pda158
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a>
<div>如果你是一个热衷于技术的
Java 程序员，那么下面的 10 个要点可以让你在众多 Java 开发人员中脱颖而出。　　
1. 拥有扎实的基础和深刻理解 OO 原则　　对于 Java 程序员，深刻理解 Object Oriented Programming（面向对象编程）这一概念是必须的。没有 OOPS 的坚实基础，就领会不了像 Java 这些面向对象编程语言</div>
</li>
<li><a href="/article/3573.htm"
title="tomcat之oracle连接池配置" target="_blank">tomcat之oracle连接池配置</a>
小网客
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a>
<div>tomcat版本7.0
配置oracle连接池方式：
修改tomcat的server.xml配置文件：
<GlobalNamingResources>

<Resource name="utermdatasource" auth="Container"
type="javax.sql.DataSou</div>
</li>
<li><a href="/article/3700.htm"
title="Oracle 分页算法汇总" target="_blank">Oracle 分页算法汇总</a>
vipbooks
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a>
<div> 这是我找到的一些关于Oracle分页的算法，大家那里还有没有其他好的算法没？我们大家一起分享一下！

-- Oracle 分页算法一
select * from (
select page.,rownum rn from (select from help) page
-- 20 = (currentPag</div>
</li>
</ul>
</div>
</div>
</div>

<div>
<div class="container">
<div class="indexes">
按字母分类：
<a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
</div>
</div>
</div>
<footer id="footer" class="mb30 mt30">
<div class="container">
<div class="footBglm">
<a target="_blank" href="/">首页</a> -
<a target="_blank" href="/custom/about.htm">关于我们</a> -
<a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
<a target="_blank" href="/sitemap.txt">Sitemap</a> -
<a target="_blank" href="/custom/delete.htm">侵权投诉</a>
</div>
<div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.

</div>
</div>
</footer>

<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>

</body>

</html>}}