jQuery에서 선택기 선택기 사용 요약-JS 튜토리얼-php.cn

jQuery 선택기 요약

//jQuery 选择器 $ 
//$(expression,[context]) return jQuery 
//Unit One 
//expression 之 CSS 定义符 就是以CSS语法表示所要选择的元素 

// $("*"); // 表示页面所有元素标签 
// $("th, td") // 表示所有<th><td>元素标签 
// $("a") // 表示所有<a>元素标签 
// $("div#onlydiv"); // 表示CSS选择中id=onlyidv的元素 $("#ID")为全文档匹配 
// $("#rating"); // 表示id=rating的元素 
// $("#orderedlist > li"); // 表示id=orderedlist 所有子元素,但不包括子元素下的子元素 
// $("#orderedlist li:last"); // 表示id=orderedlist 中li最后一个元素 
// $("#orderedlist li:first"); // 表示id=orderedlist 中li第一个元素 
// $("#orderedlist li:nth- child(0)"); //表示id=orderedlist 中li第(N)个元素 n为数组下标 
// $("button:only-child"); //表示 css选择中的它为父容器唯一的元素 
// $(".stuff:empty"); // 表示css选择中的空元素 
// $(".buttons:enabled"); // 表示css选择中的正常启用的元素 
// $(".buttons:disabled"); // 表示css选择中的非启用元素 
// $("input:checked"); // 表示css选择中的选中的元素 
// $("button:not(.not)"); // 表示css选择中的去除not()中的元素 
// $("button.not"); // 表示css选择中的class=not的元素 $(".CLSS")为全文档匹配 
// $("#orderedlist2 li"); // 表示id=orderedlist 所有子元素且包括所有子元素的子元素 
// //alert($("#orderedlist ~ li").length); 
// $("#orderedlist,.buttons,li"); //匹配 css选择符的元素 



//expression 之 根据元素属性选择 
// alert($("button[@class]").length); // 表示有class属性的元素 
// alert($("button[@class=not").length); // 表示有class属性且值等于not的元素 
// alert($(&#39;button[@class^=not&#39;).length); // 表示有class属性且值开头匹配not的元素 
// alert($(&#39;button[@class$=not&#39;).length); // 表示有class属性且值结尾匹配not的元素 
// alert($(&#39;button[@class*=not&#39;).length); // 表示有class属性且值中匹配not的元素 
//expression 之 XPATH 过滤器 XPATH语法来表示需要选择的页面元素 
//$("ol[@id^=&#39;orderedlist&#39;]").find("li:contains(&#39;First&#39;)").each(function(i) { 
//// $(this).html( $(this).html() + " BAM! " + i ); 
// $(this).mouseover(function(){ 
// $(this).css("color","red"); 
// }); 
// $(this).mouseout(function(){ 
// $(this).css("color","#000"); 
// }); 
// }); 
//查找ol标签且属性 id=orderedlist的所有元素,这里有两种写法 
//ol[@id=&#39;orderedlist&#39;] 定位父元素 直接用each 迭代 
//ol[@id=&#39;orderedlist&#39;]/* 所有父元素下的子元素 使用find(&#39;child- element&#39;).each()迭代 

//Unit two 
///$( html, [ownerDocument]) return jQuery 
//这个函数允许传入html元素文本,构造器会产生这个HTML文本所创造的jQuery对象,这个对象可以是原本没有的,也可是原本页面上存在的 
//$(&#39;<p>hello</p>&#39;).appendTo("h2"); //生成一个标记文本 并追加到页面h2标签内 
//也可以 将原本页面元素取出追加 
//$("input",this).appendTo("h2"); //注意,这里取出的页面元素,是移动!而不是复制 

///$(elements) return jQuery 
//这个函数允许直接传入DOM 
//$(document.forms[0].elements).appendTo("h2"); // 可以参考DOM文档 
//$(callback) return jQuery 



//以下是selector一些说明 
/*

로그인 후 복사

기본:

#id: id 속성을 기반으로 개체를 가져옵니다.
element: 특정 HTML 태그와 일치하는 모든 개체
.class: 개체의 class 속성에 따라 개체 가져오기
*: 모든 개체 가져오기
selector1, selector2, selectorN: 제거하지 않고 여러 선택기 모음 가져오기 중복 항목

레벨 선택기:
ancestor 자손: 이 선택기는 공백입니다. 즉, 먼저 첫 번째 선택기의 모든 개체를 찾은 다음 하위 노드에서 두 번째 선택기와 일치하는 모든 개체를 찾습니다.
parent > child: 이 선택자는 보다 큼 기호입니다. 즉, 먼저 첫 번째 선택자의 모든 개체를 찾은 다음 하위 노드(손자 노드 아님)에서 두 번째 선택기와 일치하는 모든 개체를 찾습니다.
prev + next: 이 선택자는 더하기 기호로, 첫 번째 선택자의 모든 개체를 먼저 찾은 다음 동일한 레벨의 다음 노드를 따르고 두 번째 선택자를 만나는 개체를 찾는다는 의미입니다.
prev ~ siblings: 이 선택자는 ~ 기호입니다. 이는 먼저 첫 번째 선택자의 모든 개체를 찾은 다음 동일한 수준의 모든 후속 노드에서 두 번째 선택자와 일치하는 개체를 찾는다는 의미입니다.

기본 필터 문자:
:first: 여러 개체 중 첫 번째 개체와 일치
:last: 여러 개체 중 마지막 개체와 일치
:not(selector): 항목이 아닌 후 선택기의 내용과 일치
:even: 일치 모든 개체 중 짝수
:odd: 모든 개체 중 홀수와 일치
:eq(index): 아래 특정 테이블의 단일 요소와 일치
:gt(index): 특정보다 큰 모든 요소와 일치 첨자가 있는 모든 요소
:lt(index): 특정 아래 첨자보다 작은 모든 요소와 일치합니다.
:header: h1, h2, h3, h4, h5, h6과 같은 모든 헤더 요소와 일치합니다.
:animated: 애니메이션 효과가 있는 모든 요소와 일치합니다. 요소

Text 필터:
:contains(text): 간접적으로 유용한 상황을 포함하여 내부적으로 텍스트 요소를 포함하는 개체와 일치합니다.
:empty: 하위 요소가 없는 모든 개체와 일치합니다.
:has(selector): 하나 이상의 개체를 포함하는 모든 개체와 일치합니다. 하위 선택기
:parent: 텍스트만 포함하는 개체를 포함하는 모든 상위 개체와 일치

가시성 필터:
:hidden: 모든 숨겨진 개체 또는 입력의 숨겨진 유형과 일치
:visible: 보이는 모든 개체와 일치

속성 필터:
[속성]: 특정 속성을 가진 모든 개체와 일치
[속성=값]: 특정 속성 및 값을 가진 개체와 일치
[속성!=값]: 특정 속성을 가지고 있지만 특정 값이 아닌 개체와 일치
[속성^=값]: 특정 속성을 갖고 특정 값으로 시작하는 개체를 일치시킵니다.
[속성$=값]: 특정 속성을 갖고 특정 값으로 시작하는 개체를 일치시킵니다. 특정 값으로 끝나는 개체
[ attribute*=value]: 특정 속성을 갖고 특정 값을 포함하는 개체와 일치
[selector1] [selector2][selectorN]: 동시에 여러 속성 선택기와 일치하는 개체 일치

하위 필터:
:nth- child (index/even/odd/equation): 자식 요소의 특정 첨자/짝수/홀수/방정식 개체와 일치합니다. :eq(index)는 단일 개체 요소 특성의 자식에만 일치할 수 있으며 이 메서드는 일치할 수 있습니다. 여러 개체의 특정 하위 요소에 대한 공통 특성
:first-child: 첫 번째 하위 요소 일치
:last-child: 마지막 하위 요소 일치
이 두 일치 문자도 모든 하위 요소에 대해 일치 작업을 수행할 수 있습니다. 여러 상위 개체의 요소
:only-child: 상위 요소에 하위 요소가 하나만 있는 경우 이 하위 요소와 일치

양식 필터 문자
이름 유형