那年学过的Web前端笔记
XML
XML中的注意事项:
HTML
CSS
JavaScript
控制台对象console
- 普通日志输出:
console.log(文本); - 错误信息输出:
console.error(文本); - 提示信息输出:
console.info(文本); - 警告信息输出:
console.warn(文本); - debug信息输出:
console.debug(文本);
Math类
- 随机数:
Math.random(); 产生一个0-1的随机浮点型数字 - 四舍五入:
Math.round(x); 将浮点数字 , 四舍五入为整型数字
Number
转换数字:
var 整型数字 = parseInt(字符串);var 整型|浮点型 = new Number(字符串);
截取数字:
number.toFixed(小数点后保留位数);
正则表达式
步骤:
1. 创建正则表达式对象
var 对象名 = /正则表达式字符串/g;
2. 通过正则表达式对象的test方法, 验证数据是否匹配正则
var flag = 正则对象.test(要验证的数据); 返回值为boolean类型
案例: function testx(val){var reg = /^(13[0-9]|14[4789]|15[012356789]|17[0-9]|18[0-9])[0-9]{8}$/g;var flag = reg.test(val);if(flag){alert("用户名可用");}else{alert("很遗憾, 用户名不可用");}}
URI编码
- 将文字进行uri编码:
var uriCode = encodeURI(“文字”); - 将uri编码文字 进行解码
var text = decodeURI(uriCode);
HTML DOM对象
通过文档对象(document) , 获取元素对象
四种方式:
通过元素的id属性, 获取一个元素对象
var element = document.getElementById(“id值”);通过元素的标签名称, 后获取一个元素对象数组
var elements = document.getElementsByTagName(“标签名”);通过元素的name属性值, 获取一个元素对象数组
var elements = document.getElementsByName(“name属性值”);通过元素的class属性值 , 获取一个元素对象数组
var elements = document.getElementsByClassName(“class属性值”);
元素属性值的操作
属性值获取:
var value = 元素对象.属性名;
属性值设置:
元素对象.属性名 = 值;
特殊的属性操作:
class属性值的设置与获取:
获取属性值: var classx = 元素对象.className;设置属性值:元素对象.className = class值;
设置与获取元素的文本内容
获取文本内容: var text = 元素对象.innerHTML; 设置文本内容: 元素对象.innerHTML = 文本内容;
节点对象
查找元素节点
- 一次得到一个节点:
- 元素对象.parentNode: 获取父元素
- 元素对象.firstChild: 获取第一个子元素
- 元素对象.lastChild : 获取最后一个子元素
- 一次得到一组节点:
- 元素对象.childNodes: 获取所有子元素 (返回值为元素数组)
节点分类
元素节点分为:
文本节点 : 通过层次获取节点时, 会得到文本节点 , 比如: 通过父元素 获取所有子元素 , 就是包含文本节点 + 元素节点的
属性节点 : 通过元素调用attributes属性, 得到所有属性对象 !
所有的节点对象, 都拥有如下三个特殊的属性:
- nodeName : 用于获取节点名称
- nodeValue : 用于获取节点值 (元素节点为null , 文本节点为文本内容, 属性节点返回属性值)
- nodeType : 获取元素类型: 1表示元素节点 2表示属性节点 3表示文本节点
节点的操作
- 创建节点
var element = document.createElement(“节点名称”); - 插入节点
通过父元素, 追加子元素
父元素对象.appendChild(子元素对象);
通过父元素 ,并提供一个参考子元素, 插入参考子元素之前 !
父元素对象.insertBefore(子元素对象,参考元素);
如果不存在参考元素, 则效果为追加 ! - 删除节点
父元素.removeChild(子节点对象);
window对象
打开新窗口
格式:
var newWindow = window.open(url,[name],[config],[specs]);url : 新打开的窗口 加载的资源地址name : 新窗口的唯一标识, 不是展示出的窗口标题 ,类似窗口id 用来操作此窗口 , 相同的窗口名称 无法同时展示两个config : 窗口的配置参数使用字符串来描述窗口配置, 字符串由多个键值对组成, 键与值之间使用等号连接, 多个键值之间使用逗号分割 .- 常用配置参数: - height : 窗口高度 px- width : 窗口宽度 px- left : 新的窗口距离 屏幕左上角的横向偏移位置- top : 新的窗口距离 屏幕左上角的垂直偏移位置- 不常用配置参数:(多数浏览器不支持) 都是boolean类型参数 , 可以指定的值为:yes|no|1|0 - location : 新窗口是否显示地址栏- menubar : 是否显示菜单栏- resizable : 窗口是否可调整大小- scrollbars : 是否显示滚动条- titlebar : 是否显示标题栏- tollbar : 是否显示工具栏specs : 是否允许加载历史文件 true表示允许
关闭窗口的函数:
window.close();
定时器
一次性定时器
格式:
setTimeout(“执行的语句”,延迟毫秒);
周期性定时器
开启周期性定时器
格式:
var x = setInterval(“执行的语句”,周期时长毫秒);
返回值:周期性定时器对象关闭周期性定时器
格式:
clearInterval(周期性定时器对象);
屏幕信息的获取(window子对象 screen)
screen : 用于获取屏幕信息的对象
- 获取屏幕宽度
var width = screen.width; - 获取屏幕高度
var height = screen.height; - 获取屏幕可用宽度
var width = screen.availWidth; - 获取屏幕可用高度
var height = screen.availHeight;
window子对象 history
history:函数: back():浏览器后退一页forward():浏览器前进一页go(数字) , 正数表示前进指定页数, 负数表示后退指定页数
indow子对象location
location:属性: href:表示当前浏览器 加载的网址地址 !函数: assign(url) :跳转页面到指定urlreplace(url):替换当前页面到指定url (替换不等于跳转, 被替换掉的页面, 无法通过后退打开) reload(): 刷新网页这个知识点, 重要的地方是, 我们可以通过JS的运算, 得到一些数据, 然后通过网址 提交给服务器 !
事件
事件:指 HTML 对象在状态改变、操作鼠标或键盘时触发的动作
鼠标事件
键盘事件
状态改变事件
event 对象
事件触发后将会产生一个 event 对象
-在任何的事件触发的代码中, 都可以通过event对象 来操作
常用属性:
- clientX : 鼠标事件触发时的坐标点X
- clientY : 鼠标事件触发时的坐标点Y
- keyCode : 键盘事件 , 触发时的键盘按键的code值
JQuery
Jquery的onload实现
$(function(){//当网页加载完毕时执行
});
选择器
基本选择器
- id选择器
格式:
var $obj = $("#id值"); - 类选择器
格式:
var $obj = $(".class值"); - 标签名称选择器
格式:
var $obj = $(“标签名称”);
层级选择器
- 子选择器 *
格式:
var obj=obj =obj=(“父元素选择器>子选择器”); - 后代选择器 *
格式:
var obj=obj =obj=(“父元素选择器 后代选择器”); - 后一个兄弟选择器
格式:
var obj=obj =obj=(“选择器+兄弟选择器”); - 后所有兄弟选择器
格式:
var obj=obj =obj=(“选择器~兄弟选择器”);
筛选选择器
- : first:匹配第一个元素
-
last:匹配最后一个元素
-
not:过滤not条件:$(“div:not(.class)”);
-
even:匹配下标偶数
-
odd:匹配下标奇数
-
eq:选择指定索引值 ?(“div:eq(1)”)
-
gt:匹配索引值大于x的:$(“div:gt(5)”)
-
lt:匹配索引值小于x的:$(“div:lt(5)”)
示例:
$(function(){
$(“p:first”).css({“color”:"#090"});
$(“p:not(#a)”).css({“font-size”:“10px”});
$(“p:gt(2)”).css({“font-size”:“16px”});});
jQuery常用函数
获取和修改元素文本内容
在原生JS的操作中, 我们使用元素对象的inenrHTML属性 来修改元素的文本内容.
在Jquery中, 提供了两个方法, 可以用来获取/设置文本内容
1. $obj.html(文本) | var 文本 = $obj.html();获取元素文档内容2. var 获取文本 = $obj.text()获取元素文本内容
html函数与text函数区别:
使用html函数获取文本时, 会获取到子标签
使用text函数获取文本时, 只能获取到不包含标签的文本内容
获取和修改元素的属性值
在JS代码中, 我们可以通过 dom对象.属性名 来操作一个元素的属性 !
在Jquery中可以通过attr函数 操作所有的属性:
获取属性值:
var value = $obj.attr("属性名");
设置属性值:
$obj.attr("属性名","属性值");
删除属性值:
$obj.removeAttr("属性名");
修改元素样式
css函数 两个方法的重载:
- 用于一次指定多个样式
格式: $obj.css(json格式的样式对象); - 用于一次指定一个样式
格式: $obj.css(“样式key”,“样式值”);
案例:
$(“img”).css(“box-shadow”,“3px 3px 3px 3px #aaa”);
calss属性值的设置与获取
添加class属性值
$obj.addClass(“值”);
删除class属性值
$obj.removeClass(“值”);
替换class属性值
$obj.toggleClass(“值”);
显示和隐藏函数
- 基本效果
显示: $obj.show();
隐藏: $obj.hide();
切换: $obj.toggle(); - 左上折叠效果
显示: $obj.show(time毫秒);
隐藏: $obj.hide(time毫秒);
切换: $obj.toggle(time毫秒); - 上下折叠效果
显示: $obj.slideDown(time毫秒);
隐藏: $obj.slideUp(time毫秒);
切换: $obj.slideToggle(time毫秒);
如果使用到图片上, 元素必须存在确定的宽度 ,才可以实现上下折叠 - 淡入淡出效果
显示: $obj.fadeIn(time毫秒);
隐藏: $obj.fadeOut(time毫秒);
自定义动画
$obj.animate(参数1,参数2,[参数3]);参数1. JSON对象, 描述动画执行结果的样式参数2. 从当前样式, 过渡到参数1样式的 毫秒时间参数3. 可选参数, function类型 , 动画执行完毕的监听函数 (当动画执行完毕, 自动执行此函数)
JQuery事件
绑定和解绑事件
- 绑定事件:
$obj.bind(“事件类型”,处理函数); - 解绑事件:
$obj.unbind(“事件类型”); - 模拟事件触发:
$obj.trigger(“事件类型”);
事件函数
$obj.click(fn)// 当点击$obj.dblclick(fn)//当双击$obj.blur(fn)//当失去焦点$obj.focus(fn)//当获取焦点$obj.change(fn)//当状态改变 ,常用于下拉选框$obj.keydown(fn)//当键盘按下$obj.keyup(fn)//当键盘弹起$obj.mouseover(fn)//当鼠标指针位于元素上$obj.mouseout(fn)//当鼠标指针从元素上滑出$obj.submit(fn)//表单提交事件, 等同于form元素的onsubmit事件, return false 可以阻止表单提交 *****$obj.load(fn)//当元素加载完毕$obj.unload(fn)//当元素销毁
组合事件
hover(over,out);参数1. function类型 , 鼠标移入时触发的事件代码参数2. function类型 , 鼠标移出时触发的事件代码
动态绑定事件
格式:
注意: 添加动态绑定事件的未来元素, 必须有一个已经存在的父元素 !$父元素对象.on("事件类型","寻找子元素的选择器",func处理函数);
文档函数
- 创建元素
var $obj = $(“html元素”);
例如:
创建一个按钮:
var $obj = $(’’); - 将Jquery元素对象, 添加到网页中
- 通过父元素 向父元素内部追加
格式: 父元素.append(父元素.append(父元素.append(新元素); - 通过父元素 向父元素内部前置
格式: 父元素.prepend(父元素.prepend(父元素.prepend(新元素); - 通过一个元素, 向这个元素的后面添加
格式: obj.after(obj.after(obj.after(新元素); - 通过一个元素, 想这个元素的前面添加
格式: obj.before(obj.before(obj.before(新元素);
- 通过父元素 向父元素内部追加
- 从网页中 删除一个节点
格式:
$要删除的元素.remove(); - 清空一个节点
格式:
$要清空的元素.empty(); - 克隆一个节点
- var $新对象 = $原对象.clone(); //克隆元素, 不克隆元素事件;
- var $新对象 = $原对象.clone(true); //克隆元素, 克隆元素事件;
文档查找
children(选择器) 查找子元素
next() 查找后面的兄弟元素
prev() 查找前面的兄弟元素
siblings() 查找兄弟元素
find(选择器) 查找子元素及后代元素
parent() 查找父元素
parents(selector) 查找祖先元素
工具函数
**$.each ** 遍历
可应用于 遍历对象 , 遍历数组
- 遍历对象
遍历Jquery对象, 得到其中的每一个dom对象
格式:
$obj.each(function(){
//在这里this 表示每次遍历的dom对象
}); - 遍历数组
遍历一个JS数组, 得到每一个下标的数据
$.each(数组,function(i,value){
//i表示遍历时的数据下标
//value表示遍历时的数据
});
去除数组中重复元素 (此函数直接操作原数组, 无返回值)
格式: $.unique(数组);
合并数组: 将两个数组合并 ( 将第二个数组中的所有内容,
追加到第一个数组中)
格式: $.merge(数组1,数组2);
去除字符串中的前后空格: (不会对原字符串产生影响, 返回值为去除空格的文本)
格式: $.trim(字符串);
HTML5
获取用户地理位置
步骤:判断浏览器是否支持获取,支持则获取
也可以使用脚本工具进行获取
WEB存储
浏览器存储数据的两个对象:
localStorage
没有时间限制的数据存储方式 !在用户未清除浏览器数据时 , 数据一直存在 !sessionStorage
当览器关闭后, 会话结束, 数据清除!注意: 这两个对象 ,在操作上, 只是名称不同, api完全一致 !
在使用web存储之前, 应验证浏览器是否支持web存储
(支持的浏览器: IE8+ 和 其他浏览器)
if(typeof(Storage) !== "undefined"){//支持web存储
}else{//不支持web存储
}
常用函数:
保存数据: storage.setItem(key,value);
获取数据: var value = storage.getItem(key);
删除单个数据:storage.removeItem(key);
删除所有数据:storage.clear();
获取指定索引下的key: var key = storage.key(index);
获取键值对的数量: var length = storage.length;
那年学过的Web前端笔记相关推荐
- 那年学过的web后端笔记
Http协议 ** B/S** Servlet Servlet编写 案例: public class Servlet1 extends HttpServlet {protected void serv ...
- Web前端 笔记 (21-45)
Web前端 笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例 未加语义化标签 添加语义化标签 23.表格属性 1.常见表格属 ...
- Web前端笔记(三)
Web前端笔记记录(三) position定位 relative相对定位 absolute绝对定位 脱离文档流 使内联支持宽高 使块元素默认宽根据内容决定(让块具备内联的特性) 如果有定位祖先元素相对 ...
- 计算机前端学哪些好学,Web前端能干什么工作,好学吗
原标题:Web前端能干什么工作,好学吗 随着经济发发展,互联网精英的缺乏越来越严重了,尤其是编程工程师,市场缺乏率极高,所有对于准备即将学习编程朋友,是一个非常的好时机 web前端工程培训是什么呢?所 ...
- 前端开发的 学php吗,web前端开发难学吗
学习Web前端开发难吗? Web前端初学者不了解Web前端的情况下,徘徊在该不该学习的思想斗争中,其实你大可不必忧虑,或许你会问,Web前端开发难学吗?这里我可以回答你一句,没有你想象中的那么难. 记 ...
- Web前端笔记(1)
1. web前端三大核心技术: HTML: 结构 CSS: 样式 JavaScript: 行为 HTML基本结构与属性: html超文本标记语言,标准通用标记下的一个应用,是网页制作的必备的编程语言. ...
- Web前端笔记(标签)
目录 Web前端知识点 HTML 标签的语法 html标签 主体框架 常用标签 标题标签 段落标签 字体倾斜.加粗.下划线 强调内容 预设标签 字体标签 分割线 实体字符 图片标签 视频标签 音频标签 ...
- WEB前端笔记第一天
什么是WEB前端? 简单来说就是网页,只是这个网页它是由多种技术参与制作的,用来向用户展示的页面. HTML(hyperText mark-up language):它决定了网页的结构. CSS:网页 ...
- web前端笔记1-hml,css部分
这里写目录标题 一.基础内容 1.网页 1.1什么是网页 1.2什么是HTML 1.3网页的形成 2.常用浏览器 2.1常用的浏览器 2.2浏览器内核 3.web标准 3.1为什么需要web标准 3. ...
最新文章
- Git教程:最详细、最傻瓜、最浅显、真正手把手教!
- python3中的int类型占64位_在windows 10 64位计算机中,默认情况下,numpy数组数据类型将以int32形式出现...
- HTML5 2D平台游戏开发#7Camera
- quartz 数据库配置
- python离散余弦变换_在python3下使用OpenCV做离散余弦变换DCT及其反变换IDCT
- 后端开发者开发前端必会的工具(一):样式调试篇
- React Native使用指南-植入原生应用
- 老男孩python爬虫视频教程_python爬虫入门
- GB28181流媒体服务LiveGBS启动报错 HTTP Port[10000] In Use
- ORA-12505, TNS:listener does not currently know of SID given in connect descriptor异常
- AcWing 95. 费解的开关(指数型枚举)
- javascript 的数值转换
- Ubuntu14.04系统中文输入法安装详解
- gin框架的学习--golang
- 用图片替代cursor光标样式
- python 爬虫 一键爬取携程旅游团数据
- 在网页上面录制声音(chrome、firefox浏览器可用)
- 郑州高新区计算机,郑州高新区电脑维修
- 迅雷9边下边播绑定第三方播放器
- 【解决】ubuntu桌面无法进入问题
热门文章
- 35岁真的是职场分水岭吗?
- OpenZeppelin集成Truffle编写健壮安全的合约
- ad焊盘对参考点复制_点对点复制
- azure未连接_处理影响Azure成本的未使用和不必要的资源
- sql raiserror_SQL Server PRINT和SQL Server RAISERROR语句
- localdb 安装_如何安装Microsoft SQL Server Express LocalDB
- linux磁盘链路故障
- c#中params关键字应用
- EasyUi各种消息框
- c++ 文件读写(转)