jqueryチェーンプログラミング、暗黙反復
2193 ワード
1.jqueryチェーンプログラミング
複数行のコードが1行のコードに結合する、その行のコードが返すオブジェクトかどうかを認識することを前提とする.オブジェクトのみがチェーンプログラミングを行うことができます
.html(‘val’).text(‘val’).css()チェーンプログラミング、暗黙反復
チェーンプログラミングの注意:$(‘div’).html(‘設定値’).val(‘設定値’);これでいいですが、$(‘div’).html().text()は、値を取得する際にオブジェクト自体ではなく取得した文字列を返すため、チェーンプログラミングはできません.
2.理解:
/*objオブジェクトの2つのプロパティを設定*/
//普通のやり方はこうです
obj.name='明ちゃん';
obj.age = 155;
//チェーンプログラミングはこうです.
obj.name('小明').age(15);
複数行のコードが1行のコードに結合する、その行のコードが返すオブジェクトかどうかを認識することを前提とする.オブジェクトのみがチェーンプログラミングを行うことができます
.html(‘val’).text(‘val’).css()チェーンプログラミング、暗黙反復
チェーンプログラミングの注意:$(‘div’).html(‘設定値’).val(‘設定値’);これでいいですが、$(‘div’).html().text()は、値を取得する際にオブジェクト自体ではなく取得した文字列を返すため、チェーンプログラミングはできません.
2.理解:
/*objオブジェクトの2つのプロパティを設定*/
//普通のやり方はこうです
obj.name='明ちゃん';
obj.age = 155;
//チェーンプログラミングはこうです.
obj.name('小明').age(15);
<script src="scripts/jquery-1.7.1.min.js"/>
<script>
$(function() {
$('li').hover(function() {//
$(this).css({
'color': 'red',
'cursor':'pointer'
});
}, function () {//
$(this).css('color', 'black');
}).click(function() {// ， ， .hover().click()
$(this).appendTo('#ul2');
});
});
</script>
<ul id="ul1">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<ul id="ul2">
</ul>
</code></pre>
<p> </p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<script src="js/jquery-3.3.1.js"/>
<script>
$(function(){
// : ，
$("#btn").click(function(){
$("p").text("haha").css("background","lightblue");
});
});
</script>
<input type="button" value=" " id="btn" name="btn"/>
<p> P </p>
<p> P </p>
<p> P </p>
<p> P </p>
</code></pre>
<p> </p>
</div>
</div>
</div>
</div>