jQuery에서 $()의 세 가지 사용 사례

이번에는 jQuery의 세 가지 $() 사용 사례를 소개하겠습니다. jQuery의 세 가지 $() 유형을 사용할 때 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

$ 기호는 jQuery "클래스"의 별칭이며 $()는 jQuery 개체를 구성합니다. 따라서 "$()"는 jQuery의 constructor라고 할 수 있습니다(개인적인 의견, 하하!).

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

<p>one</p> 
<p> 
<p>two</p> 
</p> 
<p>three</p> 
<a href="#" id="test" onClick="jq()" >jQuery</a>

이 HTML의 작업은 다음 명령문입니다.

alert($("p>p").html());

$()는 쿼리 표현식입니다. 즉, "p>p와 같은 쿼리 표현식을 사용합니다. " jQuery 개체가 생성된 다음 "html()"은 위 HTML 코드 조각의 [2]인 html 콘텐츠를 표시한다는 의미입니다. 또 다른 예:

$("<p><p>Hello</p></p>").appendTo("body");

$()는 문자열입니다. 이러한 문자열을 사용하여 jQuery 개체를 구성한 다음 이 문자열을 에 추가합니다.
2. $()는 특정 DOM 요소인 $(element)일 수 있습니다. 예를 들어 일반적으로 사용되는 DOM 개체에는 문서, 위치, 양식 등이 포함됩니다. 다음 코드 줄은

$(document).find("p>p").html()); 
$()中的document是一个DOM元素，即在全文寻找带<p>的<p>元素，并显示<p>中的内容。

3입니다. $()는 $(function), 즉 $(document).ready()의 약어일 수 있습니다. 예를 들어, 일반적인 형식은 다음과 같습니다:

$(document).ready(function(){ 
alert("Hello world!"); 
});

변수 연산:

$(function(){ 
alert("Hello world!"); 
});

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

$(&#39;p>ul&#39;)是<p>的直接后代里找<ul>； 
而$(&#39;p ul&#39;)是在<p>的所有后代里找<ul>。

2) jQuery 객체의 여러 메소드를 사용하세요 ( find(), Each() 등의 메소드)
$("#orderedlist).find("li")는 $("#orderedlist li").each()가 모든 li를 반복하는 것과 같습니다. 표현식 "#"은 HTML의 ID를 나타냅니다. 예를 들어 위의 예에서 "#orderedlist"는 "ID가 orderlist가 위치한 태그입니다"라는 의미입니다.
****************** *****.******************************************** *
1, 태그 선택 선택자 $('p'), class 선택자 $('.myClass') 및 id 선택자 $('#myId')는 상대적으로 간단하여 할 말이 많지 않지만, 한 가지입니다 - $('p>ul.')과 $('p ul')은 다릅니다.
$('p>ul')은

의 직계 자손의

에서 발견됩니다. $('p ul')은 ;p>의 모든 자손에서
에서 발견됩니다. 따라서 $('#sId>li')는 ID가 "sId"인 모든
• , 비록 이것이 찾고 있는 범위가 아닌
• .horizontal)')은 클래스를 참조합니다. "sId"라는 이름에 li의 모든 자손에는 수평 클래스의 요소가 없습니다. 여기서는 부정 의사 클래스가 있습니다.
  여기에 반환되는 것은 jQurey 객체입니다. , 배열 객체 및 이 jQuery 객체의 길이를 사용할 수 있습니다.
  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()—— 
  $(&#39;td:contains("Henry")&#39;).prev()——内容包含有"Henry"的<td>的上一个节点 
  $(&#39;td:contains("Henry")&#39;).next()——内容包含有"Henry"的<td>的下一个节点 
  $(&#39;td:contains("Henry")&#39;).siblings()——内容包含有"Henry"的<td>的所有兄弟节点

  还有一个，就是end()，这个方法肯定是用在某个DOM节点执行了某一动作之后，还想在与其相关的节点上执行类似动作，这里就要用到end()。用过end()方法之后，所返回的是执行动作的那个节点的父节点上。举个例子
  

  $(...).parent().find(...).addClass().end()

  这里执行动作的节点是find(...)，是一个数组对象，它所做的动作是“addClass()”，之后，用了个end()，这时所返回的东东就是指向了parent()所指向的节点，也就是执行“addClass()”动作的那个数组对象的父节点。
  5、要直接访问DOM元素，可用get(0)的方法，如
  

  $('#myelement').get(0)，也可缩写成$('#myelement')[0]

  相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

  推荐阅读：

  js仿jquery步骤详解
  

  JS中时间单位比较的方法
  

  위 내용은 jQuery에서 $()의 세 가지 사용 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!