jquery属性

lsxiao 发布于2019-08-23 11:58 / 1286人阅读

摘要：函数的结果如果有相应的属性，返回指定属性值。如果没有相应的属性，返回值是。对于元素本身就带有的固有属性，在处理时，使用方法。

原生方法给对象加属性

div

打印输出123 注意：此时在DOM结构中看不见值

2.oDiv.setAttribute("bb","456");
console.log(oDiv.bb);

现在DOM中可以看见值了，但是想要打印输出bb的值就要
oDiv.setAttribute("bb","456");
console.log(oDiv.getAttribute("bb"));

建议如果是自定义属性用第1种方法，如果属性的值是自带的，比如id class用第二种方式。

用jquery的方式写

1..attr（）和.prop（）都是获取值用的。
$("#div1").attr("aa","123");
console.log($("#div1").attr("aa"));

$div1.prop("bb","456");
console.log($div1.prop("bb"));

注意： .attr和.prop的区别
prop()函数的结果:
  1.如果有相应的属性，返回指定属性值。
  2.如果没有相应的属性，返回值是空字符串。
attr()函数的结果:
  1.如果有相应的属性，返回指定属性值。
  2.如果没有相应的属性，返回值是undefined。
  
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()。

举个例子

你爱好的运动是？

    足球
    篮球
    排球
    羽毛球
    

    
    
    
    

var $hobbys = $("input[name="hobby"]");
//全选
$("#all").on("click",function(){
    $hobbys.prop("checked",true);
});
//全不选
$("#notall").on("click",function(){
     $hobbys.prop("checked",false);
 });
1.出现了一个问题：点击按钮的时候网页回自己提交。
解决办法： form表单中的按钮button要加上一句 type="button"
           这样
2.反选
 //反选时要知道哪个已经被选了 哪个没被选 要遍历一次
         $("#reverse").on("click",function(){
             for(var i=0; i<$hobbys.length; i++){
                    var elem = $("input[name="hobby"]:eq("+i+"):checked");
                    //表示选中的框
                    console.log(elem);
                }
         });
 //打印输出

选中第二项 点击反选 会遍历输出4个数组

发现数组的length可以区别某个框是否被选上 巴特 我不会写了

插播forEach用法

var arr=["a","b","c"];
    arr.forEach(function(elem,index,arr){
        console.log(elem,arr);
    });
   比for循环简单一点

回到刚才

jquery中有一个循环方法each() 巴特 each(index,elem,arr)
//反选
 $("#reverse").on("click",function(){
      $hobbys.each(function(index,elem,arr){
          console.log(elem);
      });
 });
 现在输出的是原生对象

console.log($(elem).prop("checked"));

现在可以通过判断true/false判断是否被选中

//反选

$hobbys.each(function(index,elem,arr){
      if($(elem).prop("checked")){
          $(elem).prop("checked",false);
       }
      else{
          $(elem).prop("checked",true); 
          }
});
也可以用原生的方法写
//反选
$hobbys.each(function(index,elem,arr){
    this.checked = !this.checked;
}
this指当前的对象

说三遍具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()。

完整代码




    
    
    
    Document


    你爱好的运动是？
    
        足球
        篮球
        排球
        羽毛球

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97775.html

jQuery源码分析2-JQ对象添加一些方法和属性

摘要：节点修改对象的属性，这就相当于把对象转成了一个类数组，最后返回，可用于链式调用。如果传入的是单标签，且第二个参数是一个纯对象例如则把后面对象的属性一一添加到创建的这个节点的属性上。我们先看看jQuery的原型中初始化了哪些属性和方法： jQuery.fn = jQuery.prototype = { jquery: core_version, //jquery版本号 ...

TANKING 2019-08-21 11:26 评论0 收藏0
jQuery源码分析3-jQuery对象的扩展--extend

摘要：的指向的是对象，所以此时扩展的是对象，可以直接通过的方式调用。写过jquery插件的人都知道可以通过jquery提供的extend可以对jquery对象进行扩展，而且该方法不仅可以对jquery对象扩展，还能给一个对象添加新的属性和方法，这个在后面会介绍。通过不同的方式调用extend扩展的方法也不同：通过 $.extend() 扩展的是静态方法；而通过 $.fn.exten...

MonoLog 2019-08-20 13:53 评论0 收藏0
JQuery基础修炼-样式篇

摘要：具有相同的父元素，并匹配过滤选择器子选择器选择所有指定元素中指定的的直接子元素。可见元素的宽度或高度，是大于零。元素的或被认为是可见的，因为他们仍然占用空间布局。 jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能。我们可以用jQuery...

_Dreams 2019-08-02 15:55 评论0 收藏0
JQuery基础修炼-样式篇

摘要：具有相同的父元素，并匹配过滤选择器子选择器选择所有指定元素中指定的的直接子元素。可见元素的宽度或高度，是大于零。元素的或被认为是可见的，因为他们仍然占用空间布局。 jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能。我们可以用jQuery...

luck 2019-08-19 18:24 评论0 收藏0
20170621-jQuery总体结构分析

摘要：利用了这一特性，通过在构造函数内部用运算符创建并返回另一个构造函数的实例，因此当我们创建对象的时候，可以使用的形式，也可以省略运算符，直接通过的形式得到对象。 jQuery总体结构 1 (function(window, undefined){ 2 3 var jQuery = (function(){ 4 var jQuery = f...

dinfer 2019-08-21 15:55 评论0 收藏0
浅析jQuery整体框架与实现（上）

摘要：通常的做法是，为它们指定回调函数。请求返回请求返回请求返回异步队列解耦异步任务和回调函数为模块队列模块事件提供基础功能。前言 jQuery整体框架甚是复杂，也不易读懂，这几日一直在研究这个笨重而强大的框架。jQuery的总体架构可以分为：入口模块、底层模块和功能模块。这里，我们以jquery-1.7.1为例进行分析。 jquery的总体架构 16 (function( window,...

VEIGHTZ 2019-08-21 10:20 评论0 收藏0