学习:JAVAEE_2 HTML/CSS/JavaScript/JQuery-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_58228816/article/details/145110064

HTML

HTML学习内容： 1.学习常用的标签 2.学习标签的常用属性 3.使用时查询 HTML 教程

html文件： 1.后缀名 .html (推荐) .htm 2.文件主要书写html标签 3.html文件依赖浏览器运行注意: 编写好的html文件直接使用浏览器打开即可

html是由标签组成的,通过标签展示页面效果. 一个标签展示一种效果 html中的标签不是随便写的 html中的标签是万维网组织给制定的,每一个标签都有固定的一种效果. 我们在html中不能自定义标签,必须使用万维网制定的这些标签 html 和 xml 有什么关系? html: 超文本标记语言,开发网页,开发出的网页直接使用浏览器展示即可 xml: 可扩展标记语言,做配置文件或数据传递的载体二者都是标记语言,html是特殊的xml,xml中的标签可以自定义,但是html中的标签都是预定义的.

html(超文本标记语言):全称Hyper Text Markup Language
超文本: 超越普通文本,可以存放图片,文字,超链接等..
标记: 指的是html定义好的标签
语言: 人跟网页交流的工具
作用: 编写网页,编写出的网页直接使用浏览器打开即可
注意: html是一门弱类型的语言,语法要求不严格
		容错机制: 允许你不按固定编写代码

HTML基本结构

<!DOCTYPE html> <!-- 文档声明,声明此文件为html文件,遵循html5的规范 -->
<html>  <!-- html页面的根标签,一般一个页面中只有一个根标签 -->
  <head> <!-- head标签: 头标签,存放网页的重要信息,一般不在页面上显示 -->
    <meta charset="utf-8" /> <!-- meta:元标签,非常重要,指定当前页面的编码方式 -->
    <title>我是第一个网页</title> <!-- title标签:标题标签,给网页起名名 --> 
    <style></style> <!-- 样式标签: 编写css样式 -->
    <link></link>  <!-- 样式标签: 引入css样式 -->
  </head> 
  <body> <!-- body标签: 主体标签,存放在网页中展示的内容 -->
    <h1>页面展示内容!<h1/>
  </body>
</html>

标签分类

根据标签的书写方式:
  单标签(空标签): 只有开始标签,没有结束标签和标签体
    <xxx/>
    eg: <meta/>  <br/>
  双标签: 有开始标签和结束标签,开始标签和结束标签中的内容叫做标签体.结束标签前需要加 /
    <xxx>标签体</xxx>
    eg: <html></html> <title></title>
根据展示效果:
  行级标签(块标签):
    当前标签所展示的内容在页面上---独自占一行
    也就是说,行级标签写完后,会自动换行
    eg: <br/> 换行标签
  行内标签:
    当前标签所展示的内容在一行内
    也就是说,行内标签写完后,不会自动换行
    eg: <a>zml</a> 超链接

标签的属性

属性作用:
对标签进一步的描述与说明
eg: 重要标签,charset属性是对页面编码的说明
<meta charset="utf-8"/>
在java中我们经常创建学生对象,在学生对象中有很多属性,(姓名,年龄,性别,成绩...)
属性的书写规范:
单标签:
<xxx 属性名称="属性值" 属性名称1="属性值1" />
双标签: 双标签的属性写在开始标签上
<xxx 属性名称="属性值" 属性名称1="属性值1" >标签体</xxx>

属性:
width: 宽度
size: 厚度
color: 颜色
英文单词
align: 对齐方式
left
center: 默认
right
大小取值:
百分比取值法: 使用百分比取值
像素取值:  单位 px
颜色取值:
英文单词取值法: 使用颜色对应的英文单词
RGB: red green blue
#01234f   #01f  0-f 是16进制位的取值
前2位: 红色占的比重
中2位: 绿色占的比重
后2位: 蓝色占的比重

快捷键补全:table>tr*3>td*4

常用标签

标签名	常用属性	使用方法	说明
h	align：水平对齐方式,只有行级标签才有此属性 left: 左对齐(默认) right: 右对齐 center: 居中对齐	`<h1 align="center">zml</h1>`	水平居中的一级标题。标题标签取值：h1~h6
hr	size：粗细 color：颜色 width: 宽度 noshade:取消阴影	`<hr size="2" color="orange" noshade="noshade"/>`	在页面上创建一条size="2"橘黄色的水平线
font	color：颜色，size：大小，face：字体	`<font color="red" size="7" face="宋体">html</font>`	修饰文字的颜色，字号和字体
b	无	`<b>java</b>`	将文字加粗
i	无	`<i>c++</i>`	文字倾斜
p	无	`<p>c#</p>`	将文字划分段落
br	无	`html<br />xml`	手动换行

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      p {
        text-indent: 2em; // 所有的p标签首行缩进两个汉字位置
      }
    </style>
  </head>
  <body>
    <h1 align="right" hidden>标题标签,取值1-6 align是对齐方式 hidden 隐藏属性</h1>

    <!-- 水平线标签 size :高度 color 颜色 width 宽度 align 对齐方式-->
    <hr size="70" color="blue" width="50%" align="left">

    <font color="brown" size="7">字体标签color颜色,size字体大小,最大取值7号.超过7号以7号字体展示</font>

    <b>加粗标签</b> <strong>加粗</strong> <i>斜体标签</i>

    <p id="锚点定位">段落标签</p> <br>换行标签
    <a href="#锚点定位" target="_self">超链接标签 target 打开方式 _blank 新窗口打开 _self 当前窗口打开 href 值为#时跳转当前页面</a>
    <!-- 转义字符 -->
    空格:&nbsp; 小于:&lt; 大于:&gt; &符:&amp; 双引号:&quot; 版权符:&copy;乘号:&times;除号:&divide;

    <!-- 图片标签  属性:src:设置图片路径 width:宽度 height:高度 alt:图片路径错误提示 title:鼠标悬停提示-->
    <!-- 绝对路径: 绝对与当前计算机:例如/Users/zhumingli/Documents/壁纸/74078288_p0.png 由于安全问题显示不出来
绝对与互联网:例如https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
相对路径: 当前目录:./ (可以省略不写) 上一级目录:../ 
-->
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="错误提示" width="50%" height="50%"title="百度图片">

    <ol type="1" start="3">
      <li>type 有序列表序列类型</li>
      <li>start 有序列表列初始值</li>
    </ol>
    <ul>
      <li>无序列表</li>
      <li>无序列表</li>
    </ul>

    <!-- 
表格标签的完整格式
<table>
<caption>标题</caption>
<thead>
<tr> 
<td>Dog Breed</td>
<td> Dog Name </td>
</tr>
</thead> 
<tbody>
<tr>
<td>Labrador retriever</td> 
<td> Lucky </td>
</tr> 
<tr> 
<td>Golden retriever </td> 
<td> Jordo </td> 
<tr> 
</tbody> 
<tfoot class="smalltext" > 
<tr> 
<td>From the article "Common Dog breeds and names". </td> 
</tr> 
</tfoot> 
</table> 
-->
    <table border="1" width="1200px" height="400px"align="center" bgcolor="chartreuse" cellpadding="20px" cellspacing="10">
      <tr>
        <th width="33%" bgcolor="aqua">table表格标签 tr 行标签 th表头单元格居中加粗 td普通单元格标签</th>
        <th width="33%">bgcolor 背景色 cellpadding 文字离边框的距离</th>
        <th width="33%" rowspan="2">cellspacing 单元格之间的距离 rowspan 列级合并 </th>
      </tr>
      <tr height="200px" align="center" bgcolor="beige">
        <td width="66%" colspan="2">colspan 行级合并</td>
      </tr>
    </table>

    <!-- 表单标签
通用属性:	name 	给单选框和复选框进行分组 	表单中的值要被收集并提交给服务器必须有name属性
value 	给按钮起名称 				设置提交给服务器的默认值 
readonly 	设置只读
disabled 	设置禁用
checked 	单选框复选框的默认选中状态设置 
placeholder 输入框灰色提示信息 
-->
    <form action="提交路径" method="get">
      <input type="text"> 文本框<br>
      <input type="password"> 密文框 <br> 
      <input type="radio" name="sex" checked> <input type="radio" name="sex"/> 单选框<br>
      <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> 复选框<br>
      <input type="image" src="图片地址" width="100px" height="20px"> 图片提交输入框 提交时会带上鼠标点击的图片的位置<br>
      <input type="file"> 文件上传输入框<br>
      <input type="hidden"> 隐藏输入框<br>
      <input type="email"> 邮件地址输入框<br>
      <input type="date"> 时间输入框<br>
      <input type="number"> 数字输入框<br>
      <input type="button" value="普通按钮"> 普通按钮<br>
      <input type="reset"> 表单重置按钮<br>
      <input type="submit"> 提交按钮<br>
      <select size="3" multiple="multiple">
        <option value ="值1">下拉输入框的展示内容</option>
        <option value ="值2">size 下拉框默认展示的数量</option>
        <option value ="值3" selected> mltiple 可以多选 selected 默认选中项</option>
      </select><br>
      <textarea rows="" cols="" placeholder="提示信息"></textarea> <br>
    </form>

  </body>
</html>

CSS

CSS引入方式

<!--通过style属性-->
<p style="属性名称:属性值;..."></p>

<!--
	通过style标签来结合
	注意点:
	1.style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)
	2.style标签中的type属性其实可以不用写, 默认就是type="text/css"
	3.设置样式时必须按照固定的格式来设置. key: value; 其中:不能省略, 分号大多数情况下也不能省略
-->
<head>
	<style type="text/css">
        选择器{
            属性名称: 属性对应的值;
           	
        }
	</style>
</head>

<!--通过link标签引入外部CSS-->
<head>
	<link rel="stylesheet" href="../../css/myCss.css" />
</head>

<!--
	link标签属性:
	- href:css文件路径
	- rel:描述引入文件的类型
-->

选择器

选择器优先级

ID选择器 > 类选择器 > 标签选择器 > 通用选择器

如果优先级相同，那么就满足就近原则

选择器	描述	语法	示例
标签选择器	根据HTML标签名称选择标签	`标签名称{}`	`div{ color:red; }`
ID选择器	根据id属性值选择标签	`#id值{}`	`#d1 { color:blue; }`
类选择器	根据class属性值（类名）选择标签	`.类名{}`	`.c1 { color:yellow; }`
通用选择器	选取所有标签	`*{}`	`*{ color: pink;}`

组合选择器

多个基本选择器的组合，可以更灵活的选取标签

选择器	描述	语法	示例
后代选择器	根据HTML标签名称选择标签	`祖先后代`	`div a{ }`
属性选择器	根据指定属性的值筛选元素	`[属性='值']`	`input[type='text'] { }`
并集选择器	多个选择器的结果进行合并	`选择器1,选择器2,...`	`.c1, span { }`

伪类选择器

了解几个超链接相关的伪类选择器

选择器	描述	示例
`:link`	选择正常状态的超链接	`a:link{}`
`:visited`	选择被访问过的超链接	`a:visited{}`
`:hover`	选择鼠标悬停的超链接	`a:hover{}`
`:active`	选择鼠标按下的超链接	`a:active{}`

CSS常用属性

背景属性

功能	属性名	属性取值
背景色	`background-color`	1. 颜色常量，如：red 2. 使用十六进制(1-F)，如：#ABC 3. 红绿蓝使用 rgb(红,绿,蓝)
背景图片	`background-image`	`url(图片的路径)`
平铺方式	`background-repeat`	`repeat` 默认。背景图像将在垂直方向和水平方向重复 `repeat-x` 背景图像将在水平方向重复。 `repeat-y` 背景图像将在垂直方向重复。 `no-repeat`背景图像将仅显示一次。
背景位置	`background-position`	left top

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常用属性-背景</title>
    <style>
        /*设置整个页面的背景样式*/
        body{
            /*背景图片*/
            background-image: url("img/little_mm.jpg");
            /*平铺方式*/
            background-repeat: repeat;
        }
    </style>
</head>
<body>

    <div>页面内容</div>

</body>
</html>

文本样式

功能	属性名	属性取值
颜色	`color`	颜色
设置行高	`line-height`	像素
文字修饰	`text-decoration`	`underline` 下划线 `overline` 上划线 `ine-through` 删除线 `none` 不要线条
文本缩进	`text-indent`	用于缩进文本，可以使用em单位。
文本对齐	`text-align`	`left` 把文本排列到左边。 `right` 把文本排列到右边。 `center` 把文本排列到中间。默认值：由浏览器决定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常用属性-文本</title>
    <style>
        p{
            /*首行缩进：2个字符*/
            text-indent: 2em;
            /*文字颜色：绿色*/
            color: green;
        }
        a{
            /*超链接 不显示下划线*/
            text-decoration: none;
        }
    </style>
</head>
<body>

<p>
  鲁迅（1881年9月25日—1936年10月19日），原名周樟寿，后改名周树人，字豫山，后改字豫才，浙江绍兴人。著名文学家、思想家、革命家、教育家、民主战士，新文化运动的重要参与者，中国现代文学的奠基人之一。<a href="http://www.baidu.com">百度</a>早年与厉绥之和钱均夫同赴日本公费留学，于日本仙台医科专门学校肄业。 “鲁迅”，1918年发表《狂人日记》时所用的笔名，也是最为广泛的笔名。
</p>
<p>
    鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响，蜚声世界文坛，尤其在韩国、日本思想文化领域有极其重要的地位和影响，被誉为“二十世纪东亚文化地图上占最大领土的作家”。
</p>

</body>
</html>

字体属性

功能	属性名	作用
字体名	`font-family`	设置字体，本机必须要有这种字体
设置大小	`font-size`	像素
设置样式	`font-style`	`italic` 斜体 `normal` 默认值。浏览器显示一个标准的字体样式。
设置粗细	`font-weight`	`bolder`加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常用属性-字体</title>
    <style>
        span{
            /*字体：幼圆*/
            font-family: 幼圆;
            /*大小：40px*/
            font-size: 40px;
            /*字体：斜体*/
            font-style: italic;
            /*加粗显示*/
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <span>黑马程序员</span>
</body>
</html>

JavaScript

JavaScript一种直译式的脚本语言，是一种动态类型、弱类型、基于原型的语言

直译式: 不需要编译,直接翻译即可执行

脚本: 脚本语言不能独立运行,需要嵌套在其他语言中使用

注意:js代码的执行需要依赖翻译器,js的翻译器被称之为js引擎,如今js引擎已经被所有的浏览器内置了,当我们写完js代码后直接使用浏览器打开即可.

int age = 18;

let age = new Date();

js组成部分

ECMAScript: 核心语法
    变量声明, 数据类型, 运算符, 流程语句, 函数 ...
BOM(Browser Object Model): 浏览器对象模型
    操作和控制浏览器
DOM(Document Object Model): 文档对象模型
    操作和控制网页
    // 通过dom对象向网页的body标签体中写入内容
        document.write("编码前: "+url + "<br/>");

JS的常用小方法

控制台输出	方法	描述
	console.log()	控制台输出正常语句
	console.warn()	控制台警示框
	console.error()	控制台错误提示
	document.write();	文档打印. 向body页面输出内容.
弹出框BOM中Window的方法	alert()	弹出警告框
	prompt()	弹出对话框
	confirm()	弹出确认框

js和html的整合

方式1:内联式

直接通过 <script></script>标签实现,在标签体中编写js代码即可
  <script src="js文件的路径"></script>

方式2:外联式

1.编写外部的js文件 (*.js)
2.在页面引入.
	通过 script标签的 src属性引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			js和HTML整合:
				在html的哪些位置可以编写js代码
				方式1: 内联式
					直接在html网页中添加<script></script>标签,在标签体内编写js代码即可
				方式2: 外联式(html和js代码分离,方便维护与管理)
					a.编写外部的js代码
						*.js
					b.在使用的页面上引入
						<script src="../js/first.js"></script>
				注意事项:
					<script>标签可以写在html的任何位置(注意正确嵌套)
					<script>标签在html中可以出现多次
					js执行顺序,从上到下,从左到右
					<script>标签一旦引入了外部的js文件,那么标签体失效
		-->
		<script src="../js/first.js"></script>
		<script>
			// 警告框: 通过浏览器打开一个警告窗口
			alert("Hello JavaScript");
		</script>
	</head>
	<body>
		<script>
			// 控制台输出正常语句
			console.log("111")
		</script>
	</body>
	<script>
        // 对话框,第一个参数提示,第二个参数默认值 返回值为用户输入值
       prompt("你好吗","很好")
	</script>
</html>
<script>
    // 确认框,返回值boolean类型
    confirm("确认吗")
</script>
  <!--
	加载顺序: 从上到下,从左到右
	1.一个页面中可以有多个script标签
	2.script标签可以放在任何位置,注意正确嵌套
	3.script标签一旦引入了外部的js文件,那么标签体失效
	-->

数据类型

原始类型: 5种

	Number: 一切数字
	String: 一切被引号引起来的字符串(js没有字符的概念)
	Boolean: true  false
	Null: null
	Undefined: undefined
运算符:
	typeof运算符: 判断给定对象的所属类型
	let str = "Hello"
	alert(typeof str)

引用类型:

Array : 数组
Boolean : boolean
	let flag = false;
	let flag = new Boolean(false);
Date : 日期
Math : 数学函数
Number : 数字对象
	let num = 18;
	let num = new Number(18);
String : 字符串对象
	let str = "hello";
	let str = new String("hello");
RegExp : 正则表达式
Global : 全局函数
Events : 事件

数组-Array

############## 语法
		var arr = [18]; 
		new Array();  创建空数组
		new Array(3);   创建包含指定个数的数组
		new Array(ele1,ele2...);  创建包含指定元素的数组
############## 特征
		数组长度可变
		数组中可以存放任何类型的值
############## 常用属性
		length   长度
############## 常用方法		
		join("分隔符");  按指定的分隔符分割
    sort();  操作数组结构  对数组进行排序
    reverse();  颠倒数组中元素的顺序
    concat();连接两个或更多的数组，并返回结果

Date

############## 语法
		new Date();
############## 常用方法		
		toLocaleString();  ★★★	根据本地时间格式，把 Date 对象转换为字符串。
    getFullYear(); 从 Date 对象以四位数字返回年份。
    getMonth();  从 Date 对象返回月份 (0 ~ 11)。
    getDate(); 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
    getHours() ; 返回 Date 对象的小时 (0 ~ 23)。
    getMinutes(); 返回 Date 对象的分钟 (0 ~ 59)。
    getSeconds() ;返回 Date 对象的秒数 (0 ~ 59)。
    getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
    getTime()  ★★★返回 1970 年 1 月 1 日至今的毫秒数。类似于Java中的System.currentTimeMillis()

全局函数

parseInt(要转换的对象);  尝试 转换为Int类型     "9.9超市"
parseFloat(要转换的对象);  尝试转换为float类型
String(要转换的对象); 强制转换为String类型
Number(要转换的对象); 强制转换为number类型
Boolean(要转换的对象)); 强制转换为Boolean类型
encodeURI();    编码 ★
decodeURI();   解码 ★
isNaN(); 对象是否非数字
eval();  ★ 将字符串转换成js可以执行的代码
	var str = "alert('hello 美女.')";
	eval(str);

Reg-正则表达式

正确匹配指定的规则
	校验指定的字符串的格式是否满足指定的规则.
        校验手机号是否合法
############## 语法
		let reg = new RegExp(正则表达式, 匹配模式);
   	let reg = /正则表达式/匹配模式
   	匹配模式
       i: 忽略大小写
       g: 全局匹配(模糊匹配)
       [] : 可选的值有哪些
       {} : 可选值出现的位数
       * : 0到多次
       ? : 0次或1次
       + : 1次到多次
       ^ : 以什么开头
       $ : 以什么结尾
############## 常用方法		
   正则表达式.test("被校验的字符串");  返回boolean值

运算符:

// 两个值比较时
// 如果两方都为number,可以直接比较
// 如果一方为number,另一方为String,先将字符串转成number再进行比较  18=="18" true 18=="18s" false
// 如果两方都为String,比较ASCII值.

等性运算符
	==   !=    判断数值	
	===    !==   判断数值和类型
关系运算符
	>  <  >=  <=  
// 关系运算符中数值和非数值的字符串无法进行比较,返回值都是false 18>"18a" false 18<"18a" false
逻辑运算符
	&&  ||   !
    // 在js中逻辑运算符两边写什么都可以
    // 运算时,先将逻辑运算符两边的对象转成boolean值,再进行比较.
    // 运算结果为该对象本身
	非空对象 非0数字 非空字符串 都为true 其他为false
三元运算符: 和java一样
	3>2?是  : 不是

流程语句:

if .. else{}
for(){}
while(){}
do.. while()
switch break continue

函数

完成指定的功能,在java中叫方法,在js中叫函数方式1:普通函数 function 函数名称(参数列表){函数体} 方式2:匿名函数 function(){} 可变参数:arguments数组,每一个函数都有一个内置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/*
				java中的方法:
					实现了指定功能的代码片段
					在java中叫方法
					在js中叫函数
				函数: 实现了指定功能的代码片段
				注意: 在js中没有函数重载的概念,如果出现同名函数,后者覆盖前者
				格式:
					格式1: 普通函数
						function 函数名(形参,形参){
							return 返回值;
						}
						调用: 函数名(实参,实参);
						页面加载时会优先加载普通函数
					格式2: 匿名函数
						let 变量名 = function(形参,形参){
							return 返回值;
						}
						调用: 变量名(实参,实参);
						注意: 必须先声明后调用
			*/

			// 普通函数
			// 定义函数
			function fun1(a,b) {
				alert("2个参数的函数: "+a+" : "+b);
				//return a+b;
            }
            function fun1(a,b,c) {
				alert("三个参数的函数: "+a+" : "+b+" : "+c);
                //return a+b+c;
            }
            // 扩展: 了解
            function fun1(){
			    // 每一个函数都有一个内置的参数对象数组
				for(let i=0;i<arguments.length;i++){
				    alert(arguments[i]);
				}
			}

            // 调用函数
            fun1(3,2,1);

            // 匿名函数
			let fun2 = function(i,j) {
				return i*j;
            }
            // TODO:先声明后调用
            let result = fun2(3,3);
            alert(result);

		</script>
	</head>
	<body>
	</body>
</html>

事件

常见事件

属性	此事件发生在何时
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onchange	内容被改变。
onblur	元素失去焦点。
onfocus	元素获得焦点。
onload	一张页面或一幅图像完成加载。
onsubmit	确认按钮被点击；表单被提交。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按住。
onkeyup	某个键盘按键被松开。
onmousedown	鼠标按钮被按下。
onmouseup	鼠标按键被松开。
onmouseout	鼠标从某元素移开。
omouseover	鼠标移到某元素之上。
onmousemove	鼠标被移动。

事件绑定

<标签 属性="js代码，调用函数"></标签>
<xxx  onclick="函数名称()"></xxx>

<script> 标签对象.事件属性 = function(){ //执行一段代码 } </script>
<script>	
  //	1.获取事件源	
  var obj = document.getElementById("id");
  // 	2.派发事件		
  obj.事件名称 = function(){}
</script>

页面加载完成事件的两种方式

<head>
  <meta charset="UTF-8">
  <title>Title</title> 
  <script>
    function initData() {
      // 标签对象.value = "";
      var inputEle = document.getElementById("inputId");
      inputEle.value = "你好..";
    } 
  </script> 
</head> 
<!--onload: 等xx加载完成-->
<body onload="initData()">
  <input id="inputId" type="text" value="hello..."/> 
</body>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script>
      // 页面加载事件
      window.onload=function () {
        // 派发事件
        //a.获取事件源对象
        // 当整个网页加载到内存中时,整个网页中的标签就是一个DOM树对象
        let btnObj = document.getElementById("btnId");
        //b.给事件源派发事件
        btnObj.onclick = function () {
          alert("111111");
        }
      }

    </script>
  </head>
  <body>
    <!--
事件和事件源绑定:
方式2: 派发事件
a.获取事件源对象
b.给事件源对象派发事件
-->
    <!-- 事件源: 事件的源头 -->
    <input type="button" value="xxx" id="btnId" /> <br>
  </body>

</html>

事件示例

<body>
  <!--获得焦点(onfocus)和失去焦点(onblur) this是当前对象, 谁 触发了事件 this就是谁--> 
  <input id="inputId" type="text" onfocus="_onfocus(this)" onblur="_onblur()" value="hello..."/>
</body>
<script> 
  function _onfocus(obj) { 
    //方式一: 标签对象.value
    var value01 = document.getElementById("inputId").value; 
    //方式二: 使用this 
    var value02 = obj.value; 
    console.log("获得了焦点..." + value02);
  }
  function _onblur() { 
    console.log("失去了焦点...");
  } 
</script>

<body>
  <!--内容改变(onchange)--> 
  <select onchange="changeCity(this)">
    <option value="bj">北京</option> 
    <option value="sh">上海</option> 
    <option value="sz">深圳</option> 
  </select> 
</body> 
<script>
  function changeCity(obj) {
    console.log("城市改变了"+obj.value);
  }
</script>

<!DOCTYPE html>
<html>
<body>

<p>在输入字段中按键盘上的某个键可获取被按下键的 Unicode 字符代码。</p>

<input type="text" size="40" onkeypress="myFunction(event)">

<p id="demo"></p>

<p><b>注释：</b>IE8 及更早版本不支持 charCode 属性。</p>

<script>
function myFunction(event) {
  var x = event.charCode;
  document.getElementById("demo").innerHTML = "The Unicode value is: " + x;
}
</script>

</body>
</html>

<!-- 表单提交事件 --> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkForm() {
            alert("表单提交事件触发了...");
            // 表单提交事件调用的函数必须要有返回,返回的是校验结果 默认值为true
            //return true;
        }
    </script>
</head>
<body>
    <!-- 表单上的return: 通知表单是否提交 -->
    <form action="#" onsubmit="return checkForm()">
        <input type="text" name="username" value="tom"> <br>
        <input type="submit" value="表单提交">
    </form>
</body>
</html>


<!-- 省市二级联动 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        // 定义二维数组:
        var arr = new Array(3);
        arr[0] = new Array("深圳","惠州","东莞","广州");
        arr[1] = new Array("武汉","黄冈","鄂州","黄石");
        arr[2] = new Array("郑州市","洛阳市","安阳市","南阳市");
    </script>
    <script>
        function changePro(val) {
            // 获取选中的省份的value值
            //let proObj = document.getElementById("proId");
            // 获取valu值
            //let val = obj.value;
            //alert(val);
            //===========================
            // 获取选中的省对应的市数组
            let cityArr = arr[val];

            // 获取市下拉选对象
            let cityObj = document.getElementById("city");
            // 遍历市数组
            cityObj.innerHTML = "<option >==请选择==</option>";
            for (let i = 0; i < cityArr.length; i++) {
                cityObj.innerHTML += "<option>"+cityArr[i]+"</option>";
            }
        }
    </script>
</head>
<body>
<form action="#" method="get">
    籍贯:
    <!-- this:写在哪个标签上,就代表哪个标签对象 -->
    <select name="pro" id="proId" onchange="changePro(this.value)">
        <option>请选择</option>
        <option value="0">广东</option>
        <option value="1">湖北</option>
        <option value="2">河南</option>
    </select> 省
    <select id="city">
        <option >-请选择-</option>

    </select> 市
</form>
</body>
</html>

JS的BOM

Browser Object Model ,浏览器对象模型. 为了便于对浏览器的操作，

JavaScript封装了对浏览器中各个对象，使得开发者可以方便的操作浏览器

中的各个对象。

BOM里面的五个对象

BOM对象	作用
window(窗口对象)	浏览器窗体对象
location(链接对象)	浏览器地址栏对象
history(历史对象)	历史记录对象
Navigator	存放有关浏览器的信息
Screen	存放客户端显示屏幕的信息

window窗口对象

警告框:
	alert();
对话框:
	prompt();
	注释: 可以传入两个参数,第一个为提示信息,第二个为默认值
确认框: ★★★★★
	confirm();
	注释: 可以传入一个参数,为确认信息
定时器: ★★★
	周期执行定时器:
		var 定时器id = setInterval(函数名,毫秒值);   // 定义周期执行定时器
		var 定时器id = setInterval("函数名()",毫秒值);  // 定义周期执行定时器
		clearInterval(定时器id);  // 清除周期执行定时器
	单次执行定时器:
		var 定时器id = setTimeout(函数名,毫秒值);   // 定义单次执行定时器
		var 定时器id = setTimeout("函数名()",毫秒值);  // 定义单次执行定时器
		clearTimeout(定时器id);

history: 历史对象

获取历史对象:
window.history
history
go(number);  

history.go(number);   :向前跳转几个页面 (前进)
history.go(-number);   :向后跳转几个页面 (回退)

history.back() :加载 history 列表中的前一个 URL
history.forword() :加载 history 列表中的下一个 URL

location: 连接对象

host :设置或返回主机名和当前 URL 的端口号
href :设置或返回完整的 URL
port :设置或返回当前 URL 的端口号
location.href;   :// 获取当前页面的路径

location.href=路径值;   // 跳转到指定路径

reload();  :重新加载当前的页面，相当于浏览器上的刷新按钮

navigator:浏览器导航对象

appName :返回浏览器的名称
appVersion :返回浏览器的平台和版本信息

screen:屏幕对象

width :返回显示器屏幕的分辨率宽度
height :返回显示屏幕的分辨率高度

JS的DOM对象

Document Object Model 文档对象模型.

html加载到内存中时,是以一棵树的形式存在的,可以通过document操作所有的节点.

当html页面加载到内存中时,就是一个document对象,该改对象中存放了当前页面所有的标签

作用

用于操作网页中元素(标签)信息.

操作和控制网页上所有的标签

html里所有的标签、标签上的属性、标签体文本都会转换成dom树里的节点

整个html页面抽象成的对象,叫作document 文档节点

标签转换成的节点对象，叫作Element 元素节点(标签节点)

标签上的属性转换成的节点对象，叫作Attribute 属性节点

标签体中的文本转换成的节点对象，叫作Text 文本节点

查找(获取)元素节点的方法

从dom中获取标签对象

document.getElementById("id标记"); 获取一个元素对象

document.getElementsByTagName("标签名"); 获取一种元素对象数组接收

document.getElementsByClassName("class属性值"); 获取一类元素对象数组接收

document.getElementsByName("name属性值"); 获取多个元素对象数组接收

操作属性(标签)

元素对象.属性名称; // 获取指定属性的值

元素对象.属性名称 = "属性值"; // 设置指定属性的值

方法描述返回值
document.createElement(tagName) 创建标签 element对象
parentElement.appendChild(sonElement) 插入标签子element对象
element.remove() 删除标签
document.createTextNode() 创建文本

方法	描述	返回值
document.createElement(tagName)	创建标签	element对象
parentElement.appendChild(sonElement)	插入标签	子element对象
element.remove()	删除标签
document.createTextNode()	创建文本

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script>
      function getVal() {
        //获取标签对象
        let inpObj = document.getElementById("inp");
        // 获取属性的值
        // 标签对象.属性名;
        alert(inpObj.value);
      }

      function setVal() {
        //获取标签对象
        let inpObj = document.getElementById("inp");
        // 获设置属性的值
        // 标签对象.属性名 =  值;
        inpObj.value = "Jerry";
      }
    </script>
  </head>
  <body>
    <!-- 用户往输入框中填写数据,本质上就是给value属性赋值 -->
    <input type="text" value="tom" id="inp"/><br />
    <input type="button" value="获取value的值" onclick="getVal()"/>
    <input type="button" value="设置value的值" onclick="setVal()"/>
  </body>
</html>

操作标签体

操作标签体的==所有信息==
- 元素对象.innerHTML; // 获取标签体的所有内容,包含子标签

元素对象.innerHTML = "<h1>文本内容</h1>"; // 设置标签体,可以解析标签内容

元素对象.innerHTML = ""; // 删除

操作标签体的==文本==信息
- 元素对象.innerText; // 获取标签体的文本信息

元素对象.innerText = "值" ; // 设置标签体的文本信息将所有信息作为普通文本添加

==innerHTML 和 innerText 区别:==

innerHTML 在获取时,获取的是标签体的所有内容,包含子标签

innerText 在获取时,获取的仅仅是标签体中的文本信息

innerHTML 在设内容时,可以解析内容中的标签对象

innerText 在设置内容时,将所有内容作为文本插入到标签体中.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/*
				操作标签体内容:
					标签对象.innerText;  // 获取标签体的纯文本内容
					标签对象.innerText = "内容";  // 设置标签体的纯文本内容

					标签对象.innerHTML;  // 获取标签体的所有内容
					标签对象.innerHTML = "内容";  // 设置标签体的所有内容,可以解析标签
			 */
			function getVal() {
				// 获取标签对象
				let spObj = document.getElementById("sp");
				// 获取标签体的内容
				alert("innerText: "+spObj.innerText);
				alert("innerHTML: "+spObj.innerHTML);
            }
            function setVal() {
                // 获取标签对象
                let spObj = document.getElementById("sp1");
                // innerText设置
                //spObj.innerText = "<font color='red'>哈哈哈</font>";
                // innerHTML设置
                spObj.innerHTML = "<font color='red'>哈哈哈</font>";

            }
		</script>
	</head>
	<body>
		<span id="sp"><font color="red">佑我中华</font></span><br />
		<span id="sp1">佑我中华</span><br />
		<input type="button" value="获取标签体的内容" onclick="getVal()"/>
		<input type="button" value="设置标签体的内容" onclick="setVal()"/>
	</body>
</html>

JS操作css属性

元素对象.style.css属性; // 获取css属性的值

元素对象.style.css属性 = 值; // 设置css属性的值

JS中的写法	说明
color	color
font-size	fontSize

操作class属性:

标签对象.className="值";

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .two{
            color: red;
            font-size: 45px;
            font-family: 楷体;
        }
    </style>
    <script type="text/javascript">
        //给第一个p 添加  color: blue; font‐size: 30px; font‐family: 楷体;
        function changeCss () {
            let p1Obj = document.getElementById("first");
            p1Obj.style.color = "blue";
            p1Obj.style.fontSize = "30px";
            p1Obj.style.fontFamily = "楷体";
        }

        //通过操作calss属性添加样式
        function changeClass () {
            // 给标签添加一个class属性,值为 two
            document.getElementById("second").className = "two";
        }
    </script>
</head>

<body>
    <p id="first">
        这是第一自然段
    </p>
    <p id="second">
        这是第二自然段
    </p>
    <input type="button"  value="改变几个样式" onclick="changeCss()"/>
    <input type="button"  value="改变类样式" onclick="changeClass()"/>
</body>
</html>

JQuery

jQuery是一个优秀的javascript库(类似Java里面的jar包)，兼容css3和各大浏览器，提供了dom（文档）、events（事件）、animate（动画）、ajax（异步请求）等简易的操作。并且jquery的插件非常丰富，大多数功能都有相应的插件解决方案。jquery的宗旨是 write less, do more。

jQuery最主要的作用是简化js的Dom树的操作

jQuery的官方下载地址：http://www.jquery.com

jQuery的版本

1.x：兼容IE678，使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)

3.x：不兼容IE678，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本.

注:开发版本与生产版本，命名为jQuery-x.x.x.js为开发版本，命名为jQuery-x.x.x.min.js为生产版本，开发版本源码格式良好，有代码缩进和代码注释，方便开发人员查看源码，但体积稍大。而生产版本没有代码缩进和注释，且去掉了换行和空行，不方便发人员查看源码，但体积很小

JQ快速入门

使用步骤

拷贝jq库到项目
把jq引入页面
jq语法 $(...)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jquery-1.11.0.min.js"></script>
  </head>
  <body>

    <!--

需求： 页面加载完毕，就弹出hello
页面加载完毕的意思就是： 现在页面上的标签已经被浏览器解析完毕了，
并且页面的内容也在虚拟设备上（内存上）已经存在了，只剩下最后一步
就是把内容给它推送到物理设备（电脑屏幕）上显示

-->
    <script>
      //当页面加载完毕了之后，就执行里面的匿名方法。
      $(function () {
        alert("页面加载完毕了！");
      });


    </script>
  </body>
</html>

JQ和JS对象转换

使用js的代码去获取标签，得到的对象是js的对象，这种对象后续的操作只能走js的方式。

var aaElement = docuement.getElementById("aaa") JS对象

使用jq的代码去获取标签，得到的对象是jq的对象，这种对象后续的操作只能走jq的方式。

var aaElement = $("#aaa"); aaElement JQuery对象

JS的DOM对象转换成jQuery对象，语法：$(js对象)
JQuery对象转换成js对象，语法：jquery对象[索引]** 或 jquery对象.get(索引); 一般索引写0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jquery-1.11.0.min.js"></script>
</head>
<body>

<!--让js对象和jquery对象互转-->
<div id="myDiv"></div>

<input type="button" value="使用JS对象插入内容" onclick="insertByJS()"/><br/>
<input type="button" value="使用JQ对象插入内容" onclick="insertByJQ()"/><br/>

<script>

    //采用js对象，往div里面插入内容
    function insertByJS (){
        //1. 使用jquery的手法来获取到div标签 :: 得到了jquery对象
        var jqDiv = $("#myDiv");

        //2. 把jquery对象转化成js对象
        var jsDiv = jqDiv[0];

        //3. 使用js对象来插入内容到div，js对象使用起来都是属性。
        jsDiv.innerHTML="这是JS对象插入的内容！";

    }

    //采用jq对象，往div里面插入内容
    function insertByJQ(){
        document.querySelector()
        //1. 使用JS的手法来获取div标签，得到了js对象
        var jsDiv = document.getElementById("myDiv");

        //2. 把js对象转化成jquery对象
        var jqDiv = $(jsDiv);

        //3. 使用jquery对象来插入内容到div, jquery对象使用起来都是方法
        jqDiv.html("这是JQ对象插入的内容！");
    }
</script>
</body>
</html>

JQ中事件的使用

事件在jq里面都封装成了方法. 去掉了JS里面on. 语法:

jq对象.事件方法名(function(){});
- eg:点击事件 btn.click(function(){});

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../../../js/jquery-1.11.0.min.js"></script>
</head>
<body>

 <input id="btn" type="button" value="点我一下"/>
 <input type="text" id="myInput" onfocus="" onblur="" />
 <select id="mySelect" >
   <option>-请选择-</option>
   <option value="柳岩">柳岩</option>
   <option value="乔丹">乔丹</option>
 </select>

 <!--
需求： 给上面的按钮绑定|设置点击事件
1. 先找到标签
2. 设置点击事件 , 方法一般就是属性名字然后去掉on
onclick=""  ===== click();
-->
    <script>
      // 根据id找到标签。
      $("#btn").click(function(){
        alert("按钮被点击了~~");
      });

      //链式调用  对象.A().B().C()
      $("#myInput").focus(function(){
        console.log("获得焦点~~~");
      }).blur(function(){
        console.log("失去焦点~~~");
      });

      $("#mySelect").change(function(){
        console.log("内容发生改变了~~");
        var value = $("#mySelect").val();
        console.log("值===" + value);
      });
    </script>



  </body>
</html>

jQuery的事件绑定与解绑

一开始一个按钮不具有任何的事件，我们可以通过其他的操作赋予按钮事件。解除它原来绑定的事件

# 事件的绑定
jQuery元素对象.on(事件的类型,function(){} );
其中：事件名称是jQuery的事件方法的方法名称，例如:click、mouseover、mouseout、focus、blur等

eg:点击事件
-- 基本使用 : jq对象.click(function(){})
-- 绑定发送 : jq对象.on("click",function(){});

# 事件的解绑
jQuery元素对象.off(事件名称);

其中:参数事件名称如果省略不写，可以解绑该jQuery对象上的所有事件

JQ动画

基本效果

方法名称解释
show([speed],[easing],[fn]]) 显示元素方法
hide([speed,[easing],[fn]]) 隐藏元素方法
toggle([speed],[easing],[fn]) 切换元素方法，显示的使之隐藏，隐藏的使之显示

滑动效果

方法名称解释
slideDown([speed,[easing],[fn]]) 向下滑动方法
slideUp([speed,[easing],[fn]]) 向上滑动方法
slideToggle([speed],[easing],[fn]) 切换元素方法，显示的使之隐藏，隐藏的使之显示

淡入淡出效果

方法名称解释
fadeIn([speed,[easing],[fn]]) 淡入显示方法
fadeOut([speed,[easing],[fn]]) 淡出隐藏方法
fadeToggle([speed],[easing],[fn]) 切换元素方法，显示的使之隐藏，隐藏的使之显示

参数说明

参数名称解释
speed 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing 用来指定切换效果，默认是"swing"，可用参数"linear"
fn 在动画完成时执行的函数，每个元素执行一次

方法名称	解释
show([speed],[easing],[fn]])	显示元素方法
hide([speed,[easing],[fn]])	隐藏元素方法
toggle([speed],[easing],[fn])	切换元素方法，显示的使之隐藏，隐藏的使之显示

方法名称	解释
slideDown([speed,[easing],[fn]])	向下滑动方法
slideUp([speed,[easing],[fn]])	向上滑动方法
slideToggle([speed],[easing],[fn])	切换元素方法，显示的使之隐藏，隐藏的使之显示

方法名称	解释
fadeIn([speed,[easing],[fn]])	淡入显示方法
fadeOut([speed,[easing],[fn]])	淡出隐藏方法
fadeToggle([speed],[easing],[fn])	切换元素方法，显示的使之隐藏，隐藏的使之显示

参数名称	解释
speed	三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing	用来指定切换效果，默认是"swing"，可用参数"linear"
fn	在动画完成时执行的函数，每个元素执行一次

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../../js/jquery-1.11.0.min.js"></script>
</head>
<body>
<input type="button" value="show()" id="btn01"/>
<input type="button" value="hide()" id="btn02"/>
<input type="button" value="toggle()" id="btn03"/>
<div id="myDiv" style="width: 300px ;height: 300px;border: 1px red solid">

</div>
<!--

需求：
 有一个div , 下面有3个按钮，分别控制div的显示、隐藏、toggle(隐藏就显示，显示就隐藏)
    1. 给三个按钮补上点击事件
    2. 每一个按钮点击都执行对应的操作（隐藏、显示）
    3. 在执行div的隐藏显示之前，必须先要找到div,才能控制它的隐藏、显示。
-->

<script>
    //显示 show()
    $("#btn01").click(function(){
        $("#myDiv").show(3000 , "swing" ,function(){
            console.log("显示完毕");
        })
    });

    //隐藏 hide()
    $("#btn02").click(function(){
        $("#myDiv").hide(3000 , "swing" ,function(){
            console.log("隐藏完毕");
        })
    });
    //toggle(隐藏就显示，显示就隐藏) toggle()
    $("#btn03").click(function(){
        $("#myDiv").toggle(3000 , "swing" ,function(){
            console.log("执行完毕");
        })
    });
</script>

</body>
</html>

JQ选择器

基本选择器

选择器名称语法解释
标签选择器（元素选择器） $("html标签名") 获得所有匹配标签名称的于元素
id选择器 $("#id的属性值") 获得与指定id属性值匹配的元素
类选择器 $(".class的属性值") 获得与指定的class属性值匹配的元素

层级选择器

选择器名称语法解释
==后代选择器== $("A B ") 选择A元素内部的所有B元素
子选择器 $("A > B") 选择A元素内部的所有B子元素
兄弟选择器 $("A + B") 获得A元素同级的下一个B元素
兄弟选择器 $("A ~ B") 获得A元素同级的所有B元素

属性选择器

选择器名称语法解释
属性选择器 $("A[属性名]") 包含指定属性的选择器，找到所有含有这个属性的A标签
属性选择器 $("A[属性名=值]") 包含指定属性等于指定值的选择器

基本过滤选择器

选择器名称语法解释
首元素选择器 :first 获得选择的元素中的第一个元素
尾元素选择器 :last 获得选择的元素中的最后一个元素
非元素选择器 :not(selector) 不包括指定内容的元素
偶数选择器 :even 偶数，从 0 开始计数
奇数选择器 :odd 奇数，从 0 开始计数
等于索引选择器 :eq(index) 指定索引元素
大于索引选择器 :gt(index) 大于指定索引元素
小于索引选择器 :lt(index) 小于指定索引元素

表单属性选择器

选择器名称语法解释
可用元素选择器 :enabled 获得可用元素
不可用元素选择器 :disabled 获得不可用元素
选中选择器 :checked 获得单选/复选框选中的元素
选中选择器 :selected 获得下拉框选中的元素

选择器名称	语法	解释
标签选择器（元素选择器）	$("html标签名")	获得所有匹配标签名称的于元素
id选择器	$("#id的属性值")	获得与指定id属性值匹配的元素
类选择器	$(".class的属性值")	获得与指定的class属性值匹配的元素

选择器名称	语法	解释
==后代选择器==	$("A B ")	选择A元素内部的所有B元素
子选择器	$("A > B")	选择A元素内部的所有B子元素
兄弟选择器	$("A + B")	获得A元素同级的下一个B元素
兄弟选择器	$("A ~ B")	获得A元素同级的所有B元素

选择器名称	语法	解释
属性选择器	$("A[属性名]")	包含指定属性的选择器，找到所有含有这个属性的A标签
属性选择器	$("A[属性名=值]")	包含指定属性等于指定值的选择器

选择器名称	语法	解释
首元素选择器	:first	获得选择的元素中的第一个元素
尾元素选择器	:last	获得选择的元素中的最后一个元素
非元素选择器	:not(selector)	不包括指定内容的元素
偶数选择器	:even	偶数，从 0 开始计数
奇数选择器	:odd	奇数，从 0 开始计数
等于索引选择器	:eq(index)	指定索引元素
大于索引选择器	:gt(index)	大于指定索引元素
小于索引选择器	:lt(index)	小于指定索引元素

选择器名称	语法	解释
可用元素选择器	:enabled	获得可用元素
不可用元素选择器	:disabled	获得不可用元素
选中选择器	:checked	获得单选/复选框选中的元素
选中选择器	:selected	获得下拉框选中的元素

JQ操作css样式

API方法解释
css(name) 获取CSS样式
css(name,value) 设置CSS样式

API方法	解释
css(name)	获取CSS样式
css(name,value)	设置CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../../js/jquery-1.11.0.min.js"></script>
</head>
<body>

<div id="myDiv" style="width: 200px;height: 200px;background-color: plum">

</div>
<input type="button" id="btn01" value="获取div的背景颜色值" /><br/>
<input type="button" id="btn02" value="设置div的背景颜色值" /><br/>
<!--
需求：
 有一个div， 有两个按钮，第一个按钮点击之后，获取div的背景颜色属性的值，第二个按钮点击之后，设置div的背景颜色的值
-->
<script>
 //1. 点击btn01 获取div的背景颜色
 $("#btn01").click(function(){
     //2. 先找到div , 样式有很多，想获取哪一个样式就写样式的名字。
     var bgColor = $("#myDiv").css("background-color");
     console.log("bgColor=" + bgColor);
 });

 //2. 点击btn02, 设置div的背景色
 $("#btn02").click(function () {
     $("#myDiv").css("background-color","green")
 });

</script>
</body>
</html>

JQ操作标签属性

API方法	解释
attr(name,[value])	获得/设置属性的值
prop(name,[value])	获得/设置属性的值(checked，selected)

attr与prop的注意问题
attr只能获取到标签本身的value值,或者使用attr方法设置的value值,获取不到使用其他方式变更后的value值
一般情况下使用prop

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jquery-1.11.0.min.js"></script>
  </head>
  <body>

    <input type="text" id="myInput"/><br/>
    <input type="button" id="btn01" value="点我获取输入框value属性的值"/><br/>
    <input type="button" id="btn02" value="点我设置输入框value属性的值"/><br/>

    <script>

      //1. 点击第一个按钮，获取输入框的value属性值
      $("#btn01").click(function(){
        //2. 找到输入框，获取它的value属性值。
        // 如果input标签一开始就没有value属性，那么attr方法返回的将会是undefined 。 但是prop方法返回的是空字符串
        // 即便后面在输入框里面写入了内容， attr返回的还是undefined  prop方法返回就是输入框的内容
        // 所以attr方法能不能工作，其实还得看有没有设置这个属性。
        var attrValue = $("#myInput").attr("value");
        console.log("attrValue=" + attrValue);

        //使用prop获取值
        var propValue = $("#myInput").prop("value");
        console.log("propValue=" + propValue);

      });

      //2. 点击第二个按钮，设置输入框的value属性值
      $("#btn02").click(function () {
        //2.1 使用attr方法给输入框的value属性赋值
        //$("#myInput").attr("value","attr");

        //2.2 使用prop方法给输入框的value属性赋值
        $("#myInput").prop("value","prop");
      })

    </script>
  </body>
</html>

使用JQ操作DOM

操作标签值|标签体

标签值，讲的就是value属性

标签体，讲的就是开始标签和结束标签中间的内容。

API方法解释
val([value]) 获得/设置标签里面value属性相应的值
text([value]) 获得/设置元素的标签内容内容会被当成是文本
html([value]) 获得/设置元素的标签体内容内容会被当成是html

API方法	解释
val([value])	获得/设置标签里面value属性相应的值
text([value])	获得/设置元素的标签内容内容会被当成是文本
html([value])	获得/设置元素的标签体内容内容会被当成是html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../js/jquery-1.11.0.min.js"></script>
  </head>
  <body>

    <input type="text" id="myInput"><br/>
    <input type="button" id="btn01" value="获取value（输入框）值"><br/>
    <input type="button" id="btn02" value="设置value（输入框）值"><br/>
    <div id="myDiv">这是div默认的文字</div>
    <input type="button" id="btn03" value="使用text()获取div的内容"/><br/>
    <input type="button" id="btn04" value="使用text()设置div的内容"/><br/>

    <script>
      //1. 点击第一个按钮，获取输入框的内容
      $("#btn01").click(function () {
        //2. 找到输入框，获取value值
        var inputValue = $("#myInput").val();
        console.log("inputVal=" + inputValue);
      });


      //2. 点击第二个按钮，设置输入框的内容
      $("#btn02").click(function () {
        //找到输入框，设置value值
        $("#myInput").val("111");
      });

      // 点击第三个按钮，获取div的内容
      $("#btn03").click(function () {
        //找到div，获取内容
        var textDiv = $("#myDiv").text();
        console.log("textDiv=" + textDiv);
      });

      //2. 点击第四个按钮，设置div的内容
      $("#btn04").click(function () {
        //找到div，设置内容 使用text设置的标签值不会解析html标签,而是原样显示
        $("#myDiv").text("<h2>111</h2>");
      });

      // 点击第三个按钮，获取div的内容
      $("#btn03").click(function () {
        //找到div，获取内容
        var textDiv = $("#myDiv").html();
        console.log("textDiv=" + textDiv);
      });

      //2. 点击第四个按钮，设置div的内容
      $("#btn02").click(function () {
        //找到div，设置内容 html方法可以解析文本中的html标签
        $("#myDiv").html("<h2>111</h2>");
      });

    </script>
  </body>
</html>

jQuery创建,插入,删除标签

API方法解释
$("<p>") 创建p标签结果： <p> </p>
append(element) 添加成最后一个子元素，两者之间是父子关系， A .append(B) ，在A的里面追加B
prepend(element) 添加成第一个子元素，两者之间是父子关系
appendTo(element) 添加到父元素的内部最后面 A.appendTo(B) , 把A 追加到B的里面。
prependTo(element) 添加到父元素的内部最前面
before(element) 添加到当前元素的前面，两者之间是兄弟关系
after(element) 添加到当前元素的后面，两者之间是兄弟关系

API方法解释
remove() 删除指定元素(自己移除自己)
empty() 清空指定元素的所有子元素

API方法	解释
$("<p>")	创建p标签结果： <p> </p>
append(element)	添加成最后一个子元素，两者之间是父子关系， A .append(B) ，在A的里面追加B
prepend(element)	添加成第一个子元素，两者之间是父子关系
appendTo(element)	添加到父元素的内部最后面 A.appendTo(B) , 把A 追加到B的里面。
prependTo(element)	添加到父元素的内部最前面
before(element)	添加到当前元素的前面，两者之间是兄弟关系
after(element)	添加到当前元素的后面，两者之间是兄弟关系

API方法	解释
remove()	删除指定元素(自己移除自己)
empty()	清空指定元素的所有子元素

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../../../js/jquery-1.11.0.min.js"></script>
</head>
<body>
 <div id="myDiv" style="overflow:auto;width: 300px;height: 300px;border: 1px red solid">

 </div>
 <input type="button" id="btn01" value="添加span"/><br/>
 <input type="button" id="btn02" value="移除span"/><br/>
 <input type="button" id="btn03" value="清空span"/><br/>
 <!--

需求：
有一个div, 点击第一个按钮，往里面追加一个span标签，点击第二个按钮，移除span标签，点击第三个按钮，清空div的所有标签
-->

 <script>
   var spanElement ;
   //第一个按钮的点击事件
   $("#btn01").click(function () {

     //1. 创建一个span标签
     spanElement = $("<span>");  //<span></span>

     //2. 给span中间添加内容
     spanElement.text("111");//<span>111</span>

     //3. 找到div ，给他追加span标签
     $("#myDiv").append(spanElement);

   });

   //点击第二个按钮，移除标签span
   $("#btn02").click(function () {
     //这个remove方法针对的操作的对象，只会把现在操作的这个对象给移除掉，不能移除其他的标签。
     spanElement.remove();
   });

   //点击第三个按钮，清空所有的span
   $("#btn03").click(function () {
     //删除div里面的所有子元素，就是清空它的子元素
     $("#myDiv").empty()
   });
 </script>

</body>
</html>

JQ遍历

<script>
var arrry = [10,20,30,40,50,60];

// js的遍历
for (var i = 0 ; i < arrry.length ; i++){
 console.log(i + "===" + arrry[i]);
}
// 采用jquery的方式遍历
// 遍历哪一个对象，就需要把这个对象，先转化成JQuery对象，然后再调用each方法
// 遍历一次，会执行一次each里面的function
// function里面的两个参数： 第一个参数就是遍历的索引下标，第二个参数就是遍历出来的元素。
$(array).each(function(index , element){
 console.log(index + "==" + element);
});
// 采用JQ全局方法遍历
// $.each 这是一个全局的方法
// each里面的参数解释： 第一个参数表示遍历哪一个对象（集合），第二个参数就是每次遍历之后执行的方法
// function里面的i : 遍历的下标，  e: 遍历出来的每一个元素。
$.each($(array) , function(i , e){
 console.log(i + "==" + e);
});

// 使用3.0的for of遍历
for(a of $(array)){
 console.log("aa==" + a);
}
</script>

JQ案例

定时弹出广告

<!--1. 手动添加一张广告图片-->
<img id="adImg" src="img/ad.jpg" height="300px" width="100%" hidden/>

<script>

  //1. 页面加载完毕即触发该方法
  $(function(){
    //2. 找到图片
    var adImg = $("#adImg");

    //3. 过了3秒之后，让图片显示，而且这个图片也不是立即就显示，而是耗费3秒完成显示。
    //3秒之后，执行匿名的function.
    setTimeout(function(){

      //4. 让图片显示。 3秒时间，完成图片的展示，展示结束之后，会执行function的代码
      adImg.slideDown(3000 , "swing" , function(){

        //5. 图片显示3秒钟之后，再隐藏。
        //过了秒之后，执行function的代码
        setTimeout(function(){

          //6. 让图片收回去
          adImg.slideUp(3000, "linear");

        } , 3000);
      })
    },3000);
  });

</script>

复选框的全选效果与隔行更换背景色和鼠标悬停更改背景色

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="../../js/jquery-1.11.0.min.js"></script>
</head>
<body>
<table width="500px" align="center" border="1px">
	<tr>
		<td><input type="checkbox" id="selectAll"/></td>
		<td>商品名称</td>
	</tr>
	<tr>
		<td><input type="checkbox" class="myInput"/></td>
		<td>Mac1</td>
	</tr>
	<tr>
		<td><input type="checkbox" class="myInput"/></td>
		<td>Mac2</td>
	</tr>
	<tr>
		<td><input type="checkbox" class="myInput"/></td>
		<td>Mac3</td>
	</tr>

</table>

<script>

	//1. 找到所有的行
	//使用过滤选择器，在所有的行基础上，过滤出来偶数行
	$("tr:even").css("background-color","#4F81BD");

	//使用过滤选择器，在所有行的基础上，过滤出来奇数行
	$("tr:odd").css("background-color","pink");


	/*
	需求：
		点击顶部的checkbox，让底部的所有行的checkbox也跟着选中，
			再点击顶部的额checkbox，那么底部的所有的checkbox也跟着不选中

		1. 给顶部的checkbox加上id，然后给它绑定上点击事件
		2. 只要点击了顶部的checkbox，那么就让下面的所有checkbox都选中
		2.1 要想让下面的所有checkbox都选中，必须要先找到它们。
	*/

	//1. 给顶部的checkbox设置点击事件
	$("#selectAll").click(function () {
		//alert("点击全选~");
		console.log("-==" + this.checked + "==");

		//2. 找到下面所有行的checkbox , 让他们的checked属性的值和顶部的那个checkbox的值一样即可！‘、
		//this这个东西永远是JS对象，如果操作的是JS对象，那么大部分操作的都是属性。
		//this表示的是谁呢？ 就是顶部的那个checkbox。
		$(".myInput").prop("checked",this.checked);
	});

  // 鼠标悬停行更换背景色
	var oldBgColor ;
	//1. 找到所有的行,给所有的行都绑定|设置鼠标进入事件
	$("tr").mouseenter(function(){

		//2. 在设置颜色之前，先获取现在这一行的颜色是什么
		oldBgColor= $(this).css("background-color")

		//3. 找到鼠标位于的这一行，设置背景色。
		//this就代表鼠标进入的现在这一行，但是this属于JS对象，需要把它变为JQ对象，才能使用后面的这些方法。
		$(this).css("background-color","red");
	}).mouseout(function(){
		//鼠标离开了之后，把背景色给它还原回去。
		$(this).css("background-color",oldBgColor);
</script>

</body>
</html>

JQuery完成省市联动效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jquery-1.11.0.min.js"></script>
  </head>
  <body>

    省份:<select id="province">
    <option>-请选择-</option>
    <option value="0">广东</option>
    <option value="1">广西</option>
    <option value="2">山东</option>
    <option value="3">山西</option>
    </select>

    城市：<select id="city">
    <option>-请选择-</option>
    </select>
    <!--
需求：
选择省份了之后，在右边的城市，只能显示该省份的数据
1. 使用二维数组包装城市数据
2. 对省份进行监听，要知道当前选中的是哪一个城市。
3. 为了更好的取到该省份对应的城市数据，需要给省份补上对应的value值 ， 下标值。
4. 得到城市数据之后，要遍历城市
5. 遍历一次，创造出来一个option标签，
6. 把这个option标签，追加到城市的<select>里面。
-->
    <script>
      //1. 准备城市数据
      var cityArray=[
        ["深圳","广州","佛山","清远"],
        ["南宁","桂林","北海","百色"],
        ["青岛","济南","日照","烟台"],
        ["太原","大同","吕梁","运城"]
      ];

      //2. 对省份进行监听，要知道现在选择的是什么省份
      $("#province").change(function () {
        //3. 获取现在选择的省份 得到下标值。
        var index = this.value;

        //4. 从二维数组里面取出来对应的城市数据
        var cityDatas = cityArray[index]; //["深圳","广州","佛山","清远"]

        //4.1 遍历追加数据之前，最好先清空掉城市的数据内容
        $("#city").html("<option>-请选择-</option>")

        //5. 遍历城市数据
        $(cityDatas).each(function(i , e){ //e 就是遍历的每一个元素，深圳

          //6. 构建一个option标签
          var optionElement = $("<option>"); // <option></option>

          //7. 把遍历出来的城市数据，补充到option标签里面
          optionElement.text(e); // <option>深圳</option>

          //8. 找到城市的select，然后追加option的标签进去。
          $("#city").append(optionElement);
        });

      });
    </script>

  </body>
</html>

页面电子时钟案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jquery-1.11.0.min.js"></script>
</head>
<body>

<span id="timeSpan"></span>
<!--

需求：
    顶部有一个Span, 用来显示当前的时间，每隔1秒钟就更新事件
    1. 使用setInterval函数来执行定时任务，
    2. 每隔1秒钟就执行一次。
    3. 获取当前的时间，然后赋值到span显示
-->
<script>

    function refreshTime(){

        //2. 获取当前的时间
        var time = new Date().toLocaleString();

        //3. 把时间放到span里面显示
        $("#timeSpan").html("<h2>"+ time +"</h2>");

    }
    //一上来就先显示时间，然后过了1秒在循环。
    refreshTime();

    //1. 使用setInterval方法来启动定时任务
    // setTimeout() ; // 只会执行一次
    setInterval("refreshTime()",1000); // 会无休止的执行，间隔时间到了就执行

</script>

</body>
</html>