问题及效果:
想实现商城购物车中全选与反选功能,发现jq中并没有提供相应功能;
类似这种jq中没有的功能,我们都可以通过插件的形式自己实现,并在jq中使用;
为元素扩展新方法
知识点:
基本语法:
$.fn.extend(ob)或者 $、jQuery.fn.extend(ob)
ob: JS对象,例:
<p><pre class="prettyprint"> <code class="language-js hljs ">$.fn.extend({
ex1.function(){},
ex2.function(){},
});
</code></pre></p>
案例代码:
<p><pre class="prettyprint"> <code class="language-html hljs "><span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"box"</span>></span>JQ插件<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">
$.fn.extend({
ex1:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(color)</span>{</span>
<span class="hljs-keyword">this</span>.css(<span class="hljs-string">'background'</span>,color);
}
});
<span class="hljs-comment">//使用</span>
$(<span class="hljs-string">'#box'</span>).ex1(<span class="hljs-string">'yellow'</span>);
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre></p>
扩展jq对象本身
知识点:
jQuery.extend(ob) 或者 $.extend(ob)
ob: JS对象,
例:
<p><pre class="prettyprint"> <code class="language-html hljs ">$.extend({
ex1.function(){},
ex2.function(){},
});
</code></pre></p>
案例代码:
<p><pre class="prettyprint"> <code class="language-html hljs "><span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">
$.extend({
min: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(a, b)</span> {</span> <span class="hljs-keyword">return</span> a < b ? a : b; },
max: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(a, b)</span> {</span> <span class="hljs-keyword">return</span> a > b ? a : b; }
});
<span class="hljs-comment">//使用</span>
alert($.min(<span class="hljs-number">1</span>,<span class="hljs-number">3</span>));
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre></p>
综合案例
<p><pre class="prettyprint"> <code class="language-html hljs "> <span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"全选"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"all"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"全不选"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"unall"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"反选"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"un"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">hr</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">""</span>></span> HTML <span class="hljs-tag"><<span class="hljs-title">br</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">""</span>></span> Javascript <span class="hljs-tag"><<span class="hljs-title">br</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">""</span>></span> PHP <span class="hljs-tag"><<span class="hljs-title">br</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">""</span>></span> Python <span class="hljs-tag"><<span class="hljs-title">br</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">""</span>></span> Java <span class="hljs-tag"><<span class="hljs-title">br</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">""</span>></span> C/C++ <span class="hljs-tag"><<span class="hljs-title">br</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">
$.fn.extend({
all:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
<span class="hljs-keyword">this</span>.attr(<span class="hljs-string">'checked'</span>,<span class="hljs-literal">true</span>);
},
unall:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
<span class="hljs-keyword">this</span>.attr(<span class="hljs-string">'checked'</span>,<span class="hljs-literal">false</span>);
},
un:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
<span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>;i<<span class="hljs-keyword">this</span>.length;i++){
<span class="hljs-keyword">if</span>(<span class="hljs-keyword">this</span>[i].checked == <span class="hljs-literal">true</span>){
<span class="hljs-keyword">this</span>[i].checked = <span class="hljs-literal">false</span>;
}<span class="hljs-keyword">else</span>{
<span class="hljs-keyword">this</span>[i].checked = <span class="hljs-literal">true</span>;
}
}
}
});
<span class="hljs-comment">//使用</span>
$(<span class="hljs-string">'#all'</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
$(<span class="hljs-string">':checkbox'</span>).all();
});
$(<span class="hljs-string">'#unall'</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
$(<span class="hljs-string">':checkbox'</span>).unall();
});
$(<span class="hljs-string">'#un'</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
$(<span class="hljs-string">':checkbox'</span>).un();
});
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre></p>
each 方法
问题及效果:
在上一节插件中有个反选的功能,本质上就是对选中的每个对象进行遍历操作;
jq原生有没有类似的功能呢?
知识点:
each(callback)
以每一个匹配的元素作为上下文来执行一个函数。
案例代码:
拿到上节课代码进行修改
<p><pre class="prettyprint"> <code class="language-html hljs "><span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">
$(<span class="hljs-string">'#un'</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
$(<span class="hljs-string">':checkbox'</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
<span class="hljs-comment">//判断并取反</span>
<span class="hljs-keyword">if</span>(<span class="hljs-keyword">this</span>.checked == <span class="hljs-literal">true</span>){
<span class="hljs-keyword">this</span>.checked = <span class="hljs-literal">false</span>;
}<span class="hljs-keyword">else</span>{
<span class="hljs-keyword">this</span>.checked = <span class="hljs-literal">true</span>;
}
<span class="hljs-comment">//直接将值取反</span>
<span class="hljs-comment">// this.checked = !this.checked;</span>
});
});
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre></p> |
|