前端基础

最新推荐文章于 2022-12-02 22:15:15 发布
最新推荐文章于 2022-12-02 22:15:15 发布
阅读量563 收藏 2
点赞数
分类专栏： 前端基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42265394/article/details/107879496
版权

前端三剑客包括：HTML、CSS、JavaScript、JQuery。

HTML

1.1 什么是HTML

Hyper Text MarkUp Language （超文本标记语言）

超文本： 文字、图片、音频、视频等…
标记语言： 由标签构成的语言，html、xml等…

1.2 HTML作用

  • 用于搭建基础页面，展示页面的内容
  • 可以在开始标签中定义标签的属性
  • 属性用键值对表示，值用引号引起来

标签分类：

  • 围堵标签：如< font>< /font>
  • 自闭合标签：如< br />也可以写为< br>

注释格式：

< !-- 注释内容 -->

W3C标准包括

  • 结构化标准语言（HTML、XML）
  • 表现标准语言（CSS）
  • 行为标准（DOM/ECMAScript）

1.3 网页基本标签

<!DOCTYPE html> <!-- 告诉浏览器使用的是什么规范-->

 <!--meta描述性标签，用来描述网站的一些基本信息-->
 <!--meta一般用来做SEO，搜索引擎优化-->
<meta charset="UTF-8">
<meta name="keywords"content="HTML学习">
<meta name="description" content="自学JAVA">

1.3.1 标题标签

<h1> </h1>从h1到h6，字体逐渐减小，并自带换行效果

1.3.2 段落标签

<p> </p>每段之间不紧凑

1.3.3 换行标签

<br/>行与行之间紧凑

1.3.4 水平线标签

<hr/>页面展示一条水平线

1.3.5 字体样式标签

<b> </b> 或<strong> </strong>粗体

<i> </i> 或<em> </em>斜体

1.3.6 注释和特殊符号

空格：&nbsp;
大于号：&gt;
小于号：&lt;
版权符号：&copy;

1.4 图像、超链接、网页布局

1.4.1 图像标签

<!--推荐使用相对地址 ../表示上级目录 src和alt属性必填-->
<img src="图像的地址" alt="图像的替代文字" 
title="鼠标悬停的文字" width="宽度" height="高度">

1.4.2 链接标签

<a href="链接地址" target="目标窗口位置，是在本窗口打开还是在新窗口打开，
常用_self/_bank"></a>
<!-- 可以将图片当做a标签体内容，点击图片即跳转链接-->
<a><img/></a>

锚链接，实现页面间的跳转

  • 既可以实现同界面指定位置的跳转，也可以实现不同界面指定位置的跳转
<a name="top"></a>
<a href="#top">回到顶部</a>
<a href="https://www.baidu.com#top">跳转页面</a>

功能性链接标签

  • 邮件链接：mailto
  • QQ链接
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::53" 
alt="加我领取小电影" title="加我领取小电影"/></a>

1.4.3 网页布局

行内元素和块元素

块元素

  • 无论内容多少，该元素独占一行
  • （p，h1到h6）

行内元素

  • 左右都是行内元素的可以排在一行
  • (a,strong,em)

1.5 列表、表格、媒体元素

1.5.1 列表标签

无序列表（ul）

  • 默认格式是前面加黑色圆点
  • type：disc圆点。square方框，circle圆圈

有序列表（ol）

  • type:修改序列号样式，如1，A，Ⅰ…
  • start:从第几个开始

自定义列表

<ol type="1" start="3">
    <li>起床</li>
    <li>穿衣服</li>
    <li>吃饭</li>
</ol>

<ul type="circle">
	<li>起床</li>
	<li>穿衣服</li>
	<li>吃饭</li>
</ul>

<dl>
    <dt>学科</dt>
    <dd>JAVA</dd>
    <dd>Linux</dd>
    <dd>前端</dd>
    <dd>C++</dd>
</dl>

Alt

1.5.2 表格标签

  • colspan：跨列
  • rowspan：跨行
<table border="1">
    <tr>
        <td colspan="" span="" span="3">1-1</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td >2-2</td>
        <td >2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
    </tr>
</table>

在这里插入图片描述

1.5.3 媒体元素

视频元素：video

 src：资源路径
 controls：控制台
 autoplay：自动播放

音频元素：audio

 src：资源路径
 controls：控制台
 autoplay：自动播放

页面结构分析
在这里插入图片描述

ifram内联框架

 src：地址
 frameborder：框架外边框
 width：宽度
 height：高度
 name：可以匹配a标签的target属性

1.6 表单及表单应用

1.6.1 表单

  • 采集用户输入的数据，用于和服务器进行交互
  • 要想数据被提交，所有的表单元素必须指定其name属性

form标签
用于定义表单的，包裹的范围表示采集用户数据的范围

 action:表单数据的提交位置，可以是一个网站，也可以是一个请求处理地址 
 method:指定提交方式，POST，GET
 name:提交数据的键名称

1.6.2 get和post的区别

get：

请求参数会在地址栏中显示，封装到请求行中
请求参数大小有限制
不太安全

post：

请求参数不在地址栏中显示，封装在请求体中
请求参数大小没有限制
较为安全

1.6.3 表单内部标签

input标签

可以通过type属性值，改变元素展示的样式<input type = "text">

在这里插入图片描述

type属性值：

  • submit：提交数据按钮
  • text：文本输入框(默认type属性值)
  • button：一个按钮，javascript一起使用
  • checkbox：复选框
  • color：取色器
  • date：日期，年月日
  • datetime-local： 年月日 小时分钟
  • email：正则表达式判断输入是否合法
  • file：文件选择框
  • hidden：隐藏域，用于提交一些信息
  • image：指定图片为表单提交按钮
  • number：只能输入数字
  • password：密码输入框，对输入内容进行加密覆盖
  • radio：单选框
  • range：滑块，调节音量大小，max,min,step
  • reset：重置
  • serach：搜索框，框的最后位置有一个删除内容按钮
  • url：只能输入网址

readonly属性：只读，用于文本框
disabled属性：禁用，用于选择框
hidden属性：隐藏表单，可以用来设置一些默认值

label标签

label的for属性一般会和input的id属性值对应，如果对应了，则点击label区域，会让input输入框获取焦点

指定输入项的文字描述信息

<label for = "username">用户名</label>
<input id = "username" name = "username">

select标签

<select name="province">
	<option value="">--请选择--<option>	
	<option value="1">北京<option>
	<option value="2">上海<option>
</select>

注意：提交的时候会根据选择提交指定的value值，比如选择的是北京，提交的数据就是province=“1”
selected 属性表示默认选择项，默认第一项

textarea标签

文本域，用来输入文本信息的框

<!--cols:指定列数，每一行有多少个字符  rows：默认多少行-->
<textarea cols="20" rows="5"></textarea>

注意：行数不够的话会自动扩容

CSS 3

2.1 什么是CSS

Cascading Style Sheet（层叠样式表）

字体，颜色，边距，高度，浮动，网页定位，背景图片…

CSS中的注释：/**/

使用CSS的好处

  • 功能强大
  • 将内容展示和样式控制分离
  • 降低耦合度（解耦）让分工协作更容易
  • 网页结构表现统一，便于复用。提高开发效率
  • 利用SEO，容易被搜索引擎收录

2.2 CSS快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

        <!--规范,每个声明之间用分号隔开
        选择器{
            声明1;
            声明2;
        }
        -->
    <style>
        h1{
            color: red;
            text-align: center;
            font-size: large;
            line-height: 40px;
        }
    </style>
</head>
<body>
<h1>我是一级标题</h1>
</body>
</html>

2.3 CSS的三种导入方式

2.3.1 内联样式（行内样式）

在标签内使用style属性指定css代码,耦合度高，不建议使用。

  • 通过键值对来设置样式、键：属性、值：属性值
  • 多个键值对用分号隔开
  • 作用域：当前标签生效
<div style="color : red ;">hello</div>

2.3.2 内部样式

在head标签内，定义style标签，style标签的标签体内容就是css代码

  • 作用域：在指定页面中
<head>
	<style>
		div{
			color : red;
		}
	</style>
</head>
<body>
<div> 你好</div>
</body>

2.3.3 外部样式（推荐使用）

  • 定义css资源文件
  • 在head标签内，定义link标签，引入外部的资源文件
  • 作用域:所有引入该css文件的页面
a.css文件
div{
	 color:green;
  }
========================================
<!--链接式-->
<link rel="stylesheet" href="css/a.css">

<div>hello</div>

引入css文件也可以写为

<!--导入式-->
<style>
	@import "css/a.css";
</style>

三种导入方式的优先级

  • 就近原则，哪个离代码近，哪个优先级高
  • 一般是行内样式优先级最高，然后内部样式和外部样式谁在下面谁优先级高。

2.4 CSS选择器

作用：选择页面的某一个或某一类标签元素

选择器 {
		属性名1：属性值1；
		属性名2：属性值2；
		...
	}

注意：每一对属性需要使用；隔开，最后一对属性可以不加

2.4.1 基本选择器

标签选择器(元素选择器)

  • 选择具有相同标签名称的元素
  • 标签为div的元素样式都会发生改变
  • id选择器比元素选择器的优先级更高(如果一个标签同时被id选择器和元素选择器控制，则会显示id选择器的样式)
<style>
	div{
		color : red;
	}
</style>
	
<div id=“div1”>我是div1</div>
<div id=“div2”>我是div2</div>

类选择器 (class)

  • 选择具有相同class属性值的元素
  • class属性和id属性的不同，class属性值可以重复，可以跨标签
  • 类选择器的优先级比元素选择器高，id选择器的优先级比类选择器的优先级高
<style>
	.cls1{
		color : red;
	 }
</style>

<div class="cls1">我是div1</div>
<div class="cls1">我是div2</div>

id选择器

  • 选择具体的id属性值的元素

  • 只有id是div1的标签样式才会发生改变

  • 在一个html页面id唯一

  • id选择器高于类选择器高于属性选择器

<style>
	#div1{
			color : red;
	}
</style>

<div id=“div1”>我是div1</div>
<div id=“div2”>我是div2</div>

2.4.2 层次选择器

后代选择器

  • 筛选选择器1元素后面的的所有选择器2元素，包括二级，三级…
<!--只会改变div中后面的所有p标签样式，包括li标签中的p标签-->
<style>
	div p{
		color:red;
	}
</style>

<div>
    <p>一级</p>
    <ul>
        <li><p>二级</p></li>
        <li><p>二级</p></li>
        <li><p>二级</p></li>
        <li><p>二级</p></li>
    </ul>
    <div>div标签</div>
</div>
<!--不会被改变样式-->
<p>我是外部的p</p>

子选择器

  • 筛选选择器1之后的第一级选择器2
<!--只会改变一级p标签的样式-->
<style>
	div>p{
		color:red;
	}
</style>

<div>
    <p>一级</p>
    <ul>
        <li><p>二级</p></li>
        <li><p>二级</p></li>
        <li><p>二级</p></li>
        <li><p>二级</p></li>
    </ul>
    <div>div标签</div>
</div>

相邻兄弟选择器

  • 对下不对上。只有选择器1相邻下面的第一个选择器2的样式会改变
  • 如果两个选择器之间有其他元素，则指定的元素不会改变样式
<!--只有p4样式改变-->
<style>
    .active + p{
        color: aquamarine;
     }
</style>

<div>
    <p>p1</p>
    <p>p2</p>
    <p class="active">p3</p>
    <p>p4</p>
    <ul>
        <li><p>二级</p></li>
        <li><p>二级</p></li>
        <li><p>二级</p></li>
        <li><p>二级</p></li>
    </ul>
    <div>div标签</div>
</div>

通用兄弟选择器

  • 对下不对上。所有后面的选择器2元素都会生效，无论中间是否有其他元素
<!--p3之后的所有同级p标签都会改变-->
<style>
    .active ~ p{
        color: aquamarine;
     }
</style>
   
<div>
    <p>p1</p>
    <p>p2</p>
    <p class="active">p3</p>
    <div>div标签</div>
    <p>p4</p>
    <ul>
        <li><p>二级</p></li>
        <li><p>二级</p></li>
        <li><p>二级</p></li>
        <li><p>二级</p></li>
    </ul>
    <p>p5</p>
    <p>p6</p>
    <div>div标签</div>
    <p>p7</p>
</div>

*选择器

选择所有标签元素

<style>
	*{
		color : red;
	}
</style>

并集选择器

  • 选择器1和选择器2都会生效
<style>
div,#span1{
	color:red;
}
</style>

2.4.3 结构伪类选择器

  • 带冒号的选择器：相当于条件判断
  • 选中指定元素的第几个位置
<style>
	/*ul元素下的第一个li元素*/
   ul li:first-child{
       background: aqua;
   }
   /*ul元素下的最后一个li元素*/
    ul li:last-child{
        background: pink;
    }
</style>

<!--li1和li4会改变-->
<div>
    <p>p1</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
    </ul>
</div>

伪类选择器

  • 选择一些元素具有的状态

如：<a>

link:初始化的状态
visited:被访问过的状态
active:正在访问状态
hover:鼠标悬浮状态

<style>  
    a:link{
        color: red;
    }
    a:visited{
        color: blue;
    }
</style>

2.4.4 属性选择器（常用）

  • 相当于将id选择器和类选择器结合

选择元素名称，属性名=属性值的元素

语法：元素名称[属性名=“属性值”]{ }

 = 绝对等于
 *= 包含这个属性
 ^= 以这个开头
 $=以这个结尾

<style>
    /* 选择div下的p标签id属性包含x的标签*/
    .div p[id*="x"]{
        background: pink;
     }
    /* 选择div下的p标签id属性以p开头的标签，不包括p4*/
     .div p[id^= p]{
        background: red;
     }
</style>

<div class="div">
    <p id="p a a.jpg ">p1</p>
    <p id="p a.jpg c.pdf">p2</p>
    <p id="x a.jpg ">p3</p>
</div>
<p id="p a a.jpg b">p4</p>

2.5 美化网页

文字，阴影，超链接，渐变…

2.5.1 文字属性

  • font-family：字体样式
  • font-size：字体的大小
  • font-weight：字体的粗细(strong标签也能完成 )
  • color：字体颜色（属性 RGBA（0,0,255,0.5）A表示透明度0-1之间）

2.5.2 文本属性

  • color：文本颜色
  • text-align：对其方式(center,left,right)
  • text-indent：2em(两个字符，单位一般不用px)
  • background：背景色
  • height：标签块的高度
  • line-height：设置和标签块高度相同时，文本上下居中
  • text-decoration:underline：下划线 (a标签去下划线，将值改为none即可)
  • text-decoration:line-through：中划线
  • text-decoration:overline：上划线
  • text-shadow：阴影效果

2.5.3 实现图片和文字上下对齐

对齐前

在这里插入图片描述
CSS添加样式

<style>
   /*垂直对齐，参照物。a，b(b对着a垂直对齐)*/
   img,span{
      vertical-align: middle;
    }
</style>
    
<p>
    <img src="a.jpg" height="50" width="50"><span>我是一张图片</span>
</p>

对齐后
在这里插入图片描述

2.5.4 列表

  • list-style:none表示去掉前面的圆点。decimal表示数字

2.5.5 背景

背景图片

  • background-image：url(“图片所在位置”);
  • background-repeat:：repeat;图片在所在标签区域全平铺（默认）
  • background-repeat：repeat-x;图片在所在标签区域x轴内平铺
  • background-repeat：no-repeat;不平铺，只显示一张图片
  • background：颜色，图片url，图片位置（x，y轴），平铺方式
<style>
       div{
          border: red solid 1px;
           height: 200px;
           width: 400px;
           background-image: url("a.jpg");
       }
        .div1{
            /*x轴平铺*/
            background-repeat: repeat-x;
        }
        .div2{
            /*y轴平铺*/
            background-repeat: repeat-y;
        }
        .div3{
            /*不平铺*/
            background-repeat: no-repeat;
        }
</style>

<p>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</p>

2.6 盒子模型（重要）

2.6.1 什么是盒子模型

在这里插入图片描述

  • margin：外边距
  • padding：内边距
  • border：边框

2.6.2 边框border

  • 边框的粗细
  • 边框的样式
  • 边框的颜色

2.6.3 外边距margin

  • margin:0;表示上下左右边距都为0
  • margin：0 0 0 0; 表示上下左右边距都为0（对应位置是上，右，下，左）顺时针
  • 只有两个值得话，前面的表示上下边距，第二个表示左右边距。
  • margin:0 auto;实现居中

2.6.4 圆角边框

 <style>
        div{
            width: 100px;
            height: 100px;
            border: solid 2px;
            color: red;
            border-radius: 20px;
        }
        #div1{
            /*正方形的边框圆角等于边长的一半，就是一个圆*/
            width: 100px;
            height: 100px;
            border: solid 2px;
            color: red;
            border-radius: 50px;
        }
</style>

 <div></div>
 <div id="div1"></div>

2.6.5 盒子阴影

box-shadow：x，y轴偏移量。模糊半径，颜色

  • 通过调整模糊半径大小，可以实现图片发光效果

在这里插入图片描述

<style>
        img{
            margin: 300px;
            width: 100px;
            height: 100px;
            box-shadow: 10px  10px 300px red;
        }
</style>

<img src="a.jpg">

2.7 浮动

  • 块级元素：独占一行

h1~h6, p , div ,ul，ol…

  • 行内元素：不独占一行

span a img …

  • display:
  • block：行内元素变为块级元素
  • inline：块级元素变成行内元素
  • inline- block：保持块元素的特性同时能够写在一行
  • none：块空白

行内元素可以包含在块级元素之间

这个也是实现行内元素排列的方式，但是大多情况下使用float

在这里插入图片描述

 <style>
     div{
         width: 100px;
         height: 100px;
         border: 1px solid red;
         display: inline-block;
     }
     span{
         width: 100px;
         height: 100px;
         border: 1px solid red;
         display: inline-block;
     }
 </style>

<div> 块元素</div>
<span> 行内元素</span>
  • float:
  • left：左浮动
  • right：右浮动
  • clear:both：几个块全是右浮动，清除依次向左浮动效果，改为右浮动上下效果。（两侧都不允许有浮动，如果有，则会换到下面）

没加clear:both之前

在这里插入图片描述

加上clear:both之后

在这里插入图片描述

2.7.1 父级边框塌陷问题

解决方案

  1. 增加父级元素的高度
  2. 增加一个空的div元素，清楚左右浮动

2.8 其他的一些属性

overflow

  • 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
<style type="text/css">
div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: visible;
}
</style>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，
用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>

visible效果

在这里插入图片描述

hidden效果

在这里插入图片描述
scroll效果

在这里插入图片描述

JavaScript

3.1 什么是JS

  • 一款浏览器脚本语言
  • 设置IDEA支持es6语法

在这里插入图片描述

3.2 JS的两种导入方式

3.2.1 内部样式

  • 先弹出hello，点击确定之后才会出现输入框。
  • script可以定义在html页面任意位置，但是定义的位置会影响执行顺序。
  • script可以定义多个
<script>
	alert("hello");//弹窗
	console.log("hello");//在浏览器控制台输出
	document.write("hello");//在浏览器界面输出
</script>

<input>

3.2.2 外部样式

  • 通过外部导入的方式script标签src属性
  • script标签必须成对出现，不然可能代码会不生效，不建议自闭合标签
alert("hello");
 ==========================
<script src = "js/hello.js">
</script>

浏览器F12开发者模式:

在这里插入图片描述

3.3 JS基本语法

'user strict'; JavaScript严格检查模式，建议书写JS代码将该语句放在开头第一行。

'use strict';
i = 3;
console.log(i);

使用该语句之前

  • i=3:表示是全局变量

使用该语句之后
在这里插入图片描述
ES6(ECMAScript 6)

  • 在es6中，局部变量使用let表示。 let i = 3;

3.3.1 数据类型

原始数据类型（也叫基本数据类型）

  • Number 数字 包括整数/小数/NaN
  • String 字符串 “abc” ‘a’ ‘abc’（字符串也是不可变的）
  • Boolean 布尔值（true false）
  • Undefined 未定义，如果一个变量没有进行初始化，则会默认赋值为undefined
  • Null 一个对象为空的占位符（用typeof方法显示是object类型）
  • Symbol

引用数据类型

  • Object（对象）：和java中的对象类似，不过是用{ }括起来的,相当于匿名内部类
  • Array（数组）：数组用[ ],对象用{ }。
  • Function(函数)
var person = {
    name:"张三",
    age:18,
    array:[1,2,3,4]
}
//获取对象的属性
console.log(person.name);

获取变量的类型

  • typeof运算符：获取变量的类型
<script>
	var a = 3;
	document.write(typeof(a));
	//结果为number
</script>

3.3.2 运算符

一元运算符

+(正号)  -(负号)  ++  - - 自增（自减） 

<script>
	var num = 3;
	var a = num++;
//先运算，再自增，先把num赋值给a，num再自增。a=3，num=4
</script>

注意：

  • 在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动将运算数进行类型转换
    其他类型转number。
  • String类型转number，按字面值转换，如果字面值不是数字，则转为NaN（不是数字的数字）
    NaN和任意数字进行运算，结果都是NaN。
  • boolean转number：true转为1，false转为0

算术运算符

 + - * / %
  • 和java一样，唯一不同是 / 结果可以为小数

比较运算符

>, <, >=, <=, !=, ===

类型相同：直接比较

  • 字符串：按照字典顺序进行比较，按位逐一比较，直到得到大小为止。

类型不同：先进行类型转化，再比较

==和===

  • == 类型不一致，值一样也会返回true，比如1和"1"
  • === 全等于，在比较之前，先判断类型，如果类型不一样，直接返回false

NaN

  • NaN与所有的数值都不相等，包括自己本身。NaN===NaN结果是false
  • isNaN(变量)：通过该方法判断一个变量是否是NaN

浮点数

  • 浮点数存在精度问题
  • (1/3)===1-(2/3)：结果是false

逻辑运算符

 &&  || ！

其他类型转bollean

  • number：0或NaN为假，其他为真
  • string:除了空字符串，其他都是true
  • null&undefined：都是false
  • 对象：所有对象都是true

判断字符串是否为空

if(a){} 等价于 if(a != null & a.length>0){}

判断对象是否为null
if(stu){} 等价于 if(stu != null){}

三元运算符

 ? :  表达式

var b = 3;
var a = 4;
var c = a > b ? 1 : 0; //a是否大于b?如果大于b,将1赋值给c，否则将0赋值给c
document.write(c);

3.3.3 流程控制语句

if...else..

//alert("hello,word")浏览器弹窗
//document.write("hello");//在浏览器界面显示该内容
var score = 65;//定义变量
if(score>=0 && score<60){
    alert("成绩不合格");
}else if(score>=60 && score<=100){
    alert("成绩合格");
}else {
    alert("请输入正确成绩")
}

switch

  • 防止出现case穿透现象（使用break退出循环解决）
  • 在JS中，switch可以和接收任意的原始数据类型
  • default：都不满足默认执行的语句
var a = null;
switch (a) {
    case 5:
        document.write(a);
        break;
    case null:
        document.write(a);
        break;
    case "a":
        document.write(a);
        break;
    default:
        document.write("输入不符合规范");
}

while

//求1到100的总和
var a = 1;
var sum =0;
while(a<=100){
    sum=sum+a;
    a++;
}
document.write("1到100的总和为："+sum);

do ...while

  • 无论while语句是否成立，都会先执行一次do里面的代码
var a=1;
do {
    a++;
}while (a>20)
document.write(a);//输出结果是2

for

var sum=0;
for (var i=1; i<=100; i++){
    sum+=i;
}
document.write("总和是"+sum)

for...in

//遍历数组
'use strict';
     var arr =[2,6,4,89,235,45];

     for (let i in arr){
         //遍历出来的i是数组的索引
         document.write(arr[i]+"<br/>");
     }

3.4 JS特殊语法

  • 语句以；结尾，如果一行只有一条语句，可以省略；（不建议）
  • 变量定义使用var关键字，也可以不使用
    • 用：定义的变量是局部变量
    • 不用：定义的变量是全局变量（不建议）

如果需要使用全局变量：

var b;
function fun(){
	b = 4;
}
fun();
alert(b);

3.5 JS内部对象

JS中的所有键都是字符串，值是任意对象

//创建对象
'use strict';
     let student={
        name:'zhangsan',
         age:23,
         score:60
     }

//对象赋值
student.name="张三";

//使用一个不存在的对象属性不会报错，会返回undefined
document.write(student.address); //undefined

//动态的增删属性
delete student.age; //删除age属性
student.address="北京";//添加一个address属性

//判断属性是否在一个对象中
document.write("age" in person); //包含继承自上一级的属性
person.hasOwnProperty("age"); //只判断在自己本身中是否存在该属性

3.5.1 Function函数对象

创建函数对象
第一种

var fun1 = new Function("a","b","alert(a);");//不需要掌握

第二种

function 方法名称(形参列表){  //常用
	方法体
}

第三种

var 方法名=function(形参列表){
	方法体；
}

属性

  • length：代表形参的个数

特点

  • 方法定义时，形参的类型和返回值类型不用写。因为都是var
  • 方法是一个对象，如果定义名称相同的方法，会覆盖掉前一个方法
  • 在JS中，方法的调用只与方法的名称有关，和参数列表无关
  • 在方法声明中有一个隐藏的内置对象（数组），arguments，封装了所有的实际参数。

如：求任意个数的和

function add(){
	var sum = 0;
	for(var i = 0; i< argument.length;i++){
		sum = sum + argument[i];
	}
	return sum;
}

//调用该方法
var sum = add(1,2,3);

3.5.2 Array数组对象

创建Array数组对象

var arr = new Array(元素列表)；

var arr = new Array(默认长度);

var arr = [元素列表]；

方法

  • join(参数):将数组中的元素按照指定的分隔符拼接为字符串,document.write(arr.join("++") + "<br>");
  • push():向数组的末尾添加一个或更多元素，并返回新的长度
  • unshift()：向数组的头部添加一个或多个元素
  • pop()：将最后一个元素弹出数组
  • shift()：从数组的头部弹出一个元素
  • slice()：截取Array的一部分，返回一个新的数组，类似于string中的substring方法。
  • sort()：排序
  • reverse()：反转数组
  • concat([1,2])：将数组1,2添加到原数组后面返回一个新数组。原数组不变
var arr = new Array(10,20,30,40);

var length = arr.length;
document.write("数组的长度："+length+"<br/>");//数组的长度：4
document.write(arr.join("@"));//10@20@30@40
arr.push(50,60,70);
document.write(arr);//10,20,30,40,50,60,70

属性

  • length：数组的长度
  • indexOf：通过元素获取下标索引
  • 数组长度可变，假如给Array.length赋值，会自动给数组添加几个未定义的差值在末尾。
  • 如果赋值过小，元素就会丢失

特点

  • JS中，数组元素的类型是可变的，var arr = [1,"abc',true];
  • JS中,数组的长度是可变的,类似于JAVA中的集合

3.5.3 Date日期对象

创建Date日期对象

var date = new Date();

方法

  • toLocaleString()：返回当前date对象对应的时间本地字符串格式，年月日，时分秒
  • document.write(date.toLocaleString());
  • toLocaleDateString()：只返回当前时间的年月日
  • getTime()：获取毫秒值，返回当前对象描述的时间到1970年1月1日零点的毫秒值差（用作时间戳）
var date = new Date();
date.getMonth();//获取当前的月份。0-11，通常加1
var start = date.getTime();
document.write(start+"<br/>");
for (var i = 0; i < 10000; i++) {
    document.write(i);
}
date=new Date(); //更新时间
var end = date.getTime();
document.write("<br/>"+end)
var time = end-start;
document.write("程序共耗时"+time+"毫秒");

3.5.4 Math数学对象

创建Math数学对象

特点：Math对象不用创建，直接使用即可，和java一样。 Math.方法名（）；

属性

  • PI、 π
document.write("π="+Math.PI);
π=3.141592653589793

方法：

  • random()：返回0-1之间的随机数,含0不含1
  • round(x) ： 把数四舍五入为最接近的整数
  • ceil(x) ：对数进行上舍入 Math.ceil(3.01) —>4
  • floor(x) ： 对数进行下舍入Math.ceil(3.99) —>3

随机生成1到100之间的整数

步骤：
1.Math.random()返回0到1之间的数
2.Math.random()*100返回0到100之间的数，不包括100
3.Math.floor(Math.random()*100)返回0到99之间的整数
4.Math.floor(Math.random()*100+1)返回1到100之间的整数

document.write("1到100之间的整数"+Math.floor(Math.random()*100+1));

3.5.5 Global全局对象

特点：这个Global中封装的方法不需要对象就可以直接调用。 方法名();

方法

  • encodeURI：url编码
  • decodeURI：url解码
  • encodeURIComponent：url编码
  • decodeURIComponent：url解码

3.5.6 Map对象（es6新特性）

'use strict';
   let map =new Map([["张三",100],["李四",50],["王五",100]]);
   let score = map.get("张三"); //获取指定key的值
   map.set("二狗",50);//添加或修改键值对
   map.delete("张三");//删除键值对
   document.write(score);

3.5.7 Set对象（es6新特性）

  • 无序不重复的集合（去重）
  • set.add()：添加元素
  • set.delete()：删除元素
  • set.has()：是否包含该元素

3.5.8 iterator迭代器对象

  • 遍历数组
let arr =[1,2,3,4,5];
    for(let i of arr){
        document.write(i);
    }
  • 遍历Map集合
let map =new Map([["张三",20],["李四",25]]);
    for(let p of map ){
        document.write(p);
    }
  • 遍历Set集合
let set = new Set([1,2,3,4,4]);
    for (let a of set){
        document.write(a);
    }

3.5.9 JSON对象

  • 在JavaScript中一切皆是对象，任何JS支持的类型都可以用JON表示

格式

  • 对象都用{ }
  • 数组都用[ ]
  • 所有的键值对 都是key：value

方法

  • js对象转换为JSON字符串： JSON.stringify(对象)
  • json字符串转换为对象 ：JSON.parse(Json字符串)
var person={
    name:"张三",
    age:25
}
let s = JSON.stringify(person);
document.write(s);//{"name":"张三","age":25}
===============================
//传递是参数是一个字符串，需要用单引号括起来*斜体样式*
JSON.parse('{"name":"张三","age":25}');

在这里插入图片描述

JS对象和JSON字符串的区别

 var obj={name:"zhangsan",age:24}                 //JS对象
 var json='{"name":"zhangsan","age":24}'         //JSon字符串

3.6 JS函数

3.6.1 定义函数

定义一个绝对值函数

方式一

  • 一旦执行到return代表方法结束，返回结果
  • 如果没有执行return语句，函数也会返回结果，(形参没有赋值)返回值是undefined
function abs(x) {
    if(x>=0){
        return x;
    }else {
        return -x;
    }
}

方式二

  • 如何限制传入参数的类型符合要求(手动抛出异常)
var abs =function(x) {
     if(typeof x !== 'number'){
         throw 'not a number';
     } else if(x>=0){
         return x;
     }else {
         return -x;
     }
 }

3.6.2 rest函数（es6新特性）

 作用：用来获取除了已经定义的参数之后的其他参数，将其封装到一个数组中

function f(x,...rest) {
    console.log("x:"+x);
    console.log("rest:"+rest);
}

/*
 调用函数：f('a','c','s','d')
 结果：x:a
 rest:c,s,d
*/

3.6.3 函数变量的作用域

  • 在javascript中用var定义变量是有作用域的。
  • 在函数间定义变量，在函数体外不能使用该变量(非要使用的话需要了解闭包的知识)
  • 如果两个函数在自己的函数内部使用了相同的变量名，不会冲突
  • 建议：所有的变量都定义到函数的头部，需要使用该变量时，直接使用即可，便于代码维护。
function f() {
     var x=1;
     x = x+1;
}
 x = x + 2;    //Uncaught ReferenceError: x is not defined

内部函数可以使用外部函数的属性变量，反之不行

function f() {
    var x = 1;
    function f1() {
        var y = x+1;
    }
}

如果内部函数与外部函数定义的变量重名，则在内外部函数使用自己函数的成员变量。

function f() {
    var x = 1;
    function f1() {
        var x = 2;
        console.log("内部x："+x); //2
    }
    console.log("外部x:"+x); //1
    f1();
}

全局变量冲突问题

由于我们使用的所有全局变量都会绑定到window对象上，如果不同的js文件，使用了相同的全局变量名称，会发生冲突。

  • 把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题
  • Jquery就是这样做的，（Jquery.属性等价于$.属性）
//定义该js文件的唯一全局变量
var rm ={};

//定义全局变量
rm.name ="rm";
rm.add = function (a,b) {
    return a+b;
}

局部作用域

  • 问题：使用var定义变量，局部变量出了for循环作用域还能够使用
function f() {
    for(var i = 1; i<10;i++){
        document.write(i);//1-9
    }
    //11,i等于10的时候退出循环，此时i=10，再加1是11
    document.write("i+1:"+(i+1)); //11
}
f();
  • 解决方法：es6新加入let关键字，解决局部作用域冲突问题
function f() {
    for(let i = 1; i<10;i++){
        document.write(i);//1-9
    }
    //Uncaught ReferenceError: i is not defined
    document.write("i+1:"+(i+1)); //控制台报错
}
f();

定义常量

  • 在es6之前，用全大写字母定义的变量就是常量，不要修改这些值（虽然只是假常量–仍然可以对其修改）
  • es6之后使用const来定义常量
const a =10; //只读变量
a = 20; //编译不通过，直接报错

3.7 JS方法

如何定义对象中的方法

var rm = {
    name:"rm",
    birthYear:1998,
    age:function () {
        let now = new Date().getFullYear();
        return now - this.birthYear;
    }
}
//调用对象中的方法
rm.age();

  • this就是调用者。如果没对象调用默认就是window对象调用

  • 在Java中，this是无法指向的，默认指向调用它的哪个对象

  • 在JavaScript中，this是可以指向的

function getAge() {
    let now = new Date().getFullYear();
    return (now - this.birthYear);
}
var rm = {
    name:"rm",
    birthYear:1998,
    age : getAge
};
//表示这个方法中的this指向rm对象，参数为空
getAge.apply(rm,[]);//等价于rm.getAge();

3.8 面向对象编程

面向对象思想编程语言：java、c#、javascript（javascript有些区别，类称为原型对象）

proto:原型，A对象原型指向B对象。A对象就能使用B对象中的属性和方法

定义类class(ES6新特性)

//定义类
class student{
    constructor(name){
        this.name =name;
    }
    run(){
        console.log(this.name+"在跑");
    }
}
//创建对象
let student1 = new student("小明");
student1.run();
let student2 = new student("小红");
student2.run();
  • 实现继承
//定义类
class student{
    constructor(name){
        this.name =name;
    }
    run(){
        console.log(this.name+"在跑");
    }
}
//继承
class primary extends student{
    constructor(name,grade){
        super(name);
        this.grade=grade;
    }
    getGrade(){
        console.log(this.name+"是一名"+this.grade+"学生");
    }
}
//创建一个primary对象
let p1 = new primary("小新","三年级");
p1.getGrade();//小新是一名三年级学生

继承本质还是使用的对象原型
在这里插入图片描述

3.9 操作BOM对象

BOM对象：浏览器对象模型

浏览器内核：IE、Chrome、Safari、FireFox
三方浏览器：QQ 360 UC

3.9.1 window对象

window对象代表浏览器窗口

在这里插入图片描述

3.9.2 screen对象

screen对象代表屏幕

screen.width
1440 px
screen.height
960 px

3.9.3 location对象

location对象代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
origin: "https://www.baidu.com"
protocol: "https:"
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign('url地址')

3.9.4 document对象

document对象代表当前的页面，HTML DOM文档树

获取具体的文档树节点

<ul id="ul">
    <li>JAVA</li>
    <li>JAVASE</li>
    <li>JAVAEE</li>
</ul>

在这里插入图片描述
获取网页的cookie

  • 服务端可以设置cookie:httpOnly，防止劫持cookie

在这里插入图片描述

3.10 操作DOM对象（重点）

浏览器网页就是一个DOM树形结构

  • 更新：更新DOM节点
  • 遍历DOM节点：得到DOM节点
  • 删除：删除一个DOM节点
  • 添加：添加一个DOM节点

3.10.1 获取DOM节点

  • 要操作一个DOM节点，就必须要获得这个DOM节点。
  • 注意：获取节点的script标签一定要写在标签内容下面，不然获取不到
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    //分别获取这三个节点
    var h1 = document.getElementsByTagName("h1");
    var p1 = document.getElementById("p1");
    var p2 = document.getElementsByClassName("p2");
    var father = document.getElementById("father");
    var children = father.children;
</script>

在这里插入图片描述

3.10.2 更新DOM节点

  • 操作文本内容
<div id="div1"></div>
<script>
    let div1 = document.getElementById('div1');
    //该方法不会解析标签内容，输入标签也是字符串形式
    div1.innerText = "Hello World";
    //该方法会解析html标签内容
    div1.innerHTML = "<strong>Hello world</strong>";
</script>
  • 操作CSS样式
<div id="div1"></div>
<script>
    let div1 = document.getElementById('div1');
    div1.innerText="Hello"; //属性值都使用字符串包裹
    div1.style.fontSize = "30px"; //下划线转驼峰命名
    div1.style.color = "red";
    div1.style.padding= "50px";
</script>

3.10.3 删除DOM节点

  • 先获取父节点，然后通过父节点删除自己。不能自己删除自己
  • 注意：删除多个节点时，children是在时刻变化的，删除节点时要注意
<div id="div1">
    <span class="span1">Hello</span>
</div>
<script>
    //要删除span1节点，需要先获取其父节点
    let span1 = document.getElementsByClassName("span1");
    let father = span1.parentElement;
    father.remove(span1);

	//删除是一个动态的过程
	father.removeChild(father.children[0]);
	father.removeChild(father.children[1]);
	father.removeChild(father.children[2]);
</script>

3.10.4 插入DOM节点

  • 获得了某个DOM节点，假如这个节点中的内容是空的，通过innerHtml方法可以向其添加元素，但是如果节点中存在内容，使用该方法会覆盖里面原本的内容。
  • 使用追加方法append
<li id="js">javascript</li>
<ul id="ul">
    <li>javase</li>
    <li>javaee</li>
    <li>javame</li>
</ul>

<script>
    //将以存在的标签追加到一个标签后面
    let ul = document.getElementById("ul");
    let js = document.getElementById("js");
    ul.appendChild(js); //追加
</script>

追加前

在这里插入图片描述

追加后

在这里插入图片描述

创建一个新的标签，实现插入

  • let newP = document.createElement(“li”); 创建一个新的标签，后面是标签类型。
<ul id="ul">
    <li>javase</li>
    <li>javaee</li>
    <li>javame</li>
</ul>

<script>
    let ul = document.getElementById("ul");
    //创建一个新的标签
    let newP = document.createElement("li");
    newP.id="p";
    newP.innerText="php1"
    ul.appendChild(newP);

	//创建一个标签节点
	let img= document.createElement("img");
    img.setAttribute("src","a.jpg"); //等价于<img src="a.jpg">
</script>

3.11 操作表单

form表单

  • 文本框 text
  • 下拉框 select
  • 单选，复选框 radio、checkbox
  • 隐藏域 hidden
  • 密码框 password

获取和修改输入框的值

<form>
    <span>用户名：<input id="username"></span>
    <span>
        <p>性别：</p>
        <input type="radio" name="sex" value="boy" id="boy">男
        <input type="radio" name="sex" value="girl" id="girl">女
    </span>
 
</form>

<script>
    let user = document.getElementById("username");
    console.log(user.value);
    user.value="123456";

	//对于单选框，多选框等固定的值，只能获取到当前的值
	let boy = document.getElementById("boy");
    let girl = document.getElementById("girl");
	boy.checked;//查看返回的结果，true表示被选中
	girl.checked=true;//修改选择的结果
</script>

提交表单

  • 使用md5加密,使用隐藏输入框接收用户密码输入的密码并对其进行加密
<body>
    <!--表单绑定提交事件
        οnsubmit=绑定一个提交检测的函数，返回值是true，false
        将这个结果返回给表单，使用onsubmit接受，true通过提交，false阻止提交
    -->
    <!--onclick单击事件-->
    <form action="demo2.html" method="post" onsubmit="return check()"> 
        <p>
            用户名:<input type="text" name="username" id="username">
        </p>
        <p>
            密码:<input type="password" id="pwd"> <!--提交的不是用户直接输入的密码-->
        </p>
        <input type="hidden" name="pwd" id="md5_pwd"><!--提交的是加密后的密码-->
        <input type="submit" value="登录" >

    </form>

    <script>
        function check() {
            let pwd = document.getElementById("pwd");
            let md5_pwd = document.getElementById("md5_pwd");
            //md5方法就是对参数进行加密返回加密后的结果,提交上去的是加密后的密码
            md5_pwd.value =md5(pwd.value); 
            return true;
        }
    </script>

通过md5加密后提交的数据

在这里插入图片描述

JQuery

4.1 什么是JQuery

JQuery库，里面存在大量的JS方法

4.2 导入JQuery

<!--通过js文件导入-->
<script src="../../lib/js/jquery-3.3.1.js"></script>
<!--通过cdn在线导入-->
<script src="https://lib.baomitu.com/jquery/3.5.0/jquery.js"></script>

公式：$ (选择器).事件 $ 就代表JQuery

<body>
<a href="#" id="a1">点我</a>

<script>
    $("#a1").click(function () {
        alert("Hello,JQuery")
    })
</script>

4.3 选择器

<script>
    //JS原生态
    let p1 = document.getElementsByTagName("p");
    let a1 = document.getElementById("a1");
    let div1 = document.getElementsByClassName("div1");

    //JQuery CSS中的选择器都能用
    $("p").click(); //标签选择器
    $(".a1").click();//id选择器
    $("#div1").click();//class选择器
</script>

文档工具站: https://jquery.cuishifeng.cn/index.html

4.4 事件

鼠标事件，键盘事件等

当网页加载完毕之后，响应事件

<script>
    $(document).read(function () {
        //网页加载完毕之后执行的指令，JS代码写在这里面
    })
</script>
  • 简化为
<script>
    $(function () {
        //网页加载完毕之后执行的指令，JS代码写在这里面
    })
</script>
  • 鼠标移动事件
    <style>
        #mouseFrame{
            width: 300px;
            height: 300px;
            border: solid 1px red;
        }
    </style>

    鼠标：<span id="mouse"></span>
    <div id="mouseFrame">在这里移动鼠标试试</div>

<script>
    $(function () {
        $("#mouseFrame").mousemove(function (e) {
            $("#mouse").text("x:"+e.pageX+"y:"+e.pageY);
        })
    })
</script>

在这里插入图片描述

4.5 操作DOM

节点文本操作

<ul id="ul">
    <li id="python">python</li>
    <li name="java">java</li>
    <li class="c">c</li>
</ul>

<script>
    //修改节点中的内容
    $(function () {
        let text = $("#ul li[name='java']").text(); //获取值
        $("#ul li[name='java']").text("JAVA");//设置值

        let html = $("#ul .python").html();//获取值
        $("#ul #python").html("<strong>PYTHON</strong>");//设置值

    })
</script>

修改CSS样式

<script>
    //修改css
    $(function () {
         $("#ul li[name='java']").css({"color":"red","font-size":"50px"});
    })
</script>

元素的显示和隐藏

  • 本质 display:none
<script>
    //修改css
    $(function () {
         $("#ul li[name='java']").show();//显示该节点
         $("#ul li[name='java']").hide();//隐藏该节点
         $("#ul li[name='java']").toggle();//将该节点显示改为隐藏，隐藏改为显示
    })
</script>
初夏那片海
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端基础知识（一）数据类型
AGCA_ZXL的博客
06-07 2826
数据类型 JS有5种基本数据类型：String、Number、Boolean、Null、undefined，加上ES6的两种：Symbol、BinInt 1）基本数据类型：指的是保存在栈内存中的简单数据段 2）引用数据类型：指的是那些保存在堆内存中的对象，变量中保存的实际上只是一个指针，这个指针指向内存堆中的实际的值 3）Symbol：是ES6引入了一种新的原始数据类型，表示独一无二的值 4）BinInt：即是第七种基本类型，V8引擎V6，7默认启用对BinInt 的支持。是一种内置对象，它提供了一种方法来
HTML中关于＜br＞,＜P＞换行符的区别和使用影响
iLuosa的博客
04-02 1万+
HTML中关于<br>,<P>换行符的区别和使用影响 我们刚学习了html的同学都知道，在html文件中输入完一段文字后按回车换行后再运行，网页中显示的文字并没有换行，只是隔了一个空格。所以说我们就要使用到html中的换行符<br/>和<p>，那么我们在使用这两种换行符的时候该如何选择呢？它们又有哪些区别呢？ 区别： <p>：段落标签，格式：<p> 文本 <p/> ， 顾名思义，<p&gt...
零基础HTML入门教程(11)——换行br
最新发布
weixin_61808806的博客
12-02 4080
br 标签是空标签（意味着它没有结束标签，因此这是错误的：有开有闭合的br。在 XHTML 中，把结束标签放在开始标签中，也就是 br/。请注意，br 标签只是简单地开始新的一行，而当浏览器遇到 p 标签时，通常会在相邻的段落之间插入一些垂直的间距。我们上一小节学习了img图像，我们这一小节学习一下新的标签br换行标签，并且熟练使用。我们可以看到加br的哪行代码下面，行内块本应该不换行，但是加完br之后换行了。本小结我们学习了br这个标签他可以起到强制换行的作用，我们要合理熟练使用。
html如何设置图层间的层次,CSS Layers(层级)
weixin_36184985的博客
06-17 2901
CSS Layers(层级)CSS z-index属性可以与position属性结合使用，以创建诸如Photoshop之类的图层效果。使用z-index属性在图层中层叠元素通常将HTML页面视为二维页面，因为文本，图像和其他元素在页面上排列而没有重叠。但是，除了它们的水平和垂直位置外，还可以使用CSS z-index属性沿z轴堆叠盒子，也就是一个堆叠在另一个堆叠之上。该属性指定一个盒子，其堆叠水平...
position属性的详情
caa112的博客
10-04 234
position属性值的区别
前端基础总结
12-26
前端基础总结，里面包含最基础应该了解 的知识，非常适合，新手学习的。需要的可以看看。
前端基础第一天的笔记
01-03
这是前端基础第一天学习的笔记,视频,文档,练习题所有的东西,文件太大传输不上来,需要把种子传上去,大家再用µTorrent软件打开即可
前端基础教程
08-17
通过仔细阅读并跟随教程进行练习，你可以逐步建立起坚实的前端基础，为未来深入学习JavaScript和前端框架打下坚实的基础。在学习过程中，记得多查阅文档，参与在线社区讨论，这样能更快地解决遇到的问题，同时也能...
web前端基础案例
09-30
总结来说，这个"Web前端基础案例"教程旨在帮助初学者建立起对Web前端开发的全面理解，通过实践案例强化技能，从而能够独立创建具有基本功能和样式的静态网页。随着进一步的学习，你将能掌握更复杂的前端框架和技术，...
前端基础第二天
01-03
文件中包括了视频,文档,笔记,代码,练习题等所有的资料,这只是一个种子,需要用µTorrent软件,整理过就可以形成压缩包,就可以拿到资料了,很全
jquery实现表单验证简单实例演示
11-23
本文实例讲述了jquery实现表单验证代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 具体代码如下： 直接上插件实现代码了，围绕代码进行讲解比较容易点： /* 描述：基于jquery的表单验证插件。 */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将当前应用对象存入root var isok = false; //控制表单提交的开关 var pwd1; //密码存储 var defaults = { //图片路径 img_error: "img
JS动态改变表格边框宽度的方法
10-24
主要介绍了JS动态改变表格边框宽度的方法,实例分析了javascript操作table表格中border属性的技巧,需要的朋友可以参考下
基于jQuery实现的水平和垂直居中的div窗口
12-12
1、通过css实现水平居中： 代码如下: .className{ margin:0 auto; width:200px; height:200px; } 2、通过css实现水平居中和垂直居中 通过css创建一个水平居中和垂直居中的div是一件比较麻烦的事情，您必须事先知道另外一个div的尺寸： 代码如下: .className{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px; } 3、通过jQuery实现水平居中和垂直居中前面已经提到过了，css的方法只
css 设置层级关系,css层级关系怎么设置
weixin_30623181的博客
08-04 1万+
在css中，可以利用z-index属性来设置层级，该属性可以设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面；语法格式“z-index:数值;”，允许使用负值。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。在css中，可以利用z-index属性来设置层级。z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素...
【网页前端】CSS样式表进阶之图像的灵活使用与拓展知识
专注于Java领域开发 关注我 带你玩转Java
07-29 321
网页上我们经常能够看到大量图标图片使用,若每张图片都单独进行一次传输，效率会很低。
【jQuery】 # jQuery选择器
LRcoding
02-26 2554
一、基本选择器 1.元素选择器 选择所有的 <p>元素 $("p") 2. ID选择器 选择 id 为demo的元素 $("#demo") 3. class类选择器 选择所有class为 test的元素 $(".test") 二、实例 1.查找 ID以 demo_ 开头的div $("div[id^='demo_']") 2.查找 ID以 6结尾的div $("div[id$='6']") 3.选取当前HTML元素 ...
CSS层叠样式表
Mr_fengzi的博客
08-02 465
CSS 指层叠样式表 (Cascading Style Sheets)定义如何显示控制 HTML元素，从而实现美化HTML网页。 为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
JavaScript常见获取元素的方法
qq_41995398的博客
08-05 564
Js中有很多获取元素的方法，本文讨论了较为常见的几种方法. 1.getElementById('demo'): 该方法会返回一个Id值为'demo'的节点，该方法定义在Document.prototype上面，Element节点是不能调用的，只能被document调用 , var Node = document.getEle...
java 程序设计题库
热门推荐
cat marshal的博客
06-18 3万+
答题要求：单选题，每题只有一个正确答案，选择正确给分，不正确不给分。 1、 下面（ A ）数据类型可用于main()方法中传递的参数 A、String B、Integer C、Boolean D、Variant 2、以下的选项中能正确表示Java语言中的一个整型常量的是（ B ） A、12． B、-20 C、1,000 D、4 5 6 3、下列的变量定义...
百度前端基础平台构建与实践
"本次分享主要围绕百度前端基础平台的构建，旨在解决百度前端开发中遇到的通用性问题和基础架构挑战。" 在【百度前端基础平台与架构分享】中，百度前端团队面对的是多样的产品线，包括搜索、社区和商业产品，这些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值