web开发
文章平均质量分 94
web相关开发内容:html,css,react,js,jquery
huhanghao
Dream it Wish it Do it
展开
-
JavaWeb ——servlet学习8之jsp九大内置对象
JavaWeb ——servlet学习8之jsp九大内置对象JSP有九个内置对象(又叫隐含对象),不需要预先声明就可以在脚本代码和表达式中随意使用九大内置对象1、pageContext 对象pageContext 对象的作用是取得任何范围的参数,通过它可以获取 JSP页面的out、request、reponse、session、application 等对象。pageContext...原创 2019-10-26 11:11:36 · 260 阅读 · 0 评论 -
javascript客户端学习1——Window和Document
javascript客户端学习1——Window和DocumentWindowWindow是客户端JavaScript下特有的对象它是Web浏览器窗口或者窗口的一个框架,Window对象是所有客户端JavaScript特性和API的主要接入点,它表示Web浏览器的一个窗口或窗体,使用window标识符来引用它,Window对象是全局对象。Window -- 代表浏览器中一个打开的窗口:...原创 2019-08-09 15:31:38 · 227 阅读 · 0 评论 -
JavaScript权威指南——窗口和框架
JavaScript权威指南——窗口和框架对于浏览器来说,Window是界面的承载者,是表示浏览器的实例,也是客户端JS的全局对象。在浏览器的window对象中,比较重要的几个对象和方法:Navigarot对象它包含着web浏览器的整体信息,例如:浏览器名字、版本和运行的硬件平台等使用var navigatorObj = window.navigator;//...原创 2019-07-18 10:34:19 · 274 阅读 · 0 评论 -
Css伪元素:before和:after的使用
Css伪元素:before和:after的使用使用方法:在真正页面元素内部之前和之后添加新内容: <p>wonyun!</p> <style> p:before{content: "hello "} p:after{content: "you are handsome!"} </style...原创 2019-07-08 14:32:02 · 292 阅读 · 0 评论 -
js内置对象常用方法
js内置对象常用方法JS内置对象:● String对象:处理所有的字符串操作 ● Math对象:处理所有的数学运算 ● Date对象:处理日期和时间的存储、转化和表达 ● Array对象:提供一个数组的模型、存储大量有序的数据 ● Event对象:提供JavaScript事件的各种处理信息String 对象常用方法: length; (属性)(返回字符串的长度) t...原创 2019-07-08 14:22:33 · 897 阅读 · 1 评论 -
常见DOM树操作
常见DOM树操作基础概念Node:JS中所有节点都继承自Node类型,都共享着相同的基本属性和方法。Node有一个属性nodeType表示Node的类型。常用的就是element,text,attribute,comment,document,document_fragment这几种类型。Element类型:供了对元素标签名,子节点和特性的访问(div、a、span) nod...原创 2019-07-08 14:21:32 · 447 阅读 · 0 评论 -
常用BOM操作
常用BOM操作window常用对象所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。windowwindow尺寸有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。对于Internet Explorer、Chrome、Firefox、Opera 以及 Sa...原创 2019-07-08 14:19:49 · 1407 阅读 · 0 评论 -
async/await 和 promise 的用法
async/await 和 promise 的用法参考:https://www.jianshu.com/p/ffa5cbe9ab29async/await ”vs“ promise写法:Promise主要用then函数的链式调用,一直点点点,是一种从左向右的横向写法。 async/await从上到下,顺序执行,就像写同步代码一样。这更符合人编写代码的习惯参数数量Promis...原创 2019-07-02 14:01:03 · 4135 阅读 · 1 评论 -
JavaScript 事件和Vue的事件处理
JavaScript 事件和Vue的事件处理JavaScript 事件关键字事件传递模型:捕获型与冒泡模型。事件顺序有两种类型:事件捕捉和事件冒泡。DOM事件流:事件会在元素结点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件冒泡型事件(Event Bubbling):事件由叶子节点沿祖先结点一直向上传递直到根节点(最先收到的是叶子节点)捕获型事件(Event ...原创 2019-05-16 16:19:47 · 530 阅读 · 1 评论 -
js中import和require的区别
js中import和require的区别ES6标准发布后,module成为标准,标准使用是以export指令导出接口,以import引入模块。但是在我们一贯的node模块中,我们依然采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。require它相当于module.exports的传送门,module.exports后面的内容是什么,...原创 2019-05-16 16:13:53 · 16797 阅读 · 0 评论 -
jquery学习8_事件机制
jquery学习8_事件机制点击事件的注册// 普通click处理$("#btn").click(function () { $("<p>我是新增加的p元素</p>").appendTo("div");})// bind绑定事件$("p").bind("click,mouseenter",function () { alert("hah...原创 2019-03-24 21:27:49 · 102 阅读 · 0 评论 -
jquery学习7_特殊属性操作
jquery学习7_特殊属性操作value属性// 设置input和textarea//设置值$("#name").val(“张三”);//获取值$("#name").val();text方法// 相当于innerHTML text方法相当于innerText// 设置内容$(“div”).html(“<span>这是一段内容</span>...原创 2019-02-19 11:07:54 · 127 阅读 · 0 评论 -
jquery学习6_节点操作
jquery学习6_节点操作添加节点// 添加节点$("#btn1").click(function () { $("#src-city>option").appendTo("#tar-city");});$("#btn2").click(function () { $("#src-city").append($("#tar-city>option"...原创 2019-02-19 11:07:06 · 118 阅读 · 0 评论 -
jquery学习5_动画
jquery学习5_动画常用动画显示、隐藏show、hide// 参数:动画持续时间、动画完成监听$("div").show(1000, function () { console.log("哈哈,动画执行完成啦");})滑入画出$("div").slideDown(1000, function () { console.log("额呵呵");});$(...原创 2019-09-24 22:04:32 · 105 阅读 · 0 评论 -
jquery学习4_CSS、属性操作
jquery学习4_CSS、属性操作为某个节点添加类,删除类,判断类是否存在addClass,removeClass,hasClass$("li").removeClass("bigger")$("li").addClass("basic")if( $("li").hasClass("basic")){console.log("123")}属性原创 2019-02-19 11:04:26 · 110 阅读 · 0 评论 -
jquery学习3_jquery常用选择器
jquery学习3_jquery常用选择器jQuery选择器有很多,基本兼容了CSS1到CSS3所有的选择器,并且jQuery还添加了很多更加复杂的选择器。基础选择器名称 用法 描述 ID选择器 $(“#id”); 获取指定ID的元素 类选择器 $(“.class”); 获取同一类class的元素 标签选择器 $(“div”); ...原创 2019-02-19 11:03:14 · 221 阅读 · 0 评论 -
jquery学习2_jquery知识预览
jquery学习2_jquery知识预览jquery版本:大版本1.x版本:能够兼容IE678浏览器 2.x版本:不兼容IE678浏览器 1.x和2.x版本jquery都不再更新版本了,现在只更新3.x版本。 3.x版本:不兼容IE678,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678)压缩版和未压缩版jquery-1.12.4.min.js:压...原创 2019-02-19 11:02:14 · 116 阅读 · 0 评论 -
jquery学习1_jquery与Javascript的区别
jquery学习1_jquery与Javascript的区别jquery 就对javascript的一个扩展,封装,就是让javascript更好用,更简单。 jQ等框架解决易用性和兼容性问题,效率稍低 原生js解决运行效率问题,兼容比较麻烦jquery和js优缺点js缺点: 查找元素的方法太少,麻烦。 遍历伪数组很麻烦,通常要嵌套一大堆的for循环。 有兼容...原创 2019-02-11 11:38:06 · 212 阅读 · 0 评论 -
JavaScript学习5_递归
JavaScript学习5_递归递归深拷贝递归思想就不赘述了,主要是深拷贝var obj1 ={ age:10, sex:'男', car:['11','22','33'], dog:{ name:'44', age: 5, color:'66' }};var obj2={};funct...原创 2019-02-11 11:30:37 · 146 阅读 · 0 评论 -
JavaScript学习4_Bind、闭包和沙箱
JavaScript学习4_Bind、闭包和沙箱BindBind也是将方法绑定到对象上,但是相对于call和apply来说,apply和call是调用的时候改变this,而bind是复制一份的时候改变指向。var a ={ name : "Cherry", fn : function (a,b) { console.log( a + b) }...原创 2019-02-11 11:29:21 · 214 阅读 · 0 评论 -
JavaScript学习3_继承
JavaScript学习3_继承对于javascript来说根本没有继承、多态属性。我们只能通过原型类的prop的指向转换来模拟出类似集成的效果。apply vs callapply和call都是讲对应的方法绑定到对应的对象上。只是他们传入的参数有区别。# applyvar obj = { name : 'linxin' } function func(firstName, ...原创 2019-02-11 11:28:31 · 120 阅读 · 0 评论 -
JavaScript学习2_深入理解原型对象
JavaScript学习2_深入理解原型对象构造函数、原型对象和实例对象// 构造函数function Person (name, age) { this.name = name this.age = age this.sayName = function () { console.log(this.name) }}JavaScript 不包含传统的类继承...原创 2019-02-11 11:26:27 · 151 阅读 · 0 评论 -
JavaScript学习_1构造函数和原型
JavaScript学习_1构造函数和原型通过构造函数创建对象function Person (name, age) { this.name = name this.age = age this.sayName = function () { console.log(this.name) }}var p1 = new Person('Jack', 18)...原创 2019-01-09 23:26:48 · 141 阅读 · 0 评论 -
Css学习6_Flex布局学习
Css学习6_Flex布局学习容器的属性flex-direction row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 column:主轴为垂直方向,起点在上沿。 column-reverse:主轴为垂直方向,起点在下沿。 flex-wrap nowrap :不换行。 wrap:换行...原创 2019-04-23 17:27:59 · 106 阅读 · 0 评论 -
Css学习_5过度及动画
Css学习_5过度及动画过度单个属性的过度// 单个属性效果的过度动画<div>测试</title><style> div{ width:100px; height:100px; background:red; transition:width 2s;}div:hover{ width:300px;}</style...原创 2019-04-23 17:16:30 · 150 阅读 · 0 评论 -
Css学习_4其他属性
Css学习_4其他属性渐变色 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 径向渐变(Radial Gradients)- 由它们的中心定义 // 从上到下background: linear-gradient(red, blue); /* 标准的语法 */// 从左到右background: linear-gradient(to...原创 2019-04-09 14:39:11 · 119 阅读 · 0 评论 -
Css学习_3基础盒子模型和定位
CSS学习3_基础盒子模型和定位盒子模型盒子模型边框(border)border : border-width || border-style || border-color # style常用属性:none:没有边框即忽略所有边框的宽度(默认值)solid:边框为单实线(最为常用的)dashed:边框为虚线 dotted:边框为点线double:边框为双实线#圆...原创 2019-01-24 23:29:09 · 193 阅读 · 0 评论 -
CSS学习2_基础样式属性
CSS学习2_基础样式属性字体样式font-size字号大小em 相当于当前对象内文本的字体尺寸 px 像素 font-family:字体p{ font-family:"微软雅黑";}font-weight:字体粗细font-weight属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100~900(100的...原创 2019-01-23 23:21:56 · 167 阅读 · 0 评论 -
CSS学习1_基础标签和选择器
CSS学习1_基础标签和选择器css基本使用外部定义<head><style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何地方。标签内部定...原创 2019-01-23 22:59:12 · 1049 阅读 · 0 评论 -
Html学习2_常用标签
Html学习2_常用标签基础标签h标签(标题标签)<hn> 标题文本 </hn>注意: h1 标签因为重要,尽量少用,不要动不动就向你扔了一个h1。 一般h1 都是给logo使用,或者页面中最重要标题信息。p标签(段落标签)<p> 文本内容 </p>注意:文本在一个段落中会根据浏览器窗口的大小自动换行。...原创 2019-01-23 22:50:11 · 349 阅读 · 0 评论 -
Html学习1_基础知识
Html学习1_基础知识浏览器和内核浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。 渲染引擎 它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。 JS 引...原创 2019-01-23 22:49:22 · 182 阅读 · 0 评论 -
React再学习4_ref使用和约束
React再学习4Ref自定义属性ref相当于当前dom节点的引用,给他命名下,然后再需要的时候世界从refs中调用,然后对其进行操作。我们也可以写成这样直接给当前的dom命名,然后我们都不用经过refs就能直接用了 约束性和非约束性的组件约束性:由react接管了valuevalue值受到状态的限制非约束性:有原生的DOM接管value值是默认的d...原创 2018-09-05 12:00:59 · 267 阅读 · 0 评论 -
React再学习3_事件
React再学习3事件的绑定:方法1:这是官方推荐的方法,我们在构造函数中定义事件名,然后将其绑定到我们构造的方法。然后再调用的时候就调用构造函数中定义的事件名方法2:绕开了方法1比较繁琐的绑定方式,直接在点击事件处进行绑定和使用方法3:或者用更简便的箭头函数 tab点击事件例子样式: 前面的是比较基础的样式和属性,属性这里,...原创 2018-09-05 11:58:53 · 120 阅读 · 0 评论 -
React 再学习2_组件的创建和使用
React 再学习2基础的组件和组件的传值我们新建的组件HelloMessage。使用方法和一般的标签一样。在传值的时候,我们直接往标签中加入值就好了,然后这个值会存在标签的props中,用的时候拿就好了。传递对象直接传入data不行的,只能这么传。 自定义组件和传参自定义组件就像我们创建了一个函数。这里在标签中自定义了组件Welcom。然后传递参数...原创 2018-09-05 11:57:58 · 195 阅读 · 0 评论 -
React 再学习1_脚手架搭建
React 再学习1React简单项目安装:1、 初始化npm init2、 安装依赖包npm install react react-dom react-standalone –s代码中导入最基础的依赖 React脚手架搭建1、 安装clinpm install –g create-react-app2、 创建appcreate-react...原创 2018-09-05 11:55:21 · 136 阅读 · 0 评论