JavaWeb尚硅谷【学习笔记】（整合）未完成
2024-05-04 14:35:26
文章目录
- 一、HTML
- 1、网页的组成部分
- 2、HTML简介
- 3、HTML文件的书写规范
- 4、HTML标签的介绍
- 5、标签的语法
- 6、常用标签介绍
- 二、CSS技术
- 1、CSS技术介绍
- 2、CSS语法规则
- 3、CSS和HTML的结合方式
- 4、CSS选择器
- 三、JavaScript
- 1、JavaScrip介绍
- 2、JavaScript和html代码的结合方式
- 3、变量和数据类型
- 4、关系（比较）运算
- 5、逻辑运算
- 6、数组
- 7、函数
- 8、 函数的arguments隐形参数（只在function函数内）
- 9、Object形式的自定义对象
- 10、{}花括号形式的自定义对象
- 11、事件介绍
- 12、DOM模型
- 13、正则表达式
- 四、jquery
- 1、基本介绍
- 2、jquery核心函数
- 3、jQuery和dom区分
- 4、jQuery对象的本质是什么
- 5、jQuery对象和Dom对象使用区别
- 6、Dom对象和jQuery对象互转
- 7、jQuery选择器
- 8、jquery属性操作
- 9、attr和prop方法
- 10、dom的增、删、查
- 11、CSS样式操作
- 12、动画操作
- 13、原生JS和jQuery页面加载完之后的区别
- 14、jQuery中常用的事件处理方法
- 15、事件的冒泡
- 16、JavaScript事件对象
一、HTML
1、网页的组成部分
页面由三部分组成，分别是内容（结构）、表现、行为
- 内容（结构）：是我们在页面中可以看到的数据，我们称之为内容，一般内容，我们使用html技术来展示
- 表现：指的是这些内容在页面上的展示形式，比如说。布局、颜色、大小等等。一般使用CSS技术实现。
- 行为：指的是页面中元素与输入设备交互的响应，一般使用javaScript技术实现。
2、HTML简介
- Hyper Text Markup Language（超文本标记语言） 简写：HTML
- HTML通过标签来标记要显示的网页中的各个部分，网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。
3、HTML文件的书写规范
<!DOCTYPE html><!--约束，声明为html5文档-->
<html lang="en"><!--html标签表示html的开始 lang="zh_CN表示中文" html标签中一般分为两个部分，分别是head和body-->
<head><!--表示头部信息，一般包含三部分内容，title标签，css样式，js代码--><meta charset="UTF-8"><!--表示当前页面使用utf-8字符集--><title>标题</title><!--表示标题-->
</head>
<body><!--body标签是整个html页面显示的主题内容-->hello
</body>
</html>
4、HTML标签的介绍
- 标签的格式：<标签名>封装的数据</标签名>
- 标签名大小写不敏感
- 标签拥有自己的属性
- 分为基本数据：bgcolor=“red” 可以修改简单的样式效果
- 事件属性：οnclick=“alert(‘你好！’)” 可以直接设置事件响应后的代码
- 标签又分为，单标签和双标签
- 单标签格式：<标签名/>
- 双标签格式：<标签名>…封装的数据</标签名>
5、标签的语法
- 标签不能交叉嵌套
<!--标签不能交叉嵌套-->
正确:<div><span>早安，尚硅谷</span></div>
错误:<div><span>早安，尚硅谷</div></span>
- 标签必须正确关闭
- 没有文本内容你那个的标签
<!--没有文本内容的标签-->
正确:<br/>1
错误:<br>2
- 属性必须有值，属性值必须加引号
<!--属性必须有值，属性值必须加引号-->
正确：<font color="blue">尚硅谷</font><br/>
错误：<font color=blue>尚硅谷</font><br/>
错误：<font color>尚硅谷</font><br/>
- 注释不能嵌套
<!--注释不能嵌套-->
正确：<!--注释内容--><br/>
错误：<!--注释内容--><br/>
6、常用标签介绍
- font字体标签
<font color="red" face="宋体" size="7">标签字体</font>
- 特殊字符
我是 < > & " ' 标签
- 标题标签（h1-h6）
<!--align对齐属性（left，right，center）然后放大缩小网页它会自动对齐-->
<h1 align="left">标题一</h1>
<h2 align="right">标题二</h2>
<h3 align="center">标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
- 超链接
<!-- 超链接-->
<!--href属性设置链接的地址-->
<!--target属性设置哪个目标进行跳转-->
<!--_self 表示当前页面 默认是这个-->
<!--_blank 表示打开新页面进行跳转-->
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
- 列表标签
有序和无序列表
<!-- 需求：使用无序，列表方式，把东北F4 赵四、刘能、小沈阳、宋小宝 展示出来-->
<!--ul是无序列表-->
<!--ol是有序列表-->
<!--type属性可以修改列表项前面的符号-->
<ul><li>赵四</li><li>刘能</li><li>小沈阳</li><li>宋小宝</li><ol>赵四</ol><ol>刘能</ol><ol>小沈阳</ol><ol>宋小宝</ol>
</ul>
- img标签
<!--需求 使用img标签显示一张美女的照片，并修改宽高和边框属性-->
<!--img标签是图片标签，用来显示图片-->
<!--src属性可以设置图片的路径-->
<!--width属性设置图片的宽度-->
<!--height属性设置图片的高度-->
<!--border属性设置边框的大小-->
<!--alt属性设置当指定路径找不到图片时，用来代替的信息--><!--在javase中路径也分为相对路径和绝对路径-->
<!--相对路径：从工程名开始算-->
<!--绝对路径：盘符：/目录/文件名-->
<!--在web中路径分为相对路径和绝对路径两种-->
<!--相对路径：. 表示当前文件所在的目录-->
<!-- ..表示当前文件所在的上一级目录-->
<!-- 文件名： 表示当前文件所在目录的文件，相当于 ./文件名 ./可以省略-->
<!--绝对路径： 格式是： http://ip:port/工程名/资源路径-->
<!--<img src="../imgs/01.jpg" with="100" height="260" border="20"/>--><img src="../imgs/02.jpg" width="100" height="260" border="20"/>
- table标签
<!-- 需求1：做一个带表头的 三行 三列的表格，并显示边框-->
<!-- 需求2修改表格的宽度、高度、表格的对齐方式，单元格间距--><!--table是表格标签-->
<!-- border 是表格边框大小-->
<!-- width 是表格宽度-->
<!-- height 是表格高度-->
<!-- align设置整体表格的对齐方式-->
<!-- cellspacing是设置单元格之间的间距--><!--tr是行标签-->
<!--td表示单元格，但是还要去设置加粗、居中-->
<!--th是表头标签，已经设置好了加粗和居中-->
<!-- align设置单元格的对齐方式-->
<!-- b是加粗标签-->
<table border="3" width="300" height="200" align="center" cellspacing="10"><tr><th>第一行</th><th>第二行</th><th>第三行</th></tr><tr><th>1.1</th><th>1.2</th><th>1.3</th></tr><tr><th></th><th>2.1</th><th>2.2</th></tr>
</table>
- table标签跨行和跨列
<table border="1" width="400" height="200" cellspacing="0"><tr><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th></tr><tr><th colspan="2">1.1</th><th>1.3</th><th>1.4</th><th>1.5</th></tr><tr><th rowspan="2">2.1</th><th>2.2</th><th>2.3</th><th>2.4</th><th>2.5</th></tr><tr><th>3.2</th><th>3.3</th><th>3.4</th><th>3.5</th></tr><tr><th>4.1</th><th>4.2</th><th>4.3</th><th rowspan="2" colspan="2">4.4</th></tr><tr><th>5.1</th><th>5.2</th><th>5.3</th></tr>
</table>
- iframe标签（内嵌窗口）
ifarme标签它可以在一个html页面上，打开一个小窗口去加载单独的页面。
<body>这是一个单独的页面<br/>
<!-- iframe标签可以在页面上开辟一个小区域显示一个单独的页面-->
<!-- iframe和a标签使用步骤-->
<!-- 1、在iframe标签上使用name属性定义一个名称-->
<!-- 2、在a标签的target属性上设置iframe的name的属性值--><iframe src="table表格.html" name="abc" width="350" height="250"></iframe><br/><br/><br/><ol><li><a href="font标签.html" target="abc">font标签</a></li><li><a href="table表格.html" target="abc">table表格</a></li></ol>
</body>
- 表单显示
标签就是html页面中，用来收集用户信息的所有元素集合，然后发送服务器
<body>
<!--需求1 ：创建一个个人信息注册的表单界面，包含用户名，密码，确认密码，性别（单选），-->
<!--兴趣爱好（多选），国籍（下拉列表），隐藏域，自我评价（多行文本域），重置，提交-->
<!-- form标签就是表单1、input type="text"是单行文本输入框 value属性设置文本框的默认值2、input type="password"是密码输入框 value属性设置密码框的默认值3、input type="radio"是单选框 name属性可以对其分组，同一组只可以选一个 checked="checked"就是默认选择4、input type="checkbox"是复选框 checked="checked"就是默认选择5、input type="reset"是重置按钮 value可以修改按钮上的文字6、input type="submit"是提交按钮 value可以修改按钮上的文字7、input type="button"是按钮 value可以修改按钮上的文字8、input type="file"是提交文件9、input type="hidden"是隐藏域 当我们要发送某些信息，而这些信息，不需要用户看见或参与，就可以使用（提交也会发给服务器）10、select是下拉列表框11、option是下拉列表框中的选项， selected="selected"设置默认选中12、textarea 表示多行文本输入框（起始标签和结束标签中的值是默认值）rows属性设置可以显示几行cols属性设置每行可以显示几个字符宽度--><form>用户名称：<input type="text" value="123"></input><br/>用户密码：<input type="password"></input><br/>确认密码：<input type="password"></input><br/>性别：<input type="radio" name="sex" checked="checked">男</input><input type="radio" name="sex">女</input><br/>兴趣爱好：<input type="checkbox">Java</input><input type="checkbox" >JavaScript</input><input type="checkbox" >C++</input></br>国籍：<select><option>--请选择国籍--</option><option>中国</option><option>美国</option><option>英国</option></select></br>自我评价：<textarea rows="10" cols="20">默认是在这</textarea></br><input type="reset"></input><input type="submit"></input><input type="file"></input><input type="hidden"></input>
</form>
</body>
- 表单格式化
<form><h1 align="center">用户注册</h1><table align="center"><tr><th>用户名称：</th><th><input type="text" value="123"></input><br/></th></tr><tr><th>用户密码：</th><th><input type="password"></input><br/></th></tr><tr><th>确认密码：</th><th><input type="password"></input><br/></th></tr><tr><th>性别：</th><th><input type="radio" name="sex" checked="checked">男</input><input type="radio" name="sex">女</input><br/></th></tr><tr><th>兴趣爱好：</th><th><input type="checkbox">Java</input><input type="checkbox" >JavaScript</input><input type="checkbox" >C++</input></br></th></tr><tr><th>国籍：</th><th><select><option>--请选择国籍--</option><option>中国</option><option>美国</option><option>英国</option></select></br></th></tr><tr><th>自我评价：</th><th><textarea rows="10" cols="20">默认是在这</textarea></br></th></tr><tr><th><input type="reset"></input></th><th><input type="submit"></input></th></tr></table>
</form>
</body>
- 表单提交细节
<body>
<!--form标签是表单标签action属性设置提交的服务器地址method属性设提交的方式GET（默认）和POSThttps://www.baidu.com/ 服务器地址? 分隔符action=login&sex=on 请求参数（表单的信息）表单提交的时候，数据没有发送给服务器的有三种原因（1）表单项没有name属性值（2）单选，复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器（3）表单项不在提交的form标签中GET请求的特点：（1）浏览器地址栏中的地址是：action属性+？+请求参数请求的格式是：name=value&name=value（2）不安全（3）它有数据长度的限制POST请求的特点：（1）浏览器地址栏中只有action属性值（2）相对于GET请求更安全（3）理论上没有数据长度的限制-->
<form action="http://www.baidu.com" method="post"><input type="hidden" name="action" value="login"></input><h1 align="center">用户注册</h1><table align="center"><tr><th>用户名称：</th><th><input type="text" value="123" name="username"></input><br/></th></tr><tr><th>用户密码：</th><th><input type="password" name="pwd"></input><br/></th></tr><tr><th>性别：</th><th><input type="radio" name="sex" checked="checked" value="男">男</input><input type="radio" name="sex" value="女">女</input><br/></th></tr><tr><th>兴趣爱好：</th><th><input type="checkbox" name="hobby" value="java">Java</input><input type="checkbox" name="hobby" value="jsp">JavaScript</input><input type="checkbox" name="hobby" value="c++">C++</input></br></th></tr><tr><th>国籍：</th><th><select name="country"><option>--请选择国籍--</option><option value="中国">中国</option><option value="美国">美国</option><option value="英国">英国</option></select></br></th></tr><tr><th>自我评价：</th><th><textarea name="desc" rows="10" cols="20">默认是在这</textarea></br></th></tr><tr><th><input type="reset"></input></th><th><input type="submit"></input></th></tr></table>
</form>
</body>
- 其他标签（div,span,p）
<body>
<!--需求：div span p标签-->
<!--div标签 默认独占一行span标签 它的长度是封装数据的长度p段落标签 默认会在段落的上方或下方各空出一行来
--><div>div标签1</div><div>div标签2</div><span>span标签1</span><span>span标签2</span><p>p段落标签1</p><p>p段落标签2</p>
</body>
二、CSS技术
1、CSS技术介绍
CSS是[层叠样式表单]。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记行语言
2、CSS语法规则
- 选择器：浏览器根据“选择器”决定CSS样式影响的html元素（标签）
- 属性（property）：是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明
- 多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开，虽然最后一条声明的最后可以不加分号（但尽量在每条声明的末尾都加上分号）
3、CSS和HTML的结合方式
- 第一种
<body>
<!--需求：分别定义两个div，span标签分别修改每个div标签的样式为：边框1个像素，实线，红色--><div style="border: 1px solid red;">div标签1</div><div style="border: 1px solid red;">div标签2</div><span style="border: 1px solid red;">span标签1</span><span style="border: 1px solid red;">span标签2</span>
</body>
缺点：
- 如果标签多了。样式多了，代码量庞大
- 可读性非常差
- css代码没什么复用性可言
- 第二种
在head标签中，使用style标签来定义各种自己需要的css样式
<head><meta charset="UTF-8"><title>Title</title>
<!--style标签专门用来定义css样式代码--><style type="text/css">div{border: 1px solid red;}span{border: 1px solid red;}</style>
</head>
<body>
<!--需求：分别定义两个div，span标签分别修改每个div标签的样式为：边框1个像素，实线，红色--><div>div标签1</div><div>div标签2</div><span>span标签1</span><span>span标签2</span>
</body>
缺点：
- 只能在同一页面内复用代码，不能再多个页面中复用css代码
- 维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改，工作量大
- 第三种
把css样式写成一个单独的css文件，再通过link标签引入即可复用。
使用html的
<link rel="stylesheet" type="text/css" href="./styles.css">
标签 导入css样式文件
div{border: 1px solid red;
}
span{border: 1px solid red;
}
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<!--需求：分别定义两个div，span标签分别修改每个div标签的样式为：边框1个像素，实线，红色--><div>div标签1</div><div>div标签2</div><span>span标签1</span><span>span标签2</span>
</body>
4、CSS选择器
- 标签名选择器
标签名选择器的格式是：
标签名{
属性:值;
}
标签名选择器，可以决定哪些标签被动的使用这个样式
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">div{color: blue;font-size: 30px;border: 1px solid yellow;}span{color: yellow;font-size: 20px;border: 1px dashed blue;}</style>
</head>
<body>
<!-- 需求：在所有div标签上修改字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线-->
<!--并且修改所有的span标签的字体颜色为黄色，字体大小20个像素，边框为5像素蓝色虚线。-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
- id选择器
id选择器的格式是
#id 属性值{
属性：值;
}
id选择器，可以让我们通过id属性选择性的去使用这个样式
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">#id001{color: blue;font-size: 30px;border: 1px yellow solid;}#id002{color: red;font-size: 20px;border: 5px blue dotted;}</style>
</head>
<body>
<!-- 需求：分别定义两个div标签-->
<!-- 1、第一个div标签定义id为id001，然后根据id属性定义css样式修改字体颜色为蓝色-->
<!-- 字体大小30个像素，边框为1像素黄色实线-->
<!-- 2、第二个div标签定义为id002，然后根据id属性定义css样式修改的字体颜色为红色，-->
<!-- 字体大小为20个像素，边框为5像素蓝色点线--><div id="id001">div标签1</div><div id="id002">div标签2</div>
</body>
- class选择器（类选择器）
.class属性值{
属性：值;
}
class类型选择器，可以通过class属性有效的选择地去使用这个样式。（与id选择器的区别就是id只能有一个标签去使用他，而类选择器中能有好多标签去使用他 ）
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.class01 {color: blue;font-size: 30px;border: 1px solid yellow;}.class02{color: grey;font-size: 26px;border: 1px solid red;}</style>
</head>
<body>
<!-- 需求1：修改class属性值为class01的span或div标签，字体颜色为蓝色，字体大小30个小像素-->
<!-- .边框为1像素黄色实线-->
<!-- 需求2：修改class属性值为class02的div标签，字体颜色为灰色，字体大小26个像素-->
<!-- 边框为1像素红色实线。--><div class="class01">div标签class01</div>
<div class="class02">div标签</div>
<span class="class01">span标签class01</span>
<span>span标签2</span>
</body>
- 组合选择器
组合选择器的格式：
选择器1，选择器2，选择器3。。。n{
属性：值;
}
组合选择器可以让多个选择器共用同一个代码。
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.class01, #id001{color: blue;font-size: 20px;border: 1px yellow solid;}</style>
</head>
<body>
<!-- 需求修改class="class01"的div标签和id="id01"所有的span标签，-->
<!-- 字体颜色为蓝色，字体大小为20个像素，边框为1像素的黄色实线--><div class="class01">div标签</div>
<span id="id001">span 标签</span>
<div>div标签</div>
<div>div标签id01</div>
</body>
CSS常用样式
- 字体颜色
color: red;
颜色可以写颜色名字：black、red等
颜色也可以写rgb值和十六进制表示值，如rgb(255, 0, 0)，如果写十六进制必须加#- 宽度
width: 19px;
宽度可以写像素值： 19px;
也可以写百分比值：20%;- 高度
height: 20px;
高度可以写像素值： 19px;
也可以写百分比值：20%;- 背景颜色
background-color:#OF2D4C
- 字体样式
color:#FF0000；
font-size: 20px;- 红色1像素实现边框
border: 1px soild red;
- DIV居中
margin-left:auto; //向左对齐
margin-right:auto; //向右对齐 这样就左不左右不右 就居中了- 文字居中
text-align: center //文字居中
- 超链接去下划线
text-decoration: none;
- 表格细线
table{
border: 1px solid black; //这里设置的是表格的最外面
border-collapse:collapse; //将边框合并
}
td,th{
border:1px solid black; //这里设置的是表格的里面的单元格的线
}- 列表去除修饰
ul{
list-style:none;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">div{color: red;font-size: 30px;border: 1px yellow solid;width: 300px;height: 200px;background-color: green;margin-left: auto;margin-right: auto;text-align: center;text-decoration: none;}a{text-decoration: none;}table{border: 1px solid red;border-collapse: collapse;}td,tr{border: 1px solid red;}ul{list-style: none;}ol{list-style: none;}</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<div>我是div标签</div>
<table><tr><td>1.1</td><td>1.2</td></tr><tr><td>2.1</td><td>2.2</td></tr>
</table><ul><li>132555464</li><li>132555464</li><li>132555464</li><li>132555464</li><li>132555464</li></ul>
<ol><li>132555464</li><li>132555464</li><li>132555464</li><li>132555464</li><li>132555464</li></ol>
</body>
</html>
三、JavaScript
1、JavaScrip介绍
- 基本介绍
JavaScript语言主要是完成页面的数据验证，因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码，JS是Netscape网景公司的产品，最早起名为LiveScipt，为了吸引更多的java程序员，更名为JavaScript。JS是弱类型就是类型可变，Java是强类型就是定义变量的时候。 - 特点
- 交互性（它可以做的就是信息的动态交互）
- 安全性（不允许直接访问本地硬盘）
- 跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）
2、JavaScript和html代码的结合方式
- 第一种方式
只需要在head标签中，或者在body标签中，使用sript标签来书写JavaScript代码
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//alert是JavaScript语言提供的一个警告框函数//它可以接受任意类型的参数，这个参数就是警告框的提示信息alert("hello World!");</script>
</head>
- 第二种方式
使用script标签引入单独的JavaScript代码文件
<head><meta charset="UTF-8"><title>Title</title>
<!-- 现在需要使用script引入外部的js文件来执行src属性专门来引入js文件路径（可以是相对路径，也可以是绝对路径）script标签可以用来js代码，也可以用来引入js文件但是，两个功能二选一使用，不能同时使用两个功能
--><script type="text/javascript" src="1.js"></script>
</head>
3、变量和数据类型
- 变量是可以存放某些值的内存的命名
- JavaScript的变量类型：数据类型（number）、字符串类型（string）、对象类型（object）、布尔类型（boolean）、函数类型（function）
- JavaScript里特殊的值：undefined（未定义，所有js变量未赋予初始值的时候，默认值都是undefined）、null空值、NAN（全称是：Not a Number。非数字、非数值）
- JS中的定义变量格式
var 变量名;
var 变量名 = 值;
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">var i = 12;//typeof()是JS提供的函数。取变量的数据类型返回alert(typeof (i));//numberi = "abc";alert(typeof (i));//stringvar b = "abc";alert(i*b); //NaN，是非数字，非数值。</script>
</head>
4、关系（比较）运算
- 等于： == 等于是简单的做字面值的比较
- 全等于：=== 除了做字面值的比较之外，还会比较两个变量的数据类型
5、逻辑运算
且运算：&&
或运算：||
取反运算：！
在JavaScript语言中，所有的变量，都可以作为一个boolean类型的变量去使用0、null、undefined、“”（空串）都认为是false&& 与运算：
有两种情况：- 第一种：当表达式全为真的时候，返回最后一个表达式的值
<script type="text/javascript">var i = 1;var b = 2;var c = i && b;alert(c);</script>- 第二种：当表达式中，有一个为假的时候，返回第一个为假的表达式的值
<script type="text/javascript">var i = 1; var b = null; var c = i && b; alert(c);</script>||运算
有两种情况- 第一种：当表达式全为假的时候，返回最后一个表达式的值
<script type="text/javascript">var i = 0;var b = null;var c = i || b;alert(c);</script>- 第二种：只要有一个表达式为真，就会把第一个为真的表达式的值
<script type="text/javascript">var i = 0;var b = 1;var c = i || b;alert(c);</script>
6、数组
- 数组定义方式
JS中数组的定义：
格式： var 数组名= []; var 数组名 = [1, ‘abc’, true]; 定义数组同时赋值元素
<script type="text/javascript">var arr = [true, 1]; //定义一个空数组// alert(arr.length); //arr[0] = 12;// alert(arr[0]);// alert(arr.length);//JS语言中的数组，只要我们通过数组下标赋值，//那么最大的下标值，就会自动的给数组赋值arr[2] = "abc";//数组的遍历for(var i = 0; i < arr.length; i++){alert(arr[i]);}</script>
7、函数
- 第一种，使用function关键字来定义函数
使用格式如下：
function函数名（形参列表）{
函数体
}
在JavaScript语言中，如何定义带有返回值的函数？
只需要在函数体内直接使用return语句返回值即可！
<script type="text/javascript">function fun(){alert("无参函数类调用");}//函数调用才会执行// fun();function fun2(a, b){alert("有参函数被调用 a = " + a + " b = " + b);}// fun2(1, 2);//定义带有返回值类型的函数function fun3(num1, num2){var result = num1 + num2;return result;}alert(fun3(100, 50));</script>
- 第二种定义方式
使用格式如下：
var函数名 = function(形参列表){ 函数体 }
<script type="text/javascript">var fun = function (){alert("无参函数");}// fun();var fun2 = function (a, b){alert("有参函数 a=" + a + "b=" + b);}// fun2(1, 2);var fun3 = function (a, b){var sum = a + b;return sum;}alert(fun3(1, 2));</script>
注意：在Java中函数允许重载，但是在JS中函数的重载会直接覆盖掉上一层的定义
8、 函数的arguments隐形参数（只在function函数内）
就是在function函数中不需要定义，但却可以直接来获取所有参数的变量，我们管它叫做隐形参数。
隐形参数特别想java基础中的可变长参数一样。
public void fun(Object… args),可变长参数其实是一个数字，那么js中的隐形参数也跟java的可变长参数一样，操作类似数组。
<script type="text/javascript">//arguments可以通过[]来取值function fun(){// alert(arguments[0]);// alert(arguments[1]);// alert(arguments[2]);for (var i = 0; i < arguments.length; i++) {alert(arguments[i]);}alert("无参函数");}// fun(1, 2, 3);//需求要求编写一个函数，用于计算所有参数相加的和并返回function fun1(a, b){var sum = 0;for (var i = 0; i < arguments.length; i++) {sum += arguments[i];}return sum;}alert(fun1(1, 2, 3, 4, 5));</script>
9、Object形式的自定义对象
- 对象的定义：
var 变量名 = new Object(); //对象实例（空对象）
变量名.属性名 = 值 ; //定义一个属性
变量名.函数名 = function() //定义一个函数
- 对象的访问：
变量名.属性/函数名;
<script type="text/javascript">var obj = new Object();obj.name = "你好";obj.age = 18;obj.fun = function (){alert(this.name + this.age);}alert(obj.name);alert(obj.age);obj.fun();</script>
10、{}花括号形式的自定义对象
var 变量名 = { //空对象
属性名:值, //定义一个属性
属性名:值, //定义一个属性
函数名:function(){} //定义一个函数
};
<script type="text/javascript">var obj = {name:"黎明",age:18,list:function () {alert(this.name + this.age + "111");}};alert(obj.name + obj.age + "");obj.list();</script>
11、事件介绍
- 什么是事件
事件是电脑输入设备与页面进行交互的相应，我们称之为事件。 - 常用的事件
- onload 加载完成事件 ：页面加载完成以后，常用做页面js代码初始化
- onclick 点击事件：常用于按钮的点击相应操作
- onblur 失去焦点事件：常用用于输入框失去焦点后验证其输入内容是否合法
- onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作
- onsubmit 表单提交事件：常用于表单提交前，验证所有表单像是否合法
- 事件的注册
其实就是告诉浏览器，当事件响应后要执行哪些代码，叫事件注册或绑定- 静态注册：通过html标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册
- 动态注册：是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function(){}这种形式赋于事件响应后的代码，叫动态注册
- 动态注册基本步骤：1、获取标签对象 2、标签对象.事件名 = function(){}
- onload事件：
静态：
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function onloadFun() {alert('静态注册onload事件');}</script>
</head>
<!--静态注册onload事件-->
<!--onload事件是浏览器解析完页面之后就会自动触发的事件-->
<body onload="onloadFun();">
</body>
动态：
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//onload事件动态注册，是固定写法window.onload = function () {alert("动态注册onload事件");}</script>
</head>
<!--动态注册onload事件-->
<!--onload事件是浏览器解析完页面之后就会自动触发的事件-->
<body>
</body>
- onclick事件：
静态：
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function onclickFun() {alert("静态注册onclick事件");}</script>
</head>
<body>
<!--静态注册onclick-->
<button onclick="onclickFun()">按钮1</button>
<button>按钮2</button>
</body>
动态：
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">window.onload = function () {//1、获得标签对象/** document 是JavaScript语言提供的一个对象（文档）* getElementById* */var btnObj = document.getElementById("btn01");//2、通过标签对象.事件名 = function(){}btnObj.onclick = function () {alert("动态注册的onclick事件");}}</script>
</head>
<body>
<!--动态注册onclick事件-->
<button>按钮1</button>
<button id="btn01">按钮2</button>
</body>
- onblur事件
静态：
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//静态注册失去焦点function onblurFun() {//console是控制台对象，是JavaScript语言提供，专门//用来向浏览器的控制器打印输出，用于测试使用//log()是打印方法console.log("静态注册");}</script>
</head>
<body>
用户名<input type="text" onblur="onblurFun()"></input><br/>
密码<input type="password"></input>
</body>
动态：
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//动态注册失去焦点window.onload = function () {//1、获取标签对象var paswordObj = document.getElementById("password");//2、通过标签对象.事件名 = function(){}paswordObj.onblur = function () {console.log("动态注册");}}</script>
</head>
<body>
用户名<input type="text"></input><br/>
密码<input type="password" id="password"></input>
</body>
- onchange事件
静态：
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function onchangeFun() {alert("静态注册onchange");}</script>
</head>
<body>选择:
<!-- 静态注册onchange--><select onchange="onchangeFun()"><option>--女神--</option><option>芳芳</option><option>佳佳</option><option>环环</option></select>
</body>
动态：
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">window.onload = function () {var changeObj = document.getElementById("change");changeObj.onchange = function () {alert("动态注册");}}</script>
</head>
<body>选择:
<!-- 动态注册onchange--><select id="change"><option>--女神--</option><option>芳芳</option><option>佳佳</option><option>环环</option></select>
</body>- onsubmit事件
静态：
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function onsubmitFun() {//静态注册表达提交//要验证所有表单项是否合法，如果，有一个不合法就组织表单提交alert("静态注册表单提交事件");//这个false就是阻止提交表单的return false;}</script>
</head>
<body>
<form action="http://localhost:8080" method="post" onsubmit=" return onsubmitFun()">
<!-- return false 可以阻止表单提交-->
<!-- <form action="http://localhost:8080" method="post" οnsubmit="return false">--><input type="submit" value="静态注册"></input>
</form>
</body>
动态：
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">window.onload = function () {var submitObj = document.getElementById("form01");submitObj.onsubmit = function (){alert("动态注册onsubmit");//这个false就是阻止提交表单的return false;}}</script>
</head>
<body>
<form action="http://localhost:8080" method="post" id="form01"><input type="submit" value="动态注册"></input>
</form>
</body>
12、DOM模型
DOM全称是Document Object Model 文档对象模型
大白话，就是把文档中的标签，属性，文本，转换成对象来管理。
Document对象
Document对象的理解：- 第一点：Document它管理了所有的HTML文档内容
- 第二点：document它是一种树结构的文档，有层级关系
- 第三点：他让我们把所有的标签都对象化
- 第四点：我们可以通过document访问所有的标签对象
Document对象中的方法介绍
- document.getElementById(elementId) 通过标签的id属性查找标签dom对象，elementId是标签的id属性值
- documnet.getElementsByName(elementName)通过标签的name属性查询标签dom对象，elementName标签的name属性值
- document.getElementsByTagName(tagname)通过标签名查询标签dom对象，tagname是标签名
- document.createElement(tagName)通过给定的标签名，创建一个标签对象。tagName是要创建的标签名
getElementById：
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">/** 当用户点击了校验按钮，要获取输入框里面的内容，然后验证其是否合法* 验证的规则是：必须由字母、数字、下划线组成，并且长度是5到12位。* */function onclickFun() {//1、当我们要操作一个标签的时候，一定要获取这个标签的标签对象var usernameObj = document.getElementById("username");// alert(usernameObj.value)var usernameText = usernameObj.value;//验证 字符串 符合某个规则，需要使用正则表达式技术var patt = /^\w{5,12}$/;//test方法用于测试某个字符串，是不是匹配我的规则//匹配就返回true，不匹配就返回falseif(patt.test(usernameText)){alert("用户名合法");}else{alert("用户名不合法");}}</script>
</head>
<body>
用户名：<input type="text" id="username" value="dasds"></input>
<button onclick="onclickFun()">验证</button>
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">/** 当用户点击了校验按钮，要获取输入框里面的内容，然后验证其是否合法* 验证的规则是：必须由字母、数字、下划线组成，并且长度是5到12位。* */function onclickFun() {//1、当我们要操作一个标签的时候，一定要获取这个标签的标签对象var usernameObj = document.getElementById("username");// alert(usernameObj.value)var usernameText = usernameObj.value;//验证 字符串 符合某个规则，需要使用正则表达式技术var patt = /^\w{5,12}$/;//test方法用于测试某个字符串，是不是匹配我的规则//匹配就返回true，不匹配就返回falsevar usernameObj = document.getElementById("usernamespan");//innerHTML 表示起始标签和结束标签中的内容//innerHTML 这个属性可读，可写if(patt.test(usernameText)){usernameObj.innerHTML = "<img src=\"right.png\" width=\"16\" height=\"16\">";}else{usernameObj.innerHTML = "<img src=\"wrong.png\" width=\"16\" height=\"16\">";}
}</script>
</head>
<body>
用户名：<input type="text" id="username" value=""></input>
<span id="usernamespan" style="color: red"></span>
<button onclick="onclickFun()">验证</button>
</body>
getElementByName：
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function checkAll() {//getElementsByName是根据指定的name属性查询返回多个标签集合//这个集合的操作跟数组 一样//集合中每个元素都是dom对象//这个集合中的元素顺序是他们在html页面中从上到下的顺序var hobbies = document.getElementsByName("hobby");//checked表示复选框的选中状态，如果选中是true，不选中是false//这个属性可读，可写for (var i = 0; i < hobbies.length; i++) {hobbies[i].checked = true;}}function checkNo() {var hobbies = document.getElementsByName("hobby");for (var i = 0; i < hobbies.length; i++) {hobbies[i].checked = false;}}function checkReverse() {var hobbies = document.getElementsByName("hobby");for (var i = 0; i < hobbies.length; i++) {hobbies[i].checked = !hobbies[i].checked;// if(hobbies[i].checked == true){// hobbies[i].checked = false;// }else{// hobbies[i].checked = true;// }}}</script>
</head>
<body>
兴趣爱好
<input type="checkbox" name="hobby" value="c++">C++</input>
<input type="checkbox" name="hobby" value="Java">Java</input>
<input type="checkbox" name="hobby" value="jsp">jsp</input><br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>
getElementByTagName：
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function checkAll() {//document.getElementsByTagName()是按照指定标签名来进行查询并返回集合//这个集合的操作跟数组一样//集中都是dom对象//集合中元素顺序 是他们在html页面中从上到下的顺序var inputs = document.getElementsByTagName("input");for (var i = 0; i < inputs.length; i++) {inputs[i].checked = true;}}</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" value="c++">C++</input>
<input type="checkbox" value="Java">Java</input>
<input type="checkbox" value="jsp">jsp</input><br/>
<button onclick="checkAll()">全选</button>
</body>
document对象三个查询方法的注意事项
- 如果有id属性，优先使用getElementById方法来进行查询
- 如果没有id属性，则优先使用getElementsByName方法来进行查询
- 如果id属性和name属性都没有最后再按标签名查getElementsByTagName
以上三个方法，一定要在页面加载完成之后，才能查询到标签对象
节点的常用属性和方法
节点就是标签对象- 方法：通过具体的元素节点调用
getElementByTagName()方法，获取当前节点的指定标签名孩子节点
appendChild(oChildNode)方法，可以添加一个子节点，oChildNode是要添加的孩子节点- 属性：
childNodes属性，获取当前节点的所有子节点
firstChild属性，获取当前节点的第一个子节点
lastChild属性，获取当前节点的最后一个子节点
parentNode属性，获取当前节点的父节点
nextSibling属性，获取当前节点的下一个节点
perviousSibling属性，获取当前节点的上一个节点
className用于获取或设置标签的class属性值
innerHTML属性，表示获取/设置起始标签和结束标签中的内容
innerText属性，表示获取/设置起始标签和结束标签中的文本
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">window.onload = function(){//1.查找#bj节点var btn01Ele = document.getElementById("btn01");btn01Ele.onclick = function () {var bjObj = document.getElementById("bj");alert(bjObj.innerHTML);}//2.查找所有li节点var btn02Ele = document.getElementById("btn02");btn02Ele.onclick = function(){var lis = document.getElementsByTagName("li");alert(lis.length);};//3.查找name=gender的所有节点var btn03Ele = document.getElementById("btn03");btn03Ele.onclick = function(){var genders = document.getElementsByName("gender");alert(genders.length);};//4.查找#city下所有li节点var btn04Ele = document.getElementById("btn04");btn04Ele.onclick = function(){var elementById = document.getElementById("city");var elementsByTagName = elementById.getElementsByTagName("li");alert(elementsByTagName.length)};//5.返回#city的所有子节点var btn05Ele = document.getElementById("btn05");btn05Ele.onclick = function(){var citys = document.getElementById("city");var childNodes = citys.childNodes;alert(childNodes.length)};//6.返回#phone的第一个子节点var btn06Ele = document.getElementById("btn06");btn06Ele.onclick = function(){var elementById = document.getElementById("phone");var firstChild = elementById.firstChild;alert(firstChild.innerHTML);};//7.返回#bj的父节点var btn07Ele = document.getElementById("btn07");btn07Ele.onclick = function(){var elementById = document.getElementById("bj");var parentNode = elementById.parentNode;alert(parentNode.innerHTML);};//8.返回#android的前一个兄弟节点var btn08Ele = document.getElementById("btn08");btn08Ele.onclick = function(){var elementById = document.getElementById("android");var nextSibling = elementById.previousSibling;alert(nextSibling.innerHTML);};//9.读取#username的value属性值var btn09Ele = document.getElementById("btn09");btn09Ele.onclick = function(){var elementById = document.getElementById("username");alert(elementById.value);};//10.设置#username的value属性值var btn10Ele = document.getElementById("btn10");btn10Ele.onclick = function(){var elementById = document.getElementById("username");elementById.value = "你好啊";alert(elementById.value);};//11.返回#bj的文本值var btn11Ele = document.getElementById("btn11");btn11Ele.onclick = function(){// var elementById = document.getElementById("bj");// alert(elementById.innerHTML);var elementById = document.getElementById("city");alert(elementById.innerHTML);};};</script>
</head>
<body>
<div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br /><br /><p>你手机的操作系统是?</p><ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul></div><div class="inner">gender:<input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name:<input type="text" name="name" id="username" value="abcde"/></div>
</div>
<div id="btnList"><div><button id="btn01">查找#bj节点</button></div><div><button id="btn02">查找所有li节点</button></div><div><button id="btn03">查找name=gender的所有节点</button></div><div><button id="btn04">查找#city下所有li节点</button></div><div><button id="btn05">返回#city的所有子节点</button></div><div><button id="btn06">返回#phone的第一个子节点</button></div><div><button id="btn07">返回#bj的父节点</button></div><div><button id="btn08">返回#android的前一个兄弟节点</button></div><div><button id="btn09">返回#username的value属性值</button></div><div><button id="btn10">设置#username的value属性值</button></div><div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
13、正则表达式
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//表示要求字符串中，是否包含字母e// var patt = new RegExp("e");//表示要求字符串中，是否包含字母a或b或c// var patt = /[abc]/;//表示要求字符串，是否包含小写字母// var patt = /[a-z]/;//表示要求字符串，是否包含大写字母// var patt = /A-Z/;//表示要求有数字的// var patt = /[0-9]/;//表示要求字符串，是否包含字母、数字、下划线// var patt = /\w/;//表示要求字符串中至少包含一个a// var patt = /a+/;//表示要求字符串中是否包含0个或多个a// var patt = /a*/;//表示要求字符串是否包含一个或0个a// var patt = /aaaa?/;//表示要求字符串是否包含连续三个a// var patt = /a{3}/;//表示要求字符串是否包含至少三个连续的a，最多5个连续的a// var patt = /a{3,5}/;//表示要求字符串是否包含至少三个连续的a// var patt = /a{3,}/;//表示要求字符串必须以a结尾// var patt = /a$/;//表示要求字符串必须以a开头// var patt = /^a/;//要求字符串中是否包含至少3个连续的a,最多5个连续的avar patt = /^a{3,5}$/;var str = "aaaa";alert(patt.test(str));</script>
</head>
四、jquery
1、基本介绍
- 含义：jQuery就是JavaScript和查询Query，他就是辅助JavaScript开发的js类库
- 核心思想：它的核心思想就是writer less，do more（写的更少，做的更多），所以它实现了很多浏览器的兼容问题
- 流行程度：jQuery现在已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery
- jQuery好处：jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能
注：常见问题
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 先引入jquery--><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">//js 原生的单击事件// window.onload = function () {// var btnObj = document.getElementById("btnId");// btnObj.onclick = function () {// alert("js 原生的单击事件");// }// }//表示页面加载完成之后，相当于window.onload = function(){}$(function () {var $btnObj = $("#btnId"); //表示按id查询标签对象$btnObj.click(function (){//绑定单击事件alert("jquery 的单击事件");})});</script>
</head>
<body><button id="btnId">SayHello</button>
</body>
2、jquery核心函数
- $ 是 j Q u e r y 的核心函数，能完成 j Q u e r y 的很多功能， 是jQuery的核心函数，能完成jQuery的很多功能， 是jQuery的核心函数，能完成jQuery的很多功能，()就是调用$这个函数
- 传入参数为函数时：表示页面加载完成之后，相当于window.onload = function(){}
$(function (){alert("页面加载完成之后，自动显示");
});
- 传入参数为[HTML字符串]：会对我们创建这个html标签对象
$("<div>" +" <span>div-span1</span>" +" <span>div-span2</span>" +" </div>").appendTo("body");
- 传入参数为[选择字符串]：
$(“#id属性值”)：id选择器，根据id查询标签对象
$(“标签名”)：标签名选择器，根据指定的标签名查询标签对象
$(“.class属性值”)：类型选择器，可以根据class属性查询标签对象
$(function (){alert($("button").length);
});
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
- 传入参数为[DOM对象]：会把这个dom对象转换为jQuery对象
var btnObj = document.getElementById("btn01");
alert($(btnObj));
3、jQuery和dom区分
- dom对象
- 通过getElementById()查询出来的标签对象是Dom对象
- 通过getElementByName()查询出来的标签对象是Dom对象
- 通过getElementByTagName()查询出来的标签对象是Dom对象
- 通过creteElement()方法创建的对象是Dom对象
- jQuery对象
- 通过jQuery提供的API创建的对象，是jQuery对象
- 通过jQuery包装的Dom对象，也是jQuery对象
- 通过jQuery提供的API查询到的对象，是jQuery对象
4、jQuery对象的本质是什么
jquery对象是dom对象的数组+jQuery提供的一系列功能函数。
5、jQuery对象和Dom对象使用区别
- jQuery对象不能使用DOM对象的属性和方法
- Dom对象也不能使用jQuery对象的属性和方法
6、Dom对象和jQuery对象互转
- dom对象转化为jQuery对象
- 先有DOM对象
- $(DOM对象)就可以转换成为jQuery对象
- jQuery对象转化为dom对象
- 先有jQuery对象
- jQuery对象[下标]取出相应的DOM对象
7、jQuery选择器
- 基础选择器
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;}</style><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">$(function () {$("#btn1").click(function () {//css方法可以设置和获取样式$("#one").css("background-color", "#bbffaa");});$("#btn2").click(function () {$(".mini").css("background-color", "#bbffaa");})$("#btn3").click(function () {$("div").css("background-color", "#bbffaa");})$("#btn4").click(function () {$("*").css("background-color", "#bbffaa");})$("#btn5").click(function () {$("span,#two").css("background-color", "#bbffaa");})});</script></head><body>
<!-- <div><h1>基本选择器</h1></div> --> <input type="button" value="选择 id 为 one 的元素" id="btn1" /><input type="button" value="选择 class 为 mini 的所有元素" id="btn2" /><input type="button" value="选择 元素名是 div 的所有元素" id="btn3" /><input type="button" value="选择 所有的元素" id="btn4" /><input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" /><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><span class="one" id="span">^^span元素^^</span></body>
- 层级选择器
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;}</style><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">//1、在body中选择所有的div元素$(function () {$("#btn1").click(function () {$("body div").css("background", "#bbffaa");})});//2、在body内，选择div子元素$(function () {$("#btn2").click(function () {$("body > div").css("background", "#bbffaa");})});//3、选择id为one的下一个div元素$(function () {$("#btn3").click(function () {$("#one+div").css("background", "#bbffaa");})});//4、选择id为two的元素后面的所有div兄弟元素$(function () {$("#btn4").click(function () {$("#two~div").css("background", "#bbffaa");})});</script></head><body>
<!-- <div><h1>层级选择器:根据元素的层级关系选择元素</h1>ancestor descendant ：parent > child ：prev + next ：prev ~ siblings ：</div> --><input type="button" value="选择 body 内的所有 div 元素" id="btn1" /><input type="button" value="在 body 内, 选择div子元素" id="btn2" /><input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" /><input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" /><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><span id="span">^^span元素^^</span></body>
- 过滤选择器
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;}</style><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">$(document).ready(function(){function anmateIt(){$("#mover").slideToggle("slow", anmateIt);}anmateIt();});$(document).ready(function(){//1、选择第一个div元素$("#btn1").click(function () {$("div:first").css("background","#bbffaa");});//2、选择最后一个div元素$("#btn2").click(function () {$("div:last").css("background","#bbffaa");});//3、选择class不为one的所有的div元素$("#btn3").click(function () {$("div:not(.one)").css("background","#bbffaa");});//4、选择索引值为偶数的div元素$("#btn4").click(function () {$("div:even").css("background","#bbffaa");});//5、选择索引值为奇数的div元素$("#btn5").click(function () {$("div:odd").css("background","#bbffaa");});//6、选择索引值为大于3的div元素$("#btn6").click(function () {$("div:gt(3)").css("background","#bbffaa");});//7、选择索引值为等于3的div元素$("#btn7").click(function () {$("div:eq(3)").css("background","#bbffaa");});//8、选择索引值为小于3的div元素$("#btn8").click(function () {$("div:lt(3)").css("background","#bbffaa");});//9、选择所有的标题元素$("#btn9").click(function () {$(":header").css("background","#bbffaa");});//10、选择当前正在执行动画的所有元素$("#btn10").click(function () {$(":animated").css("background","#bbffaa");});//11、选择没有执行动画的最后一个div$("#btn11").click(function () {$("div:not(:animated):last").css("background","#bbffaa");});});</script>
</head>
<body><input type="button" value="选择第一个 div 元素" id="btn1" /><input type="button" value="选择最后一个 div 元素" id="btn2" /><input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" /><input type="button" value="选择索引值为偶数的 div 元素" id="btn4" /><input type="button" value="选择索引值为奇数的 div 元素" id="btn5" /><input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" /><input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" /><input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" /><input type="button" value="选择所有的标题元素" id="btn9" /><input type="button" value="选择当前正在执行动画的所有元素" id="btn10" /> <input type="button" value="选择没有执行动画的最后一个div" id="btn11" /><h3>基本选择器.</h3><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><div id="mover">正在执行动画的div元素.</div>
</body>
- 内容选择过滤器
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;}</style><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">$(document).ready(function(){function anmateIt(){$("#mover").slideToggle("slow", anmateIt);}anmateIt(); });/** :contains(text) :empty :has(selector) :parent */$(document).ready(function(){//1.选择 含有文本 'di' 的 div 元素$("#btn1").click(function(){$("div:contains('di')").css("background", "#bbffaa");});//2.选择不包含子元素(或者文本元素) 的 div 空元素$("#btn2").click(function(){$("div:empty").css("background", "#bbffaa");});//3.选择含有 class 为 mini 元素的 div 元素$("#btn3").click(function(){$("div:has(.mini)").css("background", "#bbffaa");});//4.选择含有子元素(或者文本元素)的div元素$("#btn4").click(function(){$("div:parent").css("background", "#bbffaa");});});</script>
</head>
<body> <input type="button" value="选择 含有文本 'di' 的 div 元素" id="btn1" /><input type="button" value="选择不包含子元素(或者文本元素) 的 div 空元素" id="btn2" /><input type="button" value="选择含有 class 为 mini 元素的 div 元素" id="btn3" /><input type="button" value="选择含有子元素(或者文本元素)的div元素" id="btn4" /><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><div id="mover">正在执行动画的div元素.</div>
</body>
- 属性过滤选择器
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">div,span,p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;
}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;
}div.hide {display: none;
}</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">/**
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN] */$(function() {//1.选取含有 属性title 的div元素$("#btn1").click(function() {$("div[title]").css("background", "#bbffaa");});//2.选取 属性title值等于'test'的div元素$("#btn2").click(function() {$("div[title='test']").css("background", "#bbffaa");});//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)$("#btn3").click(function() {$("div[title!='test']").css("background", "#bbffaa");});//4.选取 属性title值 以'te'开始 的div元素$("#btn4").click(function() {$("div[title^='te']").css("background", "#bbffaa");});//5.选取 属性title值 以'est'结束 的div元素$("#btn5").click(function() {$("div[title$='est']").css("background", "#bbffaa");});//6.选取 属性title值 含有'es'的div元素$("#btn6").click(function() {$("div[title*='es']").css("background", "#bbffaa");});//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素$("#btn7").click(function() {$("div[id][title*='es']").css("background", "#bbffaa");});//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素$("#btn8").click(function() {$("div[title][title!='test']").css("background", "#bbffaa");});});</script>
</head>
<body><input type="button" value="选取含有 属性title 的div元素." id="btn1" style=""/><input type="button" value="选取 属性title值等于'test'的div元素." id="btn2" /><input type="button"value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3" /><input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4" /><input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5" /><input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6" /><input type="button"value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素."id="btn7" /><input type="button"value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8" /><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display: none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div>包含input的type为"hidden"的div<input type="hidden" value="123456789"size="8"></div><div id="mover">正在执行动画的div元素.</div>
</body>
- 表单过滤过滤器
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){/**:input :text :password :radio :checkbox :submit :image :reset :button :file :hidden 表单对象的属性:enabled :disabled :checked :selected *///1.对表单内 可用input 赋值操作$("#btn1").click(function(){//val可以操作表单项的value属性值//他可以设置和获取$(":text:enabled").val("Hello World");});//2.对表单内 不可用input 赋值操作$("#btn2").click(function(){$(":text:disabled").val("toto");});//3.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数$("#btn3").click(function(){alert($(":checkbox:checked").length);});//4.获取多选框，每个选中的value值$("#btn4").click(function(){// 获取全部选中的复选框标签对象var $checkboxs = $(":checkbox:checked");$checkboxs.each(function () {alert(this.value);})});//5.获取下拉框选中的内容$("#btn5").click(function(){var $select = $("select option:checked");$select.each(function () {alert(this.value);})});})</script>
</head>
<body><h3>表单对象属性过滤选择器</h3><button id="btn1">对表单内 可用input 赋值操作.</button><button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br /><button id="btn3">获取多选框选中的个数.</button><button id="btn4">获取多选框选中的内容.</button><br /><br /><button id="btn5">获取下拉框选中的内容.</button><br /><br /><form id="form1" action="#"> 可用元素: <input name="add" value="可用文本框1"/><br>不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>可用元素: <input name="che" value="可用文本框2"/><br>不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br><br>多选框: <br><input type="checkbox" name="newsletter" checked="checked" value="test1" />test1<input type="checkbox" name="newsletter" value="test2" />test2<input type="checkbox" name="newsletter" value="test3" />test3<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4<input type="checkbox" name="newsletter" value="test5" />test5<br><br>下拉列表1: <br><select name="test" multiple="multiple" style="height: 100px" id="sele1"><option>浙江</option><option selected="selected">辽宁</option><option>北京</option><option selected="selected">天津</option><option>广州</option><option>湖北</option></select><br><br>下拉列表2: <br><select name="test2"><option>浙江</option><option>辽宁</option><option selected="selected">北京</option><option>天津</option><option>广州</option><option>湖北</option></select></form>
</body>
- 元素的筛选
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>DOM查询</title><style type="text/css">div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;}</style><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">$(document).ready(function(){function anmateIt(){$("#mover").slideToggle("slow", anmateIt);}anmateIt();/*
过滤
eq(index|-index)
first()
last()
hasClass(class)
filter(expr|obj|ele|fn)
is(expr|obj|ele|fn)1.6*
has(expr|ele)
not(expr|ele|fn)
slice(start,[end])
查找
children([expr])
closest(expr,[con]|obj|ele)1.6*
find(expr|obj|ele)
next([expr])
nextall([expr])
nextUntil([exp|ele][,fil])1.6*
parent([expr])
parents([expr])
parentsUntil([exp|ele][,fil])1.6*
prev([expr])
prevall([expr])
prevUntil([exp|ele][,fil])1.6*
siblings([expr])
串联
add(expr|ele|html|obj[,con])
*///(1)eq() 选择索引值为等于 3 的 div 元素$("#btn1").click(function(){$("div").eq(3).css("background-color","#bfa");});//(2)first()选择第一个 div 元素$("#btn2").click(function(){//first() 选取第一个元素$("div").first().css("background-color","#bfa");});//(3)last()选择最后一个 div 元素$("#btn3").click(function(){//last() 选取最后一个元素$("div").last().css("background-color","#bfa");});//(4)filter()在div中选择索引为偶数的$("#btn4").click(function(){//filter() 过滤 传入的是选择器字符串$("div").filter(":even").css("background-color","#bfa");});//(5)is()判断#one是否为:empty或:parent//is用来检测jq对象是否符合指定的选择器$("#btn5").click(function(){// alert($("#one").is(":empty"));alert($("#one").is(":parent"));});//(6)has()选择div中包含.mini的$("#btn6").click(function(){//has(selector) 选择器字符串 是否包含selector$("div").has(".mini").css("background-color","#bfa");});//(7)not()选择div中class不为one的$("#btn7").click(function(){//not(selector) 选择不是selector的元素$("div").not(".one").css("background-color","#bfa");});//(8)children()在body中选择所有class为one的div子元素$("#btn8").click(function(){//children() 选出所有的子元素$("body").children("div.one").css("background-color","#bfa");});//(9)find()在body中选择所有class为mini的div元素$("#btn9").click(function(){//find() 选出所有的后代元素$("body").find("div.mini").css("background-color","#bfa");});//(10)next() #one的下一个div$("#btn10").click(function(){//next() 选择下一个兄弟元素$("#one").next("div").css("background-color","#bfa");});//(11)nextAll() #one后面所有的span元素$("#btn11").click(function(){//nextAll() 选出后面所有的元素$("#one").nextAll("span").css("background-color","#bfa");});//(12)nextUntil() #one和span之间的元素$("#btn12").click(function(){//$("#one").nextUntil("span").css("background-color","#bfa")});//(13)parent() .mini的父元素$("#btn13").click(function(){$(".mini").parent().css("background-color","#bfa");});//(14)prev() #two的上一个div$("#btn14").click(function(){//prev()$("#two").prev().css("background-color","#bfa")});//(15)prevAll() span前面所有的div$("#btn15").click(function(){//prevAll() 选出前面所有的元素$("span").prevAll("div").css("background-color","#bfa")});//(16)prevUntil() span向前直到#one的元素$("#btn16").click(function(){//prevUntil(exp) 找到之前所有的兄弟元素直到找到exp停止$("span").prevUntil("#one").css("background-color","#bfa")});//(17)siblings() #two的所有兄弟元素$("#btn17").click(function(){$("#two").siblings("div").css("background-color","#bfa");});//(18)add()选择所有的 span 元素和id为two的元素$("#btn18").click(function(){$("span").add("#two").css("background-color","#bfa");});});</script>
</head>
<body> <input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" /><input type="button" value="first()选择第一个 div 元素" id="btn2" /><input type="button" value="last()选择最后一个 div 元素" id="btn3" /><input type="button" value="filter()在div中选择索引为偶数的" id="btn4" /><input type="button" value="is()判断#one是否为:empty或:parent" id="btn5" /><input type="button" value="has()选择div中包含.mini的" id="btn6" /><input type="button" value="not()选择div中class不为one的" id="btn7" /><input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" /><input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" /><input type="button" value="next()#one的下一个div" id="btn10" /><input type="button" value="nextAll()#one后面所有的span元素" id="btn11" /><input type="button" value="nextUntil()#one和span之间的元素" id="btn12" /><input type="button" value="parent().mini的父元素" id="btn13" /><input type="button" value="prev()#two的上一个div" id="btn14" /><input type="button" value="prevAll()span前面所有的div" id="btn15" /><input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" /><input type="button" value="siblings()#two的所有兄弟元素" id="btn17" /><input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18" /><h3>基本选择器.</h3><br /><br />文本框<input type="text" name="account" disabled="disabled" /><br><br><div class="one" id="one">id 为 one,class 为 one 的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two,class为one,title为test的div<div class="mini" title="other"><b>class为mini,title为other</b></div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为"none"的div</div><div class="hide">class为"hide"的div</div><span id="span1">^^span元素 111^^</span><div>包含input的type为"hidden"的div<input type="hidden" size="8"></div><span id="span2">^^span元素 222^^</span><div id="mover">正在执行动画的div元素.</div>
</body>
8、jquery属性操作
- html() 它可以设置和获取起始标签和结束标签中的内容，跟dom属性innerHTML一样
- text() 它可以设置和获取起始标签和结束标签中的文本，跟dom属性innerText一样
- val() 它可以设置和获取表单项的value属性值，跟dom属性value一样。
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../jQuery/script/jquery-1.7.2.js"></script><script type="text/javascript">$(function () {// $("div").html("<h1> nihoa </h1>");// alert($("div").html());// $("div").text("hello world");// alert($("div").text());$("#btn01").click(function () {alert($("input").val());})});</script>
</head>
<body>
<div>我是div<span>我是div中的span</span></div>
这里输入<input type="text" value="aaa"></input>
<button id="btn01">提交</button>
</body>
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../jQuery/script/jquery-1.7.2.js"></script><script type="text/javascript">$(function () {// //批量单选操作// $(":radio").val(["radio1"]);// //批量复选框的选中状态// $(":checkbox").val(["checkbox1","checkbox2","checkbox3"],);// //下拉框多选的选中操作// $("#mult").val(["mul2", "mul4"])// //下拉框单选的选中操作// $("#single").val(["sin3"]);//一次性批量操作单选、多选、下拉框操作$(":radio,:checkbox,#mult,#single").val(["radio2","checkbox3","checkbox2", "mul2", "mul3", "sin2"]);});</script>
</head>
<body>
单选<input name="radio" type="radio" value="radio1"></input>
<input name="radio" type="radio" value="radio2"></input><br/>
多选<input type="checkbox" value="checkbox1"></input>
<input type="checkbox" value="checkbox2"></input>
<input type="checkbox" value="checkbox3"></input><br/>
多选下拉：
<select id="mult" multiple="multiple" size="4"><option value="mul1">1</option><option value="mul2">2</option><option value="mul3">3</option><option value="mul4">4</option>
</select><br/>
单选下拉：
<select id="single"><option value="sin1">1</option><option value="sin2">2</option><option value="sin3">3</option>
</select>
</body>
9、attr和prop方法
- attr() 可以设置和获取属性的值，不推荐操作checked、selected、readOnly、disabled等等
- attr方法还可以操作非标准的属性。比如自定义属性：abc啥的
- prop() 可以设置和获取属性的值，只推荐checked、selected、readOnly、disabled等等
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../jQuery/script/jquery-1.7.2.js"></script><script type="text/javascript">$(function () {//attr//传一个参数是获取，两个参数是对应设置// $(":checkbox:first").attr("name","hello world");// alert($(":checkbox:first").attr("name"));//官方觉得返回一个undefined是一个错误// alert($(":checkbox").attr("checked"));//attr还可以设置和获取一些自定义的属性$(":checkbox:first").attr("abc", "hello world");alert($(":checkbox:first").attr("abc"));// alert($(":checkbox").first().prop("checked", false));});</script>
</head>
<body>
多选<input name="checkbox1" type="checkbox" value="checkbox1"></input>
<input name="checkbox2" type="checkbox" value="checkbox2"></input>
<input name="checkbox3" type="checkbox" value="checkbox3"></input><br/>
</body>
10、dom的增、删、查
- 内部插入：
- appendTo() a.appendTo(b) 把a插入到b子元素末尾，成为最后一个子元素
- prependTo() a.prependTo(b) 把a插到b所有子元素前面，成为第一个子元素
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../jQuery/script/jquery-1.7.2.js"></script><script type="text/javascript">$(function () {$("<h1>标题1</h1>").appendTo("div");$("<h1>标题2</h1>").prependTo("body");});</script> </head> <body> 多选<input name="checkbox1" type="checkbox" value="checkbox1"></input> <input name="checkbox2" type="checkbox" value="checkbox2"></input> <input name="checkbox3" type="checkbox" value="checkbox3"></input><br/> <br></br> <div>123456</div> - 外部插入：
- insertAfter() a.insertAfter(b) 得到ba
- insertBefore() a.insertBefore(b) 得到ab
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../jQuery/script/jquery-1.7.2.js"></script><script type="text/javascript">$(function () {$("<h1>标题1</h1>").insertAfter("div");$("<h1>标题2</h1>").insertBefore("body");});</script></head><body>多选<input name="checkbox1" type="checkbox" value="checkbox1"></input><input name="checkbox2" type="checkbox" value="checkbox2"></input><input name="checkbox3" type="checkbox" value="checkbox3"></input><br/><br></br><div>123456</div><div>123456</div></body> - 替换
- replaceWith() a.replaceWith(b) 用b替换a
- repalceAll() a.replaceAll(b) 用a替换掉所有b
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="../jQuery/script/jquery-1.7.2.js"></script><script type="text/javascript">$(function () {// $("div").replaceWith($("<h1>标题</h1>"));$("<h1>标题</h1>").replaceAll("div");});</script>
</head>
<body>
多选<input name="checkbox1" type="checkbox" value="checkbox1"></input>
<input name="checkbox2" type="checkbox" value="checkbox2"></input>
<input name="checkbox3" type="checkbox" value="checkbox3"></input><br/>
<br></br>
<div>123456</div>
<div>123456</div>
</body>
- 删除
- remove() a.remove() 删除a标签
- empty() a.empty() 清空a标签里面的内容
<script type="text/javascript">$(function () {// $("div").remove();$("div").empty();});</script>
11、CSS样式操作
- addClass() 添加样式
- removeClass() 删除样式
- toggleClass() 有就删除，没有就添加样式
- offset() 获取和设置元素的坐标
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">div{width:100px;height:260px;}div.whiteborder{border: 2px white solid;}div.redDiv{background-color: red;}div.blueBorder{border: 5px blue solid;}</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">$(function(){var $divEle = $('div:first');$('#btn01').click(function(){//addClass() - 向被选元素添加一个或多个类$divEle.addClass("redDiv blueBorder");});$('#btn02').click(function(){//removeClass() - 从被选元素删除一个或多个类$divEle.removeClass("redDiv blueBorder");});$('#btn03').click(function(){//toggleClass() - 对被选元素进行添加/删除类的切换操作$divEle.toggleClass("redDiv");});$('#btn04').click(function(){//offset() - 返回第一个匹配元素相对于文档的位置。var offset = $divEle.offset();console.log(offset);$divEle.offset({top:100,left:50});});})</script>
</head>
<body><table align="center"><tr><td><div class="border"></div></td><td><div class="btn"><input type="button" value="addClass()" id="btn01"/><input type="button" value="removeClass()" id="btn02"/><input type="button" value="toggleClass()" id="btn03"/><input type="button" value="offset()" id="btn04"/></div></td></tr></table><br /> <br /><br /> <br />
</body>
12、动画操作
- 基本动画
- show() 将隐藏的元素显示
- hide() 将可见的元素隐藏
- toggle() 可见就隐藏，不可见就显示
以上动画方法都可以添加参数
1）第一个参数就是动画执行的时长，以毫秒为单位
2）第二个参数就是动画的回调函数（动画完成后自动调用的函数） - 淡入淡出动画
- fadeln() 滚入（慢慢可见）
- fadeOut() 滚出（慢慢消失）
- fadeTo() 在指定时长内慢慢的将透明度修改到指定的值，0不可见，1完全可见，0.5半透明
- fadeToggle() 淡入/淡出 切换
以上动画方法都可以添加参数
1）第一个参数就是动画执行的时长，以毫秒为单位
2）第二个参数就是动画的回调函数（动画完成后自动调用的函数）
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link href="css/style.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">/* 基本show([speed,[easing],[fn]]) hide([speed,[easing],[fn]]) toggle([speed],[easing],[fn]) 滑动slideDown([spe],[eas],[fn]) slideUp([speed,[easing],[fn]]) slideToggle([speed],[easing],[fn]) 淡入淡出fadeIn([speed],[eas],[fn]) fadeOut([speed],[eas],[fn]) fadeTo([[spe],opa,[eas],[fn]]) fadeToggle([speed,[eas],[fn]])*/$(function(){//显示 show()$("#btn1").click(function (){$("#div1").show(1000, function () {alert("show 动画完成");});});//隐藏 hide()$("#btn2").click(function(){$("#div1").hide(1000);}); //切换 toggle()$("#btn3").click(function(){$("#div1").toggle(1000);});// var a = function () {// $("#div1").toggle(1000, a);// }// a();//淡入 fadeIn()$("#btn4").click(function(){$("#div1").fadeIn();}); //淡出 fadeOut()$("#btn5").click(function(){$("#div1").fadeOut();}); //淡化到 fadeTo()$("#btn6").click(function(){$("#div1").fadeTo(2000, 0.5);}); //淡化切换 fadeToggle()$("#btn7").click(function(){$("#div1").fadeToggle();}); })</script></head><body><table style="float: left;"><tr><td><button id="btn1">显示show()</button></td></tr><tr><td><button id="btn2">隐藏hide()</button></td></tr><tr><td><button id="btn3">显示/隐藏切换 toggle()</button></td></tr><tr><td><button id="btn4">淡入fadeIn()</button></td></tr><tr><td><button id="btn5">淡出fadeOut()</button></td></tr><tr><td><button id="btn6">淡化到fadeTo()</button></td></tr><tr><td><button id="btn7">淡化切换fadeToggle()</button></td></tr></table><div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果</div></body>
13、原生JS和jQuery页面加载完之后的区别
- 他们触发的顺序
- jQuery页面加载完成之后先执行
- 原生js的页面加载完成之后
- 在什么时候触发
- jQuery页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象就会马上执行
- 原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好的DOM对象，还要等标签显示时需要的内容加载完成。
- 执行的次数？
- jQuery的页面加载完成之后是全部把注册的function函数，依次顺序全部执行。
- 原生JS的页面加载完成之后，只会执行最后一次的赋值函数。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title><script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">window.onload = function () {alert("原生js的页面加载完成之后--1")}window.onload = function () {alert("原生js的页面加载完成之后--2")}window.onload = function () {alert("原生js的页面加载完成之后--3")}$(function () {alert("jquery的页面加载完成 之后--3")});// jquery的页面加载完成 之后$(function () {alert("jquery的页面加载完成 之后--1")});$(function () {alert("jquery的页面加载完成 之后--2")});</script>
</head>
<body><button>我是按钮</button><iframe src="http://localhost:8080"></iframe><img src="http://localhost:8080/1.jpg" alt=""/>
</body>
14、jQuery中常用的事件处理方法
- click 它可以绑定单击事件，以及触发单击事件
- mouserover 鼠标移入事件
- mouseout 鼠标移出事件
- blid 可以给元素一次性绑定一个或者多个事件
- one 使用上跟bind一样，但是one方法绑定的事件只会响应一次
- unbind 跟bind方法相反的操作，解除事件的绑定
- live 也是用来绑定事件，它可以用来绑定选择器匹配的所有元素的事件，哪怕这个元素是后面动态创建出来的也有效
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><link href="css/style.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){// $("h5").click(function () { //传function是绑定事件// alert("绑定单击事件");// });$("h5").live("click", function () {alert("使用live绑定的单击事件");})$('<h5 class="head"> 什么是jQuery?</h5>').appendTo($("#panel"))//// $("button").click(function () {// $("h5").click(); //不传function是触发事件// });//// $("h5").mouseover(function () {// console.log("你进来拉");// });//// $("h5").mouseout(function () {// console.log("你出去了");// });//// $("h5").bind("click mouseover mouseout", function () {// console.log("这是bind绑定的事件");// });// $("h5").one("click mouseover mouseout", function () {// console.log("这是bind绑定的事件");// });////没有参数就是 全部解绑了// $("h5").unbind("click mousevoer");});</script></head>
<body><div id="panel"><h5 class="head">什么是jQuery?</h5><div class="content">jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。</div><button>按钮</button></div>
</body>
15、事件的冒泡
什么是事件的冒泡
是指，父子元素同时监听同一个事件，当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里面去响应。如何去阻止事件冒泡
在事件函数体中，return false ，可以阻止事件的冒泡传递
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><style type="text/css">*{margin: 0;padding: 0;}body{font-size: 13px;line-height: 130%;padding: 60px;}#content{width: 220px;border: 1px solid #0050D0;background: #96E555;}span{width: 200px;margin: 10px;background: #666666;cursor: pointer;color: white;display: block;}p{width: 200px;background: #888;color: white;height: 16px;}</style><script type="text/javascript" src="../script/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){$("#content").click(function () {alert('我是div');});$("span").click(function () {alert('我是span');//用return false来阻止冒泡传递上去return false;});})</script>
</head>
<body><div id="content">外层div元素<span>内层span元素</span>外层div元素</div><div id="msg"></div><br><br><a href="http://www.hao123.com">WWW.HAO123.COM</a>
</body>
16、JavaScript事件对象
- 事件对象，是封装有触发事件信息的一个javascript对象，我们重点关心的是怎么拿到这个javascript的时间对象，以及使用
- 如何如何获取java事件对象
在给元素绑定事件的时候，在事件的function(event)参数列表中添加一个参数，这个参数名，我们习惯取名为event，这个event就是javascript传递参时间处理函数的事件对象
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">#areaDiv {border: 1px solid black;width: 300px;height: 50px;margin-bottom: 10px;}#showMsg {border: 1px solid black;width: 300px;height: 20px;}</style><script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">//1.原生javascript获取 事件对象// window.onload = function () {// document.getElementById("areaDiv").onclick = function (event){// console.log(event);// };// };//2.JQuery代码获取 事件对象$(function () {// $("#areaDiv").click(function (event) {// console.log(event);// });//3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。$("#areaDiv").bind("mouseover mouseout", function (event) {if(event.type == "mouseover"){console.log("鼠标移入mouseover");}else{console.log("鼠标移出mouseout");}});});</script>
</head>
<body><div id="areaDiv"></div><div id="showMsg"></div>
</body>
JavaWeb尚硅谷【学习笔记】（整合）未完成相关推荐
- Java 基础 第3阶段：高级应用——尚硅谷学习笔记（含面试题） 2023年
Java 基础 第 3 阶段:高级应用--尚硅谷学习笔记(含面试题) 2023 年 Java 基础 第 3 阶段:高级应用--尚硅谷学习笔记(含面试题) 2023 年 第 9 章 异常处理 9.1 异 ...
- B站MySQL(尚硅谷)学习笔记
B站MySQL基础(尚硅谷)学习笔记 最近在学习数据库技术,并且把视频中的知识点进行了汇总,字数较多,仅供参考. 会持续更新 欢迎读者提出问题与错误,一起交流~ 视频前几集所讲述的基本知识: DB:数 ...
- SpringBoot（尚硅谷学习笔记）
1.SpringBoot优点(官网 spring.io) Create stand-alone Spring applications 创建独立Spring应用 Embed Tomcat, Jetty ...
- 8-zookeeper算法基础（尚硅谷学习笔记）
目录 拜占庭将军问题 paxos算法 paxos算法流程 情况一 情况二 情况1 情况2 ZAB协议 ZAB协议内容 消息广播 过程 可能出现的问题 崩溃恢复 异常假设 leader选举 数据恢复 C ...
- 尚硅谷学习笔记-节点的常用属性和方法
节点的常用属性和方法[图片在末尾] 方法: 通过具体的元素节点调用 getElementsByTagName() 方法,获取当前节点的指定标签名孩子节点 appendChild( oChildNode ...
- [React] 尚硅谷 -- 学习笔记(七)
第七章 react-ui 最流行的开源React UI组件库 material-ui(国外) 官网 GitHub ant-design(国内蚂蚁金服) PC官网 GitHub 移动官网 GitHub ...
- [React] 尚硅谷 -- 学习笔记(六)
第六章 react-router4 理解 react-router react的一个插件库 专门用来实现一个SPA应用 基于react的项目基本都会用到此库 SPA 单页Web应用(single pa ...
- [React] 尚硅谷 -- 学习笔记(五)
第五章 总结 组件间通信 通过props传递 共同的数据放在父组件上, 特有的数据放在自己组件内部(state) 通过props可以传递一般数据和函数数据, 只能一层一层传递 一般数据–>父组件 ...
- [React] 尚硅谷 -- 学习笔记(四)
第四章 react ajax 理解 React本身只关注于界面, 并不包含发送ajax请求的代码 前端应用需要通过ajax请求与后台进行交互(json数据) react应用中需要集成第三方ajax库( ...
- [React] 尚硅谷 -- 学习笔记(三)
第三章 react应用(基于react脚手架) 使用create-react-app创建react应用 react脚手架 xxx 脚手架:用来帮助程序员快速创建一个基于 xxx 库的模板项目 包含了所 ...
最新文章
- pythonjson数据写入csv_将JSON数据从“Requests”Python模块写入CSV
- 【产品经理求职攻略】10年产品人经验分享
- How to Get Name of Months in ABAP/4
- 添加javascript代码:_javascript事件？你又了解多少呢
- imx226_相机选型器
- const 常量_var，let，const 的区别？
- Python爬虫的基本原理
- Kafka相关面试真题整理（ 持续更新... ... ）
- c语言入口参数和出口参数,麻烦帮忙指出一下这个函数的入口参数和出口参数呀！...
- vs2010编译curl为static库及测试
- 乘坐飞机时，有什么事情是机长和机上工作人员不想让乘客知道的？
- mysql使用sql脚本建立数据库
- 策略模式详解（用java语言实现策略模式）
- 离散数学第二章（知识点总结）续
- exec还原oracle,symantec Backup exec 恢复Recovery Oracle 数据库
- 无法理解高等数学怎么办？
- JavaScript笔记 Object对象
- python创建按钮command怎么用,python按钮调用函数
- 钉钉机器人V1使用说明
- Vscode运行java代码和c++代码时Terminal输出乱码？