$(function () {
//1.html()方法
//此方法类似于javaScript中的innerHTML属性,可以用来读取或者设置耨个元素的html内容
//1.获取
var p=$("#p").html();
alert(p);
//2.写入
$("#p1").html("<strong>你的名字?</strong>");
//2.text()方法
//此方法类似于javvaScript中的innerText属性,可以读取或者设置某个元素中的文本内容
//1.获取
alert($("#p2").text());
//2.写入
$("#p2").text("<strong>我的名字</strong>");//会出现标签,以文本的形式出现
//3.val()方法
//此方法类似于javaScript中的value属性,可以用来设置和获取元素的值.无论元素是文本
//框,下拉框还是单选框,它都可以返回元素的值.如果元素为多选,则返回一个包含所有选
//择的值的数组
//1.实现表单获取焦点与失去焦点出现默认值
//使用判断值和获取默认值2种方式
$("#address").focus(function(){
var value = $(this).val();
if(value=="请输入邮箱地址"){
$(this).val("");
}
});
$("#address").blur(function(){
var value = $(this).val();
if(value==""){
$(this).val("请输入邮箱地址");
}
});
$("#password").focus(function(){//相当于javaScript中的onfocus()获取焦点
var value = $(this).val();
if(value==this.defaultValue){
$(this).val("");
}
});
$("#password").blur(function(){//相当于javaScript中的onblur()失去焦点
var value = $(this).val();
if(value==""){
$(this).val(this.defaultValue);//this指向当前文本框,
//this.defaultValue当前文本框的默认值
}
});
//2.使select(下拉列表),checkbox(多选框),radio(单选框)相应的选项被选中
//2种实现方式一种使用val()一种使用attr()
/* 设置单选下拉框选中
$("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
$("[value=check2]:checkbox").attr("checked",true);//设置属性checked
$("[value=check3]:checkbox").attr("checked",true);//设置属性checked
$("[value=radio2]:radio").attr("checked",true);//设置属性checked
});*/
$("input:eq(3)").click(function(){
$("#single").val("选择2号");
});
$("input:eq(4)").click(function(){
$("#multiple").val(["选择3号","选择4号"]);//以数组的形式赋值
});
$("input:eq(5)").click(function(){
$(":checkbox").val(["check1","check3"]);
$(":radio").val(["radio1"]);
});
});
<p id="p"><strong>你的名字?</strong></p>
<p id="p1">哈哈</p>
<p id="p2"><strong>?</strong></p><br/><br/>
<hr/>
<input type="text" id="address" value="请输入邮箱地址"/> <br/><br/>
<input type="text" id="password" value="请输入邮箱密码"/> <br/><br/>
<input type="button" value="登录"/>
<hr/>
<input type="button" value="设置单选下拉框选中"/>
<input type="button" value="设置多选下拉框选中"/>
<input type="button" value="设置单选框和多选框选中"/>
<br/><br/>
<select id="single">
<option>选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
</select>
<select id="multiple" multiple="multiple" style="height:120px;">
<option selected="selected">选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
<option>选择4号</option>
<option selected="selected">选择5号</option>
</select>
<br/><br/>
<input type="checkbox" value="check1"/> 多选1
<input type="checkbox" value="check2"/> 多选2
<input type="checkbox" value="check3"/> 多选3
<input type="checkbox" value="check4"/> 多选4
<br/>
<input type="radio" value="radio1" name="a"/> 单选1
<input type="radio" value="radio2" name="a"/> 单选2
<input type="radio" value="radio3" name="a"/> 单选3