JQuery 연구 노트 선택기 Four_jquery-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JQuery 연구 노트 선택기 Four_jquery

May 16, 2016 pm 06:49 PM

jquery 공부 노트 선택자

复代码码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 전환//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<머리> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script src="js/jquery-1.3.2.js"></script> 
<script type="text/javascript"><!-- 
$(function(){ 
    $("#aContains").click(function(){ 
        $ ("div:contains('hello')").each(function(){ 
            $(this).css("Background","red");                                    
    }) 
    $("#aEmpty").click(function(){ 
        $("div:empty").each(function(){ 
           $(this).html("EmptyDIV");                           
>>  $ (this).css("배경","빨간색");                       
        })                      
    }) 
    $("#aParent").click(function(){ 
        $("div: parent").each(function(){ 
            $(this).css("배경","빨간색");                      
        })                               
    }) 
}) 
// - -></script> 
</head> 

<본문> 
<div id ="div1"> 
    <p>안녕하세요!</p> 
</div> 
<div id ="div2"> 
    안녕하세요 
</div> 
<div id ="div3" height="20px"> 
</div> 
<div id ="div4"></div> 

<a href="#" id="aContains">设置内容包含“hello”的节点红color背景颜color</a> 
<a href="#" id="aEmpty">设置无内容的DIV内容设为EmptyDIV 
<a href="#" id="aHas">设置包含 p 节点적 div 节点红color背景颜color</a> 
<a href="#" id="aParent">设置包含子节点的 div 节点红color背景颜color</a> 
</body> 
</html>


먼저 이번 장에서는 과외 지식 포인트를 설명하겠습니다
1.element.css("attributeName","value") 
설명: 요소의 스타일을 설정하는 데 사용됩니다. $ (this) .css("Background","red"); 노드의 배경을 빨간색으로 설정하는 것입니다. 
이제 주제를 살펴보겠습니다
1.$("TagName:contains('keyword')") 
설명: 모든 TagName 노드의 키워드 콘텐츠가 포함된 노드 컬렉션을 얻는 데 사용됩니다
반환 값 : Array(Element); 
2.$("TagName:Empty") 
설명: 모든 TagName 노드에서 빈 콘텐츠가 있는 노드 컬렉션을 가져오는 데 사용됩니다. 
반환 값: Array(Element); > 3.$("TagName1:has(TagName2)) 
설명: 모든 TagName1 노드 중 TagName2 하위 노드가 포함된 노드 집합을 가져오는 데 사용됩니다. 
반환 값: Array(Element); 
4.$( "TagName:parent") 
설명: 모든 TagName 노드의 하위 노드를 포함하는 노드 세트를 가져오는 데 사용됩니다. 
반환 값: Array(Element);