jQuery③

13576 단어 jQuery

jQuery 객체 --- 선택기를 통해 지정한 요소


jQuery에서 선택기에서 가져온 요소를'jQuery 대상'이라고 지정합니다.
여기서 JavaScript의 NodeList와 jQuery 객체의 차이점을 요약합니다.
그러면 "div 요소의 텍스트 색상을 빨간색으로 바꿉니다"라는 처리는 지금까지의 "JavaScript"와 "jQuery 대상"두 가지를 부여합니다
① jQuery 시css()는 jQuery에서 얻은 jQuery 대상이기 때문에 사용할 수 있는 기능입니다.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>jQuery-test02</title>
</head>
<body>

<div id="div1">
美浜ちよです
</div>

<div id="div2">
滝野ともです
</div>

<script type="text/javascript">

$(function(){
    // div要素すべての取得
    var div1 = $('div');
    div1.css('color', 'red');
});

</script>

</html>

② JavaScript
그래서 이런 예는 잘못된 것이다.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>jQuery-test02</title>
</head>
<body>

<div id="div1">
美浜ちよです
</div>

<div id="div2">
滝野ともです
</div>

<script type="text/javascript">

$(function(){
    // div要素すべての取得
    var div1 = document.getElementsByTagName('div');
    div1.css('color', 'red'); //=> Error: css()という機能はありません。
});

</script>

</html>
↓ 색상 불변

JavaScript의 경우 다음과 같이 써야 합니다.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>jQuery-test02</title>
</head>
<body>

<div id="div1">
美浜ちよです
</div>

<div id="div2">
滝野ともです
</div>

<script type="text/javascript">

$(function(){
    // div要素すべての取得
    var div1 = document.getElementsByTagName('div');
    // for文を使ってすべてのdiv要素に対して処理をする。
    for (var i = 0, len = div1.length; i < len; i++) {
        div1[i].style.color = 'red';
    };
});

</script>

</html>

jQuery가 지향하는 일

  • CSS 변경
  • 가져온 요소의 HTML 변경
  • 애니메이션
  • 간단한 이벤트 설정
    • 잠깐만요. 간단하게 쓸 수 있어요.
    아래 그림과 같은 인상↓

    jQuery 객체 변수 이름


    jQuery 객체를 저장하는 변수의 시작 부분에 $가 붙는 경우가 있습니다.
    var $box = $('#box');
    이것은 규정이 아니라 습관입니다. $규정은 없지만 $box라는 변수는 jQuery 대상입니다. 한눈에 알 수 있습니다.
    jQuery④

    메서드 - jQuery 객체를 처리하는 함수


    기술하는 방법은 다음과 같다.
    jQueryオブジェクト.メソッド名(引数, 引数, ...);
    구체적인 사용 방법은↓
    
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>jQuery-test02</title>
</head>
<body>

<div id="box" class="content">This is box</div>


<script type="text/javascript">

$(function(){
    // div要素すべての取得
    var $box = $('#box');
    // 要素のCSSを変更
    $box.css('color', 'red');
    // 要素の中身のHTMLを変更
    $box.html('<p>content</p>');
    // 要素のclassNameを取得
    var className = $box.attr('class');
    console.log(className); //=> content
});

</script>

</html>
    named 프로필 문제
    내용 협상 & 메시지 변환

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage