1.动画

(1) Css样式提供了运动

过渡的属性transition  从一种情况到另一种情况叫过渡

Transition:attr  time  linear  delay;

Attr 是变化的属性

Time 是花费的时间

Linear 变化的速度

Delay 是延迟

复习background:url() no-repeat 50% 50% red;

Background-image

Background-repeat

Background-position

Background-color

(2)Js提供的运动

元素的client offset scroll三个系列

clientWidth/clientHeight/clientTop/clientLeft

offsetWidth/offsetHeight/offsetLeft/offsetTop/offsetParent

scrollWidth/scrollHeight/scrollTop/scrollLeft

这十三个属性,前面都是一个只读属性,scrollTop和scrollLeft是即可读也可写

获取浏览器的body属性是有兼容的

Var dd=document.body||document.documentElement

scrollTop和scrollLeft的最小值是0

获取body的整个文档的高

document.body.scrollHeight||document.documentElement.scrollHeight

获取浏览器一屏幕的高(浏览器的可视区)

Document.body.clientHeight||document.documentElement.clientHeight

Window下的两个事件

onscroll 当滚动条滚动的时候触发

onresize 当窗口发生改变时触发

BOM 浏览器对象模型

1.window.open(url,ways)

url 是打开的网页地址

ways 打开的方式 _self

2.window.close()

3.浏览器用户信息

window.navigator

4.浏览器地址信息

window.location

5.window.history 记录浏览器的访问历史记录

window.history.forward() 前进 最新的访问记录

window.history.back()  返回

函数的解析

函数如果把他当做函数看,就只能起到函数的意思,可以封装。

如果说我们把函数当做函数对象来看,就可以实现一些继承了。

可以在控制台 dir(fn)

可以发现在原型链上函数对象天生带call(),apply(),bind()三个方法。

这三个方法可以改变函数内的this指向

A.Call(B,c,d)。B取代了A中的this,然后把B给调用了

function add(a,b){

console.log(this)

return a+b

}

function jian(a,b){

return a-b

}

// add(5,3)

var s=add.call(jian,5,6)

console.log(s)

jian取代了add中this ,然后把add给调用了

Call和apply的区别

案例分析

Math.max(34,,45,6,12) 找出这些数字中的最大项,但是参数必须是数字。

现在我们有个arr=[24,25,56,5] 想通过math找到里面的最大项

var s=Math.max.apply(null,arr)

JS(JavaScript)的j进一步了解9(更新中···)的更多相关文章

  1. JS(JavaScript)的初了解(更新中···)

    1.js介绍 Js全称叫javascript,但不是java,他不仅是是一门前台语言,经过发展,现在也是一门后台语言:而java是后台语言. Js作者是布兰登艾奇. 前台语言:运行在客户端的 后台语言 ...

  2. JavaScript资源收集分享,持续更新中。。。

    平时收集的一些JavaScript资源,分享给大家 jQuery UI jEasyUI Extensions http://jqext.sinaapp.com 布局做的挺不错,有比较复杂的菜单导航.P ...

  3. js坑爹笔试题目汇总(持续更新中)

    把你的面试官问倒,你就是一个合格的面试者了,以下总结一些易错的js笔试题目,会持续更新中.欢迎关注 1,考察this var length = 10 function fn(){ alert(this ...

  4. JS(JavaScript)的进一步了解7(更新中···)

    1.Js操作css样式 div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定 了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...

  5. JS(JavaScript)的进一步了解5(更新中···)

    1.针对表单的 form input select textarea type=”radio/checkbox/password/button/text/submit/reset/” 表单的事件 on ...

  6. JS(JavaScript)的进一步了解3(更新中···)

    数据的三种存储方式 String   “ ” Array    [ ] Json    { } 所有编程语言java c python c++ 等 他们都是面向对象编程,面向对象必须有三大特点,封装, ...

  7. JS(JavaScript)的进一步了解2(更新中···)

    js数据类型 基本数据类型:string   undefined   null  boolean  number 引用数据类型  Object  array  function 二者的区别 基本数据类 ...

  8. JS(JavaScript)的进一步了解1(更新中···)

    1.作用域链 作用域:浏览器给JS的一个生存环境(栈内存). 作用域链:JS中的关键字var 和function 都可以提前声明和定义.提前声明和定义的内容放在我们的 内存地址(堆内存)中.然后JS从 ...

  9. JS(JavaScript)的进一步了解8(更新中···)

    元素节点的树状图 document>documentElement>body>tagName offsetLeft/offsetTop 结合运动 滚动轮播 1.DOM 全称:docu ...

  10. JS(JavaScript)的进一步了解6(更新中···)

    元素的属性 div.attributes 是所有标签属性构成的数据集合 div.classList 是所有class名构成的数组集合 在classList的原型链上看以看到add()和remove() ...

随机推荐

  1. Dubbo报org.I0Itec.zkclient.exception.ZkNoNodeException异常

    解决办法就是添加zkclient的jar,maven工程的话增加如下引用: <dependency>     <groupId>com.github.sgroschupf< ...

  2. 2018-11-21-WPF-解决-ViewBox--不显示线的问题

    title author date CreateTime categories WPF 解决 ViewBox 不显示线的问题 lindexi 2018-11-21 09:37:53 +0800 201 ...

  3. 洛谷 P3951 小凯的疑惑 找规律

    目录 题面 题目链接 题目描述 输入输出格式 输入格式: 输出格式: 输入输出样例 输入样例: 输出样例: 说明 思路 证明 AC代码 include<bits/stdc++.h> 题面 ...

  4. html5实现下拉加载

    介绍: 实现手机下拉自动加载数据. 原理: 通过检测页面内容距离加上当前滚动的距离大于或等于滚动距离总长时,调用ajax数据加载 事例: var myMoreInfo = new iMoreInfo( ...

  5. Minimum Depth of Binary Tree最短深度

    Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shor ...

  6. 【调试】Visual Studio 调试小技巧(2)-从查看窗口得到更多信息(转载)

    在使用Visual Studio开发调试程序时,我们经常需要打开查看窗口(Watch)来分析变量.有时在查看窗口显示的内容不是很直观.为了能从查看窗口的变量中得到更多的信息,我们需要一些小的技巧.下面 ...

  7. nodeJs学习-13 router

    const express=require('express'); var server=express(); //目录1:/user/ var routeUser=express.Router(); ...

  8. React Native等比放大不丢失图片

    9月11号 0.33版本,resizeMode中添加了center, 可以实现一样的功能.不过希望这篇文章还能帮助大家. 之前我们学习了从零学React Native之08Image组件 大家可以发现 ...

  9. SDUT-3347_数据结构实验之数组三:快速转置

    数据结构实验之数组三:快速转置 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 转置运算是一种最简单的矩阵运算,对于一个 ...

  10. Gym - 101620H_Hidden Hierarchy(树+模拟)

    Hidden Hierarchy 题目链接 题目描述 You are working on the user interface for a simple text-based file explor ...