1.document.querySelector

document.querySelector(containerSelector);获取类中为containerSelector的第一个元素:

document.querySelector("p.example");获取class="example" 的第一个元素:

document.querySelectorAll();获取到所有元素;

2.getBoundingClientRect()

该方法返回一个矩形对象，包含属性：left、top、right和bottom,width

document.getElementById('box'); // 获取元素

getBoundingClientRect().top; // 元素上边距离页面上边的距离

getBoundingClientRect().right; // 元素右边距离页面左边的距离

getBoundingClientRect().bottom; // 元素下边距离页面上边的距离

getBoundingClientRect().width; // 元素宽度

3.visibility 页面可见性API

visibility. 其有两个常用属性值：hidden与visible. 分别表示不可见与可见;

typeof document.msHidden != "undefined"可以用来区分IE9浏览器还是IE10浏览器。

与_原生属性事件_对应关系如下：

pageVisibility.hidden === document.hidden（兼容处理）

pageVisibility.visibilityState=== document.visibilityState（兼容处理）

pageVisibility.visibilitychange(function() { /* this指的就是pageVisibility */ }); === document.addEventListener("visibilitychange", function() {});（兼容处理）alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离

4 关于表单form

form>为用户创建可见的HTML表单

文本输入框:<input type="text" name="username" placeholder="请输入用户名">

value="预先设置的值可以显示出来

密码输入框:<input type="password" value="lzy" name="password" placeholder="请输入密码">

多选框:星期一< input type="checkbox" value="dw" name="week">

星期二 <input type="checkbox" value="da" name="week">

星期三< input type="checkbox" value="dd" name="week">

单选框：<男 input type="radio" name="sex" value="men">

女 <input type="radio" name="sex" value="women">

<!--规则：

1、先写类型

2、再命名

3、最后赋值

-->

文件按钮: <input type="file" >

按钮: <input type="button" value="提交">

提交按钮:< input type="submit" value="确认">

重置按钮 <input type="reset" value="重置">

看不到的表单: input type="hidden" name="hidden" value="no watch">

下拉框--

</select>

多行文本框内容多的时候用--<textarea cols="20" rows="10"> </textarea>�

email输入框-<input type="email" name="user_email" >

提交按钮 <input type="submit" value="提交">

范围指示器:<input type="range" name="points" min="1" max="10" >�

进度条:<meter value="5" min="1" max="100"></meter>

日期:

Date: <input type="date" name="user_date" >�

week:< input type="week" name="user_date">�

Month: <input type="month" name="user_date">

datetime: <input type="datetime" name="user_date">

time: <input type="time" name="user_date">

搜索: <input type="search"> <input type="submit" value="提交">

// Math.random()是一个数学函数，它的作用是产生一个0~1的随机数

5.fancybox 图片弹出插件

$('#xc div a').fancybox({

openEffect:'elastic',

closeEffect:'elastic',

closeBtn:'false',

autoPlay:'true',

helpers:{

// 显示工具箱的按钮

buttons: {},

// 显示图片的标题，inside：在里面

title:{type:'inside'},

// 缩略图居中显示

thumbs: {alwaysCenter:true},

// before：在...之前 load：加载

beforeLoad:function(){

this.title = $(this.element).text();

}

});

坚持到底，才能笑到最后，人可以被自己打败，也可以战胜自己，没有人会知道下一秒将发生什么，只要这一秒不放弃，下一秒就有可能出现奇迹！

HTML5学习小记三