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보다 크면 표시됩니다. 그러나 a34de1251f0d9fe1e645927f19a896e8는 예외입니다. jQuery는 a34de1251f0d9fe1e645927f19a896e8 요소의 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 操纵元素大小及位置信息的简单举例。