jQuery回顾(一)

作者 Zhendong Ho 日期 2018-10-26
jQuery回顾(一)

window.onload事件

window.onload事件是js中用于当窗体加载完毕后执行的事件。

window.onload = function () {
alert('窗体加载完毕事件1');
};
window.onload = function () {
alert('窗体加载完毕事件2');
};
//结果:输出“窗体加载完毕事件2”
  • 上面的代码,当页面加载完毕后只会执行最后一个,因为最后一个window.onload赋值语句,会将前面所有设置的function () { }都覆盖掉。
  • 如果直接通过js动态注册事件,因为注册事件的时候是通过赋值语句设置的,所以只会应用最后一次注册的事件。

jQuery实现类似的效果

可以用jQuery的ready事件实现类似window.onload的页面加载完毕效果。

jQuery(function () {
alert('111111');
});
$(function () {
alert('222222');
});
//完整的写法
$(document).ready(function () {
alert('333333');
});
//结果:分别输出111111、222222和333333
  • 使用jQuery注册的事件,不会被覆盖,当注册了多个事件处理程序后。当事件被触发时,会依次执行这些事件。
  • window.onload事件与jQuery的ready事件是有区别的。

window.onload事件与jQuery的ready事件区别:

  1. window.onload需要等待页面全部加载完毕,其中包含页面中的标签所引用的其他资源。(整个页面需要全部加载完毕)。
  2. jQuery的ready事件,只要等待页面中所有的标签下载完毕就会被触发。所以用户“感觉”的角度来说,使用ready事件会让用户感觉速度更快了。

$.each()的用法

$.each()方法是对数组,json和dom结构等的遍历。第一个参数是要传递的数组,第二个参数是传递的匿名函数。匿名函数有两个参数,第一个表示遍历的数组的下标,第二个表示下标对应的值。

普通数组

当使用each遍历普通数组的时候,索引就是键,值就是值。

var arrInt = [1, 2, 3, 4, 5, 6, 7];
$.each(arrInt, function (key, value) {
alert(key + ',' + value); //0,1 1,2 2,3...
});

键值对数组

var p = { 'name': '张三', 'age': 18, 'email': 'zs@yahoo.com' };
$.each(p, function (k, v) {
alert(k + ',' + v);//name,张三 age,18 email,zs@yahoo.com
});

注意:在$.each()中跳出循环不能用break,需要使用return false;。

$.each(arrInt, function (key, value) {
if (key == 3)
{
return false;//跳出循环
}
});

$.trim()的用法

去掉字符串两端的空格。

var msg = '      hello    ';
alert($.trim(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];
var arrIntNew = $.map(arrInt, function (element, index) {//第一个参数表示数组元素,第二个参数表示下标
return element * 2;
});
alert(arrIntNew);//20,40,60,80,100,120,140,160,180

注意:当我们不知道一个函数有没有传递参数的时候,使用alert(arguments.length);即可知道函数传了多少个参数。

var arrIntNew = $.map(arrInt, function () {//不知道有没有参数
alert(arguments.length);//3
});

传入三个参数,并根据输出的值判断参数是什么。

var arrIntNew = $.map(arrInt, function (x, y, z) {//传入三个参数
alert(x + ',' + y + ',' +z);//10,0,undefined
};//由此可知,第一个参数表示数组元素,第二个参数表示下标,第三个暂时没用

jQuery对象和DOM对象

DOM对象

页面上的元素对象才叫做dom对象,数组、日期对象,这些不是dom对象。

var dvObj = document.getElementById('dv1');//dom对象
var d = new Date();//日期对象,不是dom对象
var arr = new Array();//数组对象,不是dom对象

当直接使用dom对象的时候存在浏览器的兼容性问题。

var dvObj = document.getElementById('dv1');//dom对象
dvObj.innerText = 'Hello World!';//可能存在浏览器的兼容性问题

jQuery对象

可以把dom对象转换成jQuery对象,也可以把jQuery对象转换成dom对象。

var dvObj = document.getElementById('dv1');//dom对象
//为了解决浏览器的兼容性问题,所以把dom对象转换成jQuery对象,然后再操作

//dom -> jQuery
var $dvObj = $(dvObj);//约定的命名规范,jQuery对象以$开头

//把dom对象转换为jQuery对象后,就可以调用对应的所有的jQuery对象的成员了
$dvObj.text('你好,世界!');

jQuery对象转换为dom对象

//var domDiv = $dvObj[0];
var domDiv = $dvObj.get(0);//这两种办法都可以把jQuery对象转换为dom对象。
domDiv.innerText = 'aaaa';

jQuery对象常用方法

从文本框获取和设置值

var $txtObj = $(document.getElementById('txt'));
alert($txtObj.val());//从文本框获取值
$txtObj.val('ccccc');//从文本框设置值

设置文本框CSS样式

$txtObj.css('border', '1px solid blue');//设置文本框的CSS样式

//设置多个样式
$txtObj.css({
'border': '1px solid blue',
'width': '200px',
'height': '20px',
color: 'yellow',
'background-color': 'blue',
paddingLeft: '30px',
'float': 'right',
fontSize: '28px'
});

设置超链接

var $alink = $(document.getElementById('a1'));//超链接id
$alink.text('百度');//innerText,设置超链接的文本
$alink.html('<img src="images/a.gif" />');//innerHtml,设置超链接的图片

jQuery选择器

id选择器

//js写法
document.getElementById('id');
//jQuery
$('#id');

标签选择器

//js写法
document.getElementByTagName('p');
//jQuery
$('p');

类选择器

//选取所有应用了cls类样式的元素
$('.cls');

注册单击事件

//选取按钮并注册一个单击事件
$('#btnSetText').click(function () {
//选取页面上的所有p元素
$('p').text('大家都是p');//隐式迭代
});

隐式迭代

jQuery对象本质可以看成是一个包含一个dom数组的所有jQuery方法的容器。例如$('p').text('aaa');,$('p')返回一个装有所有p标签的dom数组(jQuery对象)。当调用text()方法时,jQuery会遍历内部dom数组,并调用每个dom元素对应的dom属性或方法。jQuery方法遍历内部dom数组的过程称为隐式迭代

//$('p').text('大家都是p');

//--等价于-->

$('p').each(function () {
$(this).text('大家都是p');//遍历内部dom数组并调用dom方法
});

链式编程

链式编程的原理:return this;

通常情况下,只有设置操作才能使用链式编程,取值操作返回的是相应的值,不是对象本身。

$('p').text('大家都是p').css('border', '1px solid blue').css('width', '250px');

$('div').html('设置值').val('设置值');//设置值返回的是this,可以链式编程
$('div').html().text();//错误!获取值获取的是字符串而不是对象本身

标签+类选择器

语法:$('标签.类');

//表示所有应用了test类样式的元素
$('.test').css('backgroundColor', 'blue');

//所有应用了test类样式的p元素 (标签+类选择器)
$('p.test').css('backgroundColor', 'red');

组合选择器(复合选择器)

语法:$('选择器1,选择器2,选择器3,…');

$('.test,#btn1,p,span,div').css('backgroundColor', 'yellow');

层次选择器

后代元素选择器

语法:$('选择器1 选择器2');

使用空格隔开,表示选取选择器1下的所有的选择器2。

//选取页面上的所有的p元素,设置背景色为红色
$('p').css('backgroundColor', 'red');

//选取id为dv1下的所有p元素,设置背景色为蓝色
$('#dv1 p').css('backgroundColor', 'blue');//后代选择器

//选取页面上的所有的div下的p元素,设置背景色为黄色
$('div p').css('backgrounColor', 'yellow');//后代选择器

子元素选择器

语法:$('选择器1 > 选择器2');

使用 > 隔开,表示选择器1下的是直接子元素的选择器2。

//选取页面上的所有的span,设置文字颜色为red
$('span').css('color', 'red');

//选取body下的所有的span
$('body span').css('color', 'yellow');//后代选择器

//选取body下的直接子元素span
$('body > span').css('color', 'blue');//子元素选择器

相邻元素选择器

语法:$('选择器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(),后一个兄弟
//=>$('div').next('p');
$('div ~ p').css('backgroundColor', 'yellow');//表示的是nextAll(),后面的所有的兄弟
//=>$('div').nextAll('p');

//$('div').next() => $('div + *');
//$('div').nextAll() => $('div ~ *');

$('div').prev('span');//获取div的上一个兄弟元素,并且该元素必须是span
$('div').prevAll('span');//获取div前面的所有的兄弟
$('div').siblings('span');//获取当前元素的所有的兄弟元素

注意:有些方法是会破坏链式编程中的对象的。比如: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

//全选
$('#btnChkAll').click(function () {
$('input[type=checkbox]').attr('checked', true);//设置页面所有的复选框的选取状态为选中
});

//全不选
$('btnNoneChk').click(function () {
$('input[type=checkbxo]').attr('checked', false);//设置页面所有的复选框的选取状态为不选中
});

//反选
$('btnChkReverse').click(function () {
//通过自己遍历的方式,设置反选
//$.each($('input[type=checkbox]'), function (k, v) {
//$(v).attr('checked', !$(v).attr('checked'));
//});

$('input[type=checked]').attr('checked', function (index, attr_val)) {
return !attr_val;
}
});

prop方法

alert($('#chkBox').attr('checked'));//checked或者undefined

alert($('#chkBox').prop('checked'));//true或者false

注意

  • jQuery的attr方法相当于getAttribute()方法和setAttribute()方法。
  • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。例如,checked属性。
  • 对于HTML元素我们自定义的DOM属性,在处理时,使用attr方法。
  • jQuery1.6版本以后产生attr和prop方法的区别,之前的版本都是使用attr方法。