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