JQuery03-属性操作,批量操作,attr() prop()

最新推荐文章于 2023-06-16 22:13:45 发布

靠谱的大钊

最新推荐文章于 2023-06-16 22:13:45 发布

阅读量485

点赞数

分类专栏： JQuery 文章标签： html jquery dom javascript

本文链接：https://blog.csdn.net/qq_44236958/article/details/112726534

版权

JQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JQuery的属性操作

JQUery的属性操作

html() 他可以设置和获取起始标签和结束标签中的内容. 跟dom属性 innerHTML 一样。
text() 它可以设置和和获取起始标签和结束标签中的文本跟 dom 属性 innerText 一样
val() 它可以设置和获取表单项目的value值跟dom中的value值一样

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            // //不传参数 是获取 传递的参数值设置
            //     alert($("div").html());//获取
            //     $("div").html("<h1>我是div中的标题 1</h1>")//设置
            //
            // alert($("div").text());//获取
            // $("div").text("<h1>我是div中的标题 1</h1>");//设置

            //不传参数 是获取 传递参数时设置
            $("button").click(function () {
                alert($("#username").val());//获取
                $("#username").val("大钊牛逼");//设置
            })
        })

    </script>
</head>
<body>
<div>我是div标签
    <span>我是div中的span</span>
</div>
<input type="text" name="username" id="username">
<button>操作输入框</button>
</body>
</html>

jquery批量操作

 $(function () {
                //批量操作单选
            // $(":radio").val(["radio2"]);
            // //批量操作筛选框的选中状态
            // $(":checkbox").val(["checkbox3","checkbox2"]);
            //
            //
            // // 批量操作多选的下拉框选中状态
            // $("#multiple").val(["mul2","mul3","mul4"]);
            // // 操作单选的下拉框选中状态
            // $("#single").val(["sin2"]);
			
     	
            $("#single,:radio,#multiple").val(["radio2","sin2","mul2","mul3"]);
        })

attr() prop()

attr()可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等

attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj
prop() 在没返回值的情况下返回flase

可以设置和获取属性的值只推荐操作 checked、readOnly、selected、disabled 等等

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            //attr()
            /*
            可以设置和获取属性的值,不推荐checked  readonly   selected  disabled等着
            attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj
            prop() 可以设置和获取属性的值 只推荐checked、readOnly、selected、disabled 等等
             */
            alert($(":checkbox:first").attr("name"))//获取
            // $(":checkbox:first").attr("name","asdas")//设置 在浏览器中查看源代码

            $(":checkbox").prop("checked", true);// 官方觉得返回undefined是一个错误
            $(":checkbox:first").attr("abc", "abcValue");
            alert($(":checkbox:first").attr("abc"));


        })
    </script>
</head>
<body>
<body>
<br/>
多选：
<input name="checkbox" type="checkbox" checked="checked" value="checkbox1"/>checkbox1
<input name="checkbox" type="checkbox" value="checkbox2"/>checkbox2
<br/><br/>
<div>1234</div>
<div>1234</div>
</body>
</body>
</html>