随笔 - 20,  文章 - 6,  评论 - 0,  阅读 - 2388

day01-HTML

HTML语言开发工具:HBuilder

HTML:超文本标记语言

 HTML语法规范

1.HTML语言的注解方式:<!--注解内容-->

2.标签不区分大小写,官方建议使用小写

3.标签通常都是由开始标签和结束标签组成,也有个例,如:<br/>表示换行,<hr/>表示水平分割线

4.在谷歌浏览器上右键点击选择:显示网页源代码,可看到HTML源码,选择:检查,也可展示源码

HTML标签

1.<title></title>标签内容展示在网页的tab标签上;

2,<meta> :网站的配置信息

eg:<meta charset=utf-8">指定浏览器打开页面的编码方式,如果内容有中文,编码方式设置为gbk,则会出现中文乱码的问题;

3.<p></p>段落标签,段落内容会前后都有空行

4.<h1></h1>标题标签,范围:1-6

5.<font></font>标签常用属性

  color:颜色

  size:改变字体大小,范围:1-7

  face:设置字体

格式:<标签 属性的名称="属性的值">

6.<b></b>:加粗

7.<i></i>:斜体

8.<strong></strong>:加粗,带语义的标签

9.<em></em>:斜体,带语义的标签

10.img标签常用属性:

  src:指定图片路径

    ./:代表的是当前路径

    ../:代表上一级路径

    ../../:代表上上一级路径

  width:指定图片宽度

  heigth:图片高度

  alt:文件加载失败时的提示信息

11.ul标签是无序列表

  内必须嵌套子标签<li>:列表项

  属性type:circle-小圆圈,disc-小方块,默认小黑点square

12.ol标签是有序列表,展示1、2、3序列号

  常用属性:

    type:指定序号的类型,如:a

    start:从几开始,必须得写数字

13.a超链接标签

  常用的属性:

    href:指定要跳转去的链接地址,需要加上http协议,如果访问的是本网站的html文件,可以直接写文件路径,="#",井号是占位符,相当于一个锚

    target:以什么方式打开

      _self:默认打开方式,在当前窗口打开

      _blank:新起一个标签页打开页面

      值也可填充frame设置的name名称,这样的话,点击后跳转至此name名称对应的frame框架界面

14.table表格标签

  常用属性:

    border:指定边框,=1px

    width:宽度,=100%,等于铺平网页宽度

    height:高度

    bgcolor:背景色

    align:对齐方式,在table标签上写此属性,表格在网页页面居中(设置值为:center)

  tr标签:行

    align:对齐方式,在tr标签上写此属性,单元格中内容居中(设置值为:center)

  td标签:列

    合并单元格:

      colspan:跨列操作,把合并的另外一个单元格删除

      rowspan:跨行操作

      background:设置背景图片

  说明:顺序是table标签内嵌套tr标签,tr标签内再嵌套td标签

表格的嵌套:table标签中嵌套table标签

15.input标签

属性type(指定输入项的类型)的属性值:

  text:文本输入框

  password:密码输入框

  file:文件上传按钮

  radio:单选按钮,注意:选项为多个,需设置属性name的值相同,这样才会限制此一组中仅可选中一个

  checkbox:复选框,可同时选择多个选项

  submit:提交按钮,通常搭配属性value使用,设置按钮名称如:value="提交"

  button:普通按钮

  reset:重置按钮,清空文本框录入内容

  hidden:隐藏域(在表单界面中不展示),主要是用来存放页面上一些ID信息(get请求方式,此参数不会展示在链接中)

  date:日期选择框

  datetime-local:日期+时间选择框

  tel:在手机端会弹出纯数字的9宫格软键盘

  number:限制文本输入框仅可输入数字,不可录入字母

属性name(在表单提交的时候,当作参数的名称):表单提交时文本录入框显示在网页链接中的名字,如设置name="username",则链接中会展示:username=123

属性id:给输入项取一个名字,以便于后期我们去找到它,并操作它

属性placeholder:文本录入框中默认的灰色提示信息

16.textarea:文本域,可以输入一段文本

  属性:

    cols:列宽

    rows:行宽    

17.select:下拉选择标签

  option子标签:下拉选项

18.form表单标签:主要是用来向服务器提交数据

属性:

  action:指定提交的地址,即页面跳转到哪里

  method:

    get 方式,默认提交方式,(会将参数拼接在链接的后面,有大小限制,4K)form表单提交的信息会拼接在网页链接的网址中,不安全

    post 方式,form表单提交的参数信息,(会将参数封装在请求体中,没有大小限制====通过右键->点击检查:form中查看)不会在网页链接中显示

19.frameset框架标签

  属性rows:拆分成几行,说明:最后的取值可以用*,表示占满剩余的百分比,eg:rows="15%,*"

  属性cols:拆分成几列

  frame:子标签

    属性src:链接到的html地址

    属性name:给个名称,此名称可设置为a超链接标签点击后跳转至的frame

说明:frameset框架标签存在,则body标签需删除,因为通过frame的src管理了多个html的body标签

 

day02-CSS&JS

CSS简单的入门

表格布局的缺陷:

  1.嵌套层级太多,一旦出现嵌套顺序错乱,整个页面打不到预期效果

  2.采用表格布局,页面不够灵活,动其中某一块,整个表格布局的结构全都要变

HTML的块标签:

  div标签:默认占一行,自动换行

  span标签:内容显示在同一行

CSS概述:

  Cascading Style Sheets:层叠样式表

  主要作用:

    1.美化页面

    2.将页面美化和HTML代码进行分离,提高代码的复用性

CSS的简单语法:

  在一个style标签中,去编写CSS内容,最好将style标签写在header标签中

<style>
选择器{
    属性名称:属性的值;
    属性名称2:属性的值2;
}
</style>

CSS选择器:帮助我们找到我们要修饰的标签

  元素选择器: 
元素的名称{
   属性名称:属性的值;
   属性名称:属性的值;
}
  ID选择器:  
以#开头  ID在整个页面中必须是唯一的 取div/span标签的id属性值
#ID的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}
  类选择器:  
以.开头  取div/span标签的class属性值
.类的名称{
   属性名称:属性的值;
  属性名称:属性的值; }

CSS的引入方式:

  外部样式:通过link标签引入一个外部的css文件

  内部样式:直接在style标签内编写CSS代码

  行内样式:直接在标签中添加一个style属性,编写CSS样式

CSS浮动:浮动的元素会脱离正常的文档流,在正常的文档流中不占空间

  float属性:

    left

    right

  clear属性:清除浮动(可以添加一个空的div标签,指定style属性,设置clear)

    both:两边都不允许浮动

    left:左边不允许浮动

    right:右边不允许浮动

流式布局

CSS选择器的优先级: 

  按照选择器搜索精度来排序:  行内样式》ID选择器〉类选择器》元素选择器

  就近原则(即:当某个标签设置了class属性,名称定义了两个,则优先生效的是更靠近被修饰元素的那个css样式)

CSS中的其他选择器:

  选择器分组:

    选择器1,选择器2{属性的名称:属性的值}   ,以逗号隔开,eg:h1,h2,h3{color:red;}

  属性选择器:

    a[title] :包含某个属性的

    a[title='aaa']:指定属性等于某个具体值的

    a[href][title]:包含两个属性的 

  后代选择器:

    爷爷选择器 孙子选择器(中间以空格分开 ),找出所有的后代

  子元素选择器:

    父亲选择器>儿子选择器,(中间以大于号隔开),仅可找到直系儿子

  伪类选择器:通常都是应用在a标签上===链接未点击时展示颜色,点击后展示颜色,鼠标悬浮展示颜色

CSS的盒子模型:万物皆盒子

内边距:控制的是盒子内容的距离

  padding-top:

  padding-right:

  padding-bottom:

  padding-left:

1
2
3
4
padding:10px;上下左右都是10px
padding:10px 20px;上下是10px 左右是20px
padding:10px 20px 30px; 上10px 右20px 下30px 左20px
padding:10px 20px 30px 40px;上右下左,顺时针的方向

外边距:控制盒子与盒子之间的距离

  margin-top:

  margin-right:

  margin-bottom:

  margin-left:

CSS绝对定位:

  position:absolute

  top:控制距离顶部的位置

  left:控制距离左边的位置

JavaScript概述

什么是JavaScript:一种直译式脚本语言

什么是脚本语言?

  java源代码》编译成.class文件〉java虚拟机中才能执行

  脚本语言:源码》解释执行

  js由我们的浏览器来解释执行

HTML(超文本标记语言):设计网页,决定了页面的框架

CSS(层叠样式表):用来美化我们的页面,将美化和HTML代码进行分离

JS:脚本语言,由浏览器解释执行,弱类型语言(var i),提供用户的交互的

JS的组成:

ECMAScript:核心部分,定义js的语法规范

DOM:document Object Model 文档对象模型,主要是用来管理页面的

BOM:Browser Object Model 浏览器对象模型,前进、后退、页面刷新、地址栏、历史记录、屏幕宽高

JS的语法

变量弱类型:var i=true

区分大小写

语句结束之后的分号,可以有,也可以没有

写在script标签中 

JS的数据类型

基本类型

  string

  number

  boolean

  undefine

  null

eg:alert(typeof i)==alert表示弹框,结果展示变量所属类型

引用类型

  对象,内置对象

类型转换

  js内部自动转换

JS的运算符和语句

运算符和java一样

  "==="全等号:值和类型都必须相等

  "=="值相等就可以了

语句和java一样

JS的输出

  alert():直接弹框

  document.write() 向页面输出

  console.log() 向控制台输出

  innerHTML:向页面输出,可设置标签属性,如字体颜色===可用来修改页面内容(文本替换)

  innerText:向页面输出,纯文本不识别标签

  获取页面元素:document.getElementById("Id的名称")

JS声明变量:

  var 变量的名称=变量的值;

JS声明函数:

  var 函数的名称=function(){

  }

  function函数的名称(){

  }

JS的开发步骤

1.确定事件(注意:onsubmit事件比较特殊,需要一个返回,eg:onsubmit="return chechForm()")

2.通常事件都会触发一个函数

3.函数里面通常都会去操作页面元素,做一些交互动作

说明:通过document.getElementById("Id的名称")获取到文本输入框input对象,再通过value获取到填写的文本内容值

var email=document.getElementById("email");

var uEmail=email.value;

正则表达式需要前后添加斜杠,eg:/正则表达式/===正则表达式对象.test(校验内容),返回true或false

day03-JS

定时器

HTML DOM setInterval()方法

定义和用法

setInterval()方法可按照指定的周期(以毫米计)来调用函数或计算表达式。

setInterval()方法会不停的调用函数,直到clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval()方法的参数。

语法:

setInterval(code,millisec)

code:要调用的函数或要执行的代码块

millisec:周期性执行或调用code之间的时间间隔,以毫秒计算

setTimeout()方法

用于在指定的毫秒数后调用函数或计算表达式

图片隐藏

var img = document.getElementById("img1");

img.style.display="none";

图片显示

img.style.display="block";

注册表单校验涉及的事件

onfocus:获得焦点事件

onblur:失去焦点事件

onkeyup:键盘按键弹起事件

补充:

文档加载完成的事件 onload事件

ondbclick:双击事件

鼠标移入:onmouseinter

鼠标移出:onmouseout

引入一个外部js文件

1
<script src="js文件的路径" type="text/javascript"/>

DOM的常见操作

DOM( Document Object Model ) 文档对象模型,提供了很多对标签增删改查的操作。

下边分享DOM中常见的增删改查操作:

常用方法:

1.获取节点:

document.getElementById(idName) //通过id号来获取元素,返回一个元素对象

document.getElementsByName(name) //通过name属性获取id号,返回元素对象数组

document.getElementsByClassName(className) //通过class来获取元素,返回元素对象数组(ie8以上才有)

document.getElementsByTagName(tagName) //通过标签名获取元素,返回元素对象数组

document.querySelector() //ES6标准,通过css选择器获取元素。返回匹配得元素

document.querySelectorAll() //ES6标准,通过css选择器获取元素,返回类数组集合

2.获取/设置元素的属性值:

element.getAttribute(attributeName) //括号传入属性名,返回对应属性的属性值

element.setAttribute(attributeName,attributeValue) //传入属性名及设置的值

3.创建节点Node:

document.createElement("h3") //创建一个html元素,这里以创建h3元素为例

document.createTextNode(String); //创建一个文本节点;

document.createAttribute("class"); //创建一个属性节点,这里以创建class属性为例

4.增添节点:

element.appendChild(Node); //往element内部最后面添加一个节点,参数是节点类型

elelment.insertBefore(newNode,existingNode); //在element内部的中在existingNode前面插入newNode

5.删除节点:

element.removeChild(Node) //删除当前节点下指定的子节点,删除成功返回该被删除的节点,否则返回null

element.removeAttribute(new,old)

常用属性:

1.获取当前元素的父节点 :

  element.parentNode //返回当前元素的父节点对象

2.获取当前元素的子节点:

element.chlidren //返回当前元素所有子元素节点对象,只返回HTML节点

element.chilidNodes //返回当前元素多有子节点,包括文本,HTML,属性节点。(回车也会当做一个节点)

element.firstChild //返回当前元素的第一个子节点对象

element.firstElementChild //ie6,7,8 不兼容

element.lastChild //返回当前元素的最后一个子节点对象

element.lastElementChild //ie6,7,8 不兼容

3.获取当前元素的同级元素:

element.nextSibling //返回当前元素的下一个同级元素 没有就返回null

element.previousSibling //返回当前元素上一个同级元素 没有就返回null

4.获取当前元素的文本:

element.innerHTML //返回元素的所有文本,包括html代码

element.innerText //返回当前元素的自身及子代所有文本值,只是文本内容,不包括html代码

5.获取当前节点的节点类型:

node.nodeType //返回节点的类型,数字形式(1-12)常见几个1:元素节点,2:属性节点,3:文本节点。

6.设置样式:

element.style.color=“#eea”; //设置元素的样式时使用style,这里以设置文字颜色为例。

select标签多行显示属性:

  multiple="multiple" 允许多选

  checked属性,值设置为checked,表示input标签的复选框已被选中

转译符号:& eg:&gt,大于号

修改行的颜色:

row.bgColor="red"

row.style.backgroundColor="black"

row.style.background="red"

"background-color:red"

"background:red"

day04-JQuery

JQuery概述

javaScript函数库

JQuery的作用:

1.写更少的代码,做更多的事情(write Less,Do more)

2.将js代码和HTML页面代码进行分离 

JQ的入门案例

JQ函数关于文档加载完成(onload)事件的三种写法:

JQuery(document).ready(function(){

  alert("第一种写法");

});

$(document).ready(function(){

  alert("第二种写法");

});

$(function(){

  alert("第三种写法");

});

js加载完成的事件:

window.onload = function(){

  alert("js写法");

}

JQ和JS对象之间的转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML>
<html>
        <head>
              <meta charset="UTF-8">           <!--引入JQ的js文件-->
               <script>            function changeJS(){              var div = document.getElementById("div1");              div.innerHTML = "JS成功修改了内容";              //将JS对象转成JQ对象              //$(div).html("转成JQ对象来修改内容");            }  $(function(){//给按钮绑定事件   $("#btn2").click(function(){//找到div     $("#div1").html("JQ方式成功修改了内容");    //将JQ对象转换成JS对象来用    var div = $("#div1");    var jsDiv = div.get(0);  //也可以       var jsDiv = div[0];  });}); 
                </script>  
        </head>
        <body>
                <input type="button" value="JS修改div内容" onclick="changeJS()"/>  
                <input type="button" value="JQ方式修改div内容" id="btn2"/ >
          <div id="div1">              这里的内容要被JS/JQ代码修改掉          </div>
        </body>
</html>
                

 

JQ的动画效果 

show():显示

hide():隐藏

slideUp:向下滑动(窗帘拉上),隐藏

slideDown:向上滑动(窗帘拉下),显示

fadeIn:淡入

fadeOut:淡出

animate: 自定义动画

JQuery中的选择器

让我们能够更加精确找到我们要操作的元素

JQ中根据ID查找元素

1
2
3
4
5
全都是根据选择器去找的<br>#ID{ }
 
.类名{ }
 
$("#ID的名称")

补充:link标签引入css样式文件

基本选择器

  ID选择器:#ID的名称

  类选择器:以.开头 .类名

  元素选择器:标签的名称

  通配符选择器:*

  选择器分组:选择器1,选择器2

层级选择器

  子元素选择器:选择器1>选择器2===找出所有儿子

  后代选择器:选择器1 选择器2====找出所有儿孙

  相邻兄弟选择器:选择器1+选择器2====找出紧挨着的一个弟弟

  找出所有弟弟选择器:选择器1~选择器2

基本过滤器

说明:css() :修改css样式

$("div:first").css("background-color","green");  //过滤出所有div中第一个元素

$("div:even").css("background-color","green");  //过滤出所有div中索引为偶数位的div

$("div:odd").css("background-color","green");  //过滤出所有div中索引为奇数位的div

$("div:gt(2)").css("background-color","green");  //过滤出所有div中找出索引大于2的

:last

:lt(index)

:eq(index)

属性过滤器

$("a[href]").css("background-color","green"); //过滤出包含属性href的所有a标签元素

$("a[href][title]").css("background-color","green"); //过滤出包含属性href和title的标签

$("a[href][title='tit1']").css("background-color","green"); //过滤出包含属性href和title,且title属性值等于tit1的标签

说明:红色字体也可写成^tit1(以tit1开头),tit1$(以tit1结尾),tit1*(包含tit1)

表单过滤器

$(":input").css("background-color","green"); //注意,这里过滤出来的并非只有input标签元素,包含所有输入框的元素,如textarea

:text 找出type类型为text的

:password

说明:过滤器都是在选择器的基础上进行过滤的,通过冒号:过滤

表单对象属性

$("select option:selected").css("background-color","green"); //找出select标签中被选中的选项

:checked

JQ的开发步骤:

1.导入JQ相关的包

2.文档加载完成的事件($(function(){});),页面初始化:绑定事件,启动定时器

3.确定事件,如:onclick

4.实现事件所要触发的函数

5.函数里面再去操作我们要操作的元素

JQ的表格全选和全不选

attr:操作一些自定义的属性 <img abc="123" />

prop:通常是用来操作元素固有属性的,建议大家使用prop来操作属性

prop()方法用来设置或获取元素固有属性值。元素固有属性是指元素本身自带的属性,如<a>标签的href属性。具体语法示例如下。

1
2
$(selector).prop("属性名")             //获取属性值
$(selector).prop("属性", "属性值")      //设置属性值

  下面我们通过代码演示prop()方法的使用。

1
2
3
4
5
<a href="http://localhost" title="主页"></a>
<script>
    console.log($("a").prop("href"));   //输出结果: http://localhost
    $("a").prop("title", "首页");       //设置title的值为“首页"
</script>

  开发中,还会经常使用prop('属性')获取表单元素的checked值,示例代码如下。

1
2
3
4
5
6
7
<input type="checkbox" checked>
<script>
    //获取表单元素的checked值
    $("input").change(function(){
        console.log($(this).prop("checked"));       //复选框选中时,输出结果为true
    });
</script>

  上述代码中,第1行代码设置了input的type值为checkbox,表示复选框。第4行代码给input绑定了change事件,当表单元素状态发生变化时触发。如果复选框处于选中状态,则输出结果为true,否则输出false。

技巧:

  网页上右键,选择检查,找到对应元素,然后,再在元素标签上右键,选择copy》selector:显示元素的选择器结果

JQ添加节点(文档操作):

appendChild(JS)

1.append:添加子元素到末尾

2.appendTo:给自己找个爹,将自己添加到别人家里

3.prepend:在自己最前面添加子节点

4.after:在自己的后面添加一个兄弟

5.before:在自己的前面添加一个兄弟

6.empty:清空所有子节点

遍历函数:each(object,[callback])

1.JQ对象调用遍历

$("数组对象").each(function(index,data))

1
2
3
4
5
$([上海市,深圳市,广州市,北京市]).each(function(i,n){ //function中第一个参数表示数组索引,第二个参数表示数组元素值
 
  console.log(i+"===="+n);
 
})

2.JQ的函数调用

$.each(arr,function(index,data))

1
2
3
4
5
$.each([上海市,深圳市,广州市,北京市],function(i,n){ //each函数参数,each(object,[callback]):第一个表示需要被遍历的数组或对象,第二个表示每个成员/元素执行的回调函数
 
  console.log(i+"===="+n);
 
})

day05-BootStrap

trigger( event, [data] )

在每一个匹配的元素上触发某类事件。
这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个’submit’,则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。

triggerHandler( event, [data] )

这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作.
如果你对一个focus事件执行了 .triggerHandler() ,浏览器默认动作将不会被触发,只会触发你绑定的动作:
trigger()会操作jQuery对象匹配的所有元素,而triggerHandler()只会影响匹配到的第一个元素。

is()

JSON格式

  JSON对象 

1
2
3
4
{
    key1:value1,
    key2:value2
}

  JSON数组 

1
[{key:value},{key:value},{key:value}]

 

ajax请求:

$.get(url,function(data){}) 

bootstrap概述

1.轻量级开发响应式页面的前端框架

2.全局CSS、组件、JS插件

3.栅格系统:将页面的宽度分为12个等分

      col-lg-数字:在超宽屏幕上使用

    col-md-数字:在中等屏幕上,PC电脑

    col-sm-数字:在平板电脑上

    col-xs-数字:在手机上

注意:jquery文件的引入,一定要在bootstrap核心javascript文件之前引入。

什么是bootstrap?

  是最受欢迎的HTML、CSS和JS框架,用于开发响应式布局、移动设备优先的WEB项目。

什么是响应式页面?

  适应不同的分辨率显示不同的样式,提高用户的体验

全局CSS样式:css样式

栅格系统

    将屏幕划分成12个格子/12列

    class='row' 当前是行

    行里面放的是列 col-屏幕分辨率-数字(每一种分辨率后的数字总和必须是等于12,如果超过12,另起一行)

    col-lg-数字:在超宽屏幕上使用

    col-md-数字:在中等屏幕上,PC电脑

    col-sm-数字:在平板电脑上

    col-xs-数字:在手机上

组件:导航条、进度条、字体

javascript插件:轮播图

总结:

HTML(超文本标记语言):设计网页,决定了页面的框架

CSS(层叠样式表):用来美化我们的页面,将美化和HTML代码进行分离

JS:脚本语言,由浏览器解释执行,弱类型语言(var i),提供用户的交互的

jquery:javascript函数库,进一步的封装

  选择器:

    ID选择器

    类选择器

    元素选择器

    通配符选择器

    选择器分组

  层级选择器

    后代选择器

    子元素选择器

    相邻兄弟选择器

    兄弟选择器:找出所有的弟弟

  属性选择器:

    选择器[属性名称="属性值"]

  表单选择器:

    :input

    :text

    :password

右键》copy〉selector:可拷贝选择器路径

子元素过滤器:nth-child(数字)

  基本过滤器:

    :first

    :last

    :even

    :odd

    :gt

    :lt

    :eq

  表单对象属性:

    :selected

    :checked  

posted on   洋洋洋wy  阅读(15)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示