当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jquery如何给对象动态添加属性以及选择器、事件的绑定？（代码教程）

jquery如何给对象动态添加属性以及选择器、事件的绑定？（代码教程）

2019年03月23日  | 移动技术网IT编程  | 我要评论

1、demo  

var aa="maker";  
var bb=123;  
var lists={};  
eval("lists."+aa+"="+bb);  
eval('('+"lists."+aa+"="+bb+')');  
console.log(lists);

这种方式试过确实可以

2、项目中使用

$("#saveform").on("click",function(){  
        var param={};  
        //bz订单号  
        var bzorderid=$("#bzorderid").val();  
        //获取所有产品  
        $("#allsk .sk td input").each(function(){  
            var id=this.id;  
            var name=this.name;  
            var val=$("#"+id).val();  
            //动态添加属性、赋值  
            eval("param."+name+"="+val)  
        });  
        }

遍历input获取值，js对象动态添加属性和属性值。

3、使用[] 获取js对象的变量属性值和给变量属性赋值

success:function(data){  
                var $data = data;  
                var len = $data.length;  
                for(var i=0;i<len;i++) {  
                    var $obj = $data[i];  
                    var date =$obj.datestr;  
                    var times = $obj[date];//$obj对象的属性是一个变量即date的值  
                    datetime[date]=times; //给datetime对象的变量属性赋值  
                }  
                }

其中的$obj[date] 就是获取$obj对象的date的值的属性的值而date的值在这里就是年份如：2017-03-30，所以可以使用[]来获取动态的值和动态赋值！

jquery选择器

一、基本选择器

 基本选择器是jquery中最常用的选择器，也是最简单的选择器他是通过id、class和标签名来查找dom中的元素的！

1、按照id进行选择

$(“#ids”)其中的ids是一个标签的id值而$(#ids“”)就是满足条件的那个标签！

2、按照class进行选择

$(".myclass")其中的myclass就是class="myclass"的值，而$(".myclass")就是获取类为myclass的所有标签，有可能是一个标签有可能是多个标签即一个数组！

3、按照标签名称进行选择

$("p") 就是选择所有的p标签。

这三个就是基本的选择了，当然我们可以去组合他们实现复杂的选择如：

$("p ul li.myclass")选择p 下的ul下的li并且class=".myclass"的标签

$("p.myclass ul li.myclass") 选择p下的class=".myclass"下的ul下的li并且class=".myclass"

$("#one").css("background","#bbffaa"); 设置id为one的元素的标签的背景颜色！

$("p.min").css("background","#bbffaa");设置所有class="min"的p标签的颜色！

注意:在选择器中有没有空格是区别很大的所以要注意，如果两个或多个之间是使用“，”隔开的则说明是多个而如果是空格隔开的则说明是子集而如果没有空格则说明是同一级的！

二、层次选择器

如果想通过dom元素之间的层次关系来获取特定元素，列如后台元素，子元素，相邻元素和兄弟元素等，则通过层次选择器就是一个很好的选择！

1、$("p span"):选择<p>中的所有<span>元素也就是只要在p中的span则都会被选出来，比如span中套span的都会选出来！

2、$("p>span"):选择<p>中的所有子<span>元素，这种选择是只选择子集元素而不会向上面一样吧所有的都选出来@

3、$("p + p"):选择和当前p紧挨的下一个p元素即他们是兄弟元素！

4、$("p~p"):选择当前p之后的所有兄弟元素！

三、简单过滤选择器

1、$("p :first"): 选择所有<p>中的第一个<p>元素

2、$("p :last"): 选择所有<p>中的最后一个<p>元素

3、$("p :not(select)");其中的select是一个选择条件比如 $("p :not(.myclass)") 选择所有class不是myclass的p元素！

4、$("input :even");选择索引是偶数的

5、$("input :odd");选择索引是基数的

6、$("input :eq(1)");选择索引是1的input元素，注意这里的索引和属组集合一样都是从o开始的！

7、$("input :gt(1)");选择索引值大于1的input元素注意不包含1

8、$("input :lt(1)");选择索引值小于1的input元素注意不包含1

四、内容过滤选择器

1、$("p:contains('mytest')");选择含有mytest的文字的p元素

2、$("p:empty");选择不包含元素，文档的<p>元素

3、$("p:has(p)");选择含有<p>标签的<p>元素

4、$("p:parent");选择含有子元素或者文本的元素

五、属性过滤选择器

以标签的属性为条件进行选择，可以使用jquery提供的属性过滤选择器进行选择！

1、$("p[id]"),$("p[title]")选择拥有属性id的元素，选择拥有属性title的元素！

2、$("p[title=mytitle]");选择属性title="mytitle"的p元素！

3、$("p[title !=mytitle]");选择属性title不是mytitle的的p元素！

4、$("p[title ^=mytitle]");选择属性title以mytitle开始的元素！

5、$("p[title $=mytitle]");选择属性title以mytitle结束的元素！

6、$("p[id=myid][title=mytitle][name=myname]");选取id为myid、title为mytitle和name=myname的p元素

7、$("p[title *=mytitle]");选取title中含有mytitle的p元素！

六、表单对象选择器

1、$("input:checked");选取所有被选中的input元素；

2、$("select:selected");选取所有被选中的元素;

七、子元素过滤器

    :first-child

    :last-child

    :nth-child()

    :only-child

八、用户自定义选择器

    $.expr[":"].greenbg = function(element){

        return $(element).css('background-color') ==="green";

};

    var bg = $(":greenbg");

3、demo

（1）、var  $arr = $(input[name=myname]:checked);获取名称为myname的被选中的元素！

（2）、var $arr = $(input[name=myname:checkbox:checked]);获取名称为myname的多选框的被选中的元素！

（3）、var $arr = $(input[name=myname][type=checkbox]:checked);获取名称为myname的多选框的被选中的元素！

七、选择器中的特殊字符

1、特殊字符有： ".","#","(","["等都是特殊字符需要使用转义字符转义即 \\#\myid 就是id="myid"的意思！

八、jquery的class的增删查

1、attr()和addclass()的区别；

attr()给标签添加类

$(p).attr("class","high");

$(p).attr("class","another");

最后的<p>标签： <p class="another">text</p>

$(p).addclass("high");

$(p).addclass("another");

最后的<p>标签：<p class="high another">text</p>

通过这个demo就知道attr() 和addclass的区别，attr()会把之前的替换掉而addclass是累加！

2、删除class即removeclass();

$(p).removeclass("high").removeclass("another"); //把两个元素删除了！

3、判断是否有这个class即hasclass()

$(p).hasclass("high");

九、jquery事件的绑定

1、bind(type,[data],fun);

其中的type就是绑定的类型，其中的type有：blur、focus、load、scroll、unload、click、dbclick、mousedown、mousedown、mouseup、change、select、keydown、keypress、keyup等……

第二个参数data就是event.data属性值

第三个参数fun为半丁的处理函数

2、on（）方法：

on()方法和bind相似，比如我们常用的有 $("#myid").on("click",function(){ })

3、unbind([type]) 取消绑定的事件

$("#myid").unbind("click");  //取消这个id上绑定的click事件

4、one(type,[data],fun);方法

one()方法和on()、bind()方法是一样的，只是one()只有一次起作用的，也就相当于bind绑定后做了一件事后立马取消绑定！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网