jquery는 CSS에서 선택기를 가져옵니다(예제 설명)

글을 작성하기 전에 요소와 노드의 차이점을 검토해 보겠습니다.

요소는 W3C DOM(문서 개체 모델)에서 가장 널리 사용되는 노드 중 하나입니다.

요소에는 "속성"이 연결되어 있습니다.

XmlElement 클래스에는 해당 "속성"(GetAttribute, SetAttribute, RemoveAttribute, GetAttributeNode 등)에 액세스할 수 있는 다양한 메서드가 있습니다.

또한 "속성" 속성을 사용하여 "이름" 또는 "일련 번호" 액세스를 지원하는 "XML 속성 세트"를 반환할 수도 있습니다.

따라서 XmlElement 클래스에 대한 설명을 보면 XmlNode와 XmlElement 클래스의 차이점을 쉽게 알 수 있습니다.

XmlElement 클래스는 "속성"만 갖는 노드인 반면, XmlNode는 "속성"뿐만 아니라 "자식 노드"도 갖는 노드입니다.

따라서 이를 사용할 때 노드에서 innerText 또는 innerXml을 가져오거나 설정해야 하는 경우 XmlNode를 사용해야 하며, node 자체는 이때 XmlElement를 사용해야 합니다. 물론 (XmlElement)를 사용하여 XmlNode를 변환할 수도 있습니다.

이제 본론으로 들어가겠습니다

JavaScript에서는 선택하기 쉬운 id 선택기를 제외하고 나머지는 선택하기가 쉽지 않습니다. 이 분야에서는 jquery가 훨씬 우수하며

를 포함한 다양한 획득 방법을 제공합니다.

1. 기본 선택자(주로 태그 선택자, ID 선택자, 클래스 선택자, 범용 선택자, 그룹 선택자 포함)

$("#divId") ID가 divId인 요소를 가져옵니다.
$("a") 모든 요소를 가져옵니다.

$(".bgRed") CSS 클래스가 bgRed인 요소 가져오기

$("*")는 페이지의 모든 요소를 가져옵니다

$("#divId, a, .bgRed")는 조건을 충족하는 세 개의 선택자를 얻습니다

2. 계층적 선택자(주로 하위 요소 선택자, 하위 요소 선택자, 직계 형제 요소 선택자, 인접 형제 요소 선택자 포함)

2.1 하위 요소 선택기> ==============하위 요소 선택

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

항목 1

항목 2 
  중첩 항목 1
중첩 항목 2
중첩 항목 3
 
항목 3

<script> $("ul.topnav > li").css("border" , "3px double red");</script>

공식 코드이며, 다음 사용법을 참고하세요

2.2 자손 선택자는 공백을 직접 사용하여 아들뿐만 아니라 손자도 포함됨을 나타냅니다...================ 자손 요소 선택

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

녹색 윤곽선< /div>

< 입력 이름="뉴스레터" />
"없음" />
<script> $("form input").css("border", "2px dotted blue");</script&gt ; <br><br><br>2.3 형제 요소 선택기의 조건을 충족하는 모든 요소가 선택됩니다. 주로 요소 뒤의 병렬 요소를 선택합니다. ============ == 지정된 요소의 다음 형제 요소 선택 <br><br><br><br><br>코드 복사<br> </div> <br> 코드는 다음과 같습니다.<br><div class="codebody" id="code59207"> <br> <form> <br><br> <label>Name:</label> <br> <input name="name" /> <br> <fieldset> <br> <label>Newsletter:</label> <br><br> <input name="newsletter" /> <br> </fieldset> <br> </form> <br> <input name="none" /> <br><script>$("label + input").css("color", "blue").val("Labeled!")</script>

2.4 相邻同辈元素选择器 ===============选择指定元素的所有指定的平辈元素，可以隔几个不是指定的元素

复制代码代码如下:

div (doesn't match since before #prev)

span#prev
div sibling

div sibling div niece

span sibling (not div)
div sibling

<script>$("#prev ~ div").css("border", "3px groove blue");</script>

3、表单选择器主要选择表单、用的时间要注意$(":input")注意引号里面的冒号也可以选择类型如$(":button")不过多介绍

4、基本过滤器主要包括

名称	说明	举例
:first	匹配找到的第一个元素	查找表格的第一行:$("tr:first")
:last	匹配找到的最后一个元素	查找表格的最后一行:$("tr:last")
:not(selector)	去除所有与给定选择器匹配的元素	查找所有未选中的 input 元素: $("input:not(:checked)")
:even	匹配所有索引值为偶数的元素，从 0 开始计数	查找表格的1、3、5...行:$("tr:even")
:odd	匹配所有索引值为奇数的元素，从 0 开始计数	查找表格的2、4、6行:$("tr:odd")
:eq(index)	匹配一个给定索引值的元素注:index从 0 开始计数	查找第二行:$("tr:eq(1)")
:gt(index)	匹配所有大于给定索引值的元素注:index从 0 开始计数	查找第二第三行，即索引值是1和2，也就是比0大:$("tr:gt(0)")
:lt(index)	选择结果集中索引小于 N 的 elements 注:index从 0 开始计数	查找第一第二行，即索引值是0和1，也就是比2小:$("tr:lt(2)")
:header	选择所有h1,h2,p一类的header标签.	给页面内所有标题加上背景色: $(":header").css("background", "#EEE");
:animated	匹配所有正在执行动画效果的元素	只有对不在执行动画效果的元素执行一个动画特效: $("#run").click(function(){ $("div:not(:animated)").animate({ left: "+=20" }, 1000); });

5、内容过滤器（主节点的子节点为文本节点）

名称	说明	举例
:contains(text)	匹配包含给定文本的元素	查找所有包含 "John" 的 div 元素:$("div:contains('John')")
:empty	匹配所有不包含子元素或者文本的空元素	查找所有不包含子元素或者文本的空元素:$("td:empty")
:has(selector)	匹配含有选择器所匹配的元素的元素	给所有包含 p 元素的 div 元素添加一个 text 类: $("div:has(p)").addClass("test");
:parent	匹配含有子元素或者文本的元素	查找所有含有子元素或者文本的 td 元素:$("td:parent")

6、可见性过滤器 Visibility Filters

:hidden

:visible

7、属性过滤器 Attribute Filters

名称	说明	举例
[attribute]	匹配包含给定属性的元素	查找所有含有 id 属性的 div 元素: $("div[id]")
[attribute=value]	匹配给定的属性是某个特定值的元素	查找所有 name 属性是 newsletter 的 input 元素: $("input[name='newsletter']").attr("checked", true);
[attribute!=value]	匹配给定的属性是不包含某个特定值的元素	查找所有 name 属性不是 newsletter 的 input 元素: $("input[name!='newsletter']").attr("checked", true);
[attribute^=value]	匹配给定的属性是以某些值开始的元素	$("input[name^='news']")
[attribute$=value]	匹配给定的属性是以某些值结尾的元素	查找所有 name 以 'letter' 结尾的 input 元素: $("input[name$='letter']")
*[attribute=value]**	匹配给定的属性是以包含某些值的元素	查找所有 name 包含 'man' 的 input 元素: $("input[name*='man']")
[attributeFilter1][attributeFilter2][attributeFilterN]	复合属性选择器，需要同时满足多个条件时使用。	找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的: $("input[id][name$='man']")

8. 하위 요소 필터 하위 필터

名称	说明	举例
:nth-child(index/even/odd/equation)	匹配其父元素下的第N个子或奇偶元素 ':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用: nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n 1) :nth-child(3n 2)	在每个 ul 查找第 2 个li: $("ul li:nth-child(2)")
:first-child	匹配第一个子元素 ':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素	在每个 ul 中查找第一个 li: $("ul li:first-child")
:last-child	匹配最后一个子元素 ':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素	在每个 ul 中查找最后一个 li: $("ul li:last-child")
:only-child	如果某个元素是父元素中唯一的子元素，那将会被匹配如果父元素中含有其他元素，那将不会被匹配。	在 ul 中查找是唯一子元素的 li: $("ul li:only-child")

이름

설명

예

:n번째-자식(색인/짝수/홀수/방정식)

상위 요소 아래에서 N번째 하위 요소 또는 홀수-짝수 요소와 일치 ':eq(index)'는 하나의 요소에만 일치하는 반면, 이 요소는 모든 상위 요소에 대한 하위 요소와 일치합니다. :nth-child는 1부터 시작하고 :eq()는 0부터 시작합니다! 사용 가능:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
: n번째 -자식(3n 1)
:n번째-자식(3n 2)

각 ul에서 두 번째 li 찾기:
$("ul li:nth-child(2)")

:첫 번째 자식

첫 번째 하위 요소와 일치 ':first'는 하나의 요소만 일치하는 반면, 이 선택기는 각 상위 요소에 대해 하나의 하위 요소와 일치합니다.

각 ul에서 첫 번째 li 찾기:
$("ul li:first-child")

:마지막 자식

마지막 하위 요소와 일치 ':last'는 하나의 요소만 일치하는 반면, 이 선택기는 각 상위 요소에 대해 하나의 하위 요소와 일치합니다.

각 ul에서 마지막 li 찾기:
$("ul li:last-child")

:only-child

요소가 상위 요소의 유일한 하위 요소인 경우 일치됩니다. 상위 요소에 다른 요소가 포함되어 있으면 일치하지 않습니다.

ul에서 유일한 하위 요소인 li 찾기:
$("ul li:only-child")