首页

012020-3

javascript中window.open()与window.location.href的区别

window.open(‘index.html’) 表示新增一个窗口打开 index.html 这个页面，并不刷新

location.href(‘index.html’) 表示在当前窗口重定向到新页面，打开并刷新 index.html 这个页面

window.location 是 window 对象的属性，用来替换当前页，也就是重新定位当前页

而window.open 是 window 对象的方法，是用来打开一个新窗口的函数

// 打开新页面
    // 注意：有些浏览器的安全设置会将window.open()屏蔽，例如避免弹出广告窗
    window.open('./index.html');

    // 在原窗口打开新页面
    window.location.href＝"./index.html";

    
        window.open()详解
    

window.open ('page.html', 'newwindow', 'height=100, width=400, 
top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')


参数解释： 三个参数
 window.open 弹出新窗口的命令；
 ‘page.html’ 弹出窗口的文件名；
 ‘newPage’ 弹出窗口的名字（不是文件名），非必须，可用空’'代替；
 height=100 窗口高度；
 width=400 窗口宽度；
 top=0 窗口距离屏幕上方的象素值；
 left=0 窗口距离屏幕左侧的象素值；
 toolbar=no 是否显示工具栏，yes为显示；
 menubar=no 是否显示菜单栏，yes为显示；
 scrollbars=no 是否显示滚动栏，yes为显示；
 resizable=no 是否允许改变窗口大小，yes为允许；
 location=no 是否显示地址栏，yes为允许；
 status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

常用的js返回与刷新页面
在此用a标签举例

评论(0) 浏览(2350)

012020-3

网页炫酷背景

前端达人

前言：

做网页项目时想要背景是动态的，推荐两个我觉得比较可以的js动态背景。

随鼠标的移动而移动的线条，具体效果看图：

你焦点在哪，那么那里的线条就会汇聚到你的焦点处。

用法：将js声明到body内即可，我是放置在body底部的

<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

1

可以鼠标点击产生字的，如图：

用法和第一个类似，不过在这个js文件前得先引入jquery:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script type="text/javascript">
            /* 鼠标 */
            var a_idx = 0;
            jQuery(document)
                    .ready(
                            function($) {
                                $("body")
                                        .click(
                                                function(e) {
                                                    var a = new Array("@健身",
                                                            "@学习", "@机车",
                                                            "@摄影", "@自由",
                                                            "@考研", "@自律",
                                                            "@独立", "@厨艺",
                                                            "@橘子", "@交友",
                                                            "@爱媳妇", "@爱家人");
                                                    var $i = $("<span></span>")
                                                            .text(a[a_idx]);
                                                    a_idx = (a_idx + 1)
                                                            % a.length;
                                                    var x = e.pageX, y = e.pageY;
                                                    $i
                                                            .css({
                                                                "z-index" : 999999999999999999999999999999999999999999999999999999999999999999999,
                                                                "top" : y - 20,
                                                                "left" : x,
                                                                "position" : "absolute",
                                                                "font-weight" : "bold",
                                                                "color" : "rgb("
                                                                        + ~~(255 * Math
                                                                                .random())
                                                                        + ","
                                                                        + ~~(255 * Math
                                                                                .random())
                                                                        + ","
                                                                        + ~~(255 * Math
                                                                                .random())
                                                                        + ")"
                                                            });
                                                    $("body").append($i);
                                                    $i.animate({
                                                        "top" : y - 180,
                                                        "opacity" : 0
                                                    }, 1500, function() {
                                                        $i.remove();
                                                    });
                                                });
                            });
        </script>

这里使用的是cdn形式的jquery即不用将jq放入本地文件再引入，直接访问网络上的jq即可，还有就是点击产生的字可以自行修改。

————————————————
版权声明：本文为CSDN博主「helllolsy」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/CodingNO1/article/details/104572143

评论(0) 浏览(2627)

012020-3

html+css实现自定义图片上传按钮

前端达人

可以自定义一个file选择文件的按钮：

思路为：
用定位将自定义的按钮遮住原来的选择文件按钮，
再让点击自定义按钮时触发原来的选择文件按钮的事件即可
（对此，label可实现）

eg:
html:

css样式：

结果图：

点一下，就可以弹出选择文件的文件夹啦！

评论(0) 浏览(2892)

012020-3

【Web前端开发】第二课、HTML基础之HTML概述

前端达人

文章目录

一、HTML的概述

什么是HTML？
HTML的标签、元素、属性
标签、元素
标签、属性

附：补充上一节课网站和网页的笔记：

附：img标签的详细介绍

一、HTML的概述
什么是HTML？

HTML指的是超文本标记语言（Hyper Text Markup Language）

HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML不区分大小写
HTML的标签、元素、属性
标签、元素

由尖括号包围，比如 <title>

通常是成对出现的

<title>百度一下，你就知道</title>

其中，<title> 为开始标签

中间的 “百度一下，你就知道” 为内容

</title>为结束标签，我们可以清楚的观察到，标签结束是有 “/”。

则标签和内容，构成了网页的元素。

标签的嵌套关系，如下列例子，你品

<html><body></body></html>

<html><body></html></body>

标签的嵌套缩进

如图所示<html>为外层标签，称为父元素，<head>和<body>为内层标签，称为子元素。其中<head>与<body>又互称为兄弟元素

<!DOCTYPE html>

声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE> 声明没有结束标签。

<!DOCTYPE> 声明对大小写不敏感。

在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种：<!doctype html>

我们学习的是HTML5，所以我们不过多对HTML4的声明做过多解释。

如果上述对<!doctype html>的概述不清楚的话，

那记住以下两点即可，1. 不分大小写，2.在HTML的网页<html>标签之前加上<!doctype html>就可以啦。

图示为 HTML DOM树，DOM：Document Object Model（文档对象模型）

2. 标签、属性

一个标签可能有多个属性，属性先后与顺序无关

“=” 为赋值符号

属性与属性之间用空格隔开

附：补充上一节课网站和网页的笔记：

HTML网页的编码为 utf-8

网站可以理解成一个文件夹，而网页就是一个个的文件

网页的文件后缀常见的有：htm、html、jsp、php、asp

网站的文件结构通常包含 images文件夹，css文件夹，js文件夹，

一个简单的网页，的文件目录通常由 images、css、js，作用顾名思义，就是存放相对应的文件资源

附：img标签的详细介绍

<img> 标签有两个必需的属性：src 和 alt。

注释：从技术上来说，图像并不会插入到HTML页面中去，而是通过 src的值(URL) 链接到HTML页面上的，<img>标签的作用是为被引用的图像创建占位符。

<img>标签常用的属性有src、alt、width、height、title

src和alt为 img 标签的必需元素。

话不多说，看图，为你们讲解代码。

看网站的演示图和代码图，想必大家都很清楚了吧。

（为了更直观的看到效果，我写了div和div的样式，1px粗的红色实线边框，这里的代码以后再具体详解）

title和alt 的区别别，体现在第 11 行和第 14 行，想必大家就能看出来了吧

i. alt 属性是在图片不能正常显示时出现的文本提示。

ii. title 属性是在鼠标在移动到元素上的文本提示。

width和height的作用，用来规定图像的宽度和高度，单位为像素（px）

src路径，由于我的文件夹结构为 index.html文件和 images 文件夹。

所以 src 的路径为 src="images/图片.后缀"，即src="URL"

URL即（Uniform Resource Locator,统一资源定位符，在WWW上，每一信息资源都有统一的且在网上唯一的地址。

简单的理解URL，就是网址，地址

如果图片路径引用错误，都会导致网页中的图片无法正常显示！如，第 14 行和第 20 行代码。

以上为img标签的常见用法。在我们写网页的时候，建议img写上 src、alt、width、height这四个属性，是否需要 title 具体看网站的功能。

以上就是，第二课、Web前端开发之HTML基础的全部内容了，感谢阅读

————————————————

版权声明：本文为CSDN博主「MineChen」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/MineSu/article/details/104549536

评论(0) 浏览(2333)

012020-3

vue框架渐进性的理解和mvvm模式的理解

前端达人

引言

现在市场很多前端开发的招聘岗位都或多或少的要求你要掌握vue，可以说vue在国内是非常的火爆的，下面我给大家介绍一下vue框架吧！

vue是渐进式框架

vue的核心是一个视图模板引擎，但是这并不能说明vue不是一个框架，如上图所示在声明式渲染（视图模板）基础上，vue可以添加组件系统component，vue-router客户端路由，vuex的状态管理，vue-cli构建工具来构建一个完整的框架，更重要的是这些功能相互独立，你可以任意选用你项目需要的部件，不一定非要全部整合在一起（就像是vuex它是一个很好的可以管理组件之间共享状态的部件，但非必须在你的每一个项目中使用它，如果说你的项目相对简单，组件之间的通信相对简单你完全可以不使用它），可以看到渐进式，其实就是vue的使用方式，同时也能看到vue的设计理念
vue是mvvm模式
为什么说vue是mvvm模式呢？这个大家首先要知道mvvm是什么。mvvm是Model-View-ViewModel的简写，即模型视图视图模型。模型是指后端传过来的数据，视图是指我们看到的页面，视图模型是mvvm框架的核心，他是连接view和model的桥梁，它有两个方向，第一将后端传来的数据转换成页面可以看到的视图，第二，将用户在页面上的交互转化成为后端数据，我们称之为双向绑定。
总结mvvm模式的视图和模型是不能直接通信的，它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信
vue框架可以理解为是ViewModel，它可以实现dom监听和数据绑定
vue的数据绑定原理

当你把JavaScript对象传入vue实例作为data选项，vue会遍历此对象的所以属性，并使用Object.defineProperty把这些属性转换为getter和setter，每一个组件都有一个watcher实例，它会在组件渲染过程中，把接触过的数据记录为依赖，当依赖的setter被触发是，他会通知watcher，重而使关联的数据重新渲染，以下是代码展示。

<div id = "box"></div>
var obox = document.getElementById('box')
var obj = {}
object.defineProperty(obj,'myname',{
    get () {
        // obj设置了一个myname属性，当访问obj.myname属性会执行get方法
    },
    set (data) {
        // 当修改myname属性会执行set方法
        // data会得到你修改的值
        obox.innerHTML = data
    }
})

object.definePeoperty有一下缺点： {
1：无法监听es6的set，map变化
2：无法监听class类型的数据
3：属性的新增和删除也无法监听
4：数组元素的新整和删除也无法监听
}

评论(0) 浏览(2614)

012020-3

html5+css3实现2D-3D动画效果实例

前端达人

html5+css3实现2D-3D动画效果实例

主要实现的功能就是一些2D、3D的动画效果，如平移、缩放、旋转等等。

文章目录

html5+css3实现2D-3D动画效果实例

2D变换

3D变换

2D中应用实现案例

3D中应用实现案例

css3动画

2D变换

是在一个平面对元素进行的操作。

可以对元素进行水平或者垂直位移、旋转或者拉伸.

1

2

*2d对下面面坐标系简单分析如下：

（1）.默认状态下，x轴是水平的，向右为正。

（2）.默认状态下，y轴是垂直的，向下为正，这与传统的数学坐标系不同。

3D变换

2d场景，在屏幕上水平和垂直的交叉线x轴和y轴
3d场景，在垂直于屏幕的方法，相对于2d多出个z轴

下面首先需要了解2D、3D中的功能函数：

位移 translate()
translateX() 方法，元素在其 X 轴以给定的数值进行位置移动
translateY() 方法，元素在其 Y 轴以给定的数值进行位置移动
缩放scale()
scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1。
scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是１。
旋转rotate()
rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
正数”是顺时针，“负数”是逆时针，单位为“deg”。
倾斜skew()
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，
第二个参数表示垂直方向的倾斜角度
3D中多了Z轴，其他属性值不变

2D中应用实现案例
位移 translate()
效果图：

 position: absolute;
    left: 20px; top: 40px;
    transition: 2s;/*过渡时间*/
    transform: translateY(-320px);

.box3:hover .box3_h2{
    transform: translateY(0px);
}

<!-- 盒子3：实现位移 -->
        <div class="box3 box">
            <img class="img_3" src="../16/images/3.png" alt="">
            <div class="box_mm"></div>
            <h2 class="box3_h2">Taylor Swift</h2>
            <p class="box3_p1">I'm so glad you made time to see me. How's life, 
                tell me how's your family? I haven't seen them in a while. 
                You've been good, busier then ever. 
                We small talk, work and the weather Your guard is up and I know why...</p>
        </div>

/* 公共样式 */
.box{
    width:350px;
    height: 300px;
    position: relative;
    transform: 1s;
    margin: 20px 20px;
    float: left;
}
img{
    display: block;
    width: 350px;
    height: 300px;
}
/* 鼠标滑过覆盖上方的白色部分 */
.box_mm{
    width:350px;
    height: 300px;
    transform: 1s;
    background-color: #fff;
    position: absolute;/*设置定位，挡住box，*/
    top: 0;
    opacity: 0;/*透明，0全透明*/
}
h2{
    font-size: 20px;
}

/* 盒子3 */
.box3{
    overflow: hidden;
}
.img_3{
    transition: 2s;
}
.box3_h2{
    color: #fff;
    position: absolute;
    left: 20px; top: 40px;
    transition: 2s;/*过渡时间*/
    transform: translateY(-320px);
}
.box3_p1{
    font-size: 14px;
    width: 320px;
    position: absolute;
    left: 20px; bottom: 80px;
    transition: 2s;
    opacity: 0;
}
/*交互样式*/
.box3:hover .img_3{
    transform: translateY(-10px);
}
.box3:hover .box3_h2{
    transform: translateY(0px);
}
.box3:hover .box3_p1{
    transform: translateY(-50px);
    opacity: 1;
}

————————————————
版权声明：本文为CSDN博主「weixin_43513126」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43513126/article/details/104570062

评论(0) 浏览(3165)

012020-3

Web开发期待的CSS的一些功能

前端达人

著名的 Web 设计网站 CSS-tricks.com 最近组织了一次调查，请15名顶尖的 Web 设计师对 CSS 提出自己的期望，15名设计师包括 Jon Hicks, Wolfgang Bartelme, Mint 的 Shaun Inman 以及 Stuff and Nonsense 的 Andy Clarke。

调查结果显示，最被期待的 CSS 功能是 CSS 圆角，其它期待的功能包括跨浏览器渐变与阴影，类似 Photoshop 的层融合效果，更一致的声明简化语法以及对条件判断的本地支持。这些期待中一部分已经包含在未来的 CSS-3 中，但更多的仍然只是一些梦想。

WebMonkey 的编辑们将这个 Wishlist 发表在他们的网站并让 WebMonkey 的读者投票选出最热门的项目，以下是按投票多少排列的 CSS Wishlist 部分列表（只选取最热门的项目）。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

CSS 圆角

by Webmonkey

标准的，直接基于 CSS 的圆角是很多人的期待，这样，就不必再费尽心机只为了显示一个圆角。

垂直居中

by michael lascarides

针对 block 对象的更容易的垂直居中设置。（div + css 让人既爱且恨的一个重要原因就是垂直居中，让一个对象垂直居中显示在 block 容器中，且兼容所有主流浏览器简直就是一个噩梦 - 译者）

兼容所有主流浏览器的 CSS 2.1 与 CSS 3

by Erik

能兼容所有主流浏览器的 CSS 2.1 与 CSS 3 是 Erik 的梦想，但其中的某些功能在某些浏览器中总是磕磕绊绊。

更好的嵌入字体

by Webmonkey

不要 sFIR, 不要图片，要真正的字体。

CSS 变量

by Jeffrey Jordan Way, via css-tricks.com

能定义诸如色彩值一类的变量

更好地支持 100% height

by JLR

设置了 100% height 的容器的顶部和底部真正附着在页首和页尾，页面中间部分匹配内容并准确显示滚动条。搜索“100% height css”能找到各种解决方法，但事情原本不该这么复杂。

可重复使用变量

by Neal Lindsay

比如:

@var mycolor = #0080FF

h1 { color: mycolor; }

div.containbox { border: 1px mycolor; }

浏览器一致性与定义顺序

by JML

浏览器一致性非常重要。某些 CSS 在某些浏览器被忽略或部分忽略使 CSS 只有借助 JavaScript 才能正常使用。同时，对里面的 CSS 定义应该可以覆盖全局定义。

一句话复原

by Chris Pitzer

很多设计者要写40多行代码才能清除浏览器默认 CSS 定义，应当有一个简单的声明一次性将所有 CSS 复原，比如：

body { clear-default-styles:true; }

图形旋转与反转

by Stephen Bell

在设置图形圆角效果时候，我们需要同一个圆角图片的4个旋转版本来实现。应该有一个简单的声明实现旋转，如：

img .horiz { rotate:90; }

成组的 CSS 简化定义

by Volkan Görgülü, via css-tricks.com

如:

foo h1, #foo h2, #foo h3

改为:

foo [h1, h2, h3]

渐变

by Anonymous

以避免一条线一条线地实现渐变。

定位计算

by Anonymous

不使用 JavaScript 而是直接在 CSS 中实现：

left: ID1.Left + ID1.Width + 2px;

网格布局

by Kurt Krumme

table 布局曾经流行一时，因为 table 布局更接近网格布局的原理。CSS 的设置者们为什么要推出一个不伦不类的 box 模型？

div + css 在 Web 设计界已经红得发紫，尽管 div 有众多缺陷（比如垂直居中，比如在 IE 中的众多 BUG），如果哪个设计师胆敢使用 table，被人查出源代码，是会被耻笑的。然而译者从不畏惧使用 table + css，且愿意告戒那些盲目追随 div 并被折磨得半死的人，至少在目前，table 是被各种浏览器支持得最完美的容器对象。

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

使用 image 作 border

by Anonymous

应当可以用 image 作为 border，如：

border-right: url('image.png')

支持多个背景图

by Brad

这个 CSS 功能非常有用，有了这个功能，完美实现 CSS 圆角就变得十分简单了。

所有浏览器支持统一标准

by Anonymous

这里特指 IE<8 的版本。CSS 有成型的标准，但有些浏览器一定要搞一些自己的东西出来。

以上来自cb。大师们的期望果然很独特，相当多的期望也非常有用，如果实现了，Web开发就是多么轻松愉快的一件事情啊！比如变量、清除定义和定位计算，是我认为非常有用的。目前IE下可以用一些IE特有的表达式，但用起来太复杂。

还是期望CSS3更好更强大。也期望各个浏览器尽快支持CSS3

————————————————

版权声明：本文为CSDN博主「前端基础开发」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/html886/article/details/104582007

评论(0) 浏览(2385)

012020-3

JavaScript中的this/call/apply/bind

前端达人

文章目录

一、this

1.什么是this

2.this 代表什么

3.绑定 this 的方法

4.this的指向

5.改变指向

二、Function.prototype.bind()

三、call/apply

1.定义

2.语法

3.异同

一、this

1.什么是this

this 关键字在大部分语言中都是一个重要的存在，JS中自然不例外，其表达的意义丰富多样甚至有些复杂，深刻理解this是学习JS、面向对象编程非常重要的一环。

2.this 代表什么

this代表函数（方法）执行的上下文环境（上下文，类似与你要了解一篇文章，了解文章的上下文你才能清晰的了解各种关系）。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

1.在方法中，this 表示该方法所属的对象。

2.如果单独使用，this 表示全局对象。

3.在函数中，this 表示全局对象。

4.在函数中，在严格模式下，this 是未定义的(undefined)。

5.在事件中，this 表示接收事件的元素。

6.类似 call() 和 apply() 方法可以将 this 引用到任何对象。

3.绑定 this 的方法

this的动态切换，固然为 JavaScript 创造了巨大的灵活性，但也使得编程变得困难和模糊。有时，需要把this固定下来，避免出现意想不到的情况。JavaScript 提供了call、apply、bind这三个方法，来切换/固定this的指向。

4.this的指向

1.在一般函数方法中使用 this 指代全局对象

function test(){
　　　　this.x = 1;  //这里this就是window
　　　　console.log(this.x);
　　}
　　test(); // 1

JS规定，函数中的this，在函数被调用时确定，它指函数当前运行的环境。

2.作为对象方法调用，this 指代上级对象

var x =3;
function test(){
　　alert(this.x);
}
var o = {
  x:1,
  m:test 
};
o.m(); // 1

如果函数作为对象的方法时，方法中的 this 指向该对象。

3.作为构造函数调用，this 指代new 出的对象

function test(){
　　　　console.log(this);
　　}
　　var o = new test();
       test();
//可以看出o代表的不是全局对象

new关键词的作用是调用某个函数并拿到其中的返回值，只是调用过程稍特殊。在上面的代码实例中。test函数被new关键词调用时，内部依次执行了以下步骤:

（1）创建一个空对象。

（2）将这个空对象的原型，指向这个构造函数的prototype。

（3）将空对象的值赋给函数内部的this（this就是个空对象了）。

（4）执行函数体代码，为this这个对象绑定键值对。

（5）返回this，将其作为new关键词调用oop函数的返回值。

所以构造函数中的this，依旧是在构造函数被new关键词调用时确定其指向，指向的是当前被实例化的那个对象。

4.箭头函数中的this
箭头函数是ES6的新特性，最重要的特点是它会捕获其所在上下文的this作为自己的this，或者说，箭头函数本身并没有this，它会沿用外部环境的this。也就是说，箭头函数内部与其外部的this是保持一致的。

this.a=20
var test={
    a:40，
    init:()=>{
        console.log(this.a)
        function go(){
            this.a=60
            console.log(this.a)
        }
        go.prototype.a=50
        return go
    }   
}

var p=test.init()
p()
new (test.init())()
//输出 20 60 60 60

5.改变指向
this的动态切换，固然为 JavaScript 创造了巨大的灵活性，但也使得编程变得困难和模糊。有时，需要把this固定下来，避免出现意想不到的情况。JavaScript 提供了call、apply、bind这三个方法，来切换/固定this的指向。

bind方法和apply、call稍有不同，bind方法返回一个新函数，以后调用了才会执行，但apply、call会立即执行。

二、Function.prototype.bind()
bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()中的第一个参数的值，例如：f.bind(obj)，实际上可以理解为obj.f()，这时f函数体内的this自然指向的是obj；

示例：

function f(y, z){
    return this.x + y + z;
}
var m = f.bind({x : 1}, 2);
console.log(m(3));
//6

这里bind方法会把它的第一个实参绑定给f函数体内的this，所以这里的this即指向{x : 1}对象，从第二个参数起，会依次传递给原始函数，这里的第二个参数2，即是f函数的y参数，最后调用m(3)的时候，这里的3便是最后一个参数z了，所以执行结果为1 + 2 + 3 = 6分步处理参数的过程其实是一个典型的函数柯里化的过程（Curry）。

三、call/apply
1.定义
每个函数都包含两个非继承而来的方法：call()方法和apply()方法。

call和apply可以用来重新定义函数的执行环境，也就是this的指向；call和apply都是为了改变某个函数运行时的context，即上下文而存在的，换句话说，就是为了改变函数体内部this的指向。

2.语法
call()

调用一个对象的方法，用另一个对象替换当前对象，可以继承另外一个对象的属性，它的语法是：

Function.call(obj[, param1[, param2[, [,...paramN]]]]);
1
obj：这个对象将代替Function类里this对象
params：一串参数列表

说明：call方法可以用来代替另一个对象调用一个方法，call方法可以将一个函数的对象上下文从初始的上下文改变为obj指定的新对象，如果没有提供obj参数，那么Global对象被用于obj。

apply()

和call()方法一样，只是参数列表不同，语法：

Function.apply(obj[, argArray]);

obj：这个对象将代替Function类里this对象
argArray：这个是数组，它将作为参数传给Function

说明：如果argArray不是一个有效数组或不是arguments对象，那么将导致一个TypeError，如果没有提供argArray和obj任何一个参数，那么Global对象将用作obj。

3.异同
相同点

call()和apply()方法的相同点就是这两个方法的作用是一样的。都是在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。

一般来说，this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变this的指向，看个例子：

function add(a, b) {
    return a + b;
}

function sub(a, b) {
    return a - b;
}

console.log(add.call(sub, 2, 1));//3

评论(0) 浏览(2362)

292020-2

CSS初学：如何修改Zblog中的CSS

前端达人

在学习应用css之前我们要先了解一下什么是css。CSS是Cascading Style Sheets(层叠样式表)的简称.

CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
在标准网页设计中CSS负责网页内容(XHTML)的表现.
CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.
可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.
CSS是由W3C的CSS工作组产生和维护的.

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

了解了什么是css后我们就可以方便对其应用了，我们可以用以下两种方式加入你的博客当中去，由于css的应用方式有就近原则。也就是说最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。

链入外部样式表文件 (Linking to a Style Sheet)

你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：

<head>

<title>文档标题</title>

<link rel=stylesheet href="http://www.123-seo,cn/dhtmlet.css" type="text/css">

</head>

而在XML中，你应该如下例所示在声明区中加入：

<? xml-stylesheet type="text/css" href="http://www.123-seo.cn/dhtmlet.css" ?>

定义内部样式块对象 (Embedding a Style Block)

你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。定义方式请参阅样式表语法。示例如下：

<html>

<head>

<title>文档标题</title>

<style type="text/css">



</style>

</head>

<body>

请注意，这里将style对象的type属性设置为"text/css"，是允许不支持这类型的浏览器忽略样式表单。

————————————————

版权声明：本文为CSDN博主「html基础教程」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/html168/article/details/104565043

评论(0) 浏览(2471)

« 1 ... 71 72 73 74 75 76 77 »

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

首页

弹性布局(Flex)+骰子旋转实例^v^

关于javascript跳转与返回和刷新页面

window.open()详解

网页炫酷背景

html+css实现自定义图片上传按钮

【Web前端开发】第二课、HTML基础之HTML概述

vue框架渐进性的理解和mvvm模式的理解

html5+css3实现2D-3D动画效果实例

3D变换

Web开发期待的CSS的一些功能

foo h1, #foo h2, #foo h3

foo [h1, h2, h3]

JavaScript中的this/call/apply/bind

CSS初学：如何修改Zblog中的CSS

分类

日历

链接

个人资料

存档