ready, hierarchy

2024. 1. 12. 23:38ㆍDaily Codig Reminder 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
	$(document).ready(function(){
		console.log(" $ ready1");
		console.log(document.getElementById("aaa"));
		console.log($("#aaa").val());
		console.log(jQuery("#aaa").val());
	});
		jQuery(document).ready(function(){
		console.log("jquery ready2");
		
	});
		$(function(){
		console.log("no  ready3");
		
	});
</script>
</head>
<body>
<input type="text" id="aaa" value="1234">
</body>
</html>

kkk함수 실행됨

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("*").css("color","red");
		console.log(document.getElementById("test"));
		console.log($("#test"));//fn
		console.log($("#test").text());
	});
	
</script>
<title>Insert title here</title>
</head>
<body>
<p id ="test">Hello</p>
<div>World</div>
</body>
</html>

태그 선택자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("p").css("color","red");
		var x =$("p"); //jquery
		console.log(x); //s.fn.init(2)
		console.log(x[0]); //tag
//		console.log(x[0].text()); 
		console.log(x[0].innerText); //tag 
		console.log($(x[0])); //tag 
		var data = document.getElementsByTagName("p");
		var data1 = document.getElementsByTagName("test");
		
		console.log(data1);
		console.log(data1.innerText);
		//////////////
		var jdata1= $("#test");
		console.log(jdata1);//fn
		console.log(jdata1.innerText);//fn의 경우 기존 js의 함수 사용이 안되고 jquery  함수 사용
		
		var x = $("p");
		console.log(x);
	})
</script>
<title>Insert title here</title>
</head>
<body>
<p>Hello</p>
<p>Hello2</p>
<div>World</div>
<div id="test">world2</div>
<input type="text" id="test2" value="test2">
</body>
</html>

var jdata1= $("#test");
		console.log(jdata1);//fn
		console.log(jdata1.innerText);//fn의 경우 기존 js의 함수 사용이 안되고 jquery  함수 사용
		//fn인 경우 .value => val () , innerText=> text(), innerHtml =>html()
		//img.src = "b.jpg" => jquery img.attr("src", "b.jpg")
		var x = $("p");
		console.log(x);
		console.log($("#test2").text());
		var jdata2 = $("#test2");
        console.log(jdata2.val());// type text value 
        console.log(jdata2.attr("value")); //속성값
        jdata2.val("aaaaa"); // .value= "aaa"오 ㅏ 동일
        jdata2.attr("value","bbbbb");

$(document).ready(function(){
		$("p").css("color","red");
		var x =$("p"); //jquery
		
		console.log($(x[0]).text() +" "+ $(x[1]).text());
		console.log("+=========");
		for(var i=0; i< x.length; i++){
			console.log(x[i].innerText); //tag
		}
				for(var i=0; i< x.length; i++){
			console.log($(x[i]).text()); //tag
		}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var a1 = $("#a");
        console.log(a1.text());
        var jdata = $("#a");
        console.log(jdata);
        console.log(jdata.text());
        var data = document.getElementById("a");
        console.log($(data).text());
	$("#a2").css("color","red");
	console.log($("#a2").innerText);
	console.log("text() : ", $("#a2").text());
	
	})
	
	
        
	
</script>
<title>Insert title here</title>
</head>
<body>
<p id="a">Hello</p>
<p id="a2">Hello2</p>
<div id="b">World</div>
<span id="c">test</span>
</body>
</html>

$(document).ready(function(){
		$("#d").val("test");
		$("#c").text("test");
		$("#b").html("<u>test</u>"); //innerhtml

		console.log($("#b").html());
		$("#a").innerText="aaaaa";
		$("#a").text("++++++++");

$(document).ready(function(){
		var myClass = $(".myClass");
        for(var i=0; i<myClass.length; i++){
            console.log(myClass[i].innerText);
        }
        console.log("==========");
         for(var i=0; i<myClass.length; i++){
			 var t = $($(".myClass")[i]);
            console.log(">>",t.text());
        }
		console.log("============");
		console.log("첫번째 myClass>>", $(".myClass")[0].innerText);
		console.log("두번째 myClass>>", $(".myClass").last().text());
		
	})

 

$(document).ready(function(){
		$(".a").css("color","red");
		var test=$(".a");
		console.log(test);
		console.log(">>>>",test[1]);//tag
		test[1].innerText="aaaaa";//주의
	})

hierarchy, attribute

<script type="text/javascript">
	$((document).ready(function(){
		$("p+a").css("color","red");
		$("p~a").css("font-size","40px");
	})
	
</script>
<title>Insert title here</title>
</head>
<body>
<div>
        <p>p</p>
        <a href="">daum</a>
        <a href="">naver</a>

        <p>p</p>
        <a href="">test</a>
        <p>
            <a href="">Google</a>
        </p>
    </div>

<script type="text/javascript">
	$(document).ready(function(){
		$("label+input").css("color", "red").val("Labeled!!");
		console.log($("label+input"));
	})
	
</script>
<title>Insert title here</title>
</head>
<body>
<form>
	<label>Name:</label>
	<input name="name" id="name"/>
	<input name="none"/>
	<fieldset>
		<label>Name:</label>
		<input name="name" id="name"/>
		<input name="none"/>
	</fieldset>
	
</form>

<script type="text/javascript">
	$(document).ready(function(){
		//1[href]
		//$("a[href]").css("color","red").css("font-size","40px");
		//2[href='값']
		//$("a[href='https://daum.net']").css("color","red");
		//3. [href!='값']
//		$("a[href!='https://daum.net']").css("color","red");
//4. [href^='https']"
//$("a[href^='https:']").css("color","red");
//5. [href$='값']
//$("a[href$='.net']").css("color","red");
//6. [href*='값']특정값이 포함하는
//$("a[href*='www']").css("color","red");
//7. [href~='값'] 단어형태로 포함하는
$("a[href~='www']").css({'color':'red', 'background-color':'yellow'});
	})
	
</script>
<title>Insert title here</title>
</head>
<body>
<div>
	<span>hello</span><br>
	<a href="www kkk xxx">www kkk xxx</a><br>
	<a href="https://daum.net">https://daum.net</a><br>
	<a href="http://naver.com">http://naver.com</a><br>
	<a href="http://www.google.com">http://www.google.com</a><br>
	<a href="www.korea.com">www.korea.com</a><br>
</div>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		console.log($("[class]"));
		console.log($("[class='aa']"));
		$("div[class]").css("color","red");
		})
	
</script>
<title>Insert title here</title>
</head>
<body>
<p class="aaaa">hello</p>
<p>world</p>
<div class="aa">hello2</div>
<div>world2</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		var x = $(":first");
		console.log(x); //html
		var x = $(":last");
		console.log(x.text());//div =>문자출력
		//ul 한정:첫번째 ul
		var x = $("ul:first");
		console.log(x);
		var x =$("li:last");
		console.log(x.text());
		})
	
</script>
<title>Insert title here</title>
</head>
<body>
<ul>
        <li>A</li>
        <li>A2</li>
        <li>A3</li>
        <li>A4</li>
    </ul>
    <ul>
        <li>b</li>
        <li>b2</li>
        <li>b3</li>
        <li>b4</li>
    </ul>
    <div>
        <p>Hello</p>
        <p>hello-end</p>
    </div>
    <div>hello-endenenenenenenen</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		//var x = $(":first-child");
		//console.log("first-child",x.text()); //html
		//var x = $("ul:first-child");
		//console.log("ul:first-child",x.text());
		//var x = $("u1 > :first-child");
		//console.log("ul> :first-child",x);
		//li의 부모 기준
		var x = $("li:last-child");
		console.log("li: last-child",x.text());
		/*var x = $(":last");
		console.log(x.text());//div =>문자출력
		//ul 한정:첫번째 ul
		var x = $("ul:first");
		console.log(x);
		var x =$("li:last");
		console.log(x.text());*/
		})
	
</script>
<title>Insert title here</title>
</head>
<body>
<ul>
        <li>A</li>
        <li>A2</li>
        <li>A3</li>
        <li>A4</li>
    </ul>
    <ul>
        <li>b</li>
        <li>b2</li>
        <li>b3</li>
        <li>b4</li>
    </ul>
    <div>
        <p>Hello</p>
    </div>
</body>
</html>

$(function(){
var test=$("li");

for(var i=0; i<test.length; i++){
            console.log(test[i].innerText);
        }
        console.log("===========");
for(var x in test){
            console.log(test[x].innerText);
        }   
        console.log("=============")
for(let a of test){
            console.log(a.innerText);
            console.log($(a).text());
        }             
		})

var x =$("li:nth-child(2n)");
console.log("li:nth-child(2n)>>>",x)
x.css("color","red")
==같음
var x = $("li:nth-child(even)");
console.log("li:nth-child(even)>>>",x);
x.css("color","red");//짝
var x = $("li:nth-child(odd)");
console.log("li:nth-child(odd)>>>",x);
x.css("color","yellow");//홀

04_traversing_filtering

$("li:eq(0)").css("color", "red");
        $("li:eq(2)").css("color", "blue");
        $("li:eq(5)").css("color", "yellow");
	}); //end doc
$(function(){
$("li:nth-child(1)").css("color","red");
        $("li:nth-child(3)").css("color","blue");
        $("li:nth-child(6)").css("color","yellow");
        

	}); //end doc
$("li").eq(0).css("color","red").end()
        $("li").eq(2).css("color","blue").end();
        $("li").eq(5).css("color","yellow");
        

	}); //end doc

★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★v ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ 

$(function(){
$("li").filter(".my").css("color","red")
.end()
.filter("#a").css("color","green")
.end()
.filter(":even").css("font-size","40px").end()
	}); //end doc

❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗❗

$(function(){

$("li").filter(function (idx, ele) {
 return ele.innerText=="A4";                   
                }).css("color","red")
                .end()
                .filter(function(idx,ele){
					return idx%3==0;
				}).css("font-size","40px").end()
	}); //end doc

'Daily Codig Reminder' 카테고리의 다른 글

json , ajax  (1) 2024.01.15
jquery:CSS  (0) 2024.01.13
el, jstl  (1) 2024.01.11
jquery  (0) 2024.01.11
mvc  (0) 2024.01.11

관련글

티스토리툴바