>  기사  >  웹 프론트엔드  >  jQuery에서 $()의 세 가지 사용 사례

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

php中世界最好的语言
php中世界最好的语言원래의
2018-04-23 10:56:291244검색

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

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

1. $()는 $(expression), 즉 css selector, Xpath 또는 html 요소일 수 있습니다. 즉, 대상 요소는 위의 표현식을 통해 일치됩니다.
예를 들어 $("a")로 생성된 객체는 CSS 선택기를 사용하여 jQuery 객체를 생성합니다. 이는 모든 7d01d0a03a49fceb57d12197d8d196cb 태그를 선택합니다. 예:
$("a").click(function(){...})
은 페이지의 링크를 클릭할 때 트리거 이벤트입니다. 정확하게 말하면 jQuery는 7d01d0a03a49fceb57d12197d8d196cb 태그를 사용하여 $("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 개체를 구성한 다음 이 문자열을 b2636b4e0e32f7cd731b9073897693b7에 추가합니다.
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')은 e388a4556c0f65e1904146cc1a846bee의 직계 자손의 ff6d136ddc5fdfeffaf53ff6ee95f185에서 발견됩니다. $('p ul')은 ;p>의 모든 자손에서 ff6d136ddc5fdfeffaf53ff6ee95f185에서 발견됩니다. 따라서 $('#sId>li')는 ID가 "sId"인 모든 25edfb22a4f469ecb59f1190150159c6 , 비록 이것이 찾고 있는 범위가 아닌 25edfb22a4f469ecb59f1190150159c6 .horizontal)')은 클래스를 참조합니다. "sId"라는 이름에 li의 모든 자손에는 수평 클래스의 요소가 없습니다. 여기서는 부정 의사 클래스가 있습니다.
여기에 반환되는 것은 jQurey 객체입니다. , 배열 객체 및 이 jQuery 객체의 길이를 사용할 수 있습니다.
2. 이는
속성 선택기
입니다.
[]에는 @가 없습니다. ​[]가 요소의 자손임을 나타냅니다. $('ul li') 및 $('ul[li]')는 모두 jQuery 배열을 반환하지만 둘의 의미는 정반대입니다. 전자는 25edfb22a4f469ecb59f1190150159c6의 하위 항목을 모두 찾는 것이고, 후자는 하위 항목이 25edfb22a4f469ecb59f1190150159c6인 모든 ff6d136ddc5fdfeffaf53ff6ee95f185 배열을 찾는 것입니다. XPath에서 "...로 시작하는" 속성을 찾으려면 ^=를 사용하세요. 이름 속성이 mail로 시작하는 입력 요소를 찾으려면
$('input[@name^=" mail" ]')
"...로 끝나는" 속성을 찾으려면 $=를 사용하세요.
"시작이나 끝이 없는" 속성을 찾으려면 *=
3을 사용하세요. 위에 속하지 않는 선택자 - 언급된 CSS 및 XPath는 ":"으로 표시되는 사용자 정의 선택기입니다. 여기서 사용되는 내용은 다음과 같습니다.

first,:last,:parent ,:hidden,:visible,:odd,:even,:not(&#39;xxx&#39;), ":eq(0)"(始于0),:nth(n),:gt(0),:lt(0),:contains("xxx")

如:$('tr:not([th]):even')意为a34de1251f0d9fe1e645927f19a896e8元素的子孙中不含b4d429308760b6c2d20d6300079ed38e的所有子孙的偶数项
4、还有几个,简单不解释了

$(&#39;th&#39;).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)的方法,如

$(&#39;#myelement&#39;).get(0),也可缩写成$(&#39;#myelement&#39;)[0]

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

推荐阅读:

js仿jquery步骤详解

JS中时间单位比较的方法

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.