jquery-属性操作

最新推荐文章于 2021-05-07 14:07:46 发布

原创最新推荐文章于 2021-05-07 14:07:46 发布 · 535 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #class #dom #javascript #html

jQuery 专栏收录该内容

28 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性操作</title>
    <script src="../libs/jquery.js"></script>
</head>
<body>
<p title="选择你最喜欢的水果"><strong>你最喜欢的水果是？</strong></p>
<ul>
    <li title='苹果'>苹果</li>
    <li title='橘子'>橘子</li>
    <li title='菠萝'>菠萝</li>
</ul>
<!-- 对应下面的val()方法代码-->

<input type="text" id="address" value="请输入邮箱地址">
<input type="text" id="password" value="请输入邮箱密码">
<input type="button" value="登录">
<script>
    /*//获取属性和设置属性
    var $para = $("p"); //获取p节点
    var p_txt = $para.attr("title");    //获取P元素节点属性title
    /!*$("p").attr("title","your title");  //设置单个的属性值*!/
    $("p").attr({"title" : "your title","name" : "test"});//一次性为同一个元素设置多个属性*/

    /*//删除属性
    $("p").removeAttr("title");//删除p元素的属性title*/

    //设置和获取HTML、文本和值
    //html()方法
    /*var p_html = $("p").html();
    alert(p_html);
    $("p").html("<strong>111111</strong>");//设置p元素的HTML代码*/

    //text（）方法,JavaScript中的Innertext属性并不能在Firefox下运行，而jQuery的text（）方法支持所有的浏览器
    /*var p_text = $("p").text();
    alert(p_text);
    $("p").text("22222");*/

    //var方法
    //当鼠标获取焦点时
   /* $("#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("请输入邮箱地址");
        }
    });*/

    //使用表单元素的defaultValue属性也可以实现相同的功能
    $("#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);
        }
    })


</script>
</body>
</html>