window.onload事件
window.onload事件是js中用于当窗体加载完毕后执行的事件。
window.onload = function () { |
- 上面的代码,当页面加载完毕后只会执行最后一个,因为最后一个window.onload赋值语句,会将前面所有设置的function () { }都覆盖掉。
- 如果直接通过js动态注册事件,因为注册事件的时候是通过赋值语句设置的,所以只会应用最后一次注册的事件。
jQuery实现类似的效果
可以用jQuery的ready事件实现类似window.onload的页面加载完毕效果。
jQuery(function () { |
- 使用jQuery注册的事件,不会被覆盖,当注册了多个事件处理程序后。当事件被触发时,会依次执行这些事件。
- window.onload事件与jQuery的ready事件是有区别的。
window.onload事件与jQuery的ready事件区别:
- window.onload需要等待页面全部加载完毕,其中包含页面中的标签所引用的其他资源。(整个页面需要全部加载完毕)。
- jQuery的ready事件,只要等待页面中所有的标签下载完毕就会被触发。所以用户“感觉”的角度来说,使用ready事件会让用户感觉速度更快了。
$.each()的用法
$.each()方法是对数组,json和dom结构等的遍历。第一个参数是要传递的数组,第二个参数是传递的匿名函数。匿名函数有两个参数,第一个表示遍历的数组的下标,第二个表示下标对应的值。
普通数组
当使用each遍历普通数组的时候,索引就是键,值就是值。
var arrInt = [1, 2, 3, 4, 5, 6, 7]; |
键值对数组
var p = { 'name': '张三', 'age': 18, 'email': 'zs@yahoo.com' }; |
注意:在$.each()中跳出循环不能用break,需要使用return false;。
$.each(arrInt, function (key, value) { |
$.trim()的用法
去掉字符串两端的空格。
var msg = ' hello '; |
标签下载和解析完毕
标签下载完毕
当在浏览器地址栏输入一个URL并按下Enter时,会把URL封装成HTTP信息发送到服务器,请求资源。然后服务器把需要的资源(静态文件,HTML、CSS等)返回给浏览器。当浏览器下载好这些资源的时候,就是标签下载完毕,这个时候jQuery的ready事件被触发。
标签解析完毕
当浏览器发送请求给服务器,服务器返回静态资源给浏览器时,浏览器需要对HTML文本的每一个标签从上到下,进行逐行的解析,同时渲染到页面上(解析到script标签时下载js文件,直到碰到script的结束标签;解析link标签时下载CSS文件;解析到img标签时,会下载对应的src指定的资源),当所有内容都被解析完毕(最后一个html标签),同时每个标签中所包含的其他资源都下载完毕时,就是标签解析完毕,这个时候js的window.onload事件被触发。
$.map()的用法
遍历数组的每一个元素,并返回一个新的数组。第一个参数是要传递的数组,第二个参数传递一个匿名函数。
var arrInt = [10, 20, 30, 40, 50, 60, 70, 80, 90]; |
注意:当我们不知道一个函数有没有传递参数的时候,使用alert(arguments.length);即可知道函数传了多少个参数。
var arrIntNew = $.map(arrInt, function () {//不知道有没有参数 |
传入三个参数,并根据输出的值判断参数是什么。
var arrIntNew = $.map(arrInt, function (x, y, z) {//传入三个参数 |
jQuery对象和DOM对象
DOM对象
页面上的元素对象才叫做dom对象,数组、日期对象,这些不是dom对象。
var dvObj = document.getElementById('dv1');//dom对象 |
当直接使用dom对象的时候存在浏览器的兼容性问题。
var dvObj = document.getElementById('dv1');//dom对象 |
jQuery对象
可以把dom对象转换成jQuery对象,也可以把jQuery对象转换成dom对象。
var dvObj = document.getElementById('dv1');//dom对象 |
jQuery对象转换为dom对象
//var domDiv = $dvObj[0]; |
jQuery对象常用方法
从文本框获取和设置值
var $txtObj = $(document.getElementById('txt')); |
设置文本框CSS样式
$txtObj.css('border', '1px solid blue');//设置文本框的CSS样式 |
设置超链接
var $alink = $(document.getElementById('a1'));//超链接id |
jQuery选择器
id选择器
//js写法 |
标签选择器
//js写法 |
类选择器
//选取所有应用了cls类样式的元素 |
注册单击事件
//选取按钮并注册一个单击事件 |
隐式迭代
jQuery对象本质可以看成是一个包含一个dom数组的所有jQuery方法的容器。例如$('p').text('aaa');,$('p')返回一个装有所有p标签的dom数组(jQuery对象)。当调用text()方法时,jQuery会遍历内部dom数组,并调用每个dom元素对应的dom属性或方法。jQuery方法遍历内部dom数组的过程称为隐式迭代。
//$('p').text('大家都是p'); |
链式编程
链式编程的原理:return this;
通常情况下,只有设置操作才能使用链式编程,取值操作返回的是相应的值,不是对象本身。
$('p').text('大家都是p').css('border', '1px solid blue').css('width', '250px'); |
标签+类选择器
语法:$('标签.类');
//表示所有应用了test类样式的元素 |
组合选择器(复合选择器)
语法:$('选择器1,选择器2,选择器3,…');
$('.test,#btn1,p,span,div').css('backgroundColor', 'yellow'); |
层次选择器
后代元素选择器
语法:$('选择器1 选择器2');
使用空格隔开,表示选取选择器1下的所有的选择器2。
//选取页面上的所有的p元素,设置背景色为红色 |
子元素选择器
语法:$('选择器1 > 选择器2');
使用 > 隔开,表示选择器1下的是直接子元素的选择器2。
//选取页面上的所有的span,设置文字颜色为red |
相邻元素选择器
语法:$('选择器1 + 选择器2');,+表示后面紧跟着的兄弟。等价于$('选择器1').next('选择器2');。
$('选择器1 ~ 选择器2');,~表示后面的所有兄弟。等价于$('选择器1').nextAll('选择器2');。
$('选择器1').prev('选择器2');,表示选择器1上一个兄弟元素,且该元素满足选择器2。
$('选择器1').prevAll('选择器2');,表示选择器1前面的所有满足选择器2的兄弟元素。
$('选择器1').siblings('选择器2');,表示选择器1元素的所有满足选择器2的兄弟元素。
$('div + p').css('backgroundColor', 'red');//表示的是next(),后一个兄弟 |
注意:有些方法是会破坏链式编程中的对象的。比如:next()、nextAll()、prev()、prevAll()、siblings(),无参数的text()、val()、html()。当编程的链被破坏以后可以通过end()方法修复。
$(this).prevAll().css('background-color', 'yellow').end().nextAll().css('backgroundColor', 'blue'); |
attr方法和prop方法
设置属性
$('*').attr('attrName', 'aaaaa');//设置页面所有元素的attrName属性的值为aaaaa |
全选checkbox
//全选 |
prop方法
alert($('#chkBox').attr('checked'));//checked或者undefined |
注意:
- jQuery的attr方法相当于getAttribute()方法和setAttribute()方法。
- 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。例如,checked属性。
- 对于HTML元素我们自定义的DOM属性,在处理时,使用attr方法。
- jQuery1.6版本以后产生attr和prop方法的区别,之前的版本都是使用attr方法。