새로운 html template 생성하기
HTML Templates 클릭 - New - name, context, pattern 설정
- attr함수
$(선택자).attr('속성명','속성값')
여러 선택자에게 많은 속성을 추가해줄때 사용
형식1) .attr( attributeName, value )
: 선택자에 대해 속성명과 그 값을 추가(설정)해준다
형식2) .attr( attributes )
: 선택자의 속성명의 값을 불러온다
- each함수
$(선택자).each(함수 or 익명함수)
반복적으로 나오는 선택자(태그)에 관해서 각각에 어떤 기능을 설정해줄때 사용
형식) .each( function )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<title></title>
<style>
.test1{color:red}
.test2{color:pink}
.test3{color:blue}
.test4{color:yellow}
</style>
<script>
var i=1;
$(function(){
$('li').each(AddCss)
})
function AddCss(){
$(this).attr('class','test'+i)
console.log(i)
i++;
}
</script>
</head>
<body>
<ul id="test">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</body>
</html>
- children 함수
특정 element의 자식을 불러온다
형식) .children([selector])
- text 함수
형식1) .text()
텍스트 값을 가져온다
형식2) .text(text or function)
text 나 function 값으로 변경된다
- html 함수
형식1) .html()
태그와 함께 텍스트 값을 가져온다
형식2) .html(htmlString)
htmlString 값으로 변경된다
- val 함수
input, check, radio 등의 입력양식에 해당되는 값을 가져오거나 설정한다
형식1) .val()
해당되는 값을 가져온다
형식2) .val(value)
value 값으로 설정한다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<script>
$(function(){
var $nodes=$('#root').children().css('color','green')
alert('children 갯수=>'+$nodes.length)//4
var txt=""
$('#root').children().each(function(){
txt+=$(this).text()+" ";
})
alert(txt)
})
</script>
</head>
<body>
<div id="root">
<div><b>자식1</b></div>
<div>자식2</div>
<div><i>자식3</i></div>
<div>자식4</div>
</div>
</body>
</html>
'jQuery' 카테고리의 다른 글
| [jQuery]setTimeout, setInterval, 태그의 인덱스 번호에 따라 구분하기 (0) | 2021.03.05 |
|---|---|
| [jQuery]중첩태그 구분하기, 같은 태그를 속성에 따라 구분하기 (0) | 2021.03.05 |
| [jQuery]ready함수, 제이쿼리 api문서, css함수, 제이쿼리 변수 (0) | 2021.03.04 |
| [jQuery]jQuery 개요 및 특징, 사용방법(라이브러리 다운, cdn) (0) | 2021.03.04 |
| [jQuery]prototype.js으로 Ajax구현-아이디 중복 체크 예제 (0) | 2021.03.04 |