商城购物车中没有与反选功能的修改方法及案例分析

显示全部楼层 · 2022-12-26 18:57:29

问题及效果:

想实现商城购物车中全选与反选功能，发现jq中并没有提供相应功能；

类似这种jq中没有的功能，我们都可以通过插件的形式自己实现，并在jq中使用；

为元素扩展新方法

知识点：

基本语法:

$.fn.extend(ob)或者 $、jQuery.fn.extend(ob)

ob： JS对象，例：

<pre class="prettyprint"> <code class="language-js hljs ">$.fn.extend({
ex1.function(){},
ex2.function(){},
});
</code></pre>
案例代码：

<pre class="prettyprint"> <code class="language-html hljs "><body>
<div id="box">JQ插件</div>
</body>
<script>
$.fn.extend({
 ex1:function(color){
 this.css('background',color);
 }
});
//使用
$('#box').ex1('yellow');
</script></code></pre>
扩展jq对象本身

知识点：

jQuery.extend(ob) 或者 $.extend(ob)

ob： JS对象，

例：

<pre class="prettyprint"> <code class="language-html hljs ">$.extend({
ex1.function(){},
ex2.function(){},
});
</code></pre>
案例代码：

<pre class="prettyprint"> <code class="language-html hljs "><script>
$.extend({
 min: function(a, b) { return a function(a, b) { return a > b ? a : b; }
});
//使用
alert($.min(1,3));
</script></code></pre>
综合案例

<pre class="prettyprint"> <code class="language-html hljs "> <body>
 <input type="button" value="全选" id="all">
 <input type="button" value="全不选" id="unall">
 <input type="button" value="反选" id="un">
 <hr>
 <input type="checkbox" value=""> HTML <br>
 <input type="checkbox" value=""> Javascript <br>
 <input type="checkbox" value=""> PHP <br>
 <input type="checkbox" value=""> Python <br>
 <input type="checkbox" value=""> Java <br>
 <input type="checkbox" value=""> C/C++ <br>
</body>
<script>
 $.fn.extend({
 all:function(){
 this.attr('checked',true);
 },
 unall:function(){
 this.attr('checked',false);
 },
 un:function(){
 for(var i=0;i<this.length;i++){
 if(this[i].checked == true){
 this[i].checked = false;
 }else{
 this[i].checked = true;
 }
 }
 }
 });
 //使用
 $('#all').click(function(){
 $(':checkbox').all();
 });
 $('#unall').click(function(){
 $(':checkbox').unall();
 });
 $('#un').click(function(){
 $(':checkbox').un();
 });
</script></code></pre>
each 方法

问题及效果:

在上一节插件中有个反选的功能，本质上就是对选中的每个对象进行遍历操作；

jq原生有没有类似的功能呢？

知识点：

each(callback)

以每一个匹配的元素作为上下文来执行一个函数。

案例代码：

拿到上节课代码进行修改

<pre class="prettyprint"> <code class="language-html hljs "><script>
$('#un').click(function(){
 $(':checkbox').each(function(){
 //判断并取反
 if(this.checked == true){
 this.checked = false;
 }else{
 this.checked = true;
 }
 //直接将值取反
 // this.checked = !this.checked;
 });
});
</script></code></pre>

商城购物车中没有与反选功能的修改方法及案例分析

浏览过的版块