window.innerHeight 是浏览器窗口可用的高度。

window.outerHeight 是浏览器窗口最大的高度。

打开chrome-inspector,上下移动inspector,看到screen右上角有坐标数字的变化。

window.scrollY  是当前顶部距离页面初始位置0的距离。创建滚动到顶,这个值是0。

HTML DOM offsetHeight Property

document.body.offsetHeight得到的是<body>元素(可以看到)的高度,包括padding, border, scrollbar, 不包括margin。(pixels)⚠️,可以看到的指content,忽略。

所以:

window.innerHeight + window.scrollY >= document.body.offsetHeight

指的是滚动到页面底部的情况。

scroll()方法被遗弃了,改用window.scrollTo(x, y)

DOM Events是针对Dom object的各类事件处理event handlers,和functions联合使用的。

Dom window也是dom对象,可以使用这些events.

关于scroll有3个写法:

1.  html:  <element onscroll="myFunction">

2. JS1: object.onscroll = function() { myScript };

3. JS2: object.addEventListener("scroll", myScript); ⚠️myScript是一个function的名字。

window对象也可以使用addEventListener()方法。虽然w3c上没有写。


query语法和rails。

posts = Post.order(id: :desc).limit(5)  ->

SELECT  "posts".* FROM "posts" ORDER BY "posts"."id" DESC LIMIT $1  [["LIMIT", 5]]

posts.last.id -> 47

posts.where("id < 47")->

#继承了posts的查询语法的结构:Post.order(id: :desc).limit(5),而不是posts集合本身。
SELECT  "posts".* FROM "posts" WHERE (id < 47) ORDER BY "posts"."id" DESC LIMIT $1  [["LIMIT", 5]]

Post.order(id: :desc).limit(5).where("id < 47")中的limit和where关键字变换位置生成的SQL是一样的⬆️。


⚠️ turbolinks内绑定的事件和内部绑定的变量。

下面的代码是位于index.html.erb的第一行:变量current_post_id第一次会设定为一个值, 在turbolinks内部的代码会改变它的值。

如果把变量current_post_id的第一次声明放到turbolinks内部,则它的值永远不会改变了。

DOM window的事件和方法; Rails查询语法query(查询结构继承); turbolinks的局限;的更多相关文章

  1. solr的查询语法、查询参数、检索运算符

    转载自:http://martin3000.iteye.com/blog/1328931 1.查询语法 solr的一些查询语法 1.1. 首先假设我的数据里fields有:name, tel, add ...

  2. .NET LINQ查询语法与方法语法

    LINQ 查询语法与方法语法      通过使用 C# 3.0 中引入的声明性查询语法,介绍性 LINQ 文档中的多数查询都被编写为查询表达式. 但是,.NET 公共语言运行时 (CLR) 本身并不具 ...

  3. C#3.0新增功能09 LINQ 基础07 LINQ 中的查询语法和方法语法

    连载目录    [已更新最新开发文章,点击查看详细] 介绍性的语言集成查询 (LINQ) 文档中的大多数查询是使用 LINQ 声明性查询语法编写的.但是在编译代码时,查询语法必须转换为针对 .NET ...

  4. elasticsearch基本概念与查询语法

    序言 后面有大量类似于mysql的sum, group by查询 elk === elk总体架构 https://www.elastic.co/cn/products Beat 基于go语言写的轻量型 ...

  5. query_string查询支持全部的Apache Lucene查询语法 低频词划分依据 模糊查询 Disjunction Max

    3.3 基本查询3.3.1词条查询 词条查询是未经分析的,要跟索引文档中的词条完全匹配注意:在输入数据中,title字段含有Crime and Punishment,但我们使用小写开头的crime来搜 ...

  6. 《C#高效编程》读书笔记08-推荐使用查询语法而不是循环

    C#语言中并不缺少控制程序流程的结构,for.while.do/while和foreach等都可以做到这一点.但我们还有更好的方式:查询语法(query syntax) 下面这段代码演示了用命令式的方 ...

  7. LINQ 学习路程 -- 查询语法 LINQ Query Syntax

    1.查询语法 Query Syntax: from <range variable> in <IEnumerable<T> or IQueryable<T> ...

  8. elastic 查询案例Query与Filter + CRUD简单理解 + dynamic mapping + keyword

    1.增 PUT mytest01/external/ { "name": "xiaowei" } curl -XPUT '192.168.1.49:9200/m ...

  9. Python Elasticsearch api,组合过滤器,term过滤器,正则查询 ,match查询,获取最近一小时的数据

    Python Elasticsearch api   描述:ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.下 ...

随机推荐

  1. 【转载】细说 Form (表单)

    Form(表单)对于每个WEB开发人员来说,应该是再熟悉不过的东西了,可它却是页面与WEB服务器交互过程中最重要的信息来源. 虽然Asp.net WebForms框架为了帮助我们简化开发工作,做了很完 ...

  2. codeforces#505--B Weakened Common Divisor

    B. Weakened Common Divisor time limit per test 1.5 seconds memory limit per test 256 megabytes input ...

  3. 为linux扩展swap分区

    1.查看当前swap分区使用情况 [root@localhost ~]# swapon -s Filename Type Size Used Priority /dev/sda2            ...

  4. 设计模式之——Memento模式

    Memento模式即快照模式,就是在某一时刻,设定一个状态,在后面随时可以返回到当前状态的模式. 我们拿一个闯关游戏作为举例,一共有十关,每闯一关,玩家所持金额增加一百,而闯关失败就扣一百.初始时,给 ...

  5. Block Towers---cf626c(二分)

    题目链接:http://www.codeforces.com/contest/626/problem/C 题意是有一群小朋友在堆房子,现在有n个小孩每次可以放两个积木,m个小孩,每次可以放3个积木,最 ...

  6. 剑指offer总结

    1.实现Singleton模式 2.二维数组中的查找:每行从左到右递增,每列从上到下递增,输入一个数,判断数组中是否存在该数 1 2  8 9  2 4  9 12 4 7 10 13  6 8 11 ...

  7. [C#]嵌入互操作类型

    嵌入互操作类型(Embed Interop Types) 运用office编程调用Excel 的PIA时Microsoft.Office.Interop.Excel.dll时会产生如下问题: 1.提示 ...

  8. PAT 1075 PAT Judge[比较]

    1075 PAT Judge (25 分) The ranklist of PAT is generated from the status list, which shows the scores ...

  9. WHCTF2017线上小记

    第四届XCTF开始,首战因素,加上团队刚加入了两个新人的原因,还是决定一块参与一下.水了3题.2个RE和1个MISC,照顾新人,写的比较啰嗦. [MISC] PY-PY-PY 下载题目之后是一个pyc ...

  10. python webdriver 测试框架-数据驱动exce驱动,不用ddt的方式

    data.xlsx: 脚本: #encoding=utf-8from selenium import webdriverimport timeimport datetimefrom openpyxl ...