HTML,CSS,JS,JQuery学习笔记
码农天地 -
HTML(Hyper Text Markup Language): 超文本标记语言
超文本：超级文本（文本、图片、视频、音频等）
标记(标签/元素/节点)：就是由尖括号括起来的一组内容
<html> <div> <img>等
就是用于开发网页的最基础的语言关于HTML需要注意的是:
1) 通过HTML开发的网页文件通常是以 .htm 或 .html为后缀
2) 通过HTML开发的网页文件由浏览器负责解析并显示
3) HTML本质就是一个文档(txt,word,html,ppt)1.2.1.例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页</title>
</head>
<body>
</body>
</html>1.2.2.HTML结构详解
(1)<!DOCTYPE html> 文档声明, 用来声明HTML文档所遵循的HTML规范和版本 上面是html5.0的声明, 也是目前最常用的版本
(2) <html></html>根标签, 用于包裹所有的网页内容(除了文档声明)
(2)<head></head> 头部分, 用来存放HTML文档的基本属性信息, 比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载.
(3) <body></body>体部分, 用来存放可视化的网页内容. 即真正的网页数据
(4)<title> </title>声明网页的标题
(5) <meta charset="utf-8">用来通知浏览器使用哪一个编码来打开HTML文档, 这个编码一定要和文件保存时的编码保持一致, 才不会出现中文乱码问题.1.3.1、html标签
标签：也叫做标记、元素等，标签分为开始标签，例如：
<head>、<body>和结束标签，例如:
</head>、</body>开始标签和结束标签之间还可以包含其他内容。
<head>
<titile>声明网页的标题</title>
<meta charset="utf-8">
</head>有些标签开始标签和结束标签之间没有内容要包裹，通常可以写成自闭标签，例如：
<br/> <hr/> <input/> <img/> <link/>等1.3.2、html属性
在标签上可以声明属性(属性不能独立存在,必须声明在标签上)
<div id="d1" >这是一个div元素</div>标签上可以声明多个属性，多个属性之间用空格分隔
标签上的属性的值可以使用单引号或者双引号引起来
<meta charset="UTF-8" id="m1">
<meta charset='UTF-8' id='m1'>1.3.3、html注释
格式: <!-- 注释内容 -->
注释的作用:
(1)为代码添加解释说明
(2)将一些暂时不需要执行的代码注释
浏览器对于html注释中的内容不会解析，也不会显示！
1.3.4、html空格和换行
在浏览器中，多个连续的空白字符（空格、制表符tab、换行）会被浏览器显示为一个空格。那么：
如何在网页中做一个换行：可以使用 <br/> 标签做换行
如何在网页中做一个空格：可以使用 或 做空格
补充: HTML中是不区分大小写的！
HTML中对语法要求非常不严格！（比如大小写混用，或者标签只有开始没有结束，或者标签的不合理嵌套），但是我们在书写HTML时要按照规范来写。
2.HTML标签2.1.图像标签:<img src="指定图片的地址" alt="代替图片显示的文本" width="图片的宽度" height="图片的高度"/>
注意: 不推荐写带盘符的绝对路径,因为将来项目发布,位置会改变,到时还要修改图片的路径
./ 表示当前目录(当前文件所在的目录)(可省略)
../ 表示当前目录的上一级目录里(也就是当前目录的父目录)
../../ 表示当前目录的上一级目录的上一级目录(也就是当前目录的父目录的父目 录)超链接就是a标签，通过a标签可以在网页中创建指向另外一个文档的超链接 点击超链接可以跳转到另外一个网页(图片/下载路径等)
<a href="指定点击超链接后将会跳转到的地址" target="_self|_blank">这里可以包裹文本或图片</a>其中 href 属性用于指定点击超链接后将要跳转到的URL地址
target属性用于指定以何种方式打开超链接
_self：默认值, 表示在当前窗口中打开超链接
_blank：表示在新的窗口中打开超链接
2.3.表格标签:table:定义一个表格
tr(table(表格) row(行)): 定义表格中的行
td(table data cell): 定义表格中的单元格
th(table header cell): 用于定义表头中的单元格,其中的文本默认加粗并居中表单的作用:
用于向服务器提交数据, 此外在超链接或者url地址的后面拼接参数也可以向服务器提交数据!
向服务器提交数据的两种方式：
(1)通过表单向服务器提交数据
<form action="url地址" method="提交方式"></form>
action属性:指定表单的提交地址
method(方法)属性:指定提交方法,常用的提交方式为GET和POST,若不指定提交方式,默认为GET方式.(2)通过超链接向服务器提交数据
http://www.baidu.com?username=张三&pwd=123&like=篮球
<a href="http://www.baidu.com?username=张三&pwd=123&like=篮球" target="_blank">百度一下,你就不知道!</a>在地址栏URL地址的后面通过问号(?)可以拼接参数，参数可以有多个，多个参数之间用&分隔，参数还分为参数名（例如：username/pwd/like）以及参数值(例如:张三/123/篮球)，在回车后访问百度服务器的同时，就可以将问号后面拼接的参数一并带给百度服务器。
1、input元素：
(1)普通文本输入框(比如:用户名/昵称/邮箱/验证码等)
<input type="text" name="username"/>(2)密码输入框(比如:密码/确认密码等)
input type="password" name="pwd"/>(3)单选框(比如:性别/部门等)
<input type="radio" name="gender"/>男(4)复选框/多选框(比如:爱好/岗位等)
<input type="checkbox" name="like"/>(5)普通按钮(比如:换一张图片)
<input type="button" value="换一张"/>
普通按钮本身没有功能,但我们可以通过js为按钮添加功能或添加行为~~~~(6)提交按钮(比如:提交/注册/登录)
<input type="submit" value="提交/注册/登录"/>
提交按钮用于提交表单中的数据到服务器中!2、select、option标签：
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select>select用于定义一个下拉选框
option用于定义下拉选框上的选项
selected设置当前option选项默认被选中
3、textarea多行文本输入区域：
<textarea name="description" cols="30" rows="5"
placeholder="请输入描述信息..."></textarea>cols属性: 用于设置文本输入框的列数(宽度)
rows属性: 用于设置文本输入框的行数(高度)
placeholder属性: 设置输入框中的提示消息!
3.表单细节问题3.1、提交表单时，表单中的数据为什么没有被提交？
对于表单中的表单项标签，只要是需要向服务器提交数据，该表单项上必须添加name属性；如果表单项标签上没有name属性，在表单提交时，该项将会被忽略。例如：
<input type="text" name="username"/>
<input type="password" name="psw"/>3.2、如何让多个单选框只能有一个被选中？
要求多个单选框必须具有相同的name属性值，如果多个单选框name属性值相同，则说明是一个组的内容，一个组中的单选框只能选择其中的一个！
<td>性别:</td>
<td>
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
</td>3.3、为什么单选框、复选框选择某一项后提交的值都是on?
因为单选框、复选框只能选择，不同于用户名、密码输入框，可以输入内容。
因此我们需要通过value属性为单选框或复选框设置提交的值(如果不设置默认值都是on)，例如：
<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女3.4、如何设置单选框或复选框默认选中某一项?
可以在单选框或复选框标签上添加一个checked="checked"属性，就可以让当前单选框或复选框默认被选中。例如：
<input type="radio" checked="checked" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女
<!-- 爱好复选框/多选框 -->
<input type="checkbox" name="like" value="basketball"/>篮球
<input type="checkbox" checked="checked" name="like" value="football"/>足球
<input type="checkbox" name="like" value="volleyball"/>排球3.5、如何设置下拉选框默认选中某一项?
在option标签上添加一个selected="selected"属性，可以让当前option选项默认被选中，例：
<select name="city">
<option>北京</option>
<option>上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select>3.6、下拉选框中option选项上的value属性的作用是什么？
如果某一个选项被选中，并且该选项上添加了value属性，在提交表单时，将会提交value属性的值。
如果某一个选项被选中，该选项上没有添加value属性，在提交表单时，将会提交标签中的内容
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option selected="selected">广州</option>
<option>深圳</option>
</select>3.7、音频,视频标签
音频标签:
audio{
border-radius: 20px; 设置圆角边框
}
audio:focus{ /* 获取焦点audio元素 _/
/_ 设置元素的外围(包在边框外的线) */
outline: none;
}
<audio autoplay="autoplay" controls="controls" src="音频文件url地址"></audio>
autoplay="autoplay" 页面加载完毕后自动播放
controls属性:为用户添加播放,暂停,音量控制等插件视频标签:
audio{
border-radius: 20px; 设置圆角边框
}
video:focus{ /* 获取焦点audio元素 _/
/_ 设置元素的外围(包在边框外的线) */
outline: none;
}
<video controls="controls" src="视频文件"></video>
autoplay="autoplay" 页面加载完毕后自动播放
controls属性:为用户添加播放,暂停,音量控制等插件div/span/p 都是一个容器标签，用于包裹其他内容（这些元素本身不具备太多的样式！）
p: 块级元素，默认独占一行，用于包裹一段文本（写文章时用于p标签包裹每一段内容）
div: 块级元素，默认独占一行，用于包裹其他内容，将样式设置在div上，就可以作用在div的内容上。
span：行内元素，默认可以和其他元素显示在同一行。 同是行内元素的还有:b,i,u,input,img(这两个可以设置宽高)
(1)块级元素（block）
默认情况下，块级元素独占一行
可以设置宽和高，如果设置了就是设置的宽和高
如果不设置宽和高，其中宽是默认填满父元素，而高是由内容决定(由内容支撑)
比如: div/p/h1~h6/form/table/div/p 等元素都是块级元素
(2)行内元素（inline）
默认情况下，多个行内元素可以处在同一行
不能设置宽和高
比如: span/input/img/i/b 等元素都是行内元素
(3)行内块元素（inline-block）
既具备行内元素的特征(可以同行显示)，还具备块级元素的特征(可以设置宽和高)
二.CSS1.css概述?CSS:层叠样式表,是用于美化,渲染网页的一门语言和传统的html标签属性设置样式相比,使用CSS设置样式可以实线:将展示数据的html代码和设置样式的CSS代码进行分离,可以增强网页的展示能力.
2.CSS的三大特性2.1.层叠性是指多种CSS样式的叠加,是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉.
一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准.
1.样式冲突,遵循的原则是就近原则.那个样式离结构近,就执行那个样式.
2.样式不冲突,不会层叠
所谓的继承性是指书写CSS样式表时,子标签会集成父标签的某些样式.
注意:恰当的使用继承可以简化代码,降低CSS样式的复杂性.子元素可以继承父元素的样式(text- , font- , line- 这些元素开头的都可以继承,以及color属性)
2.3.优先级关系定义CSS样式时,经常出现两个或更多规则应用在同意元素上,这时就会出现优先级的问题.
优先级: !important>内联样式(1000)> id选择器(100)>class选择器(10)>元素名选择器(1)>通用选择器>继承(0)>默认如果一个选择器中包含多个选择器类别,可以通过权重值相加,权重值大的优先级高如果权重值相同,书写在后面的会覆盖前面的.
权重形同时,CSS遵循就近原则.也就是说靠近元素的样式具有最大的优先级,或者说排在最后面的样式优先级最大.
3.引入CSS3.1.引入CSS方式一在标签上添加一个style属性,在style属性内部,可以设置css样式,例如:
<div >
这是一个div...
</div>当css代码特别多时,容易造成页面结构的混乱,而且代码无法复用，不利于后期的扩展和维护。这种方式不推荐使用!
3.2.引入CSS方式二在head标签内部添加一个style标签,在style标签内部可以添加CSS样式.
<head>
<style>
/* ****** CSS样式 ****** */
span{ /* 选中所有的span元素 */
border: 2px solid green;
font-size: 30px;
font-weight: bolder;
}
<style>
</head>这种方式没有把css样式代码直接写在标签上,而是写在一个style标签内部统 一管理,不会造成页面代码的混乱. 而且这种方式实现了代码的复用!
不推荐大量使用!
将所有的CSS代码写在一个 xxx.css 文件中,在需要使用这些样式的html中, 引入这个css文件即可!
<link rel="stylesheet" href="demo.css"/>这种方式是将所有的css代码放在一个css文件中统一进行管理,没有造成页面结构的混乱,也实现了代码的复用.真正的实现了将css代码和html代码进行分离!
4.CSS选择器所谓的选择器,就是可以帮我们在HTML中选中指定元素
4.1.元素名/标签名选择器div{ } -- 选中所有的div元素并设置样式
span{ } -- 选中所有的span元素并设置样式.c1{ } -- 选中所有class值为c1的元素并为这些元素设置样式
<div ></div>
<span ></span>
<p ></p>另外,一个标签可以设置多个class属性值(),多个class值之间用空格隔开表示当前标签同时属于多个分组,多个分组设置的样式也会同时作用在这个标签上.
4.3.id选择器id值在整个html中应该是独一无二的!
#div1{ } -- 选中id值为div1的元素
<div id="div1"></div>span{ } -- 选中当前html中的所有span元素
div span{ } -- 选中div内部的所有span元素
div,span{ } -- 选中当前html中的所有的div元素以及所有的span元素
<div>
<span></span>
</div>
<span></span> input[type='text']{ } -- 选中所有type='text'的input元素,也就是文本输入框
input[type='checkbox']{ } -- 选中所有type='checkbox'的input元素,也就是复选框
input[type='radio']{ } -- 选中所有type='checkbox'的input元素,也就是单选框
div[id]{ } -- 选中所有具有id属性的div元素1.text-align: 设置元素内部的文本水平排列方式
left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐2.text-indent: 5px 设置元素内部文本首行缩进,单位: 像素/百分比
3.text-decoration：设置文本的下划线样式，其常用取值为:
underline: 有下划线
none: 没有下划线4.letter-spacing：设置字符间隔/间距，其常用取值为:
normal:像素值5.text-shadow：设置字体阴影，其取值为:
text-shadow: 设置文本的阴影
5px 5px 5px #000;
第1个值:设置阴影的水平偏移位置(值越大向右)
第2个值:设置阴影的垂直偏移位置(值越大向下)
第3个值:设置阴影的扩散程度(值越大越模糊)
第4个值:设置阴影的颜色6.字体属性
font-size: 5px 设置字体大小
font-weight: 设置字体粗细(100~900),默认是300,normal、bold、bolder
font-family: 设置字体样式 微软雅黑,宋体,黑体...
color: 设置字体颜色
line-height: 设置行高background-color: 设置背景颜色
background-image: 设置背景图片
background-repeat: 设置背景图片是否以及如何重复排列,
repeat: 横向重复排列,纵向也重复排列(默认)
repeat-x: 横向重复排列,纵向不重复排列
repeat-y: 纵向重复排列,横向不重复排列
no-repeat: 横向不重复排列,纵向也不重复排列
background-position：15px 15px 设置或检索对象的背景图片位置
background-size: 80px 60px; 设置背景图片大小
background: 背景颜色 背景图片 背景图片是否重复 背景图片的位置
如:background: #FFF url(图片路径) no-repeat 14px(X轴:右) 14px(Y轴:下);border:2px solid red; -- 设置元素的边框(可以同时设置边框的宽度、样式、颜色) border属性可以拆分为如下设置:
border-width: 2px; -- 设置元素边框的宽度
border-style: solid; -- 设置元素边框的样式
border-color: red; -- 设置元素边框的颜色其中border-width、border-style、border-color也可以按照上右下左方向进行拆分，以border-width为例：
border-top-width: 2px; -- 设置上边框的宽度
border-left-width: 2px; -- 设置左边框的宽度
border-right-width: 2px; -- 设置右边框的宽度
border-bottom-width: 2px; -- 设置下边框的宽度border-radius: 5px 设置圆角边框
5.4、其它属性 width: 设置元素的宽度
height: 设置元素的高度
margin: 设置元素的外边距
margin-top: 10px; -- 设置元素的上外边距为10px;
margin-right: 20px; -- 设置元素的右外边距为20px;
margin-bottom: 30px; -- 设置元素的下外边距为30px;
margin-left: 40px; -- 设置元素的左外边距是40px;
---------------------------------------------
margin: 10px 20px 30px 40px; -- 上 右 下 左, 顺时针方向对应
margin: 10px 20px 30px; -- 上 左右 下
margin: 10px 20px; -- 上下 左右
margin: 10px; -- 上下左右都是10px;display: block/inline/inline-block 设置元素为块元素或者行内元素
1) block: 块级元素的默认值,比如: div,p,h1~h6,form,table,tr等都是块级元素. 块级元素默认独占一行(即不能和其它元素显示在同一行)
2) inline: 行内元素的默认值,比如: span,img,input,b,i,u等. 多个行内元素可以显示在同一行(但行内元素不可以设置宽高)
3) inline-block: 行内块元素, 特点是: 即可以设置宽高,有可以同一行显示.
vertical-align: middle; /* 让同行内的元素中线对齐 */
vertical-align: top; 让当前元素和行内最高元素的顶部对齐颜色取值方式常见的方式有三种:
方式一：设置颜色名，例如：
red、green、blue、yellow、cyan、pink、white、black等
方式二：设置#加上六位的十六进制数值
#FF0000（red）、#00FF00（green）、#0000FF（blue）、#FFFF00（yellow）、#00FFFF（cyan）等
方式三：设置rgb颜色值
rgb(255,0,0) 、rgb(0,255,0) 、rgb(0,0,255) 、rgb(255,255,0) 、rgb(0,255,255) 等
（red） （green） （blue） （yellow） （cyan:青色）unknown property name 属性名写错
invalid property value 像素写错全称JavaScript，简称JS
JS是由NetScape(网景)公司提供的一门嵌入在浏览器中执行的脚本语言。
主要作用是: 用于实现网页中的动画效果，或者实现表单校验等功能
JS可以运行在服务器端(Node.js)
（1）JS是一门直译式的语言（JS不需要编译，直接执行的就是源代码）
（2）JS是一门基于对象的语言(JS可以通过某些机制模拟面向对象)
（3）JS是一门弱类型的语言（JS中的变量不区分类型，可以指向任意的数据）
（1）良好的交互性（JS的出现就会为了嵌入在浏览器中运行，可以用户进行交互，提高用户体验）
（2）一定的安全性（JS只能在浏览器内部运行，不能访问浏览器意外的资源）
（3）跨平台性（只要有浏览器，就能运行JS）
( JS语言是跨平台的，是因为有浏览器，但浏览器不跨平台
Java语言是跨平台的，是因为有虚拟机，但虚拟主机不跨平台 )
4、JS的引入4.1 直接写在html中的script标签内部script标签可以放在head或body中
<script>
console.log("引入JS的方式一");
alert("引入JS的方式一");
document.write("引入JS的方式一<br />");
</script><script src="./js/demo.js"></script>
需要注意的是: (1)在引入js文件的script标签内部,不要书写JS代码,因为无法执行
<script src="demo.js">
alert( 111 ); //这里的代码不会执行
</script>
(2)引入js文件的script标签最好不要自闭,可能会导致js文件引入失败
<script src="demo.js" /><button type="button" onclick="console.log('引入JS的方法三')">666</button>
<input type="button" value="6666" ondblclick="document.write('引入JS的方法三')"/>// 单行注释内容
/* 多行注释内容 */（1）数值类型（number）：JS中所有的数值在底层都是浮点型 只不过在需要时，会自动的在整型和浮点型之间进行转换 .
NaN(Not a Number)非数值
Infinity(正无穷大)
-Infinity(负无穷大)
（2）字符串类型（string）：JS中字符串是基本数据类型，但JS中也提供的对应的包装对象 JS中的字符串可以使用单引号或者双引号引起来!
例如:
var str1 = "Hello JS";
var str2 = 'Hello JS';
console.log( typeof str1 ); // string
console.log( typeof str2 ); // string
JS中提供了字符串的包装对象--String
var str3 = new String("Hello JS");
console.log( typeof str3 ); // object
str1和str2也可以当做对象使用,在使用时,和str3没有什么区别（4）undefined类型：声明了变量但没有为变量赋值，此时变量的值是undefined
如在console控制台中书写
var x;
alert(x); //x的值为undefined（5）null类型：表示空值，可以作为函数的返回值，表示函数返回的是一个空的对象
注意:undefined和null都不能调用属性,方法,否则会报错!!!
JS中是严格区分大小写的
JS中通过var关键字声明变量，声明的变量不区分类型，可以指向任意的数据
var s1 = "Hello World";
s1 = 123;
s1 = false;
s1 = [];
s1 = function(){} //函数
JS有自动断句的功能，即使在一行代码之后，没有加分号，也不会报错,但建议加上分号;
JS中如果重复声明变量,也不会报错, 因为JS中声明一个已存在的变量不会生效;
var x = "abc"; //var x; x = "abc";
var x = 123; //var x; x = 123;
alert(x); //x的值为123,仅仅更改了x的值JS中的运算符和Java中的运算符大致相同
算术运算符: +，-，*，/，%，++，--
赋值运算符: =，+=，-=，*=，/=，%=
比较运算符: ==，!=，>，>=，<，<=
位运算符: & ， |
逻辑运算符: && ，|| ( false && 表达式, true || 表达式 )
前置逻辑运算符: ! (not)
三元运算符: 表达式 ? 表达式1 : 表达式2JS中的语句和Java中的语句大致相同
5.6.1.if分支if (条件 1){
当条件 1 为 true 时执行的代码
}else if (条件 2){
当条件 2 为 true 时执行的代码
}else{
当条件 1 和 条件 2 都不为 true 时执行的代码
}使用 switch 语句来选择要执行的多个代码块之一。语法结构如下：
switch(n){
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
...
default:
与 case 1 和 case 2 不同时执行的代码
}执行原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break来阻止代码自动地向下一个 case 运行。
5.6.3.循环结构for 循环的语法结构如下：
for (语句 1; 语句 2; 语句 3){
被执行的代码块
}while循环-- 在指定条件为真时循环执行代码块
while (条件){
需要执行的代码
}while 循环会在指定条件为真时循环执行代码块。
5.7.JS的数组JS数组的声明方式一
//声明一个空数组,长度为零
var arr1 = [];
//声明一个数组，并为数组设置初始值
var arr2 = ["Hello", 111, false, new Object() ];JS数组的声明方式二
//声明一个空数组，长度为零
var arr3 = new Array();
//声明一个数组，并为数组设置初始值
var arr4 = new Array("Hello", 111, false, new Object());数组的特点:
(1)JS中的数组可以存放任意类型的元素
(2)JS中的数组的长度可以被任意改变
如：
var arr1 = [];
console.log("此处数组的长度为: "+arr1.length ); // 0
arr1.length = 5;
console.log("此处数组的长度为: "+arr1.length ); // 5
arr1[9] = "a";
console.log("此处数组的长度为: "+arr1.length ); // 10
arr1[99] = "b";
console.log("此处数组的长度为: "+arr1.length ); // 100JS的函数相当于Java中的方法,就是一个具有功能的代码块,通过函数名可以反复执行!
function fn1( [形参1,形参2,...] ){ []表示参数可有可无
//函数体...
}
fn1([实参1,实参2]);
var fn2 = function( [形参1,形参2,...] ){
//函数体...
}
fn2([实参1,实参2]);
匿名函数,只执行一次
(function( [形参1,形参2,...] ){
//函数体...
})( [实参1,实参2,...] );调用函数: 函数名称([参数列表]);
6.JS中的事件onclick: 点击事件
ondblclick: 双击事件
onchange: 改变事件:元素改变时,触发
onmouseover: 鼠标悬停事件
onmouseout: 鼠标离开事件
onselect: 文本框内容被选中事件
onfocus: 光标聚集
onblur: 光标离开
onload: 网页导入,当页面加载完所有的html元素后，立即执行function
onunload: 关闭网页方式1:
<script>
function fn(){
alert("input按钮被点击了...");
}
</script>
<body>
<input onclick="fn()" type="button" value="点我~!" />
</body>
方式2:
<script>
//当页面加载完所有的html元素后，立即执行function
window.onload = function(){
//获取id为btn的元素
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("input按钮被点击了...");
}
}
</script>
<body>
<input id="btn" type="button" value="点我~!" />
</body>DOM: Document Object Model, 文档对象模型是JS专门为访问html元素所提供的一套API
7.1.如何获取html元素document是一个js对象，用于表示当前html网页。当浏览器加载完整个html网页后，会用document对象表示整个html网页！
document.getElementById( id值 ) -- 通过元素的id值，获取一个元素。返回的是表示该元素的js对象。
<div id="div1">xxxx</div>
//获取id为div1的元素
var oDiv1 = document.getElementById("div1");
//oDiv1是一个js对象,表示获取的div元素document.getElementsByTagName( 元素名 ) -- 通过元素名称获取当前文档中的所有指定名称的元素，返回的是一个数组，其中包含了所有指定名称的元素。
document.getElementsByclassName( 元素名 )-- 通过元素名称获取当前文档中的所有指定class名称的元素，返回的是一个数组，其中包含了所有指定名称的元素。
document.body -- 获取当前文档中的body元素
element.parentNode -- 获取当前元素的父元素。element表示当前元素 如:div.parentNode;
document.createElement(元素名/标签名) 返回一个JS对象 -- 根据标签名创建指定名称的标签,返回的是一个JS对象,表示新创建的这个元素
parent.appendChild( child ) -- 通过父元素(parent)调用appendChild方法添加子元素(child)
实例: 创建一个表格,并添加到body中
//创建table、tr、td元素
var oTab = document.createElement("table");
var oTr = document.createElement("tr");
var oTd = document.createElement("td");
//将td添加到tr中,将tr添加到table,将table添加到body中
oTr.appendChild( oTd );
oTab.appendChild( oTr );
document.body.appendChild( oTab );parent.removeChild( child )-- 通过父元素删除子元素，其中parent表示父元素，child表示子元素
element.innerHTML -- 获取当前元素的所有内容 element.innerHTML = xxx; -- 为当前元素设置内容(原内容会被新内容覆盖)
<div id="div1">
这是一个div元素...
<span>这是一个span元素</span>
</div>
//获取div元素
var oDiv1 = document.getElementById("div1");
oDiv1.innerHTML;//获取div元素的内容value:仅表单项有value
var inp=document.getElementById("user");
//inp.value="刘备"; //修改inp的value值为 刘备
inp.value="";
<input id="user" type="text" value="常山赵子龙"/>"abc" --自动转数值--> NaN
"89" --自动转数值--> 89
"" --自动转数值--> 0alert() 弹出框
prompt() 显示可提示用户进行输入的对话框
prompt(text,defaultText)
text:可选,在对话框中显示的纯文本
defaultText:可选,默认的输入文本.也可以不输入值,如果不输入值,则返回null
如:
var socue=prompt("请输入成绩",0);
其中"请输入成绩"显示在对话框上
0显示在输入框内window.onload=function(){
alert("当前html中的所有元素都已经加载完成!");
}tr.style.background="pink";
tr.className="xxx"; xxx==css中class的值jQuery: JavaScript Query jQuery是一门轻量的、免费开源的JS函数库(JS文件) 其实就是一个JS的框架 jQuery可以极大的简化JS代码 核心思想：“写的更少、但做的更多”
轻量的：是指一个技术或框架对代码或程序的侵入程度是比较低的。 或者说代码对该技术依赖程度越低，这个技术越轻。对该技术的依赖程度越高，这个技术越重。
_jQuery本质就是一个包含了很多函数的JS文件，如果要在某一个HTML中使用这个JS文件中的函数，就必须得将JS文件引入到HTML中_（想使用jQuery，就得引入jQuery的函数库文件，就是一个JS文件）
2.jQuery的优势(1) 可以极大的简化JS代码
(2) 可以像CSS选择器一样获取html元素
css中获取所有的div,给div添加样式:
div{ css属性... }jQuery中获取所有div,给div添加边框样式:
$("div").css("border", "2px solid red");
JS获取id为div1的元素: document.getElementById("div1")
jQuery获取id为div1的元素: $("#div1")(3) 可以通过修改css属性控制页面的效果
4) 可以兼容常用的浏览器
比如: JS中的innerText属性、removeNode()函数、replaceNode( )函数 这些函数在某些浏览器中是无法使用的。
jQuery中提供了相应的函数（ text函数、remove函数、replaceWith函数 ）
常用浏览器：谷歌浏览器、火狐浏览器、苹果浏览器、欧朋浏览器等
3.jQuery引入jQuery的函数库文件就是一个普通的JS文件，引入jQuery和引入JS文件的方式一样
<!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>在引入jQuery函数库文件时，如果文件引入路径错误，则会导致文件引入失败,如
Uncaught ReferenceError: $ is not defined
at问题分析:引入路径有问题
4.文档就绪事件函数jQuery提供的文档就绪事件函数 jQuery==$
<script>
$(function(){ //jQuery==$
//在浏览器加载完所有元素后立即执行
alert("当前html中的所有元素都已经加载完成!");
});
</script>其完整写法为:
<script>
$(document).ready(function(){
//在浏览器加载完整个html网页后立即执行
});
</script>如果在获取元素时，获取元素的代码执行的时机，比元素本身加载的时间还要早，如果元素还没有加载就获取，必然是获取不到的。
可以将获取元素的代码放在文档就绪事件函数中，等浏览器加载完整个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载了，再获取任何元素都能获取到！
5.jQuery选择器5.1.基本选择器(1)元素名选择器
$("div") -- 选中所有的div元素
$("span") -- 选中所有的span元素
(2)class/类选择器
$(".s1") -- 选中所有class值为s1的元素(class值为s1的元素可能是任何元素)
$("span.s1") -- 选中所有class值为s1的span元素
(3)id选择器
$("#one") -- 选中id为one的元素
(4)多元素选择器
$("div,span,.s1,#one") -- 选中所有的div元素,以及所有的span元素,以及所有class值为s1的元素,以及id为one的元素$("div span") -- 选中所有div内部的所有span元素
$("div").find("span") -- 选中所有div内部的所有span元素
$("#one span") -- 选中id为one的元素内部的所有span元素
相邻兄弟选择器
$("#two+span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").next("span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").prev("span") -- 选中id为two的元素前面紧邻的span兄弟元素
$("#two~span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").nextAll("span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").prevAll("span") -- 选中id为two的元素前面所有的span兄弟元素
$("#two").nextAll() -- 选中id为two的元素后面所有的兄弟元素
$("#two").prevAll() -- 选中id为two的元素前面所有的兄弟元素
$("#two").siblings("span") -- 选中id为two的元素前、后所有的span兄弟元素
parent() -- 获取当前元素的父元素, 类似于js中的 parentNode属性
parents() -- 获取当前元素的所有的祖先元素
$(":checked").parent().parent(); -- 获取所有被被选中的父类元素的祖先元素
$(":checked").parents("tr") -- 获取所有被选中的祖先元素(1) 选中第一个div元素
$("div:first")
$("div:eq(0)")
$("div").eq(0)
(2) 选中最后一个div元素
$("div:last")
$("div:eq(-1)")
$("div").eq(-1)
(3) 选中第一个div元素以及选中最后一个div元素
$("div:first,div:last")
(4) 选中第n+1个div元素(n是下标从零开始)
$("div:eq(n)")
$("div").eq(n)
(5) 获取所有div下标值大于3的元素
$("div:gt(3)")
获取所有div下标值小于4的元素
$("div:lt(3)")$(":input") -- 匹配所有的表单项元素(包括input、select、textarea、button)
$(":text") -- 匹配所有普通文本输入框
$(":password") -- 匹配所有密码输入框
$(":radio") -- 匹配所有单选框
$(":checkbox") -- 匹配所有复选框
$(":checked") -- 匹配所有被选中的单选框,复选框,option选项
$(":radio:checked") -- 匹配所有被选中的单选框
$(":checkbox:checked") -- 匹配所有被选中的复选框$("<div></div>") -- 创建一个div元素，返回的是一个jQuery对象,表示创建的div元素
$("<div>xxxx</div>") -- 创建一个包含内容的div元素，返回的是一个jQuery对象,表示创建的div元素$parent.append( $child ) -- 父元素调用方法添加子元素
$("body").append( "<div>我是新来的...</div>" ); -- 往body元素内部追加一个div子元素
tr.append("<td>"+id+"</td>"); -- 向tr中添加带有值的td标签$("div").remove() -- 删除所有的div元素
JS删除所有div元素：
//获取所有的div元素(返回的是所有div组成的数组)
var divArr = document.getElementsByTagName("div"); //div数组
//遍历div数组,依次删除每一个div元素
var len = divArr.length;
for(var i=0;i<len;i++){
//通过当前元素的父元素删除当前元素(始终删除第一个)
divArr[0].parentNode.removeChild( divArr[0] );
}可以替换隐藏的元素
$("div").replaceWith("<p>我是来替换的…</p>")<div>
这是一个div11元素
<span>这是一个span元素</span>
这是一个div1111元素
</div>
<input type="text" name="user"/>1、html()函数 (类似于js中的innerHTML属性)
-- 用于获取或设置元素的内容，比如为div、span、p、h1~h6、table、tr、td、form等元素设置内容
$("div").html() -- 获取所有div中的第一个div的内容
$("div").html("xxxx") -- 为所有div设置内容,原内容会被覆盖
$("div").html("<h1>xxx</h1>") 设置的内容可以是标签2、text()函数 (类似于js中的innerText属性，innerText在部分浏览器中不兼容)
-- 用于获取或设置元素的文本内容
$("div").text() -- 获取所有div中的所有文本内容
$("div").text("xxxx") -- 为所有div设置文本内容3、val()函数 (类似于js中的value属性)
-- 获取或设置表单项元素的value值(input/select/option/textarea)
$("input").val() -- 获取所有input元素中的第一个input元素的value值
$("input").val(值) -- 为所有的input元素设置value值<input type="text" name="username" id="inp"/>1、prop()函数 -- 用于获取或设置元素的属性值
在jQuery1.6版本之后才有这个函数，1.6之前版本的jQuery可以使用attr()函数
$("input[type='checkbox']").prop("checked")
// 获取input复选框的选中状态, 返回true表示复选框为选中状态,返回false表示复选框为取消选中状态
$("input[type='checkbox']").prop("checked", true)
// 设置所匹配的复选框元素为选中状态
$("#inp").prop("name"); //获取id为inp元素的name属性值, 返回useranme
$("#inp").prop("name","user"); //为id为inp的元素设置name属性值, name属性值就会变成user2、css()函数 -- 用于获取或设置元素的css属性值
$("#div1").css("width") -- 获取id为div1元素的宽度
$("#div1").css("width","200px") -- 设置id为div1元素的宽度为200px
$("#div1").css({
"width" : "200px",
"height" : "150px",
"border" : "5px solid red",
"background" : "pink"
}); // 为id为div1的元素设置宽度为200px、高度为150px、边框以及背景颜色等样式1、each() 函数
$(selector).each(function( index,element ){})
// each()函数可以遍历$(selector)选择器选中的所有元素(即每次都选择器选中的元素中获取一个元素,并执行function 函数)
// function中的index -- 表示遍历的元素的下标
// function中的element -- 表示当前正在遍历的元素(也可以通过this获取)示例：
$("table tr").each(function(){
//从当前行中获取第二个单元格的内容(当前行的id值)
var tempId = $(this).find("td").eq(1).html();
//拿着用户输入的id 和 每一行中的id值进行比较
if( id == tempId ){
alert("添加失败，id已存在！");
flag = true; //id存在，更新flag的值，true表示已存在！
}
});2、show()/hide() 函数
show() -- 设置元素由隐藏变为显示
$("div").show(1000) -- 设置所有的div元素为显示,
1000表示1000ms=1s -- 表示在1s内完成操作等价于:
$("div").css("display", "block");hide() -- 设置元素由显示变为隐藏
$("div").hide() -- 设置所有的div元素为隐藏等价于:
$("div").css("display", "none");2、toggle()/slideToggle()
toggle() -- 切换元素的显示状态, 如果元素是显示的, 则切换为隐藏, 否则切换为显示
$("div").toggle() -- 设置所有的div元素的状态转换slidToggle() --切换元素的显示状态, 如果元素是显示的, 则切换为隐藏，否则切换为显示，切换为显示为下拉状态，隐藏为收缩状态。
8.jQuery为元素绑定点击事件<script>
$(function(){
//当点击btn按钮时,触发点击事件执行其中的函数
$("#btn").click( function(){
alert("input按钮被点击了...");
});
});
</script>
<body>
<input id="btn" type="button" value="点我~!" />
</body>通过JS的方式获取元素，返回的是JS对象，JS对象只能调用JS的属性或函数
通过jQuery选择器获取元素，返回的是jQuery对象（结构像一个集合），jQuery对象只能调用jQuery的属性或函数。
如果现有JS对象，但我们需要调用jQuery的属性或函数，可以将JS对象转成jQuery对象；
如果现有jQuery对象，但我们需要调用JS的属性或函数，可以将jQuery对象转成JS对象；
js对象转成jQuery对象: $(js对象)
jQuery对象转成js对象: jQuery对象[下标]Tags 标签
加个好友，技术交流
