Jquery中的DOM操作 (七.设置和获取HTML,文本和值)

   $(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