jQuery入门基础知识学习指南

前端技术 2023/09/01 JavaScript

打开一个网页，如果 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 操纵元素大小及位置信息的简单举例。


本文地址：https://www.stayed.cn/item/2869

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案