浏览器前端软相关

window

window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。

对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。(包含地址栏，菜单栏，标签栏)

navigator

• navigator.appName：浏览器名称；
• navigator.appVersion：浏览器版本；
• navigator.language：浏览器设置的语言；
• navigator.platform：操作系统类型；
• navigator.userAgent：浏览器设定的User-Agent字符串。

navigator的信息可以很容易地被用户修改，不要用这些信息判断浏览器版本适配不同代码；正确的方法是充分利用JavaScript对不存在属性返回undefined的特性，直接用短路运算符||计算；

screen

• screen.width：屏幕宽度，以像素为单位；
• screen.height：屏幕高度，以像素为单位；
• screen.colorDepth：返回颜色位数，如8、16、24。

location

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

//要加载一个新页面，可以调用location.assign()
if (confirm('重新加载当前页' + location.href + '?')) {
    location.reload();
} else {
    location.assign('/'); // 设置一个新的URL地址
}

　　

document

　　document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。

　　document的title属性是从HTML文档中的<title>xxx</title>读取的，但是可以动态改变：

　　Cookie安全问题

　　document对象还有一个cookie属性，可以获取当前页面的Cookie。

　　Cookie是由服务器发送的key-value标示符。因为HTTP协议是无状态的，但是服务器要区分到底是哪个用户发过来的请求，就可以用Cookie来区分。当一个用户成功登录后，服务器发送一个Cookie给浏览器，例如user=ABC123XYZ(加密的字符串)...，此后，浏览器访问该网站时，会在请求头附上这个Cookie，服务器根据Cookie即可区分出用户。

由于JavaScript能读取到页面的Cookie,如果引入的第三方的JavaScript中存在恶意代码，则www.foo.com网站将直接获取到www.example.com网站的用户登录信息。为了解决这个问题，服务器在设置Cookie时可以使用httpOnly，设定了httpOnly的Cookie将不能被JavaScript读取。这个行为由浏览器实现，主流浏览器均支持httpOnly选项，IE从IE6 SP1开始支持。为了确保安全，服务器端在设置Cookie时，应该始终坚持使用httpOnly。

　　

history

history对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮。

这个对象属于历史遗留对象，对于现代Web页面来说，由于大量使用AJAX和页面交互，简单粗暴地调用history.back()可能会让用户感到非常愤怒。

新手开始设计Web页面时喜欢在登录页登录成功时调用history.back()，试图回到登录前的页面。这是一种错误的方法。

任何情况，你都不应该使用history这个对象了。

DOM插入

空的dom，直接innerHTML=“”；

　　使用innerHTML一定要注意对字符编码避免XSS攻击；

　　innerText不返回隐藏元素的文本，而textContent返回所有文本。另外注意IE<9不支持textContent（两者都自动对字符串进行HTML编码，保证无法设置任何HTML标签）

非空插入最后一个子节点：appendChild();

如果我们要把子节点插入到指定的位置:insertBefore(newDom,childIndexDom);

删除：removeChild

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

　注意到删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。　

Jquery

直接改变：$().html();

插入：$().append(); 插入

　　　$().prepend();添加到最前

最后另外注意，如果要添加的DOM节点已经存在于HTML文档中，它会首先从文档移除，然后再添加，也就是说，用append()，你可以移动一个DOM节点。

插入到指定节点：$().after()和$().before();(不同于js的insertBefore的子节点，此处为同级节点)

选择器

js:

document.getElementById('drink-menu');

document.getElementsByTagName('dt');

jquery：

$("parent>child");//直接子节点
$('ul.lang li:first-child'); // 第一个子节点
$('ul.lang li:last-child'); // 最后一个子节点
$('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素
$('div:visible'); // 所有可见的div
$('div:hidden'); // 所有隐藏的div

　　表单选择

• :input：可以选择<input>，<textarea>，<select>和<button>；

• :file：可以选择<input type="file">，和input[type=file]一样；

• :checkbox：可以选择复选框，和input[type=checkbox]一样；

• :radio：可以选择单选框，和input[type=radio]一样；

• :focus：可以选择当前输入焦点的元素，例如把光标放到一个<input>上，用$('input:focus')就可以选出；

• :checked：选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，如$('input[type=radio]:checked')；

• :enabled：可以选择可以正常输入的<input>、<select> 等，也就是没有灰掉的输入；

• :disabled：和:enabled正好相反，选择那些不能输入的。

同级元素过滤查找

<!-- HTML结构 -->
<ul class="lang">
    <li class="js dy">JavaScript</li>
    <li class="dy">Python</li>
    <li id="swift">Swift</li>
    <li class="dy">Scheme</li>
    <li name="haskell">Haskell</li>
</ul>


var swift = $('#swift');

swift.next(); // Scheme
swift.next('[name=haskell]'); // 空的jQuery对象，因为Swift的下一个元素Scheme不符合条件[name=haskell]

swift.prev(); // Python
swift.prev('.dy'); // Python，因为Python同时符合过滤器条件.dy


//过滤和函数式编程的map、filter类似，jQuery对象也有类似的方法。
var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme
//或者传入函数，函数内部this被绑定为DOM对象，不是jQuery对象
var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
    return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
}); // 拿到Swift, Scheme

//map()方法把一个jQuery对象包含的若干DOM节点转化为其他对象：
var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var arr = langs.map(function () {
    return this.innerHTML;
}).get(); // 用get()拿到包含string的Array：['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']

//一个jQuery对象如果包含了不止一个DOM节点，first()、last()和slice()方法可以返回一个新的jQuery对象，把不需要的DOM节点去掉
var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var js = langs.first(); // JavaScript，相当于$('ul.lang li:first-child')
var haskell = langs.last(); // Haskell, 相当于$('ul.lang li:last-child')
var sub = langs.slice(2, 4); // Swift, Scheme, 参数和数组的slice()方法一致

　　

　　事件：

click: 鼠标单击时触发； dblclick：鼠标双击时触发； mouseenter：鼠标进入时触发； mouseleave：鼠标移出时触发； mousemove：鼠标在DOM内部移动时触发； hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave

keypress：按一次键后触发。

change：当<input>、<select>或<textarea>的内容改变时触发；

ready：当页面被载入并且DOM树完成初始化后触发。ready仅作用于document对象。由于ready事件在DOM完成初始化后触发，且只触发一次，所以非常适合用来写其他的初始化代码。

事件取消绑定

// 10秒钟后解除绑定:
function hello() {
    alert('hello!');
}
a.click(hello); // 绑定事件
a.off('click', hello);//取消绑定


// 绑定事件:
a.click(function () {
    alert('hello!');
});

// 解除绑定:
a.off('click', function () {
    alert('hello!');
});
//这种写法无效这是因为两个匿名函数虽然长得一模一样，但是它们是两个不同的函数对象
//可以使用a.off('click')取消所有的click

$(selector).unbind(event,function)//未传参数的话，会取消绑定所有绑定的事件


//解决某些改变有js程序控制时不能触发事件的情况
var input = $('#test-input');
input.change(function () {
    console.log('changed...');
});
//此时不会触发，我们可以手动调用input.change(); 相当于input.trigger('change')，它是trigger()方法的简写。

//浏览器安全限制在浏览器中，有些JavaScript代码只有在用户触发下才能执行，例如，window.open()函数；放在用户操作的回调函数中是可以运行的