我们对于checkbox的选中与不选中操作如下,$.htm

时间:2020-02-06 06:25来源:美高梅游戏网站
对于新手来说,刚开始学习的时候会对jQuery的html,prop()获取属性的方法模拟两口,分不出他们的区别,我在这里简单的介绍区分下,希望能给大家带来点帮助吧。 原文地址:   Pl 使用了

对于新手来说,刚开始学习的时候会对jQuery的html,prop()获取属性的方法模拟两口,分不出他们的区别,我在这里简单的介绍区分下,希望能给大家带来点帮助吧。

原文地址:

 

Pl

  1. 使用了被废弃的jQuery.fn.live方法
  • <!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.0//EN"     
  • ";    
  • <html>    
  • <head>    
  •     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>    
  •     <title>Sample Page!</title>    
  •     <script type="text/javascript" src="jquery-1.9.1.min.js"></script>  
  •     <script language="JavaScript" type="text/javascript"><!--    
  •      
  • function TestEvent(){     
  •   document.MyForm.text1.removeAttribute("disabled"); //移除文本框disable属性.    
  •   document.MyForm.text1.value="enable";//改变文本框中的文字.    
  • }    
  • //给ID为key的a标签 添加 title属性并赋值为"测试title" 摘取天上星
  • function AddTitle(){  
  •     document.getElementById('key').setAttribute("title","测试title");   
  • }  
  • //给ID为key的a标签 删除 title属性  
  • function DelTitle(){  
  •     document.getElementById('key').removeAttribute("title");  
  • }  
  • //js获取title属性的值  
  • function GetTitle(){  
  •     var value=document.getElementById('key').getAttribute("title");  
  •     alert('title的属性值为:'+value);  
  • }  
  • //jq方式删除、设置元素属性,为了更加形象些对比,这里采用嵌入式方式,没有进行js html分离 摘取天上星
  • function a(){  
  •     alert('测试jq添加onclick属性');  
  • }  
  • //jq方式添加onclick属性  
  • function jqAddOnclick(){  
  •     $("#key").attr("onclick","a();");  
  • }  
  • //jq方式取得onclick属性值  
  • function jqGetOnclick(){  
  •     var value=$("#key").attr("onclick");  
  •     alert('onclick属性值为:'+value);  
  • }  
  • //jq方式删除onclick属性  
  • function jqDelOnclick(){  
  •     $("#key").removeAttr("onclick");  
  • }  
  •   
  • // --></script>    
  • </head>    
  • <body>    
  •     <a id="key" href="#123">add title</a>  
  •     <form name="MyForm" action="">    
  •     <input type="text" name="text1" value="disabled" disabled="disabled"/>    
  •     <input type="button" name="MyButton" value="js移除文本框disabled属性" onclick="TestEvent()"/>    
  •     <input type="button" name="addTitle" onclick="AddTitle();" value="js添加title属性">  
  •     <input type="button" name="getTitle" onclick="GetTitle();" value="js获取title属性">  
  •     <input type="button" name="delTitle" onclick="DelTitle();" value="js删除title属性">  
  •     <input type="button" name="jqadd" onclick="jqAddOnclick();" value="jq添加onclick属性">  
  •     <input type="button" name="jqget" onclick="jqGetOnclick();" value="jq获取onclick属性">  
  •     <input type="button" name="jqdel" onclick="jqDelOnclick();" value="jq删除onclick属性">  
  •     </form>    
  • </body>    
  • </html>    

Hellofine

手机美高梅游戏网址 ,jQuery Migrate库对此错误也在控制台有相应的警告:

关于jQuery1.9.1针对checkbox属性设置的一些调整差异(摘取天上星:

1、html()方法,类似于javascript众的InnerHtml属性,可以用来读取或者设置某个元素中的HTML内容。有两种用法,不带参数的,它表示提取里面的html代码,带参数的表示设置其html代码,传的是string或返回string的函数。 例: $ 返回:Pl

JQMIGRATE: jQuery.fn.live() is deprecated

 

Hello fine

live方法原本的作用是设置事件代理,该方法在jQuery 1.7之后就不推荐使用了,取代之的是jQuery.fn.on函数。他们的接口分别是:

在jquery 1.8.x中的版本,我们对于checkbox的选中与不选中操作如下:

$.html 设置div的内容为html代码'

$(selector).live('click', function(){/* some code */});

判断是否选中

H1

';

2、val()方法,设置或提取具有value属性的html代码,也支持select或其它。与html类型,带参数表示设置,可用传入string或返回string的函数。 例: $ 返回: dd $ 返回: 选择了selected的Array数组 $ 设置id为input1的value为ss

3、text()方法,类似于javascript众的InnerText方法,可以用来读取或者设置某个元素的文本内容 。使用方法与val类似。 4、attr()方法,来获取和设置元素的各种属性。带一个string参数的是返回这个属性的值,带两个参数的是设置这个属性的值。也可直接使用json来设置其属性,这样方便多了。 例: $.attr 返回 dd $.attr 设置其value为新 $.attr({name:'new',value:'新'}) 设置基name为new,value为新

5、prop()方法,返回值是标准属性:true/false,而不会跟attr()方法一样返回"disabled"或者""。在某些时候,比如访问input的disabled属性的时候,会有些问题,在有些浏览器里,只要写了disabled属性就可以,有些则要写disabled="disabled"。所以从1.6版本开始,jQuery提供新的方法prop()来获取这些属性啦。 那么,哪行属性应该用attr访问呢?第一个原则:只添加属性名称该属性就会生效使用prop();第二个原则:只存在true/false的属性应该使用prop()。按照官方说明,如果是设置disabled和checked这些属性,应该使用prop方法。

$(selector).on('click', [selector,] function(){/* some code */});

$('#checkbox').prop('checked')

乍一看,中括号里面的参数可以省略掉,俩函数不是一模一样么?于是天真地把函数名live直接替换成on,大部分时候,这么做好像没有引起任何异常。但是如果在你调用on函数的时候,前面的$(selector)在当前的网页上根本不匹配任何元素(该元素可能是后面的代码才加到DOM里的),那是不会绑定成功的。事实上,live函数将$(selector)代理到了document元素上,这个元素是肯定存在的,所以不会出现类似情况。正确的替换方法应该是:

设置选中与不选中状态:

$(selector).live('click', function(){/* some code */}); 替换为

$('#checkbox').attr('checked',true)

$(document).on('click', selector, function(){/* some code */});

$('#checkbox').attr('checked',false)

  1. 使用了被废弃的jQuery.fn.die方法

但此方法在jquery1.9.1中,有些处理不一样

jQuery Migrate对此错误的警告是:

IE10,Chrome,FF中,对于选中状态,第一次$('#checkbox').attr('checked',true)可以实现

JQMIGRATE: jQuery.fn.die() is deprecated

但是当通过代码清除选中,下次再通过代码 $('#checkbox').attr('checked',true) 去选中时

这个方法和前面的live刚好反过来,取消事件处理函数的绑定。新版本中应该使用off函数代替之,替换方式类似。

虽然代码中有checked='checked',但是画面表现都没有打勾。

  1. 使用了被废弃的jQuery.fn.toggle函数

IE8,IE6下无此问题。

jQuery Migrate对此错误的警告是:

后来调查了相关的资料,发现现在attr('checked',true)都换成prop('checked',true)

JQMIGRATE: jQuery.fn.toggle(handler, handler...) is deprecated

下面给出个JQ1.8.x以后 的全选反选的JQ例子

早期jQuery中名字叫toggle的函数有两个,一个是用于控制元素的显示和隐藏,这个用途的函数目前jQuery中依旧存在;另一个就是上面提到的被废弃的toggle函数,它用于绑定至少两个函数到同一个元素,点击该元素的时候两个函数交替着执行。这两个同名函数功能相差甚远,为了不引起误导,在jQuery 1.8中就不再建议使用了。替换的方式是把两个函数合并成一个函数的if-else两个区段,然后自己设置一个boolean变量,控制每次点击时应该执行哪个区段即可。

JS代码部分如下

  1. 使用了被废弃的jQuery.browser属性

[javascript] view plaincopy手机美高梅游戏网址 1手机美高梅游戏网址 2

jQuery Migrate对此错误的警告是

 

JQMIGRATE: jQuery.browser is deprecated

 

在前端开发中我们经常要根据不同的浏览器版本做出不同的处理,jQuery.browser本来是通过浏览器的userAgent字段来提取浏览器相关信息的。新版本中已经将其废弃,而是建议使用特征检测的方法去判断,并且给了一个Modernizr库作为推荐。不过,改成这个库可能改动成本有点大,如果你还是想沿用jQuery.browser的思路的话,可以自己去实现一下它。例如,判断是不是IE浏览器,可以用

  • $(function(){  
  •   $("#select_yes").click(function(){  
  •     $("input[name=id]").each(function(){  
  •       $(this).prop("checked",true);  
  •     });  
  •   });  
  •   $("#select_no").click(function(){  
  •     $("input[name=id]").each(function(){  
  •       $(this).prop("checked",false);  
  •     });  
  •   });  
  • });  

/msie/.test(navigator.userAgent.toLowerCase());

HTML代码部分如下

即自己手动获取userAgent字段,并且做一个正则表达式匹配。其他浏览器思路类似,都是对navigator.userAgent做一个正则匹配。

[html] view plaincopy手机美高梅游戏网址 3手机美高梅游戏网址 4

5.$(html)格式书写错误

 

在jQuery Migrate中,出现以下三种警告中的任何一种,都是属于这个错误:

 

  1. JQMIGRATE: $(html) HTML strings must start with '<' character

  2. JQMIGRATE: $(html) HTML text after last tag is ignored

  3. JQMIGRATE: HTML string cannot start with a '#' character

  • <input type="checkbox" value="1" name="id"><br/>    
  • <input type="checkbox" value="2" name="id"><br/>    
  • <input type="checkbox" value="3" name="id"> <br/>    
  • <input type="checkbox" value="4" name="id"> <br/>    
  • <input type="checkbox" value="5" name="id"> <br/>    
  • <input type="checkbox" value="6" name="id"> <br/>    
  • <input type="checkbox" value="7" name="id"> <br/>    

编辑:美高梅游戏网站 本文来源:我们对于checkbox的选中与不选中操作如下,$.htm

关键词: