jQuery入门基础知识学习指南


Posted in Javascript onAugust 14, 2015

打开一个网页,如果 HTML 没有完全加载完毕,就去操作页面中元素是不安全的,但是监测 HTML 是否加载完毕呢?jQuery 提供了一个 $(document).ready() 方法,任何 ready 中的代码在 HTML 完全加载完成后才会被执行。

$(document).ready(function() {
  console.log('ready!');
});

此外,它还有一个简写方式

$(function() {
  console.log('ready!');
});

$(document).ready() 中并非只能执行匿名方法,执行一个已命名的方法也是可以的:

function readyFn() {
  // code to run when the document is ready
}


$(document).ready(readyFn);

选择元素

jQuery 最基本的概念就是“选择一些元素,然后对它们做一些事情”。jQuery 支持大多数的 CSS3 选择器,另外还有一些非标准的选择器,详情见 http://api.jquery.com/category/selectors/,下面是一些常见选择器的用法:

$('#myId');         // 此 ID 在页面中必须唯一
$('div.myClass');      // 如果指定了元素类型,那么性能会有所提升
$('input[name=first_name]'); // 速度有点慢,尽量避免这种用法
$('#contents ul.people li');

$('a.external:first');
$('tr:odd');
$('#myForm :input');     // 选择表单中的所有 input 类元素
$('div:visible');
$('div:gt(2)');       // 页面中除了前 3 个 DIV 之外的所有 DIV
$('div:animated');      // 所有正在执行动画的 DIV

需要注意的地方

当使用 :visible 和 :hidden 这种伪选择器的时候,jQuery 实际上是去检测他们在页面中是否可见,还不是它们 css 中的 display 的值。也就是说,当一个元素在页面正的物理宽度和高度都大于 0,那么它就是可见的。但是 <tr> 例外,jQuery 会根据 <tr> 元素的 CSS 中 display 属性去判断元素是否可见。

jQuery 的具体实现方式可以参考一下代码:

jQuery.expr.filters.hidden = function( elem ) {
  var width = elem.offsetWidth, height = elem.offsetHeight,
    skip = elem.nodeName.toLowerCase() === "tr";

  // does the element have 0 height, 0 width,
  // and it's not a <tr>?
  return width === 0 && height === 0 && !skip ?

    // then it must be hidden
    true :

    // but if it has width and height
    // and it's not a <tr>
    width > 0 && height > 0 && !skip ?

      // then it must be visible
      false :

      // if we get here, the element has width
      // and height, but it's also a <tr>,
      // so check its display property to
      // decide whether it's hidden
      jQuery.curCSS(elem, "display") === "none";
};

jQuery.expr.filters.visible = function( elem ) {
  return !jQuery.expr.filters.hidden( elem );
};

选择器结果集中是否包含有元素

执行了一个选择器之后,如何判断选择器是否选择到了元素,可能会想当然的写下:

if ($('div.foo')) { ... }

其实这样写是不对的,因为不管选择器是否选择到元素,它都会返回一个对象,对象的布尔值肯定为 true,所以,所以此方法是行不通的。其实选择器返回对象中有一个 length 属性,通过这个属性,可以确定选择器中到底有几个元素,如果里面一个元素都没选择到,那么返回 0-false,如果选择到了元素,返回元素的实际数目-true。

if ($('div.foo').length) { ... }

给选择器做个缓存

每做一次选择器,jQuery 都要执行很多代码,如果你需要多次使用相同的一个选择器,最好给选择器做个缓存,以避免重复执行选择器。

var $divs = $('div');

    注意,此段代码中用作缓存变量的变量名以 $ 开头,这个美元符号在 JavaScript 中仅仅是一个普通的字符,没有其它特殊意义,这里使用 $ 开头,也仅仅是一个约定俗成的习惯,并非强制要求。

一旦选择器被缓存到变量中,就可以在变量中调用 jQuery 的方法了,跟调用选择器没什么两样。

另外还需要注意的是,选择器只能选择页面当前中的元素,如果在执行了选择器后又往页面中添加元素,那么后天加的元素并没有包含在之前的选择器中,除非往页面中添加元素后再次执行选择器。
带有过滤功能的选择器

有时候执行一个选择器之后,并非结果集中的所有元素都是我们想要的,那么就需要对结果集再进行一次过滤:

$('div.foo').has('p');     // 所有包含有 <p> 的 div.foo
$('h1').not('.bar');      // 没有被标记 bar 这个类的 h1 元素
$('ul li').filter('.current'); // 带有类 current 的无序列表
$('ul li').first();       // 无序列表中的第一个元素
$('ul li').eq(5);        // 第六个

选择表单元素

jQuery 提供了一些伪选择器来选择表单元素,非常有用。

  • :button 选择按钮
  • :checkbox 选择多选框
  • :checked 选择被选中的表单元素
  • :disabled 选择被禁用的表单元素
  • :enabled 选择被启用的表单元素
  • :file 选择 type="file" 的表单元素
  • :image 选择 type="image" 的表单元素
  • …… ……
$('#myForm :input'); // 选择所有可输入的表单元素

如何使用选择器

执行了选择器之后,就可以调用选择器中的方法了。这些方法分为两类:getter 和 setter,getter 返回结果集中第一个元素的属性,setter 可以设置结果集中所有元素的属性。
链式操作

jQuery 选择器中的大多数方法都会返回的都是 jQuery 对象本身,所以在调用一个方法后,可以继续在这个方法上继续调用其它方法,犹如连招一般:

$('#content').find('h3').eq(2).html('new text for the third h3!');

对于链式操作而言,保持代码的可读性很重要:

$('#content')
  .find('h3')
  .eq(2)
  .html('new text for the third h3!');

如果再链式操作中,选择器中的元素有所变化,那么可以用 $.fn.end 方法返回到最初的结果集:

$('#content')
  .find('h3')
  .eq(2)
    .html('new text for the third h3!')
  .end() // 返回最初的结果集
  .eq(0)
    .html('new text for the first h3!');

链式操作非常好用,以至于现在很多其它 JavaScript 库都加入了类似特性。但是对于链式操作也要小心使用,过长的链式操作会给代码的修改和调试带来困难。对于链式操作的长度没有硬性规定 — 只要你觉得能 Hold 住。

jQuery 对有些方法进行了“重载”,所有对某元素赋值或取值的时候所用的方法名是一样的,只是参数列表不同。当用 jQuery 方法对元素赋值的时候,它称为 setter,取值的时候称为 getter。setter 会对选择器中的所有所有元素赋值,getter 只取得选择器中第一个元素的值。

$('h1').html('hello world'); // setter
var str = $('h1').html();  // getter

setter 返回的是 jQuery 对象,可以继续在这个对象上调用 jQuery 方法(链式操作),getter 仅放回我们想要的值,返回值不是 jQuery 对象,所以不能继续链式操作了。
jQuery 操作 CSS

jQuery 可以很方便的设置或取得元素的 CSS 属性。

    CSS 属性如果要想在 JavaScript 中使用,多要转换成骆驼命名法(camel cased),例如 CSS 中的 font-size 属性,在 JavaScript 中对应的是 fontSize,但是 jQuery 的 $.fn.css 方法对此做了特殊处理,无论使用哪种写法都可以。

例如:

var strsize1 = $('h1').css('fontSize'); // 返回 "19px"
var strsize2 = $('h1').css('font-size'); // 同上

$('h1').css('fontSize', '100px');   // 给单个属性赋值
$('h1').css({ 'fontSize' : '100px', 'color' : 'red' }); // 给多个属性赋值

上面可以看到,一次性给多个属性赋值的时候,实际上传入的是一个对象,这个对象中包含了一些可以表示 CSS 属性的键-值对,在 jQuery 的很多 setter 方法中都有类似用法。
jQuery 操作元素的 class 属性

作为一个 getter,$.fn.css 确实很好用,但是应该尽量避免将其作为 setter 使用,因为一般不建议在 JavaScript 代码中包含太多的样式代码。比较靠谱的方法是把样式规则单独分开写成类(class),然后用 JavaScript 将类应用到元素上即可:

var $h1 = $('h1');

$h1.addClass('big');
$h1.removeClass('big');
$h1.toggleClass('big');

if ($h1.hasClass('big')) { ... }

尺寸

jQuery 中有很多方法可以用来获取或者修改元素的尺寸或者位置信息。

$('h1').width('50px');  // 设置所有 h1 元素的宽度
$('h1').width();     // 得到第一个 h1 元素的宽度

$('h1').height('50px'); // 设置所有 h1 元素的高度
$('h1').height();    // 得到第一个 h1 元素的高度

$('h1').position();   // 返回第一个 h1 元素
             // 的位置信息,此返回值是一个对象
             // 此位置是相对其父元素的位置的偏移量

这里只是对 jQuery 操纵元素大小及位置信息的简单举例。

Javascript 相关文章推荐
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 #Javascript
js实现Select列表各项上移和下移的方法
Aug 14 #Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 #Javascript
jQuery编程中的一些核心方法简介
Aug 14 #Javascript
CSS图片响应式 垂直水平居中
Aug 14 #Javascript
js实现选中复选框文字变色的方法
Aug 14 #Javascript
avalon js实现仿微博拖动图片排序
Aug 14 #Javascript
You might like
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
tornado框架blog模块分析与使用
2013/11/21 Python
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
python中global与nonlocal比较
2014/11/21 Python
python将文本转换成图片输出的方法
2015/04/28 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
python 反向输出字符串的方法
2018/07/16 Python
Python super()函数使用及多重继承
2020/05/06 Python
python自动化发送邮件实例讲解
2021/01/04 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
市场调查策划方案
2014/06/10 职场文书
就业意向协议书
2015/01/29 职场文书
毕业生学校组织意见
2015/06/04 职场文书
迎新生晚会主持词
2015/06/30 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书