javaScript-BOM操作
BOM(浏览器对象模型 Browser object model )
BOM描述与浏览器进行交互的方法和接口
BOM包括:
document—DOM
location对象 —–用于获取或者设置窗体的URL
history对象 —–浏览器历史记录 访问过的URL
navigator对象 —–有关浏览器的信息
Screen对象 ——对象包含有关用户屏幕的信息
location对象:location对象的属性:
location.href —————- 获取或者设置整个url
location.search ————-返回参数
location.host —————- 返回主机名(域名) www.baidu.com
location.port —————–返回端口号
location.pathname ———返回路径
location.hash ————-返回片段 #后面的内容 常见于锚点链接
location对象方法:
location.assign() ————–跟href一样,可以跳转页面 (也称为重定向页面)
location. ...
JS的运行机制
相遇皆是缘分
JS的运行机制:
先执行执行栈里面的同步任务
异步任务(回调函数)放入任务队列中
一旦执行栈中的全部同步任务执行完成后,系统就会按次序读取任务队列中的异步任务 于是异步任务结束等待状态,进入执行栈开始执行
javaScript-DOM操作
DOM(文档对象模式 document object Model)
文档:就是整个HTML网页文档
对象:网页中的每一个标签
模型:表示对象之间的关系 方便我们获取操作的对象
操作DOM的步骤:1.获取操作元素://通过id获取标签元素 -- 获取id为box1的标签元素
var box = document.getElementById('box1');
//通过class获取标签元素 -- 获取class为box2的全部标签元素 注意 这里获取的是多个 是数组形式 通过下标来访问 比如box2[0]
var box2 = document.getElementsByClassName('.box2');
//通过标签名获取标签元素 --获取所有标签为div的元素 注意 这里获取的是多个 是数组形式 通过下标来访问 比如div[0]
var divs = document.getElementsTagName('div');
//通过id 或者class 来获取元素的另一种方法
//通过id 获取标签元素 --获取id为box3的标签元素
var box ...
bootstrarp框架的使用
欢迎来到小钟的博客!
什么是Bootstrarp框架?
bootstrarp是一个写网页的框架 就是说你只需要写HTML标签然后调用它提供的类你就可以很快速的做一个高大上的网页,你不用担心兼容问题,提供了很多样式供你选择!
用它提供的样式和组件快速写网站
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
里面创建了很多样式或者组件供你使用
使用Bootstrarp框架的步骤:
到bootstrarp官网下载bootstrarp相关文件:
https://v3.bootcss.com/getting-started/#download
创建文件夹结构:
打开HTML文件 引入下载好的bootstrarp相关文件:
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
书写你的网页内容
Bootstrarp框架的栅格系统:
超小屏幕(手机)<768px
小屏设备(平板)>=768px
中等屏幕 ...
Ajax笔记
为什么要学习Ajax呢?因为传统网站中存在以下的问题:
网速慢的情况下,页面加载时间长,用户只能等待
表单提交后,如果一项内容不合格,需要重新填写所有表单内容
页面跳转,重新加载页面,造成资源的浪费,增加用户等待时间
Ajax:阿贾克斯它是浏览器提供的一套方法,可以实现页面无刷新就能更新数据,提高用户浏览网站应用的体验。
Ajax的应用场景:
页面上拉加载更多数据
列表数据无刷新分页
表单项离开焦点数据验证
搜索框提示文字下拉列表
Ajax的运行环境:
Ajax技术需要运行在网站环境中才能生效 就是要搭建在服务区上
Ajax运行原理:Ajax相当于浏览器发送请求与接收响应的代理人,以实现在不影响用户浏览网页的情况下局部刷新界面,从而提高用户体验
Ajax的实现步骤:
创建对象
var xhr = new XMLHttpRequest();
用open(‘请求方式’,’请求地址’,同步(true)还是异步);
xhr.open(‘get’,’a.php’,true);
用send发送请求 或者参数(二选一)
xhr.send(); (没有带参数)
xhr. ...
GET提交与POST提交详解
GET提交与POST提交详解:GET提交:
以键值对的方式提交 key:value 通过键名获取键值
安全性不高 因为请求数据加在地址(url)后面
传输数据量小
以GET提交方式有哪些:
网页中的超链接
form表单提交方式method为get
例子: <!---------第一种方法-->
<a href="login.php?username=xiaozhong">点击</a>
<!--------第二种方法-->
<form action="login.php" method="get">
用户名:<input type="text" name="username"> <br />
密码:<input type="password" name="pass"> <br />
<input type="submit" value="登录">
</form>
...
CSS之三大特性(层叠性-继承性-优先性)
各位在编写样式时有遇到以下问题吗?
在设置标签的样式时 选择器相同的情况下 样式相同会被覆盖
有些标签在你没有设置任何样式时 会默认有样式呢 比如(文字颜色和大小)
有时候设置标签样式没有效果
问题一解答: 为什么在设置标签的样式时 选择器相同的情况下 样式相同会被覆盖?
--这是因为CSS的层叠性
--层叠性:是指相同的选择器设置相同的样式时,一个样式会覆盖另一个样式 层叠性主要用来解决样式冲突问题
--在样式冲突时,遵循就近原则(后来居上),样式不冲突就不会层叠 因为代码顺序执行
例如: <html lang="en">
<head><style>
.box {
width: 100px; height: 100px;background-color: red;
}
.box { /*相同的选择器*/
background-color: orange; /*相同的样式,会被覆盖上面的背景颜色red*/ ...
HTML中块级元素和行内元素以及行内块元素详解
你是否有以下困惑:
为什么有些标签能够设置宽度和高度,而有些标签不能设置呢?
为什么有些标签能够独占一行,而有些标签一行可以放很多个呢?
可我就想让这个标签可以设置宽度和宽度并且自己不占满一行呢?
问题1解答:为什么有些标签能够设置宽度和高度,而有些标签不能设置呢?
---因为在html中块级(block)元素和行内块(inline-block)元素可以设置宽度和高度
---行内(inline)元素不可以设置宽度和高度
例如:<html>
<style>
.box1{
width:200px;height:200px;background-color: violet;
}
.box1{
width:200px;height:200px;background-color: red;
}
</style>
<div class=box1>box1</div>
<spa ...
JS的同步与异步
相遇皆是缘分
js是单线程语言 同一时间只能做一件事情 所以就意味着 所有的任务需要排队 上一个任务执行结束了 , 下一个任务才会去执行这样就会导致 js执行时间过长的话 , 就会造成页面渲染不连贯 为了解决这个问题 html5就允许JavaScript脚本可以创建多线程 所以就出现了同步和异步同步和异步:同步:上一个任务执行结束后 下一个任务才会执行;异步:在执行这个任务的同时,你还可以执行其他的任务;它们本质的区别是:这条流水线上各个流程的执行顺序不同;同步任务:同步任务都在主线程上执行,形成一个执行异步任务:js的异步是通过回调函数实现的;异步任务有以下三种类型: 1.普通事件,如click,resize
2.资源加载,如load,error等
3.定时器: setinterval , setTimeout等
异步任务相关回调函数添加到任务队列(消息队列)
Markdown快速入门小技巧(hexo博客文章--格式用法)
相遇皆是缘分
Markdown 的快速入门(后缀是 .md)快捷键ctrl+shift+1 大纲显示
ctrl+/ 源代码显示
代码块:```java(html等等) 会自动提示
标题#标题1 (大)
##标题2
###标题3
####标题4 (小)
以此类推 最高标题6
加粗//加粗
**加粗**
//代码高亮显示
==高亮==
//删除线
~~删除线~~
//斜体
*斜体内容*
引用://引用语法
>作者:泽
>>作者:泽
>>>作者:泽
作者:泽
作者:泽
作者:泽
分割线//分割线
---
***
图片插入//在线图片与本地图片

超链接//超链接语法
[超链接名字](https://gihub.com/yerenping)
我的天空
列表//无需列表
- 目录1 -后加空格
- 目录2
- 目录3
//有序列表
1+. +名称
表格右键》插入》表格
用代码过于复杂不推荐使用
姓名
数字
语文
小王
85
21






