属性绑定和获取

最近每天都在熬夜,今天感觉眼睛特别涩,我决定,今天早睡,哈哈哈,上次总结了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>

时间: 2024-10-14 03:28:30

属性绑定和获取的相关文章

Spring Boot 2.0的属性绑定

Spring Boot2.0的属性绑定 原文从Spring boot第一个版本以来,我们可以使用@ConfigurationProperties注解将属性绑定到对象.也可以指定属性的各种不同格式.比如,person.first-name,person.firstName和PERSON_FIRSTNAME都可以使用.这个功能叫做"relaxed binding". 不幸的是,在spring boot 1.x,"relaxed binding"显得太随意了.从而使得很难

WPF属性绑定实现双向变化

WPF依赖项属性可以实现属性的绑定,成功绑定之后只要修改后台绑定的属性,即可UI同步自动更新绑定的值,无需手动刷新界面:同样,前台的值变化后,通过获取绑定的属性值也可获取UI变化后的值,实现双向变化的效果.属性绑定使得UI更新非常的方便,下面分享一个小栗子说明使用的方式. 1.先做了一个有一个TextBlock和一个Button的UI,想要实现点击后TextBlock发生变化. <Window x:Class="WPFDemo.Window1" xmlns="http:

Vue.js学习笔记:属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

Ember.js 入门指南——handlebars属性绑定

本文从http://www.ibeginer.sinaapp.com迁移过来,欢迎访问原页面. 简单讲属性绑定其实就是在HTML标签内(是在一个标签的"<"和">"中使用)直接使用handlebars表达式.可以直接用handlebars表达式的值作为HTML标签中某个属性的值. 准备工作:ember generate route binding-element-attributes 1,绑定字符串 <!-- //  app/templates/b

【WPF】如何把一个枚举属性绑定到多个RadioButton

一.说明 很多时候,我们要把一个枚举的属性的绑定到一组RadioButton上.大家都知道是使用IValueConverter来做,但到底怎么做才好? 而且多个RadioButton的Checked和UnChecked都会触发绑定,这样就会调多次的Set. 二.目的 实现一个枚举属性绑定到多个RadioButton, 属性的Set方法不会被触发多次. 三.实现 方法大家都知道,就是利用Converter和ConevertParamter属性. 因为多个控件绑定一个属性,Checked和UnChe

表单的属性和方法, 获取表单和表单的元素, 验证表单

表单的属性和方法 一. 表单字段的属性(id/name/value/form),这里用value属性来举例 上面的form属性代表获取表单字段的父级表单对象 1. 属性的获取         console.log(document.myform.username.value); 2. 属性的设置            document.myform.username.value="123"; 3. 获取表单字段的父级表单对象 console.log(document.myform.u

使用注解属性绑定

大家应该知道在Spring中有一个注解@Value,他可以帮助我们来讲Spring加载的配置文件(*.perperties)文件中的信息自动的注入到我们的非静态属性中的. 一般情况下我们会这样使用: 1. 首先在Spring的配置文件中加载属性文件: ? 1 <context:property-placeholder location="classpath:component.properties"  ignore-unresolvable="true"/&g

qml中的属性绑定与赋值

浅谈qml属性绑定与赋值 属性赋值 就字面意思,赋一个值给属性 Rectangle { id:rect Component.onCompeleted:{ rect.width = 10; // 赋值 rect.height = 10; // 赋值 rect.color = "red"; // 赋值 } } 属性赋值时会发出信号,可以通过信号处理器,来为信号添加处理函数,关于信号处理器,也就是连接到同一个信号的槽函数的队列,每次为信号处理器书写处理函数时,并不会覆盖上一次书写的处理器,最

Knockoutjs实例 - 属性绑定(Bindings)之流程控制(Control flow)

一.foreach binding 使用此功能可以方便我们循环遍历输出某个数组.集合中的内容. (1).循环遍历输出数组 View Row Code 1 <script type="text/javascript" src="knockout-2.2.0.js"></script> 2   3 <table> 4      <thead> 5          <tr><th>First nam