JS笔记

Posted 2020-09-19 charles999

 

20170730 JS中的prototype

阮一峰的网络日志http://www.ruanyifeng.com/blog/javascript/

 20170721 jsp文件引入js文件的方式（项目部署于web容器中）http://www.cnblogs.com/tomspapaya/p/3502563.html

http://www.cnblogs.com/qqzy168/archive/2013/03/11/2953492.html

1.jquery和js如何判断checkbox是否选中及改变checkbox状态

jquery：

<div id="divId" class="divTable">
<div class="tableBody">
<ul ><li ><input type="checkbox" value="501" ></li></ul>
</div>
</div>

$("input[type=\'checkbox\']").attr(\'value\')
返回结果：501

$("input[type=\'checkbox\']").is(\':checked\')
返回结果：选中=true，未选中=false

js：

if(document.getElementById("checkboxID").checked){
    alert("checkbox is checked");
}

 

jquery判断checked的三种方法:
.attr(\'checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop(\'checked\'): //16+:true/false
.is(\':checked\'):    //所有版本:true/false//别忘记冒号哦
jquery赋值checked的几种写法:
所有的jquery版本都可以这样赋值:
// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);
jquery1.6+:prop的4种赋值:
// $("#cb1″).prop("checked",true);//很简单就不说了哦
// $("#cb1″).prop({checked:true}); //map键值对
// $("#cb1″).prop("checked",function(){
return true;//函数返回true或false
});
//记得还有这种哦:$("#cb1″).prop("checked","checked");

今天在用JQuery的时候发现一个问题用.attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined.

为什么jquery 1.6+增加了.prop()方法，因为在有些浏览器中比如说只要写disabled，checked就可以了，而有的要写成disabled ="disabled"，checked="checked"。所以，从1.6开始，jq提供新的方法“prop”来获取这些属性。
 以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。

看些例子
<input type="checkbox"id="test" abc="111" />
$(function(){ 
el = $("#test"); 
console.log(el.attr("style")); //undefined 
console.log(el.prop("style")); //CSSStyleDeclaration对象 
console.log(document.getElementById("test").style);//CSSStyleDeclaration对象 
});
el.attr(“style”)输出undefined，因为attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，自然输出undefinedel.prop(“style”)输出CSSStyleDeclaration对象，对于一个DOM对象，是具有原生的style对象属性的，所以输出了style对象至于document.getElementById(“test”).style和上面那条一样
接着看：
el.attr("abc","111") 
console.log(el.attr("abc")); //111 
console.log(el.prop("abc")); //undefined
首先用attr方法给这个对象添加abc节点属性，值为111，可以看到html的结构也变了
el.attr(“abc”)输出结果为111，再正常不过了el.prop(“abc”)输出undefined，因为abc是在这个的属性节点中，所以通过prop是取不到的
el.prop("abc", "222"); 
console.log(el.attr("abc")); //111 
console.log(el.prop("abc")); //222
我们再用prop方法给这个对象设置了abc属性，值为222，可以看到html的结构是没有变化的。输出的结果就不解释了。
上面已经把原理讲清楚了，什么时候用什么就可以自己把握了。
提一下，在遇到要获取或设置checked,selected,readonly和disabled等属性时，用prop方法显然更好，比如像下面这样：
<input type="checkbox"id="test" checked="checked"/>console.log(el.attr("checked")); //checked 
console.log(el.prop("checked")); //true 
console.log(el.attr("disabled")); //undefined 
console.log(el.prop("disabled")); //false
显然，布尔值比字符串值让接下来的处理更合理。
PS一下，如果你有JS性能洁癖的话，显然prop的性能更高，因为attr需要访问DOM属性节点，访问DOM是最耗时的。这种情况适用于多选项全选和反选的情况。

大家都知道有的浏览器只要写disabled，checked就可以了，而有的要写成disabled ="disabled"，checked="checked"，比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined

jq提供新的方法“prop”来获取这些属性，就是来解决这个问题的，以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。

那么，什么时候使用attr，什么时候使用prop？？
1.添加属性名称该属性就会生效应该使用prop.
2.是有true,false两个属性使用prop.
3.其他则使用attr

jquery中prop方法和attr方法的区别浅析

 

1、赋值时候，如果是<input type="checkbox" checked>这样的只有属性名就能生效的属性
推荐prop，即：$(\'input\').prop(\'checked\',true);
同时，false表示取消，即：$(\'input\').prop(\'checked\',false);
当然attr也行的：$(\'input\').attr(\'checked\',\'这里写什么都行的\');
取消属性就是移除：$(\'input\').removeAttr(\'checked\');
2、取值的时候，如果是<input  id="input1" type="checkbox" checked><input  id="input2" type="checkbox">
推荐使用prop，即：
$(\'#input1\').prop(\'checked\'); //返回true
$(\'#input2\').prop(\'checked\'); //返回false
而使用attr，则：
$(\'#input1\').attr(\'checked\'); //返回checked
$(\'#input2\').attr(\'checked\'); //返回undefined
3、特殊属性赋值取值
这个特殊说明下，获取很多人都用不到呢。
比如需要在input中追加一个data-tips属性。变成这样子 <input type="text" value="" data-tips="aa">
这时候只能写：$(\'input\').attr(\'data-tips\',\'aa\');
使用prop是不管用的。
但是读值时候，两个都可以的：
$(\'input\').attr(\'data-tips\');//返回aa
$(\'input\').prop(\'data-tips\');//返回aa

问题：checkbox的状态切换只在第一次选中和非选中执行时有效
https://q.cnblogs.com/q/93828

jquery checkbox勾选/取消勾选的诡异问题

 http://www.cnblogs.com/KeenLeung/p/3799895.html