>  기사  >  웹 프론트엔드  >  jQuery의 세 가지 $()_jquery

jQuery의 세 가지 $()_jquery

WBOY
WBOY원래의
2016-05-16 18:37:421146검색

1. $()는 css 선택자, Xpath 또는 html 요소인 $(expression)일 수 있습니다. 즉, 위의 표현식을 통해 대상 요소가 일치됩니다.
예를 들어 $("a")로 생성된 객체는 CSS 선택기를 사용하여 jQuery 객체를 생성합니다. 이는 모든 태그를 선택합니다. 예:
$("a").click(function(){...})
은 페이지의 링크를 클릭할 때 트리거되는 이벤트입니다. 정확하게 말하면 jQuery는
태그를 사용하여 $("a") 객체를 생성하며 click() 함수는 이 jQuery 객체의 (이벤트) 메서드입니다.

예를 들어 다음과 같은 HTML 코드가 있습니다.

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

one



two

>

3
jQuery

而操作这段HTML的是如下一条语句:
alert($("div>p").html());

$()中的是一个查询表达式,也就是用“div>p”这样一个查询表达式构建了一个jQuery对象,然后的“html()”意思是显示其html内容,也就是上面HTML代码段的[two]。再如:
$("

Hello

").appendTo("body");
$()는 문자열입니다. 이러한 문자열을 사용하여 jQuery 개체를 구성한 다음 이 문자열을 에 추가합니다.

2. $()는 특정 DOM 요소인 $(element)일 수 있습니다. 예를 들어 일반적인 DOM 객체에는 다음 코드 줄과 같이 문서, 위치, 양식 등이 포함됩니다.
$(document). find("div>p").html())
$()의 문서는 DOM 요소입니다. 즉, 전체 텍스트에

display


3. $()는 $(document).ready()의 약어일 수 있습니다.
$ (document).ready (function(){
alert("Hello world!");
})
변수 연산:
$(function(){
alert(" Hello world!");
})

HTML 문서에서 요소를 선택하기 위해 jQuery에는 두 가지 방법이 있습니다.
1) $("div>ul a")와 같은 ul의 a 태그를 의미합니다.
그러나 $('div>ul') 과 $('div ul') 사이에는 차이가 있습니다.


$(' div>ul') 처럼 보입니다. $('div ul')은

을 찾습니다. >2) $( "#orderedlist li")와 같이 jQuery 객체의 여러 메서드(예: find(), Each() 메서드 등)
$("#orderedlist).find("li")를 사용합니다. Each()도 모든 li를 반복하며, 표현식의 "#"은 HTML의 ID를 나타냅니다. 예를 들어 위 예에서 "#orderedlist"는 "ID가 orderlist가 위치한 태그입니다."를 의미합니다.

******************************************** **** **********************

1. 태그 선택자 $('p'), 클래스 선택자 $('.myClass '), id 선택자 $('#myId')는 상대적으로 간단하여 할 말이 많지 않습니다. 하지만 한 가지가 있습니다. $('div>ul')과 $('div ul') 사이에는 차이점이 있습니다.
$('div>ul')은

    을 찾을 수 있으며 $('div ul')은
    의 모든 하위 항목 중에서
      을 검색합니다.
      따라서 $('#sId>li')는 ID가 "sId"인 모든
    • 하위 노드를 선택합니다. 검색 범위(발견된 DOM 객체는 해당 수준의 DOM 객체일 뿐입니다.) 그리고 $('#sId li:not(.horizontal)')은 클래스 이름 "sId"에 있는 li의 모든 자손이 수평 클래스의 모든 요소를 ​​갖고 있지 않음을 의미합니다. ——not() 여기서는 부정 의사 클래스입니다.
      여기에 반환되는 것은 배열 객체인 jQurey 객체이며, 이 jQuery 객체의 길이는 .length()로 얻을 수 있습니다.
      2. 요소의 속성입니다. 속성 선택자입니다.
      []에 @가 없습니다. 이는 []가 요소의 자손임을 나타냅니다.
      $('ul li') 및 $('ul[li]')는 모두 jQuery 배열을 반환하지만 의미는 정반대입니다. 전자는
        아래의
      • 의 모든 하위 항목을 찾는 것이고, 후자는 하위 항목이
        • 배열을 찾는 것입니다.
          XPath에서 "...로 시작하는" 속성을 찾으려면 ^=를 사용하세요. 이름 속성이 mail로 시작하는 입력 요소를 찾으려면
          $('input[@ name^ ="mail"]')
          "...로 끝나는" 속성을 찾으려면 $=를 사용하세요.
          시작이나 끝이 없는 속성을 찾으려면 *=
          3. 위에서 언급한 CSS 및 XPath에 속하지 않는 선택기는 ":"으로 표시되는 사용자 정의 선택기입니다. 여기서 사용되는 선택기는 first, :last, :parent, :hidden, :visible, :odd , :입니다. even, :not('xxx'), ":eq(0)" (0에서 시작), :nth(n), :gt(0), :lt(0), :contains("xxx")
          예: $('tr:not([th]):even')은

          4를 포함하지 않는 요소의 모든 하위 항목 중 짝수 항목을 의미합니다. . 단순히 설명되지 않은 몇 가지가 더 있습니다.
          $('th').parent()——
          $('td:contains("Henry")').prev()—— 콘텐츠에는 " Henry"의 이전 노드가 포함됩니다
          $('td:contains("Henry")').next()——"Henry"의의 콘텐츠 이전 노드
          $('td:contains("Henry")').siblings() ——내용에 "Henry"가 포함된
          의 모든 형제 노드입니다. DOM 노드가 특정 작업을 수행하고 원하는 경우에 사용됩니다. 관련 노드에서 유사한 작업을 수행하기 위해 여기서는 End()가 사용됩니다. end() 메서드를 사용한 후 반환되는 것은 작업을 수행하는 노드의 부모 노드입니다. 예를 들어
          $(...).parent().find(...).addClass().end()
          여기서 작업을 수행하는 노드는 find(...)입니다. 배열 객체인 경우 취하는 동작은 "addClass()"이고, 이때 반환된 내용은 parent()가 가리키는 노드, 즉 "addClass()"를 가리킵니다. 해당 배열 개체의 상위 노드가 수행됩니다.

          5. DOM 요소에 직접 액세스하려면
          $('#myelement').get(0)과 같은 get(0) 메서드를 사용할 수 있습니다. 이 메서드는 $(라고도 함) '#myelement') [0]
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.