jQuery設定とHTML、テキストと値の簡単な例を取得します。
<script type="text/javascript">
//<![CDATA[
$(function(){
// <p> HTML
$("input:eq(0)").click(function(){
alert( $("p").html() );
});
// <p>
$("input:eq(1)").click(function(){
alert( $("p").text() );
});
// <p> HTML
$("input:eq(2)").click(function(){
$("p").html("<strong> ?</strong>");
});
// <p>
$("input:eq(3)").click(function(){
$("p").text(" ?");
});
// <p>
$("input:eq(4)").click(function(){
$("p").text("<strong> ?</strong>");
});
// value
$("input:eq(5)").click(function(){
alert( $(this).val() );
});
// value
$("input:eq(6)").click(function(){
$(this).val(" !");
});
});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$("#address").focus(function(){ //
var txt_value = $(this).val(); //
if(txt_value==" "){
$(this).val(""); // ,
}
});
$("#address").blur(function(){ //
var txt_value = $(this).val(); //
if(txt_value==""){
$(this).val(" ");// ,
}
})
$("#password").focus(function(){
var txt_value = $(this).val();
if(txt_value==" "){
$(this).val("");
}
});
$("#password").blur(function(){
var txt_value = $(this).val();
if(txt_value==""){
$(this).val(" ");
}
})
});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$("#address").focus(function(){ //
var txt_value = $(this).val(); //
if(txt_value==this.defaultValue){
$(this).val(""); // ,
}
});
$("#address").blur(function(){ //
var txt_value = $(this).val(); //
if(txt_value==""){
$(this).val(this.defaultValue);// ,
}
})
$("#password").focus(function(){
var txt_value = $(this).val();
if(txt_value==this.defaultValue){
$(this).val("");
}
});
$("#password").blur(function(){
var txt_value = $(this).val();
if(txt_value==""){
$(this).val(this.defaultValue);
}
})
});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(function(){
//
$("input:eq(0)").click(function(){
$("#single").val("2");
});
//
$("input:eq(1)").click(function(){
$("#multiple").val([" 2 ", " 3 "]);
});
//
$("input:eq(2)").click(function(){
$(":checkbox").val(["check2","check3"]);
$(":radio").val(["radio2"]);
});
});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(function(){
//
$("input:eq(0)").click(function(){
$("#single option").removeAttr("selected"); // selected
$("#single option:eq(1)").attr("selected",true); // selected
});
//
$("input:eq(1)").click(function(){
$("#multiple option").removeAttr("selected"); // selected
$("#multiple option:eq(2)").attr("selected",true);// selected
$("#multiple option:eq(3)").attr("selected",true);// selected
});
//
$("input:eq(2)").click(function(){
$(":checkbox").removeAttr("checked"); // checked
$(":radio").removeAttr("checked"); // checked
$(":checkbox[value=check2]").attr("checked",true);// checked
$("[value=check3]:checkbox").attr("checked",true);// checked
$("[value=radio2]:radio").attr("checked",true);// checked
});
});
//]]>
</script>
:checkboxは属性をcheckboxと表しています。