KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定

textInput绑定目的

textInput绑定主要用于或者元素。他提供了DOM和<a href="https://www.jb51.cc/tag/viewmode/" target="_blank" class="keywords">viewmode</a>l的双向更新。不同于value绑定，textinput绑定是实时更新的。</p> <p>例如：</p> <p style="text-align: center"><p class="pic_center"><img id="theimg" src="https://files.jb51.cc/file_images/article/201610/20161011112644749.png?201691111274" alt="" /></p></p> <p>源码：</p> <div class="jb51code"> <pre class="brush:js;"> <p>Login name: <input data-bind="textInput: userName" /></p> <p>Password: <input type="password" data-bind="textInput: userPassword" /></p></pre> </div> <p><a href="https://www.jb51.cc/tag/viewmode/" target="_blank" class="keywords">viewmode</a>l:</p> <div class="jb51code"> <pre class="brush:js;"> <pre data-bind="text: ko.toJSON($root,null,2)"></pre> <script> ko.applyBindings({ userName: ko.observable(""),// Initially blank userPassword: ko.observable("abc") // Prepopulate }); </script></pre> </div> <p><h3>备注1：textInput绑定 VS value绑定</h3></p> <p>虽然value结合也可以进行双向文本框和视图模型<a href="https://www.jb51.cc/tag/xingneng/" target="_blank" class="keywords">性能</a>的结合，但是博主更喜欢textInput，因为他是实时更新的。value绑定与textInput绑定的主要的区别在于：</p> <p><h3>即时更新</h3></p> <p>value默认情况下，只有当<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>将焦点从文本框移开后才会更新您的模型。textInput每次击键或其他文本输入时立刻更新模型。</p> <p><h3>浏览器的事件处理</h3></p> <p>不同的浏览器有着文本输入机制，如剪切，拖动，或接受<a href="https://www.jb51.cc/tag/zidong/" target="_blank" class="keywords">自动</a>完成建议的事件在不同的浏览器中机制是不一致。value绑定，有额外的选项，如valueUpdate: afterkeydown获得对特定事件的更新，但是有可能不兼容所有的浏览器。</p> <p>textInput结合是专门用来处理各种浏览器的不同机制，即使在应对不同的<a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>输入机制也能保持一致和直接更新模型。</p> <p>不要尝试使用value和textInput在相同的元素上进行绑定。</p> <p><h3>hasFocus绑定目的</h3></p> <p>hasFocus绑定是视图模型<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>与DOM元素的焦点状态绑定。它是一个双向绑定，所以：</p> <p>如果您的视图模型<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>设置为true或者false，相关的元素将成为聚焦的或未聚焦。如果<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>手动对焦或unfocuses相关元件，所述视图模型<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>将被设置为true或false相应。如果您正在构建中，编辑元素动态<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>复杂的形式，你想控制，<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>应该开始打字，或插入符的响应位置，这是非常有用的。</p> <p><h3>示例1</h3></p> <p>这个例子中当文本框当前具有焦点时则<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>消息，并可以使用一个按钮通过编程方式触发焦点。</p> <p style="text-align: center"><p class="pic_center"><img id="theimg" src="https://files.jb51.cc/file_images/article/201610/20161011112805571.png?2016911112816" alt="" /></p></p> <p>源码：</p> <div class="jb51code"> <pre class="brush:js;"> <input data-bind="hasFocus: isSelected"> <button data-bind="click: setIsSelected">Focus programmatically</button> <span data-bind="visible: isSelected">The text<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> has focus</span> <script> var <a href="https://www.jb51.cc/tag/viewmode/" target="_blank" class="keywords">viewmode</a>l = { isSelected: ko.observable(false),setIsSelected: function() { this.isSelected(true) } }; ko.applyBindings(<a href="https://www.jb51.cc/tag/viewmode/" target="_blank" class="keywords">viewmode</a>l,document.getElementById("eq2")); </script></pre> </div> <p><h3>示例2</h3></p> <p>因为hasFocus绑定是双向绑定，这可以使切换的“编辑”模式更加便捷。</p> <p style="text-align: center"><p class="pic_center"><img id="theimg" src="https://files.jb51.cc/file_images/article/201610/20161011112842177.png?2016911112852" alt="" /></p></p> <p>源码：</p> <div class="jb51code"> <pre class="brush:js;"> <p> Name: <b data-bind="visible: !editing(),text: name,click: edit"></b> <input data-bind="visible: editing,value: name,hasFocus: editing" /> </p> <p><em>Click the name to edit it; click elsewhere to apply changes.</em></p> <script> function Person<a href="https://www.jb51.cc/tag/viewmode/" target="_blank" class="keywords">viewmode</a>l(name) { // Data this.name = ko.observable(name); this.editing = ko.observable(false); // Behaviors this.edit = function() { this.editing(true) } } ko.applyBindings(new Person<a href="https://www.jb51.cc/tag/viewmode/" target="_blank" class="keywords">viewmode</a>l("Bert Bertington"),document.getElementById("eq3")); </script></pre> </div> <p><h3>checked绑定目的</h3></p> <p>checked绑定主要用于复选框（<input type='checkbox'>）或单选按钮（<input type='radio'>）并与视图模型<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>进行绑定。</p> <p>当<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>更改了表单控件，这将更新您的视图模型<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>的值。同样，当您更新您的视图模型的值，也将直接反映到表单控件上。</p> <p>注意：对于文本框，下拉列表，以及所有以非可勾选表单控件，需要使用value绑定或者textInput绑定读写元素的值，而不是checked绑定。</p> <p><h3>示例1：复选框绑定</h3></p> <p style="text-align: center"><p class="pic_center"><img id="theimg" src="https://files.jb51.cc/file_images/article/201610/20161011112932056.png?2016911112943" alt="" /></p></p> <p>源码：</p> <div class="jb51code"> <pre class="brush:js;"> <p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p> <script type="text/javascript"> var <a href="https://www.jb51.cc/tag/viewmode/" target="_blank" class="keywords">viewmode</a>l = { wantsSpam: ko.observable(true) // Initially checked }; // ... then later ... <a href="https://www.jb51.cc/tag/viewmode/" target="_blank" class="keywords">viewmode</a>l.wantsSpam(false); // The check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> becomes unchecked </script></pre> </div> <p><h3>示例2：多复选框附带数组绑定</h3></p> <p style="text-align: center"><p class="pic_center"><img id="theimg" src="https://files.jb51.cc/file_images/article/201610/20161011113018514.png?2016911113030" alt="" /></p></p> <p>源码：</p> <div class="jb51code"> <pre class="brush:js;"> <p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p> <div data-bind="visible: wantsSpam"> Preferred flavors of spam: <div><input type="checkbox" value="cherry" data-bind="checked: spamFlavors" /> Cherry</div> <div><input type="checkbox" value="almond" data-bind="checked: spamFlavors" /> Almond</div> <div><input type="checkbox" value="msg" data-bind="checked: spamFlavors" /> Monosodium Glutamate</div> </div> <script type="text/javascript"> var <a href="https://www.jb51.cc/tag/viewmode/" target="_blank" class="keywords">viewmode</a>l = { wantsSpam: ko.observable(true),spamFlavors: ko.observableArray(["cherry","almond"]) // Initially checks the Cherry and Almond check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>es }; // ... then later ... <a href="https://www.jb51.cc/tag/viewmode/" target="_blank" class="keywords">viewmode</a>l.spamFlavors.push("msg"); // Now additionally checks the Monosodium Glutamate check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> </script></pre> </div> <p><h3>示例3：单选按钮</h3></p> <p style="text-align: center"><p class="pic_center"><img id="theimg" src="https://files.jb51.cc/file_images/article/201610/20161011113106388.png?2016911113117" alt="" /></p></p> <p>源码：</p> <div class="jb51code"> <pre class="brush:js;"> <p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p> <div data-bind="visible: wantsSpam"> Preferred flavor of spam: <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div> <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div> <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div> </div> <script type="text/javascript"> var <a href="https://www.jb51.cc/tag/viewmode/" target="_blank" class="keywords">viewmode</a>l = { wantsSpam: ko.observable(true),spamFlavor: ko.observable("almond") // Initially selects only the Almond ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a> button }; // ... then later ... <a href="https://www.jb51.cc/tag/viewmode/" target="_blank" class="keywords">viewmode</a>l.spamFlavor("msg"); // Now only Monosodium Glutamate is checked </script></pre> </div> <p><h3>参数</h3></p> <p><h3>主要技术参数</h3></p> <p>KO设置元素的选中状态，以配合您的参数值。任何以前选中的状态将被覆盖。您的参数被解释的方式取决于你绑定元素是什么类型：</p> <p>对于复选框，当参数值true时KO将设置为元素为选中状态，当它为false则为未选中状态。如果你给定的不是一个布尔值，KO会松散地解释。这意味着，非零数字和非null对象和非空字符串都将被解释为true，而零，null，undefined，和空字符串将被解释为false。</p> <p>当<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>选中或取消选中该复选框，将KO你的模型<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>设置为true或false。</p> <p>如果你的参数解析为一个被给予array数组。在这种情况下，KO将设置检查DOM中value<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>是否与数组值匹配，如果值匹配则被选中，如果不匹配则不勾选。</p> <p>当<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>选中或取消选中该复选框，将KO更改对应视图模型<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>的值。就像示例2一样。</p> <p>对于单选按钮，KO将检查视图模型的值是否等于单选按钮DOM节点的value<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>或检查视图模型<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>值是否等于checkedValue参数指定的值。就像示例3一样。</p> <p>当选择了<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>改变其单选按钮，KO会设置模型<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>值为选定的单选按钮的值。像示例3中，点击value="cherry"的单选按钮后将设置<a href="https://www.jb51.cc/tag/viewmode/" target="_blank" class="keywords">viewmode</a>l.spamFlavor为"cherry"。</p> <p>如果你的参数是监控<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>类型，每当值改变绑定将更新元素的选中状态。如果该参数是非监控<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>，它只会在首次运行时设置元素的选中状态，以后再不会更新。</p> <p><h3>其他参数</h3></p> <p>checkedValue</p> <p>checkedValue参数定义了使用值与checked绑定结合，而不是元素的value<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>。如果你想要的值是一个字符串（如整数或对象）以外的东西，或者你想动态设置的值，这非常有用。</p> <p>例如下边的例子：</p> <p style="text-align: center"><p class="pic_center"><img id="theimg" src="https://files.jb51.cc/file_images/article/201610/20161011113158410.png?201691111329" alt="" /></p></p> <p>源码：</p> <div class="jb51code"> <pre class="brush:js;">  <input type="checkbox" data-bind="checkedValue: $data,checked: $root.chosenItems" /> <span data-bind="text: itemName"></span>  <script type="text/javascript"> var <a href="https://www.jb51.cc/tag/viewmode/" target="_blank" class="keywords">viewmode</a>l = { items: ko.observableArray([ { itemName: 'Choice 1' },{ itemName: 'Choice 2' } ]),chosenItems: ko.observableArray() }; </script></pre> </div> <p>如果你的checkedValue参数是一个监控<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>，当值的变化和元素是否被选中，绑定将更新checked模型<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>。对于复选框，它会从数组<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>旧值并<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>新的价值。对于单选按钮，它只会更新模型值。</p> <p>以上所述是小编给大家介绍的KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可<a href="https://www.jb51.cc/tag/fenxiang/" target="_blank" class="keywords">分享</a>给好友！感谢<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>。</p><i class="glyphicon glyphicon-link"></i> 原文链接：https://www.f2er.com/js/45285.html</div> <div class="topcard-tags"><a href="https://www.f2er.com/tag/checked/" class="tag_link" target="_blank">checked</a><a href="https://www.f2er.com/tag/hasFocus/" class="tag_link" target="_blank">hasFocus</a><a href="https://www.f2er.com/tag/knockoutjs/" class="tag_link" target="_blank">knockoutjs</a><a href="https://www.f2er.com/tag/knockoutjsp/" class="tag_link" target="_blank">knockoutjs</a><a href="https://www.f2er.com/tag/pknockoutjs/" class="tag_link" target="_blank">knockoutjs</a><a href="https://www.f2er.com/tag/textInput/" class="tag_link" target="_blank">textInput</a></div> <ul class="list-group"> <li class="list-group-item"><a href="https://www.f2er.com/js/45286.html" title="JavaScript获取URL中参数querystring的方法详解">上一篇：JavaScript获取URL中参数querystri</a><a href="https://www.f2er.com/js/45283.html" title="深入理解JS中的Function.prototype.bind()方法" class="text-muted pull-right">下一篇：深入理解JS中的Function.prototype</a> </li> </ul> </div> </div> </div>  <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-4605373693034661" data-ad-slot="9144498553"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <div class="title"><h1>猜你在找的JavaScript相关文章</h1></div> <div class="list_con"> <a href="https://www.f2er.com/js/997747.html" title="Javascript中的事件冒泡与捕获"><div class="title">Javascript中的事件冒泡与捕获</div> <div class="summary">事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...</div> <time class="summary">作者：前端之家时间：2021-02-22</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/js/997746.html" title="搞懂js中小数运算精度问题原因及解决办法"><img class="lazy" src="https://www.f2er.com/images/np.jpg" data-original="https://www.f2er.com/res/2021/02-22/19/e40e1eb184cb2a5d8c5f6c5e730d8e82.png" title="" width="160" height="90" style="float:right;margin-left:30px;display:none;" /><div class="title">搞懂js中小数运算精度问题原因及解决办法</div> <div class="summary">js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...</div> <time class="summary">作者：前端之家时间：2021-02-22</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/js/997744.html" title="搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理"><div class="title">搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理</div> <div class="summary">什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提...</div> <time class="summary">作者：前端之家时间：2021-02-22</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/js/997743.html" title="前端对base64编码的理解，原生js实现字符base64编码"><div class="title">前端对base64编码的理解，原生js实现字符base64编码</div> <div class="summary">@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...</div> <time class="summary">作者：前端之家时间：2021-02-22</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/js/997742.html" title="搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式"><div class="title">搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式</div> <div class="summary">搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ：的缩写，说都能直接说出来：模型，：视图...</div> <time class="summary">作者：前端之家时间：2021-02-22</time> </a> </div> <div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fr-2o+fp-dx-wx" data-ad-client="ca-pub-4605373693034661" data-ad-slot="4561116489"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div><div class="list_con"> <a href="https://www.f2er.com/js/997318.html" title="js判断浏览器是否支持webGL"><div class="title">js判断浏览器是否支持webGL</div> <div class="summary">起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。在各种浏览器上运行...</div> <time class="summary">作者：前端之家时间：2021-02-14</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/js/997317.html" title="js判断undefined和null"><div class="title">js判断undefined和null</div> <div class="summary">js判断undefined js判断null js判断null和undefined</div> <time class="summary">作者：前端之家时间：2021-02-14</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/js/997316.html" title="将文字自动转为banner打印形式的工具"><div class="title">将文字自动转为banner打印形式的工具</div> <div class="summary">http://patorjk.com/software/taag/</div> <time class="summary">作者：前端之家时间：2021-02-14</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/js/997315.html" title="聊一聊 bootstrap 的轮播图插件"><div class="title">聊一聊 bootstrap 的轮播图插件</div> <div class="summary">今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...</div> <time class="summary">作者：前端之家时间：2021-02-14</time> </a> </div> <div class="list_con"> <a href="https://www.f2er.com/js/997314.html" title="js实现图片无缝循环跑马灯"><div class="title">js实现图片无缝循环跑马灯</div> <div class="summary">html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...</div> <time class="summary">作者：前端之家时间：2021-02-14</time> </a> </div> <div style="border-bottom: 1px solid #f4f4f4;margin-top:20px;"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fr-2o+fp-dx-wx" data-ad-client="ca-pub-4605373693034661" data-ad-slot="4561116489"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></div> </div> </div> </div>   <div class="col-sm-12 col-md-12 col-lg-3">  <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">编程分类</label> <div class="cate mt-20"><a href="https://www.f2er.com/html/" title="HTML">HTML</a><a href="https://www.f2er.com/html5/" title="HTML5">HTML5</a><a href="https://www.f2er.com/js/" title="JavaScript">JavaScript</a><a href="https://www.f2er.com/css/" title="CSS">CSS</a><a href="https://www.f2er.com/jquery/" title="jQuery">jQuery</a><a href="https://www.f2er.com/bootstrap/" title="Bootstrap">Bootstrap</a><a href="https://www.f2er.com/angularjs/" title="Angularjs">Angularjs</a><a href="https://www.f2er.com/typescript/" title="TypeScript">TypeScript</a><a href="https://www.f2er.com/vue/" title="Vue">Vue</a><a href="https://www.f2er.com/dojo/" title="Dojo">Dojo</a><a href="https://www.f2er.com/json/" title="Json">Json</a><a href="https://www.f2er.com/electron/" title="Electron">Electron</a><a href="https://www.f2er.com/nodejs/" title="Node.js">Node.js</a><a href="https://www.f2er.com/extjs/" title="extjs">extjs</a><a href="https://www.f2er.com/express/" title="Express ">Express </a><a href="https://www.f2er.com/xml/" title="XML">XML</a><a href="https://www.f2er.com/es6/" title="ES6">ES6</a><a href="https://www.f2er.com/ajax/" title="Ajax">Ajax</a><a href="https://www.f2er.com/flash/" title="Flash">Flash</a><a href="https://www.f2er.com/unity/" title="Unity">Unity</a><a href="https://www.f2er.com/react/" title="React">React</a><a href="https://www.f2er.com/flex/" title="Flex">Flex</a><a href="https://www.f2er.com/antdesign/" title="Ant Design">Ant Design</a><a href="https://www.f2er.com/webfrontend/" title="Web前端">Web前端</a><a href="https://www.f2er.com/weapp/" title="微信小程序">微信小程序</a><a href="https://www.f2er.com/wxmp/" title="微信公众号">微信公众号</a><div class="clearfix"></div> </div> </div> </div> </div>   <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7756441254" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div>   <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">最新文章</label> <ul class="n-list"><li><a href="https://www.f2er.com/js/997747.html" title="Javascript中的事件冒泡与捕获" target="_blank">• Javascript中的事件冒泡与</a></li> <li><a href="https://www.f2er.com/js/997746.html" title="搞懂js中小数运算精度问题原因及解决办法" target="_blank">• 搞懂js中小数运算精度问题</a></li> <li><a href="https://www.f2er.com/js/997744.html" title="搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理" target="_blank">• 搞懂：前端跨域问题JS解决</a></li> <li><a href="https://www.f2er.com/js/997743.html" title="前端对base64编码的理解，原生js实现字符base64编码" target="_blank">• 前端对base64编码的理解，</a></li> <li><a href="https://www.f2er.com/js/997742.html" title="搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式" target="_blank">• 搞懂：MVVM模型以及VUE中的</a></li> <li><a href="https://www.f2er.com/js/997493.html" title="js实现横向跑马灯效果" target="_blank">• js实现横向跑马灯效果</a></li> <li><a href="https://www.f2er.com/js/997318.html" title="js判断浏览器是否支持webGL" target="_blank">• js判断浏览器是否支持webG</a></li> <li><a href="https://www.f2er.com/js/997317.html" title="js判断undefined和null" target="_blank">• js判断undefined和null</a></li> <li><a href="https://www.f2er.com/js/997316.html" title="将文字自动转为banner打印形式的工具" target="_blank">• 将文字自动转为banner打印</a></li> <li><a href="https://www.f2er.com/js/997315.html" title="聊一聊 bootstrap 的轮播图插件" target="_blank">• 聊一聊 bootstrap 的轮播图</a></li> </ul> </div> </div> </div>   <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">热门标签 <span class="pull-right tx-12"> <a href="https://www.f2er.com/all" target="_blank">更多 ►</a></span> </label> <div class="topcard-tags"><a href="https://www.f2er.com/tag/guanbiyangao/" title="关闭广告" target="_blank">关闭广告</a><a href="https://www.f2er.com/tag/danduheaders/" title="单独headers" target="_blank">单独headers</a><a href="https://www.f2er.com/tag/fengzhuangdaima/" title="封装代码" target="_blank">封装代码</a><a href="https://www.f2er.com/tag/tishicuowu/" title="提示错误" target="_blank">提示错误</a><a href="https://www.f2er.com/tag/zhengshuzhengze/" title="整数正则" target="_blank">整数正则</a><a href="https://www.f2er.com/tag/fei0kaitou/" title="非0开头" target="_blank">非0开头</a><a href="https://www.f2er.com/tag/tiaoye/" title="跳页" target="_blank">跳页</a><a href="https://www.f2er.com/tag/chuyema/" title="出页码" target="_blank">出页码</a><a href="https://www.f2er.com/tag/antdtable/" title="antd table" target="_blank">antd table</a><a href="https://www.f2er.com/tag/tishiURLweizhuce/" title="提示URL未注册" target="_blank">提示URL未注册</a><a href="https://www.f2er.com/tag/gongzhonghaozhifu/" title="公众号支付" target="_blank">公众号支付</a><a href="https://www.f2er.com/tag/vuehashmoshi/" title="vue hash模式" target="_blank">vue hash模式</a><a href="https://www.f2er.com/tag/iSlider/" title="iSlider" target="_blank">iSlider</a><a href="https://www.f2er.com/tag/chepaijianpan/" title="车牌键盘" target="_blank">车牌键盘</a><a href="https://www.f2er.com/tag/xunhuantupian/" title="循环图片" target="_blank">循环图片</a><a href="https://www.f2er.com/tag/echartsshuangzhexian/" title="echarts 双折线" target="_blank">echarts 双折</a><a href="https://www.f2er.com/tag/zuoyoubuju/" title="左右布局" target="_blank">左右布局</a><a href="https://www.f2er.com/tag/DllPlugin/" title="DllPlugin" target="_blank">DllPlugin</a><a href="https://www.f2er.com/tag/duixiangchuangjian/" title="对象创建" target="_blank">对象创建</a><a href="https://www.f2er.com/tag/daziyouxi/" title="打字游戏" target="_blank">打字游戏</a><a href="https://www.f2er.com/tag/quanxuan/" title="圈选" target="_blank">圈选</a><a href="https://www.f2er.com/tag/lianglan/" title="两栏" target="_blank">两栏</a><a href="https://www.f2er.com/tag/yunhanshu/" title="云函数" target="_blank">云函数</a><a href="https://www.f2er.com/tag/mengban/" title="蒙版" target="_blank">蒙版</a><a href="https://www.f2er.com/tag/ES2020/" title="ES2020" target="_blank">ES2020</a><a href="https://www.f2er.com/tag/chuchuang/" title="橱窗" target="_blank">橱窗</a><a href="https://www.f2er.com/tag/wufenggundonglunbo/" title="无缝滚动轮播" target="_blank">无缝滚动轮播</a><a href="https://www.f2er.com/tag/sekuaipengzhuang/" title="色块碰撞" target="_blank">色块碰撞</a><a href="https://www.f2er.com/tag/zujianxiaohui/" title="组件销毁" target="_blank">组件销毁</a><a href="https://www.f2er.com/tag/wendangcaozuo/" title="文档操作" target="_blank">文档操作</a></div> </div> </div> </div>   <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7756441254" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div>  </div>  </div> </div> <footer id="footer"> <div class="container"> <div class="row hidden-xs"> <dl class="col-sm-6 site-link"> <dt>最近更新</dt><dd><a href="https://www.f2er.com/faq/884225.html" title="jQuery选择伪元素：after" target="_blank">· jQuery选择伪元素：after</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884224.html" title="JavaScript随机颜色生成器" target="_blank">· JavaScript随机颜色生成器</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884223.html" title="JavaScript指数" target="_blank">· JavaScript指数</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884222.html" title="addResourceHandlers无法解析静态资源" target="_blank">· addResourceHandlers无法解析静态资源</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884221.html" title="如何将字节数组转换为MultipartFile" target="_blank">· 如何将字节数组转换为MultipartFile</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884220.html" title="在java中如何创建一个文件并写入内容？" target="_blank">· 在java中如何创建一个文件并写入内容？</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884219.html" title="星号*在Python中是什么意思？" target="_blank">· 星号*在Python中是什么意思？</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884218.html" title="Flask框架：MVC模式" target="_blank">· Flask框架：MVC模式</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884217.html" title="在JavaScript对象数组中按ID查找对象" target="_blank">· 在JavaScript对象数组中按ID查找对象</a><span class="text-muted pull-right">10-20</span></dd> <dd><a href="https://www.f2er.com/faq/884216.html" title="使用Javascript / jQuery下载文件" target="_blank">· 使用Javascript / jQuery下载文件</a><span class="text-muted pull-right">10-20</span></dd> </dl> <dl class="col-sm-4 site-link"> <dt>好站推荐</dt><dd> <a href="https://www.runoob.com" title="菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。" target="_blank">菜鸟教程</a></dd><dd> <a href="https://www.jb51.cc" title="编程之家(www.jb51.cc)是成立于2017年面向全球中文开发者的技术内容分享平台。提供编程导航、编程问答、编程博文、编程百科、编程教程、编程工具、编程实例等开发者最需要的编程技术内容与开发工具支持，与你一起学习编程，相信编程改变未来！" target="_blank">编程之家</a></dd><dd> <a href="https://www.f2er.com" title="前端之家 f2er.com 前端开发人员所需学习知识手册。" target="_blank">前端之家</a></dd></dl> <dl class="col-sm-2 site-link"> <dt>商务合作</dt> <dd><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></dd> </dl> </div> <div class="copyright"> Copyright © 2019 前端之家. 当前版本 V7.0.16<br> <span class="ml5">前端之家版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-10</a></span> </div> </div> </footer> <script type="text/javascript" src="https://www.f2er.com/js/base.js"></script> </body> </html>