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 相关文章推荐
解密效果
Jun 23 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 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
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
python模块smtplib学习
2018/05/22 Python
Python并行分布式框架Celery详解
2018/10/15 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
Pandas中resample方法详解
2019/07/02 Python
Python中格式化字符串的四种实现
2020/05/26 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
应用艺术毕业生的自我评价
2013/12/04 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
高二语文教学反思
2016/02/16 职场文书
导游词之太原天龙山
2020/01/02 职场文书
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js