jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等等, 其中, 表单中的元素选择器就是直接用冒号筛选器就好了, 前面不必用input. 还可以使用表单对象属性选择器.
学习进步 的方法就是, 反复的, 不断重复的, 螺旋式的熟悉, 温故而知新. 不断熟练, 然后生出技巧, 和高超技艺, 然后成为高手的. 每一轮重复都会有不同的质变. 技艺关键在于熟练.
vim中 dw和db的区别: 在插入状态下, 返回到普通模式的时候, 光标会退后 一个字符! dw向前删除的时候, 会连同光标所在的字符一同删除, 而db向后删除, 光标所在的字符不会被删除!
关于jquery获取的元素对象的 尺寸问题,
尺寸有height和width, 然后有innerHeight, outerHeight的
三者之间的关系是:
height: 是元素本身的 :净尺寸: 计算尺寸, 不包括任何外部的部分... , 就是在css中, 写的height 样式属性的值;
innerHeight: 是元素加上padding后的值;
outerHeight: 是元素的净高度 + padding+ border的高度值. 它由一个option 可选参数, 如果为true, 则还要加上 margin的值.
-------------- 通常在参考 给定 元素的尺寸时, 通常只考虑 净高度值....
关于jquery获取的元素 的位置 offset和position 问题,
- 两者都只对可见元素有效, 对display:none; 的元素, 都是为0;
- 两者都是返回 对象类型的值, 包含top和left属性;
- offset是相对于视口, (文档/客户区) , 而position是相对于 最近的定位 (有position属性的) 父元素的 位置. 一个是视口 一个是父元素.
- offset可以是getter和setter, 而position则只是作 getter.
什么叫视口, 浏览器窗口 , 文档的宽度和高度?
首先, 需要明确的是: viewport != 文档 文档是可以滚动的.. 而客户区, viewport视口通常是固定的区域!
屏幕尺寸, 设备尺寸, 就是机器的尺寸, 这个跟实际的软件, 浏览器基本上是没有关系的;
所谓的文档尺寸, 当然是指 浏览器窗口 中, 除了 上面的标题栏/工具栏/地址栏等等乱七八遭的东西后, 下面我们看到的, 内容部分, 也就是, 不管你上面的标题栏/工具栏/地址栏如何设置, 网页实际要显示的容器, 网页内容实际要显示的地方, 始终只是 下面的那部分! 你可以看一看 当你缩放 "文档" 的时候, 只有下面的网页的内容部分在动, 上面的标题栏/工具栏/地址栏 等等内容 都是不会变的, 不会改动的! 因此jquery中的 offset相对的位置就是 document文档区的左上角的位置!
要注意的是, 文档 的原点, 是文档最开始的地方, 当有滚动条滚动的时候, 这个视口原点是在最顶端 "卷动" 的, 不是 我们看到的 屏幕的 左上的那个固定 不动的地方! 而viewport是视口, 视口是不变的! 就是我们常说的客户区! 即使文档在滚动, 地址栏或工具栏下方的那个区域(我们眼睛所看到的那个区域)是不动的, 那个就是视口viewport
body元素继承的是 父元素 html的整个宽度, 而html默认宽度 的就是 viewport的宽度. 因此当你缩小放大 浏览器的窗口尺寸时, 这个视口 的宽度 是在变化的! 因此, html的宽度也跟着变化, 从而body, 从而其下面的其他子元素的 宽度 也就跟着变化了!! 参考: http://weizhifeng.net/viewports.html
只考虑 "标准"浏览器, ie根本就不考虑!!
当一个鼠标事件发生时, 至少有三种方法 三种属性可以 获得事件发生时鼠标的位置: pageX, pageY; clientX, clientY; screenX, screenY
- pageX, pageY是指鼠标位置 相对于 文档 的位置,
- ClientX, clientY是指鼠标相对于视口/客户区的位置
- screenX, screenY是指鼠标相对于屏幕(物理器件)的位置:
90%的时间你将会使用pageX/Y；通常情况下你想知道的是相对于文档的事件坐标。
其他的10%时间你将会使用clientX/Y。
你永远不需要知道事件相对于屏幕的坐标。
即使是在bootstrap中, 默认的div, 还是贯穿整个屏幕的宽度的, bs并没有对div作改变的 改变的是 div的 container容器.!
使用firefox的控制台调试功能时, 注意 console不能直接使用 console(...), 因为console不是一个函数, 而是一个对象! 要使用它的 方法: .log/info/debug/warn/error 等方法, 还有trace等方法, 最常用的时log, 中间可以用占位符. 可以使用分组显示: console.group("...")... console.groupEnd(), 可以使用console.dir(查看一个js对象的所有属性和方法)
小结:
jquery提供的对文档节点的内容的修改函数是: html, text, 和val(注意val只是对input表单有效!)
jquery提供了一个 attr / removeAttr 函数, 这个可以对元素的某一个属性的 所有 值(如: class) 进行操作! 但是它也单独的, 专门的 提供了另外的 class的操作函数: addClass, removeClass, toggleClass. 区别是: attr('class','...)的时候 是对所有的 class样式进行操作, 而addClass 等可以单独的对 某一个类样式进行操作!
在js, php等编程中,最好不 要 为了省事, 而使用关键字作变量名, 比如在firefox/chrome等中, top等已经作为一个关键字,所以不能用它来作变量名.
今天遇到一个奇怪现像：一段JS脚本在IE中执行正常，在chrome中却执行失败。最后发现问题出在：
var top=...;
top在chrome中已经被定义了，就像document和window一样。所以我们在写js代码时，不可以再用top做变量名。
为了避免变量名重复，给变量名加个 独特的前缀或后缀 比较保险。
在用jquery获取元素的位置坐标offset.top/.left时, 然后再用这些数据去设置其他元素的相对位置时, 有时候会发生偏差, 不准却, 原因是多方面的, 可能是js, css等的写法不标准, 也可能是 文档/窗口, 没有及时 完全的加载完成, 此时,可以尝试把 ‵$(document).ready(), 换成 $(window).load() , 前者只是在文档准备好, 此时窗口不一定完全载入, 所以改用后者, 让窗口完全载入后, 再让jquery去计算 元素的坐标值`. 参考:
如上的表述, 一个div上的 半透明的蒙版, 并不能用offset 来做! 因为offset是元素相对于文档的位置, 而当窗口在改变或者移动的时候, 元素相对于文档的排版会改变, 有的会产生拉伸, 有的会产生堆叠, 也就是说, 这个offset是随时改变的! 这是一方面. 另一方面, 而javascript中 使 蒙版跟div 相 "重叠"的 js代码, 只会在文档载入的时候, 执行 "一次", 只执行一次, 这时候的 蒙版offset位置,并不会跟随 div的offset位置 而更新. 所以 蒙版和div会产生错位. 在窗口尺寸变化很大的时候, 甚至会完全 错位! 所以 这里要用position绝对定位来做, 将参考div和蒙版, 都放在一个 position: relative的容器中, 然后 将这个容器中的内容都设置成position: absolute绝对定位, 然后, 再在js脚本中 设置 蒙版或 二级菜单的 top和left 位置就好了. 当然,要注意, relative的容器由于 里面的内容都absolute了, 所以会 "产生 坍塌". 因此, 要设置它的 绝对宽度和高度!
用vim编辑文件时, 在编辑过程中, 会产生一个swp文件, 是用来保存崩溃时产生的保护信息. 当文件正常关闭时, 会自动删除 swp文件, 当非正常关闭时, 这个swp文件就保留下来,以供恢复使用. 但是 并不是, 任何时候, 这个swp文件都有用, 甚至有时候会 产生很严重的 问题! 即, 当你现在正在编辑的文件比 swp更新, 增加了新的内容时, 这时, swp包含 的内容更少, 没有包含新增内容, 这时, 如果贸然使用Recovver的话, 就会用 旧的- 没有新增内容的版本- 去覆盖当前文件, 这就很老火了!! 所以在出现那种需要选择 swp操作的时候, 一定要小心了! 要先把 文件 复制一份再操作!! 以免丢失内容而后悔痛苦了!
如何设置gnome-terminal 默认打开的目录位置?
在super+T 的快捷方式中 设置, /usr/bin/gnome-terminal --working-directory=/var/www/html 即设置shell的工作目录选项为htm就好了....
js的定时器和延时器?
setInterval 和 setTimeout中, 函数的调研方式, 一是直接使用函数名, 不要加引号和函数后面的括号, 另一种是 使用引号, 同时加上函数的括号; 两种方式截然相反. 后一种方式, 适合函数中带有参数 的情形, 可以 字符串加引号的方式, 把参数用加号 连接起来;
参考: http://yufuqiang.lofter.com/post/1691f4_405529
modal模态框/ 弹出框的 backdrop?
- 什么是backdrop?
backdrop就是 "舞台背景", "舞台幕布"的意思, 就是指的是 当模态框弹出时, 自动生成的 : 模态框 "周围的" 灰色阴影的 暗色调的 那块面积区域. - backdrop是一个选项, 它的值有boolean类型和 string字符串类型,
当为boolean类型时, true(默认的), 表示有 周围的灰色阴影区域; false表示没有周围的灰色阴影 幕布;
当为 string类型时, 值为:static" 表示,也有周围的灰色阴影区域, 但是点击阴影不会关闭模态框! - 注意, 即使写好了模态框的 html代码, 即
div ."modal fade in" > div.modal-dialog >div.modal-content, 这样的模态框仍然不会被 自动弹出来, 因为没有 "触发" , 模态框需要 用上部的 按钮/超联结/或者用js代码 触发, 才能显示出来.
关于各种形式的列表组:
- 原生的, 默认格式的列表组, 只是没有列表前面的缩进和 list-style点. 但是本身是不包含链接或按钮的;
- 如果要得到链接样式的列表组, 就不要使用ul>li>a, 不要使用li下包含a标签的写法, 直接是使用在div下包含a 的写法, 而a标签不用写父元素li了
- 同样的, 要得到 按钮的列表组, 就直接使用div>button了, 也不用 li来包含button了, 也不用 .btn类...
- 定制内容(就是通常所说的 hx...+p....): 很多元素, 都可以相互嵌套的! 如div>a下可以包含h1 和 p等等....
链接和 按钮 要产生颜色时 的区别? 链接要 产生颜色, 需要通过 ative 来显示, 而按钮要产生颜色, 则要通过类: .btn-primary,等等, 来实现.
关于vim的移动操作的 新理解 参考: http://www.cnblogs.com/delphiclub/p/3677180.html 很好
关于倍数 : 倍数总是放在 操作/移动/选择的 前面的, 如: 3dd, 3j, 理解: 如同在数学上的倍数一样, 比如说: 3x+4y, 那么没有说x3+y4的说法吧.
倍数即可以放在 移动单位的前面, 也可以放在 复制/选择/删除等操作的前面, 两种方式都是等价的: 如: 3dd === d3j
要注意, 养成 倍数的习惯, 这个操作比单个的一个一个的移动 要高效得多. 也就说, 当要操作的时候, (不管是移动还是编辑), 首先想到的就是 倍数操作
关于查找单个字符, 是fx命令, 同样可以用倍数操作, 如 : 4fx. 而且重复查找单个字符的操作是: 逗号或者分号! 注意不是 点号 (.), 点号是重复上一次的删除 复制等操作
关于光标的移动: a. 屏幕不移动, 只是光标在当前屏幕的最顶端/中间/最底端移动, 使用 H M L; b. 屏幕本身的滚动:ctrl+u, ctrl+d(滚动半屏, 意思是: up, down), 滚动一屏 ctrl+f, ctrl+b, 滚动一行: ctrl+y(向下滚动一行) ctrl+e(向上滚动一行)(助记词: yes!) c. 注意这个屏幕滚动和光标移动的区别: 屏幕滚动是屏幕本身的滚动, jk等只是光标在当前一屏内上下移动, 屏幕本身并不滚动, 只有当光标到达最顶端或最低端的时候, jk才会滚动屏幕. 而ctrl_y, ctrl_e即使光标在屏幕的中间, 屏幕仍然会滚动! 单行滚动的操作也是必要的, 就是屏幕滚动的调节 有不同的尺度, 有大尺度的滚动, 也有中等尺度的, 或者精细 尺度的 滚动 , 这些都是必要的
屏幕的理解: 可以把屏幕理解为, 想象成一个 "垂直 悬挂 在 前面的一个 屏幕", 它可以像前/向后(对应的就是 向上/向下)滚动/卷动!
关于relative下的absolute div定位 隐藏的问题?
通常情况下, 是不会有问题的, 可能的错误原因是:
- div.relative下有多个 子元素, 为了让某个 absolute的div元素 参考另一个 子元素来定位,就设置了div.relative *下的所有子元素都成为absoute了. 这就产生了一个隐藏的错误结果,那就是让div.absolute下有嵌套的子元素, 都成为了绝对定位 , 不只是relative下的直接子元素 是absolute.
- 另外, 除了要absolute的子元素外, 其他 作为"被参考"的元素, 则不需要 绝对定位!!
- 也就是说, 其实是很键单的一个问题: 就只是 如下所是的: div.relative > div.absolute 就可以了!
网页的宽度如何设置? 一般网页的宽度, 可以根据内容进行自适应 排版布局, 通常如果要设置固定宽度, 设置为 960px/ 970px, 如bootstarp的栅格系统的 medium的container的宽度 ,就是设置成的 970px的. 最好不要 设置成百分比, 因为当viewport视口 改变时, 宽度也会自动改变, 就会显得过于随意, 不好!
**z-index 属性的使用: 1. 只有当div 设置了position=relative/absolute/fixed 这三者之一的时候, z-index属性才会被激活, 即才会有效! (注意, 即使是div.relative的 z-index也是同样 要 会 生效的!! )通常要想 某个div一定要 保证 在最上面的时候, 可以设置 : z-index: 99999 (5个9 就好了) **
手机网页的部署和开发
手机网页(网站)可以通过 传统 PC 网站 经过优化/修改后 得到. 要想手机能够访问, 一样的, 要把代码 部署到 internet 公网的 服务器上! 跟PC 端的网站的部署基本上 时相同的. 同样的要有 主机空间, 域名, 公网地址等等. 只是注意:
- 手机网站的内容 和功能, 要比pc端的网站 要精简, 有些功能不能放在手机上实现或展示, 要经过评估和考虑
- 要通过
<meta>标签来进行说明和声明, 主要有这样几个:
在查看bootstrap教程中，碰到
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ViewPort <meta>标记用于指定用户是否可以缩放Web页面，如果可以，那么缩放到的最大和最小缩放比例是什么。使用ViewPort <meta>标记还表示文档针对移动设备进行了优化。ViewPort <meta>标记的content值是由指令及其值组成的以逗号分隔的列表。
例：
<meta name=”viewport” content=”width=240, height=320, user-scalable=yes, initial-scale=2.5, maximum-scale=5.0, minimun-scale=1.0”>
width和height指令分别指定视区的逻辑宽度和高度。(可以指定为一个具体的数字, 也可以指示为关键字: width=200, height=device-height...)他们的值要么是以像素为单位的数字，要么是一个特殊的标记符号。width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。
user-scalable指令指定用户是否可以缩放视区，即缩放Web页面的视图。值为yes时允许用户进行缩放，值为no时不允许缩放。
initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面，设为1.0则将显示未经缩放的Web文档。
maximum-scale和minimum-scale指令用于设置用户对Web页面缩放比例的限制。值的范围为0.25至10.0之间。与initial-scale相同，这些指令的值是应用于视区内容的缩放比例。
所有智能手机浏览器都支持ViewPort <meta>标记的width和user-scalabel指令。但是Opera Mobile不使用user-scalable指令，而是主张用户应始终保留在移动浏览器中缩放Web页面的能力。
- 手机网站的域名, 可以另外单独取一个域名, 但是这个通常不是太好, 因为会割裂品牌的 印象效果, 通常采用第二种方式, 即子域名的方式, 申请两个主域名下的子域名, pc端用 www.companyname.com, 移动端的站点用: m.companyname.com
在firefox的 调试器中, 在console 中, 也是可以 检查到 css 的 错误和警告的! 因为当css写错如属性关键字 写错了的时候, css是不起作用的, 这时后, 就可以通过 这个console 的 css 标签页 去查看css的错误!!!
特别注意: 在css style中的 width: height等尺寸后面一 定要 加上px, 否则, 就表示 尺寸的倍数, 但是, 在javascript中, 可以直接 只使用 数字, 后面不必加上px等单位. 因为js中默认 的就表示 px.
在js或php等语言中, 要实现某个功能时, 首先要 看看该语言有没有 内置的 实现功能的函数 不要自己去写了.
**在:not和filter方法过滤中, 是对前面的 用选择器选出来的元素 "集合", 做进一步的筛选. 也就是说, 前面要 有被调用的对象: 如: $('div').fiter(':not(:animated)'), $("div:not(:animated)") **