属性绑定和获取

Posted 2020-10-14 Me*淡定

最近每天都在熬夜，今天感觉眼睛特别涩，我决定，今天早睡，哈哈哈，上次总结了jquery控制节点，今天总结jquery控制属性，学习完基础知识，看看下面的案例练习一下，掌握的会更好

 

属性绑定和获取

 

1、jqipt.attr(" 属性名"，“属性值”)

      a)获取 jqjpt.attr("属性名")；

      b)添加类名 jqipt.attr("class","类名字")

      c)删除属性 jqipt.removeAtter("属性名")

      d)form表单添加 checkbox \\selected display 用prpo（“属性名” ，“”）

 //绑定到jQuery上，标签上没有
            jQbut.click(function(){
                jQinp.text="11"; //绑定属性
                console.log(jQinp.text)
            })
            //绑定到jQuery上 标签上也可以显示
            jQbut.click(function(){
                jQinp.attr("title",11); //绑定属性
                console.log(jQinp.attr("title"));
            });
            //绑定类名
            jQbut.click(function(){
                jQinp.attr("class","box") //绑定属性
                console.log(jQinp.attr("class"));
            });
            // 删除属性名
            jQbut.click(function(){
                jQinp.removeAttr("class")
            })
// form特性属性用 prop 其他情况还是用attr
            jQbut.click(function(){
                            jqinp2.prop("checked",true)
                            jqinp2.attr("checked",true)//一次性管用
                    })
 
        }

 

2、val()方法

    a)获取标签肿的value的属性

    b)$("input").varl（）；获取值

    c)$(""input).val(" 赋值内容")

//val() 获取value属性的值 当val(有参数)是赋值 (js中的value)
            alert($("input").val());
            $("input").val("我是刚赋值给input的val")

 

3、text()方法获取文本值

    a) $("div").text()获取内容

  //text() 获取双标签的文本值 （不识别标签） 相当于js中的innerText
            alert($("div").text());
            $("div").text("<li我是新的li</li>")

4、html() 获取文本值

 //html() 获取双标签的文本值 （识别标签） 相当于js中的innerHTML
            alert( $("div").html())
            $("div").html("<li我是新的li</li>")

 

案例

全选，反选

 $(function(){
        //需求1：点击上面的多选按钮，下面的所有多选按钮都和上面的一致
        $("#j_cbAll").click(function(){
           $("#j_tb input:checkbox").prop("checked",$(this).prop("checked"))
        });
        //需求2、点击下面的多选按钮，判断下面的所有选择按钮都是否全部被选定只有全部
        $("#j_tb input:checkbox").click(function(){ // input:checkbox"属性值
            //判断，只有所有都背选定，上面的才被选定
            //技术点：带有checked属性的标签和checkbox个数一样多的时候
            if($("#j_tb input:checkbox").length === $("#j_tb input:checked").length){
                //当全不被选定 上面的input checked
                $("#j_cbAll").prop("checked",true)
            }else{
                $("#j_cbAll").prop("checked",false)
            }
        })
    })

动态添加案例

<script>
        jQuery(function () {
            //需求1：页面加载的时候每隔固定时间，.word中添加一个字符。
            fn("中国十九大召开",$(".typed-cursor"),$(".word"))
            //需求2：点击say按钮，上面的input中的内容，每隔固定时间，.word中添加一个字符，插入的就是input中的内容。
            $("#btnSay").click(function(){
                    fn($("#inValue").val(),$(".typed-cursor"),$(".word"))
                    $("#inValue").val("")
            });
        //封装
            function fn(ele1,ele3,ele4){
                //1.定义字符串，然后显示插入条光标(把字符串转换成数组)
                var src=ele1;
                var arr=src.split("");
                var src2="";
                var num=0;
                var time=null;
                //2.定时器。
                time=setInterval(function(){
                    //4.判断，如果文字的个数和数组的长度一样了，就清除定时器
                    if(arr[num]===undefined) {
                        clearInterval(time);
                        ele3.hide()
                    }else{
                        //定义一个字符串用来接收
                        src2+=arr[num];
                        //3.每隔一段时间，在.word中插入一个文字。（ 就是改变内容，text() ）
                        ele4.text(src2);
                        num++
                    }
                },500)
            }
        });
    </script>