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也能包含文件
Oct 26 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
使用Angular CLI生成路由的方法
Mar 24 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 Javascript
React更新渲染原理深入分析
Dec 24 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
dedecms模版制作使用方法
2007/04/03 PHP
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
详解ES6中的let命令
2020/04/05 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
Python是编译运行的验证方法
2015/01/30 Python
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
大学团日活动新闻稿
2014/09/10 职场文书
公司收款委托书范本
2014/09/20 职场文书
大学生毕业个人总结
2015/02/15 职场文书
2014年度个人总结范文
2015/03/09 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
招商银行工作证明
2015/06/17 职场文书
Redis读写分离搭建的完整步骤
2021/09/14 Redis
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang