大学论坛大全,消失的爱人迅雷下载,百性阁交通工具
htyper text markup language 即超文本标记语言 超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 标记语言: 标记（标签）构成的语言. 网页==html文档，由浏览器解析，用来展示的 静态网页：静态的资源，如xxx.html
动态网页：html代码是由某种开发语言根据用户请求动态生成的
标签:
标签的属性:
<!doctype html>标签:w3c的解析渲染页面标准
head标签:
<meta>
我要评论
每个主要版本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 模式）显示该网页。
<title>sb</title>
<link rel="icon" href="http://www.jd.com/favicon.ico">
<link rel="stylesheet" href="css.css">
<script src="hello.js"></script>
body标签:
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题. <p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. <b> <strong>: 加粗标签. <strike>: 为文字加上一条中线. <em>: 文字变成斜体. <sup>和<sub>: 上角标 和 下角表. <br>:换行. <hr>:水平线 <div><span>
块级标签：<p><h1><table><ol><ul><form><div>
内联标签：<a><input><img><sub><sup><textarea><span>
block（块）元素：
inline元素：
特殊字符
< >；"；©®
href:要连接的资源路径 格式如下: href="http://www.baidu.com" target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容. name: 定义一个页面的书签. 用于跳转 href : #id.（锚）
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
<tr>: table row
<th>: table head cell
<td>: table data cell
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
<th>: table header <tbody>(不常用): 为表格进行分区.表单用于向服务器传输数据。
表单能够包含 ，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含、select、和 。
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> 标签的属性和对应值
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都好使.
<select> 下拉选标签属性
<textarea> 文本域
name: 表单提交项的键.
cols: 文本域默认有多少列
rows: 文本域默认有多少行
<label>
<label for="www">姓名</label>
<input id="www" type="text">
<fieldset>
<fieldset>
<legend>登录</legend>
<input type="text">
</fieldset>
二、csscss是cascading style sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。
引入方式:
1.行内式
<p style="background-color: rebeccapurple">hello yuan</p>
2.嵌入式
<head>
<meta charset="utf-8">
<title>title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>3 链接式
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4.导入式
<style type="text/css">
@import"mystyle.css"; 此处要注意.css文件的路径
</style>css的选择器:
＊ ： 通用元素选择器，匹配任何元素 * { 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; }
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; }
嵌套规则：
块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
li内可以包含div
块级元素与块级元素并列、内联元素与内联元素并列
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;}
伪类(pseudo-classes)
css伪类是用来给选择器添加一些特殊效果。
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代码; }: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}
css优先级，是指css样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是： 1 内联样式表的权值最高 style=""-------------------1000；
2 统计选择符中的id属性个数。 #id －－－－－－－－－－－－－100 3 统计选择符中的class属性个数。 .class －－－－－－－－－－－－－10 4 统计选择符中的html标签名个数。 p
－－－－－－－－－－－－－-1
继承是css的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代.
有一些属性不能被继承，如：border, margin, padding, background等。
常用属性:
<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')">如果将背景属性加在body上，要给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片；
float属性:
文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
只有绝对定位absolute和浮动float才会脱离文档流。
定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的浮动框之后的块框表现得就像浮动框不存在一样。（注意这里是块框而不是内联元素；浮动框只对它后面的元素造成影响）
注意 float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是float的特性，即float是一种不彻底的脱离文档流方式。无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。
在非ie浏览器（如firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的css处理，就叫css清除浮动。
clear语法： clear : none | left | right | both 取值： none : 默认值。允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。
position(定位):
relative 相对定位。相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后top、right、bottom、left用百分比宽度表示。
对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
javascript 实现是由以下 3 个不同部分组成的：
ecmascript 标准描述了以下内容：
语法、类型 、语句 、关键字 、保留字 、运算符 、对象 (封装 继承 多态) 基于对象的语言.使用对象。
undefined 类型 undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。 当函数无明确返回值时，返回的也是值 "undefined"; null 类型 另一种只有一个值的类型是 null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ecmascript 把它们定义为相等的。 尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。 var person=new person() var person=null
javascript属于松散类型的程序语言 变量在声明的时候并不需要指定数据类型 变量只有在赋值的时候才会确定数据类型 表达式中包含不同类型数据则在计算过程中会强制进行类别转换 数字 + 字符串：数字转换为字符串 数字 + 布尔值：true转换为1，false转换为0 字符串 + 布尔值：布尔值转换为字符串true或false
逻辑 and 运算符(&&)
逻辑 and 运算的运算数可以是任何类型的，不止是 boolean 值。
如果某个运算数不是原始的 boolean 型值，逻辑 and 运算并不一定返回 boolean 值：
如果某个运算数是 null，返回 null。
如果某个运算数是 nan，返回 nan。
如果某个运算数是 undefined，返回undefined。
逻辑 or 运算符(||)
与逻辑 and 运算符相似，如果某个运算数不是 boolean 值，逻辑 or 运算并不一定返回 boolean 值异常处理
try {
//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
//e是一个局部变量，用来指向error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}
注：主动抛出异常 throw error('xxxx')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>
在javascript中，函数也是对象，实际上，javascript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供javascript引擎访问的内部属性。其中一个内部属性是[[scope]]，由ecma-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。
bom对象：
bom（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 bom，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
window对象
所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setinterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearinterval() 取消由 setinterval() 设置的 timeout。
settimeout() 在指定的毫秒数后调用函数或计算表达式。
cleartimeout() 取消由 settimeout() 方法设置的 timeout。
scrollto() 把内容滚动到指定的坐标。
history 对象包含用户（在浏览器窗口中）访问过的 url。
history 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
length 返回浏览器历史列表中的 url 数量。 back() 加载 history 列表中的前一个 url。 forward() 加载 history 列表中的下一个 url。 go() 加载 history 列表中的某个具体页面
location 对象包含有关当前 url 的信息。
location 对象是 window 对象的一个部分，可通过 window.location 属性来访问。
location.assign(url) location.reload() location.replace(newurl)//注意与assign的区别
dom对象(dhtml)
dom 是 w3c（万维网联盟）的标准。dom 定义了访问 html 和 xml 文档的标准：
w3c dom 标准被分为 3 个不同的部分：
dom 节点 ：
根据 w3c 的 html dom 标准，html 文档中的所有内容都是节点(node)：
节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
访问 html 元素（节点）,访问 html 元素等同于访问节点,我们能够以不同的方式来访问 html 元素：
页面查找：
<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>html dom event(事件)：
html 4.0 有能力使 html 事件触发浏览器中的动作（action）
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 //练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseleave 鼠标从元素离开 onselect 文本被选中。 onsubmit 确认按钮被点击。
<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>改变 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
<!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>
<!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>
<!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>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<select id="provinces">
<option value="">请选择省份</option>
<!-- <option value="">北京</option>-->
<!-- <option value="">河南</option>-->
<!-- <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>
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();
$("#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].innerhtmljquery的基础语法：$(selector).action()
<!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>
<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//创建一个标签对象
$("<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]])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])页面载入
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)
<!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>
<!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>
<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>定义一个jquery插件，首先要把这个插件的代码放在一个不受外界干扰的地方，要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论