HTML

[toc]

HTML语法规则

  1. <html> 表示整个 html 页面的开始
  3. <head> 头信息
  4.     <title>标题</title> 标题
  5. </head>
  7. <body> body 是页面的主体内容
  8.     页面主体内容
  9. </body>
  11. </html> 表示整个 html 页面的结束
  13. Html 的代码注释
  14. <!-- 这是 html 注释    -->

HTML常用标签

  1. 字体标签 <font>
  1. <font color="red" face="宋体" size="6">字体标签</font>
  • 换行标签 <br>
  • 标题标签 <h1>
  1. <h1 align="left">标题1</h1>
  2. <h2 align="center">标题2</h2>
  3. <h3 align="center">标题3</h3>
  4. <h4 align="center">标题4</h4>
  5. <h5 align="right">标题5</h5>
  6. <h6 align="right">标题6</h6>
  • 超链接标签 <a>
  1.     <!--
  2.     href  超链接地址
  3.     target
  4.         _self   在本页面跳转
  5.         _blank  新页面跳转
  6.     -->
  8. <a href = "https:\\www.baidu.com" target = "_self">百度</a><br>
  9. <a href = "https:\\www.csdn.net" target = "_blank">CSDN</a><br>
  • 无序排列 <ul>
  1. <ul type="none">
  2.     <li>bb</li>
  3.     <li>aa</li>
  4.     <li>dd</li>
  5.     <li>cc</li>
  6. </ul><br>
  • 有序排列 <ol>
  1. <ol type="1">
  2.     <li>bb</li>
  3.     <li>aa</li>
  4.     <li>dd</li>
  5.     <li>cc</li>
  6. </ol><br>
  • 图像标签 <img>
  1.     <!--
  2.     src  图片地址
  3.     alt  图像无法显示时，显示的文本
  4.     title  光标放到图像上时，显示的文本
  5.     border 边框
  6.     width  宽度 height 高度
  7.     -->
  9. <img src="aa.png" alt="warma" title="warma" border="2"><br>
  • 表格标签 <table>
  1.     <!--  
  2.     <table>表格标签
  3.         <tr>列
  4.             <th>头单元格
  5.             <td>单元格
  7.     rowspan 跨行
  8.     colspan 跨列
  9.     -->
  11. <table  width="500" border="1" cellpadding="5" cellspacing="0">
  12.     <tr bgcolor="aqua">
  13.         <th colspan="5">个人简历</th>
  14.     </tr>
  15.     <tr>
  16.         <td width="100">姓名:</td>
  17.         <td width="100"></td>
  18.         <td width="100">性别:</td>
  19.         <td width="100"></td>
  20.         <td width="100" rowspan="4">照片</td>
  21.     </tr>
  22.     <tr>
  23.         <td width="100">婚姻状况：</td>
  24.         <td width="100"></td>
  25.         <td width="100">出生年月：</td>
  26.         <td width="100"></td>
  27.     </tr>
  28.     <tr>
  29.         <td width="100">民族：</td>
  30.         <td width="100"></td>
  31.         <td width="100">政治面貌：</td>
  32.         <td width="100"></td>
  33.     </tr>
  34.     <tr>
  35.         <td width="100">身高：</td>
  36.         <td width="100"></td>
  37.         <td width="100">学历：</td>
  38.         <td width="100"></td>
  39.     </tr>
  40. </table><br>
  • 表单标签 <form>
  1.     <!--
  2.     <label> 带有两个输入字段和相关标记的简单 HTML 表单：
  3.     input type=text 是文件输入框 value 设置默认显示内容
  4.     input type=password 是密码输入框 value 设置默认显示内容
  5.     input type=radio 是单选框 name 属性可以对其进行分组 checked="checked"表示默认选中
  6.     input type=checkbox 是复选框 checked="checked"表示默认选中
  7.     input type=reset 是重置按钮 value 属性修改按钮上的文本
  8.     input type=submit 是提交按钮 value 属性修改按钮上的文本
  9.     input type=button 是按钮 value 属性修改按钮上的文本
  10.     input type=file 是文件上传域
  11.     input type=hidden 是隐藏域 当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）
  13.     select 标签是下拉列表框
  14.     option 标签是下拉列表框中的选项 selected="selected"设置默认选中
  16.     textarea 表示多行文本输入框 （起始标签和结束标签中的内容是默认值）
  17.     rows 属性设置可以显示几行的高度
  18.     cols 属性设置每行可以显示几个字符宽度
  19.     -->
  21. <form>
  22.     <label>
  23.         用户名：
  24.         <input type="text" name="username" placeholder="请输入用户名">
  25.     </label><br>
  27.     <label>
  28.         密 码：
  29.         <input type="password" name="psw" placeholder="请输入密码">
  30.     </label><br>
  32.     性 别：
  33.     <label><input type="radio" name="sex" value="男"> 男</label>
  34.     <label><input type="radio" name="sex" value="女" checked=checked> 女</label>
  35.     <label><input type="radio" name="sex" value="人妖"> 人妖</label><br>
  37.     爱好：
  38.     <label><input type="checkbox" name="hobby" value="吃饭">吃饭</label>
  39.     <label><input type="checkbox" name="hobby" value="睡觉">睡觉</label>
  40.     <label><input type="checkbox" name="hobby" value="打豆豆" checked=checked>打豆豆</label><br>
  42.     籍贯：
  43.     <select>
  44.         <option>------请选择籍贯------</option>
  45.         <option>北京</option>
  46.         <option>上海</option>
  47.         <option>广东</option>
  48.         <option>湖南</option>
  49.     </select><br>
  51.     <label>
  52.         验证码：
  53.         <input type="text" name="key" placeholder="请输入验证码">
  54.     </label>
  55.     <input type="button" value="获取短信验证码"><br>
  56.     <textarea cols="20" rows="3" placeholder="为啥要注册"></textarea><br>
  57.     <input type="submit" value="免费注册">
  58.     <input type="reset" value="重新填写"><br>
  60. </form>
  • 其他标签
    • <div> 默认独占一行
    • <span> 它的长度是封装数据的长度
  1. <div>div 标签 1</div>
  2. <div>div 标签 2</div>
  4. <span>span 标签 1</span>
  5. <span>span 标签 2</span>

CSS

CSS语法规则

选择器 { 属性 ： 值 }；

选择器：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）。

属性 (property) :是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并 由花括号包围，这样就组成了一个完整的样式声明

例如：p {color: blue}

多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的 最后可以不加分号(但尽量在每条声明的末尾都加上分号)

例如： p{ color:red;

  1.              font-size:30px;}

CSS 注释：/注释内容/

CSS 与 HTML 的结合方式

  1. 在标签的 style 属性上设置”key:value value;”，修改标签样式
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  7. </head>
  9. <body>
  10.     <!--需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。-->
  11.     <div style="border: 1px solid red">div标签1</div>
  12.     <div style="border: 1px solid red">div标签2</div>
  13.     <span style="border: 1px solid red">span标签1</span>
  14.     <span style="border: 1px solid red">span标签2</span>
  15. </body>
  17. </html>
  1. 在 <head> 标签中，使用 <style> 标签来定义各种自己需要的 css 样式。 格式如下： xxx { Key : value value; }
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  8.     <!--style 标签专门用来定义 css 样式代码-->
  9.     <style type="text/css">
  10.         /* 需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。*/
  11.         div{
  12.         border: 1px solid red;
  13.         }
  14.         span{
  15.         border: 1px solid red;
  16.         }
  17.     </style>
  18. </head>
  20. <body>
  21.     <div>div 标签 1</div>
  22.     <div>div 标签 2</div>
  23.     <span>span 标签 1</span>
  24.     <span>span 标签 2</span>
  25. </body>
  27. </html>
  1. 把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用。使用 html 的 <link rel="stylesheet" type="text/css" href="1.css">标签导入 css 样 式文件。
    css文件：1.css 
  1. div{
  2.     border: 1px solid red;
  3. }
  4. span{
  5.     border: 1px solid red;
  6. }
  1.     **html文件**：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <!--    此处导入css文件     -->
  8.     <link rel="stylesheet" type="text/css" href="1.css">
  9. </head>
  11. <body>
  12.     <div >div标签1</div>
  13.     <div >div标签2</div>
  15.     <span >span标签1</span>
  16.     <span >span标签2</span>
  17. </body>
  18. </html>

CSS选择器

标签选择器

标签名选择器的格式是：

标签名{

  1.          **属性：值;**
  3.          **}**

标签名选择器，可以决定哪些标签被动的使用这个样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <style type="text/css" >
  8.         /*    标签名选择器    */
  9.         div{
  10.             font-size: 30px;
  11.             color: blue;
  12.             border: 1px yellow solid;
  13.         }
  14.         span{
  15.             font-size: 20px;
  16.             color: yellow;
  17.             border: 2px blue dashed;
  18.         }
  19.     </style>
  21. </head>
  22. <body>
  24.     <!-- 修改所有 div 标签的字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。
  25.          修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 2 像素蓝色虚线。
  26.          -->
  28.     <div >div标签1</div>
  29.     <div >div标签2</div>
  31.     <span >span标签1</span>
  32.     <span >span标签2</span>
  33. </body>
  34. </html>

id选择器

id 选择器的格式是：

#id 属性值{

  1.                 **属性：值;**
  3.                  **}**

id 选择器，可以让我们通过 id 属性选择性的去使用这个样式

一个id只能对应一个标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css" >
  7.         /*    id选择器    */
  8.         #a{
  9.             font-size: 30px;
  10.             color: blue;
  11.             border: 1px yellow solid;
  12.         }
  13.         #b{
  14.             font-size: 20px;
  15.             color: yellow;
  16.             border: 2px blue dashed;
  17.         }
  18.     </style>
  20. </head>
  21. <body>
  23.     <!-- 修改id为 a 标签的字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。
  24.          修改id为 b 标签的字体颜色为黄色，字体大小 20 个像素。边框为 2 像素蓝色虚线。
  25.          -->
  27.     <div id="a">div标签1</div>
  28.     <div id="b">div标签2</div>
  30. </body>
  31. </html>

class选择器(类选择器)

class 类型选择器的格式是:

.class 属性值{

  1.                      **属性：值;**
  3.                      **}**

class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式

一个class可以对应多个标签

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns="http://www.w3.org/1999/html">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style type="text/css" >
  7.         /*    类选择器  */
  8.         .class1{
  9.             font-size: 30px;
  10.             color: blue;
  11.             border: 1px yellow solid;
  12.         }
  13.         .class2{
  14.             font-size: 20px;
  15.             color: yellow;
  16.             border: 2px blue dashed;
  17.         }
  18.     </style>
  20. </head>
  21. <body>
  23.     <!-- 修改所有 class 属性值为 class1 的标签的字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。
  24.          修改所有 class 属性值为 class2 的标签的字体颜色为黄色，字体大小 20 个像素。边框为 2 像素蓝色虚线。
  25.          -->
  26.     <div class="class1"> div 标签1</div>
  27.     <div class="class2"> div 标签2</div>
  28.     <span class="class1"> span 标签1</span>
  29.     <span> span 标签2</span>
  31. </body>
  32. </html>

组合选择器

组合选择器的格式是：

选择器 1，选择器 2，选择器 n{

  1.                  **属性：值;**
  3.             **}**

组合选择器可以让多个选择器共用同一个 css

常用样式

  • 字体颜色

color: red;

可以写颜色名: red,blue,black等;

可以写rgb值: rgb(0,0,255)等;

可以写十六进制: #00F6DE等;

  • 宽度

width:20px;

可以写像素值:20px;

可以写百分比:20%;

  • 高度

height:20px;

可以写像素值:20px;

可以写百分比:20%;

  • 背景颜色

background-color:#00F6DE

  • 字体样式

color: #FF0000; 字体颜色为红色

font-size: 20px; 字体大小为20px

  • 文本居中

text-align: center;

  • 超连接去下划线

text-decoration: none;

JavaScript

JavaScript 和 HTML 的结合方式

行内、内嵌和外部

  1. <!--    alert()弹出警告框    -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  8.     <!--    2.内嵌      -->
  9.     <script>
  10.         alert('秋香2')
  11.     </script>
  13.     <!--    3.外部    -->
  14.     <script src = "1.js"></script>
  16. </head>
  17. <body>
  18.     <!--    1.行内    -->
  19.     <input type="button" value="唐伯虎" onclick="alert('秋香1')">
  20. </body>
  21. </html>

变量

JS中的变量类型：

  • 数值类型： number
  • 字符串类型： string
  • 对象类型： object
  • 布尔类型： boolean
  • 函数类型： function

JS中特殊的值：

  • undefined 未定义。所有 js 变量未赋于初始值的时候，默认值都是 undefined.。
  • null 空值
  • NaN 非数字。非数值 全称是：Not a Number。

JS 中的定义变量格式：

  • var 变量名;
  • var 变量名 = 值;
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <!--    2.内嵌      -->
  8.     <script>
  9.     var a;
  10.     a = 1;
  11.     //typeof js内置函数：返回变量类型
  12.     alert(typeof(a));
  14.     var b = "abc";
  15.     alert(a*b);
  16.     </script>
  18. </head>
  19. <body>
  21. </body>
  22. </html>

运算符

绝大部分运算符与java运算符一致

  • 关系运算符
    等于： == 等于是简单的做字面值的比较
    全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6.     <script type="text/javascript">
  7.         var a = "12";
  8.         var b = 12;
  9.         alert( a == b ); // true
  10.         alert( a === b ); // false
  11.     </script>
  12. </head>
  13. <body>
  14. </body>
  15. </html>
  • 逻辑运算符
    在 JavaScript 语言中，所有的变量，都可以做为一个 boolean
    0 、null、 undefined、””(空串) 都认为是 false
    且运算： &&

    第一种情况：当表达式全为真的时候。返回最后一个表达式的值。

    第二种情况：当表达式中，有一个为假的时候。返回第一个为假的表达式的值


或运算： ||
取反运算：！ 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6.     <script type="text/javascript">
  7.         var a = "abc";
  8.         var b = true;
  9.         var c = null
  10.         var d = false;
  13.         // &&运算
  14.          alert( a && b ); // true
  15.          alert( b && a ); // true
  16.          alert( a && d ); // false
  17.          alert( a && c ); // null
  19.         // ||运算
  20.         alert( d || c ); // null
  21.         alert( c || d ); //false
  22.         alert( a || c ); //abc
  23.         alert( b || c ); //true
  25.     </script>
  26. </head>
  27. <body>
  28. </body>
  29. </html>

数组

  • 数组定义方式

    var 数组名 = []; // 空数组

    var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素

javaScript 语言中的数组, 允许在任意下标处赋值, 只要我们通过数组下标赋值, 那么最大的下标值, 就会自动的给数组做扩容操作, 未赋值的为undefined

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6.     <script type="text/javascript">
  7.         var arr ; // 定义一个空数组
  8.         alert( arr.length ); // 0
  10.         arr[0] = 12;
  11.         alert( arr[0] );  // 12
  13.         arr[2] = "abc";
  14.         alert(arr.length); // 3
  15.         alert(arr[1]);  // undefined
  17.         // 数组的遍历
  18.         for (var i = 0; i < arr.length; i++){
  19.             alert(arr[i]);    // 12,undefind,abc
  20.         }
  21.     </script>
  22. </head>
  23. <body>
  24. </body>
  25. </html>

函数

函数的定义与使用

想要函数带有返回值,只需要在函数体内直接使用 return语句返回值即可.

  • 函数有两种定义方法

    第一种 :

    function 函数名(形参列表){

    1.   函数体

    }

    第二种:

    var 函数名 = function (形参列表){

    1.   函数体

    }

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript">
  7.         // 定义一个无参函数
  8.         function fun(){
  9.             alert("无参函数 fun()被调用了");
  10.         }
  11.         fun();  // 无参函数调用
  13.         // 定义一个有参函数
  14.          var fun2 =  function(a ,b) {
  15.             alert("有参函数 fun2()被调用了 a=>" + a + ",b=>"+b);
  16.         }
  17.         fun2(12,"abc");  // 有参函数调用
  19.         // 定义一个有返回值函数
  20.         function sum(num1,num2) {
  21.             return num1 + num2;
  22.         }
  23.         alert( sum(100,50) );  // 有返回值函数调用
  24.     </script>
  25. </head>
  26. <body>
  27. </body>
  28. </html>

函数的 arguments 隐形参数 ( 只在function中有 )

就是在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。 隐形参数特别像 java 基础的可变长参数一样。

public void fun( Object ... args );

可变长参数其他是一个数组。 那么 js 中的隐形参数也跟 java 的可变长参数一样。操作类似数组。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript">
  8.         //遍历arguments
  9.         function fun(a) {
  10.             for (var i = 0; i < arguments.length; i++) {
  11.                 alert(arguments[i]);
  12.             }
  13.         }
  15.         fun(1, true, "abc");    
  17.         //利用arguments实现任意个数相加
  18.         function sum() {
  19.             var result = 0;
  20.             for (var i = 0; i < arguments.length; i++) {
  21.                 if (typeof (arguments[i]) == "number") {
  22.                     result += arguments[i];
  23.                 }
  24.             }
  25.             return result;
  26.         }
  28.         alert(sum(1, 2, 3, 4, 5, true, 6, 7, 8, "abc", 9, 10));
  29.     </script>
  30. </head>
  31. <body>
  32. </body>
  33. </html>

自定义对象

  • 对象有两种定义方法

    第一种 : Object 形式的自定义对象

    1. 对象的定义 :
    3.     var 变量名 = new Object(); // 对象实例（空对象）
    5.     变量名.属性名 = 值; // 定义一个属性
    7.     变量名.函数名 = function(){} // 定义一个函数
    9. 对象的访问：
    11.     变量名.属性 / 函数名();

    第二种 : {}花括号形式的自定义对象 ( 属性之间是 **,** )

    1. 对象的定义： var 变量名 = { // 空对象
    3.     属性名：值, // 定义一个属性
    5.     属性名：值, // 定义一个属性
    7.     函数名：function(){} // 定义一个函数 };
    9. 对象的访问：
    11.     变量名.属性 / 函数名();
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript">
  7.         //第一种定义方法
  8.         var stu1 = new Object();
  9.             stu1.id = 1;
  10.             stu1.name;
  11.             stu1.show = function (){
  12.                 alert("id = "+stu1.id+" name = "+stu1.name);
  13.             }
  14.         stu1.name = "stu1";
  15.         stu1.show();
  17.         //第二种定义方法
  18.         var stu2 = {
  19.             id : 2,
  20.             name,
  21.             show : function (){
  22.                 alert("id = "+this.id+" name = "+this.name);
  23.             }
  24.         }
  25.         stu2.name = "stu2";
  26.         stu2.show();
  28.     </script>
  29. </head>
  30. <body>
  31. </body>
  32. </html>

事件

事件是电脑输入设备与页面进行交互的响应。我们称之为事件

两种注册方法

  • 静态注册
    通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册

  • 动态注册 

    1.  先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件 响应后的代码

动态注册基本步骤：

1、获取标签对象

2、标签对象.事件名 = fucntion(){}

常用事件

  • **onload** 加载完成事件 页面加载完成之后，自动触发的事件，常用于做页面 js 代码初始化操作
  • **onclick** 单击事件 常用于按钮的点击响应操作
  • **onblur** 失去焦点事件 常用用于输入框失去焦点后验证其输入内容是否合法
  • **onchange** 内容发生改变事件 常用于下拉列表和输入框内容发生改变后操作
  • **onsubmit** 表单提交事件 常用于表单提交前，验证所有表单项是否合法

onload 加载完成事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript">
  8.         //静态注册
  9.         function onloadFun() {
  10.             alert("静态注册onload事件");
  11.         }
  13.         //动态注册
  14.         window.onload = function () {
  15.             alert("动态注册onload事件");
  16.         }
  17.     </script>
  18. </head>
  19. <!--    动态注册时不能有onload = “onloadFun”-->
  20. <body onload="onloadFun()">
  21. </body>
  22. </html>

**onclick** 单击事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript">
  8.         //静态注册
  9.         function onclickFun() {
  10.             alert("静态注册onclick事件");
  11.         }
  13.         //动态注册
  14.         window.onload = function () {
  15.             var btnObj = document.getElementById("btn2");
  16.             btnObj.onclick = function () {
  17.                 alert("动态注册onclick事件");
  18.             }
  19.         }
  20.     </script>
  21. </head>
  22. <body>
  23.     <button id="btn1" onclick="onclickFun()">button1</button>
  24.     <button id="btn2">button2</button>
  25. </body>
  26. </html>

**onblur** 失去焦点事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript">
  8.         // 静态注册失去焦点事件
  9.         function onblurFun() {
  10.             // console 是控制台对象,是由JS语言提供,专门用来向浏览器的控制器打印输出,用于测试使用
  11.             // log() 是打印的方法
  12.             console.log("用户名：静态注册失去焦点事件");
  13.         }
  15.         // 动态注册 onblur 事件
  16.         window.onload = function () {
  17.             //1 获取标签对象
  18.             var passwordObj = document.getElementById("password");
  19.             //2 通过标签对象.事件名 = function(){};
  20.             passwordObj.onblur = function () {
  21.                 console.log("密码：动态注册失去焦点事件");
  22.             }
  23.         }
  24.     </script>
  25. </head>
  26. <body>
  27.     <label>用户名:<input type="text" onblur="onblurFun();"></label><br/>
  28.     <label for="password">密码:</label><input id="password" type="text" ><br/>
  29. </body>
  30. </html>

**onchange** 内容发生改变事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript">
  7.         function onchangeFun() {
  8.             alert("女神已经改变了");
  9.         }
  11.         window.onload = function () {
  12.             //1 获取标签对象
  13.             var selObj = document.getElementById("sel01");
  14.             //2 通过标签对象.事件名 = function(){}
  15.             selObj.onchange = function () {
  16.                 alert("男神已经改变了");
  17.             }
  18.         }
  19.     </script>
  20. </head>
  21. <body>
  22.     请选择你心中的女神：
  23.     <select onchange="onchangeFun();">
  24.         <option>--女神--</option>
  25.         <option>芳芳</option>
  26.         <option>佳佳</option>
  27.         <option>娘娘</option>
  28.     </select>
  30.     请选择你心中的男神：
  31.     <select id="sel01">
  32.         <option>--男神--</option>
  33.         <option>星爷</option>
  34.         <option>华仔</option>
  35.         <option>富城</option>
  36.     </select>
  37. </body>
  38. </html>

**onsubmit** 表单提交事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript">
  7.         // 静态注册表单提交事务
  8.         function onsubmitFun() {
  9.             // 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
  10.             alert("静态注册表单提交事件----发现不合法");
  11.             return flase;
  12.         }
  14.         window.onload = function () {
  15.             //1 获取标签对象
  16.             var formObj = document.getElementById("form01");
  17.             //2 通过标签对象.事件名 = function(){}
  18.             formObj.onsubmit = function () {
  19.                 // 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
  20.                 alert("动态注册表单提交事件----发现不合法");
  21.                 return false;
  22.             }
  23.         }
  24.     </script>
  25. </head>
  26. <body>
  27. <!--return false 可以阻止 表单提交 -->
  28. <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
  29.     <input type="submit" value="静态注册"/>
  31. </form>
  32. <form action="http://localhost:8080" id="form01">
  33.     <input type="submit" value="动态注册"/>
  34. </form>
  35. </body>
  36. </html>

DOM模型

DOM 全称是 Document Object Model 文档对象模型

就是把文档中的标签，属性，文本，转换成为对象来管理

DOM对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>文档标题</title>
  6. </head>
  7. <body>
  8.     <a href="https://www.baidu.com">我的链接</a>
  9.     <h1>我的标题</h1>
  10. </body>
  11. </html>
  • Document 对象的理解：

    第一点：Document 它管理了所有的 HTML 文档内容。

    第二点：document 它是一种树结构的文档。有层级关系。

    第三点：它让我们把所有的标签 都 对象化 第四点：我们可以通过 document 访问所有的标签对象。

DOM对象中的方法

  • 通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性
  1. document.getElementById (elementId)
  • 通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
  1. document.getElementByName (elementName)
  • 通过标签名查找标签 dom 对象。tagName 是标签名
  1. document.getElementByTagName (tagName)
  • 通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名
  1. document.createElement(tagName)
  • 一定要在页面加载完成之后执行，才能查询到标签对象

document 对象的三个查询方法

如果有 id 属性，优先使用 getElementById 方法来进行查询

如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询

如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>dom 查询</title>
  6.     <script type="text/javascript">
  8.         function onclick01 () {
  9.             var obj01 = document.getElementById("div01");
  10.             alert(obj01.innerText);
  11.         }
  13.         function onclick02 () {
  14.             var obj02 = document.getElementsByClassName("class01");
  15.             for (var i = 0; i < obj02.length; i++) {
  16.                 alert(obj02[i].innerText);
  17.             }
  18.         }
  20.         function onclick03 () {
  21.             var obj03 = document.getElementsByTagName("span");
  22.             for (var i = 0; i < obj03.length; i++) {
  23.                 alert(obj03[i].innerText);
  24.             }
  25.         }
  27.         function onclick04 () {
  28.             var obj04 = document.getElementsByName("sex");
  29.             for (var i = 0; i <obj04.length ; i++) {
  30.                 alert(obj04[i].id);
  31.             }
  32.         }
  34.     </script>
  35. </head>
  36. <body>
  37. <button onclick="onclick01()">找到id为 btn01 的标签</button><br>
  38. <button onclick="onclick02()">找到class为 class01 的标签</button><br>
  39. <button onclick="onclick03()">找到tagName为 span 的标签</button><br>
  40. <button onclick="onclick04()">找到Name为 sex 的标签(返回id)</button><br>
  43. <div id="div01" class="class01" style="border: blue 2px solid"> id:div01 class:class01 </div><br>
  44. <div id="div02" class="class02" style="border: yellow 2px solid"> id:div02 class:class02 </div><br>
  45. <div id="div03" class="class01" style="border: red 2px solid"> id:div03 class:class01 </div><br>
  47. <span style="color: red"> span01</span><br>
  48. <span style="color: yellow"> span02</span><br>
  50. <label>
  51.     sex：
  52.     <input id="sex_boy" type="radio" name="sex" value="男">男
  53.     <input id="sex_girl" type="radio" name="sex" value="女">女
  54. </label>
  56. </body>
  57. </html>

节点的常用属性与方法

节点就是标签对象

  • 属性
    chileNodes 获取当前节点的所有子节点
    firstChild 获取当前节点的第一个子节点
    lastChild 获取当前节点的最后一个子节点
    parentNode 获取当前节点的父节点
    nextSibling 获取当前节点的下一个节点
    previousSibling 获取当前节点的上一个节点
    className 用于获取或设置标签的 class 属性值
    innerHTML 表示获取/设置起始标签和结束标签中的内容
    innerText 表示获取/设置起始标签和结束标签中的文本
  • 方法
    获取当前节点的指定标签名孩子节点 
    1. getElementsByTagName()

    可以添加一个子节点，oChildNode 是要添加的孩子节点

JQuery

JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库

JQuery核心函数（ $ ）

$ 是 JQuery 的核心函数，能完成 JQuery 的很多功能。JavaWeb - 图1%E5%B0%B1%E6%98%AF%E8%B0%83%E7%94%A8#card=math&code=%28%29%E5%B0%B1%E6%98%AF%E8%B0%83%E7%94%A8&id=Bkc1k)这个函数

  • 传入参数为（ 函数 ）时：**$ ( funaction )**
    表示页面建在完成之后。相当于 window.onload = function(){}
  • 传入参数为（ HTML字符串 ）时： **$ ( <br> )**
    创建这个HTML标签对象
  • 传入参数为（ 选择器字符串 ）时：
    $ ( "#id 属性值" ) id选择器，根据 id 查询标签对象
    $ ( "标签名" ) 标签名选择器，根据指定 标签名 查询标签对象
    $ ( ".class 属性值" ) class类选择器，根据 class 查询标签对象
  • 传入参数为（ DOM对象 ）时：$ ( DOMObj )
    会把这个 DOM 对象转换为 JQuery 对象

JQuery对象和DOM对象

  • DOM对象 ：上述（略）；
  • JQuery对象
    通过 JQuery 提供的 API 创建的对象
    通过 JQuery 包装的 Dom 对象
    通过 JQuery 提供的 API 查询到的对象
    JQuery 对象 Alert 出来的效果是：[object Object
  • JQuery 对象的本质是什么
    JQuery 对象是 dom 对象的数组 + JQuery 提供的一系列功能函数
  • JQuery 对象和 Dom 对象使用区别
    Query 对象不能使用 DOM 对象的属性和方法
    DOM 对象也不能使用 JQuery 对象的属性和方法
  • Dom 对象和 JQuery 对象互转
    • dom 对象转化为 JQuery 对象
      先有 DOM 对象
      $( DOM 对象 )就可以转换成为 JQuery 对象
    • JQuery 对象转为 dom 对象
      先有 JQuery 对象
      JQuery 对象[下标]取出相应的 DOM 对象

JQuery选择器

基本选择器

#id 选择器：根据 id 查找标签对象

  1. $( "#btn01" )   //id为 btn01 的标签对象

.class 选择器：根据 class 查找标签对象

  1. $( ".class01" )  //class为 class01 的标签对象

element 选择器：根据标签名查找标签对象

  1. $( "div" )  //所有 < div > 标签对象

**选择器：表示任意的，所有的元素

selector1，selector2 组合选择器：合并选择器 1，选择器 2 的结果并返回

  1. $( "#btn01, .class01" )  //id为 btn01 ,class为 class01 的标签对象

层级选择器

ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素

  1. $( "body div" )  //body 标签里面，所有的 div 标签对象

parent > child 子元素选择器：在给定的父元素下匹配所有的子元素

  1. $( "body > div" )  //body 标签里面，是他子元素的 div 标签对象
  3. <body>
  4.     <div id = "div01" >
  5.         <div id = "div02" />
  6.     </div>
  7.     <div id = "div03" />
  8. </body>
  10. //返回 div01 与 div03

prev + next 相邻元素选择器：匹配紧接在 prev 元素后的 next 元素

  1. $( "body + div" )  //body 标签里面,紧接着的 div 标签对象
  3. <body>
  4.     <div id = "div01" >
  5.         <div id = "div02" />
  6.     </div>
  7.     <div id = "div03" />
  8. </body>
  10. //返回 div01

prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素

  1. $( "#div01 + div" )  //id为 div01 标签之后所有的兄弟 div 标签
  3. <body>
  4.     <div id = "div01" >
  5.         <div id = "div02" />
  6.     </div>
  7.     <div id = "div03" />
  8.     <div id = "div04" />
  9. </body>
  11. //返回 div03 div04

过滤选择器

:first 获取第一个元素

:last 获取最后个元素

:not(selector) 去除所有与给定选择器匹配的元素

:even 匹配所有索引值为偶数的元素，从 0 开始计数

:odd 匹配所有索引值为奇数的元素，从 0 开始计数

:eq(index) 匹配一个给定索引值的元素

:gt(index) 匹配所有大于给定索引值的元素

:lt(index) 匹配所有小于给定索引值的元素

:header 匹配如 h1, h2, h3 之类的标题元素

:animated 匹配所有正在执行动画效果的元素

内容过滤器

:contains(text) 匹配包含给定文本的元素

:empty 匹配所有不包含子元素或者文本的空元素

:parent 匹配含有子元素或者文本的元素

:has(selector) 匹配含有选择器所匹配的元素的元素

属性过滤器

[attribute] 匹配包含给定属性的元素。

  1. $( "div[name]" )  //div 标签中有 name 属性的标签对象

[attribute=value] 匹配给定的属性是某个特定值的元素

  1. $( "div[name = name01]" )  //div 标签中 name 属性为 name01 的标签对象

[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。

[attribute^=value] 匹配给定的属性是以某些值开始的元素

[attribute$=value] 匹配给定的属性是以某些值结尾的元素

**[attribute=value] 匹配给定的属性是以包含某些值的元素

[attrSel1] [attrSel2] [attrSelN] 复合属性选择器，需要同时满足多个条件时使用。

表单过滤器

:input 匹配所有 input, textarea, select 和 button 元素

:text 匹配所有 文本输入框

:password 匹配所有的密码输入框

:radio 匹配所有的单选框

:checkbox 匹配所有的复选框

:submit 匹配所有提交按钮

:image 匹配所有 img 标签

:reset 匹配所有重置按钮

:button 匹配所有 input type=button 按钮

:file 匹配所有 input type=file 文件上传

:hidden 匹配所有不可见元素 display:none 或 input type=hidden

表单对象属性过滤器

:enabled 匹配所有可用元素

:disabled 匹配所有不可用元素

:checked 匹配所有选中的单选，复选，和下拉列表中选中的 option 标签对象

:selected 匹配所有选中的 option

JQuery元素筛选

下列出现的 exp 为选择器

eq() 获取给定索引的元素

first() 获取第一个元素

last() 获取最后一个元素

filter(exp) 留下匹配的元素

is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回，true

has(exp) 返回包含有匹配选择器的元素的元素

not(exp) 删除匹配选择器的元素

children(exp) 返回匹配给定选择器的子元素

find(exp) 返回匹配给定选择器的后代元素

next() 返回当前元素的下一个兄弟元素

nextAll() 返回当前元素后面所有的兄弟元素

nextUntil() 返回当前元素到指定匹配的元素为止的后面元素

parent() 返回父元素

prev(exp) 返回当前元素的上一个兄弟元素

prevAll() 返回当前元素前面所有的兄弟元素

prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素

siblings(exp) 返回所有兄弟元素

add() 把 add 匹配的选择器的元素添加到当前 jquery 对象

JQuery的属性操作

html() 它可以设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。

text() 它可以设置和获取起始标签和结束标签中的文本。 跟 dom 属性 innerText 一样。

val() 它可以设置和获取表单项的 value 属性值。 跟 dom 属性 value 一样

DOM的增删改

  • 内部插入：
    appendTo()

    a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后


prependTo()

  • 外部插入：
    insertAfter()

    a.insertAfter(b) 得到 ba


insertBefore()

  • 替换：
    replaceWith()

    a.replaceWith(b) 用 b 替换掉 a


replaceAll()

  • 删除：
    remove()

    a.remove() 删除 a 标签


empty()

CSS样式操作

addClass() 添加样式

removeClass() 删除样式

toggleClass() 有就删除，没有就添加样式

offset() 获取和设置元素的坐标

JQuery动画

  • 基本动画
    show() 将隐藏的元素显示
    hide() 将可见的元素隐藏
    toggle() 可见就隐藏，不可见就显示

以上动画方法都可以添加参数。

1、第一个参数是动画 执行的时长，以毫秒为单位

2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)

  • 淡入淡出动画
    fadenIn() 淡入（慢慢可见）
    fadeOut() 淡出（慢慢消失）
    fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明
    fadeToggle() 淡入/淡出 切换

JQuery事件操作

  • JQuery中其他的事件处理方法：

click() 它可以绑定单击事件，以及触发单击事件

mouseover() 鼠标移入事件

mouseout() 鼠标移出事件

bind() 可以给元素一次性绑定一个或多个事件。

one() 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。

unbind() 跟 bind 方法相反的操作，解除事件的绑定

live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出 来的也有效

  • 事件的冒泡
    什么是事件的冒泡？
    事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去 响应。
    那么如何阻止事件冒泡呢？
    在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。
  • javaScript 事件对象
    事件对象，是封装有触发的事件信息的一个 javascript 对象。
    我们重点关心的是怎么拿到这个 javascript 的事件对象。以及使用。
    如何获取呢 javascript 事件对象呢？ 在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event。 这个 event 就是 javascript 传递参事件处理函数的事件对象。 ```javascript //javaScript 获取事件对象 window.onload = function () { document.getElementById(“areaDiv”).onclick = function (event) {
    1.  console.log(event);
    } }

//JQuery 获取事件对象 $(function () { $(“#areaDiv”).click(function (event) { console.log(event); }); });

//使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件 $(“#areaDiv”).bind(“mouseover mouseout”,function (event) { if (event.type == “mouseover”) { console.log(“鼠标移入”); } else if (event.type == “mouseout”) { console.log(“鼠标移出”); } }); ```