찾다
웹 프론트엔드JS 튜토리얼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 操纵元素大小及位置信息的简单举例。


성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
jquery实现多少秒后隐藏图片jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

axios与jquery的区别是什么axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

jquery怎么修改min-height样式jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

jquery怎么在body中增加元素jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

jquery中apply()方法怎么用jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

jquery怎么删除div内所有子元素jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

jquery怎么去掉只读属性jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

jquery on()有几个参数jquery on()有几个参数Apr 21, 2022 am 11:29 AM

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

PhpStorm 맥 버전

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구