jQuery 기본 학습 가이드_jquery

웹 페이지를 엽니다. 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의 표시 값이 아니라 페이지에 표시되는지 여부를 감지합니다. 즉, 페이지에 있는 요소의 물리적 너비와 높이가 모두 0보다 크면 표시됩니다. 그러나 는 예외입니다. jQuery는 요소의 CSS 표시 속성을 기반으로 요소가 표시되는지 여부를 결정합니다.

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>&#63;
  return width === 0 && height === 0 && !skip &#63;

    // then it must be hidden
    true :

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

      // 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여야 하므로 이 방법은 작동하지 않기 때문입니다. 실제로 선택기가 반환하는 개체에는 길이 속성이 있습니다. 이 속성을 통해 선택기에 요소가 몇 개 있는지 확인할 수 있습니다. 요소가 선택되면 0-false가 반환됩니다. 실제 요소 수가 반환됩니다.

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는 양식 요소를 선택하는 데 매우 유용한 몇 가지 유사 선택기를 제공합니다.

• :버튼 선택 버튼
• :체크박스 여러 체크박스 선택
• :선택한 양식 요소를 선택합니다
• :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 操纵元素大小及位置信息的简单举例。