标签归档:jquery.fn

jquery 如何编写自定义函数呢?


摘要:
下文讲述jquery中编写自定义函数的方法分享,如下所示;


jquery自定义函数–方法1:

$.fn.extend({‘testFun’:function(){}})
//或
jQuery.fn.testFun=function(){}

//函数调用方法

$(“#**”).testFun()


jquery自定义函数–方法2:
$.extend({‘testFun’:function(){}})
//调用函数方法
$.testFun();

jQuery 如何操作复选框呢?


摘要:
下文讲述使用Jquery方法操作”复选框”全选 反选等操作的方法分享,如下所示:

复选框的操作是网页操作中一个常用操作方式,常用于一些列表操作项上,全面的列表选择项,下文通过举例的方式讲述复选框的操作


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)-jQuery复选框全选反选操作举例分享</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js" />
<script> 
 

 $.fn.checkBoxChk=function(){ 
  return this.each(function(){ 
    this.checked = !this.checked; 
  })
} 

$(function(){ 
  $("#btnChk").click(function(){ 
    this.value = this.value == "全选"?"反选":"全选"; 
    $("input:checkbox").checkCbx(); 
  }) 
}) 



</script> 
</head> 
<body> 

  <input type="button" value="全选"  id="btnChk" /> <br />

  <input type="checkbox" name="chk" /><br />
  <input type="checkbox" name="chk" /><br />
  <input type="checkbox" name="chk" /><br />
  <input type="checkbox" name="chk" /><br />
  <input type="checkbox" name="chk" /><br />
  <input type="checkbox" name="chk" /><br />
  <input type="checkbox" name="chk" /><br />
 
</body> 
</html>

javascript jquery 扩展方法

1 jquery 如何编写 扩展方法 ?
在jquery的命名空间$.fn,可以为jquery加上方法和属性,对jquery的每一个实例都有效
例如扩展一个方法 $.fn.testAddFun=function(){alert(‘我是扩展方法!’);}
$(“#object”).testAddFun(); 将会弹出 我是扩展方法!

2.1 jquery extend方法

< script language="javascript" type="text/javascript">

$.fn.fun1 = function(a) {
$a= $.extend( {
showInfo: “无信息”,
style: {
“color”: “blur”,
“font-size”:”24px”
}},a
);

return $(this).css({
“color”: $a.style.color,
}).html($a.showInfo);

}
function test()
{
alert(“a”);
$(‘#info’).fun1({showInfo:”插件编写”,style:{“color”:”red”,”font-size”:”50px”}});
}
< /script>
jquery-extend
2.2 使用jquery extend 可以叠加变量结果,让变量存储最近的一份变量
$.extend(
{ name: “nameA”, location: { city: “shenZhen” } },
{ last: “lastB”, location: { state: “F” } }
);
结果:
=> { name: “nameA”, last: “lastB”, location: { state: “F” } }
.extend() 复合叠加
$.extend( true,
{ name: “nameA”, location: { city: “shenZhen” } },
{ last: “lastB”, location: { state: “F” } }
);
结果
=> { name: “nameA”, last: “lastB”,
location: { city: “ShenZhen”, state: “F” } }

2.3 为jquery添加全局方法
< script type="text/javascript" language="javascript">
$.extend({
jiaFa:function(a,b){return a+b;},
jianFa:function(a,b){return a-b},
chengFa:function(a,b){return a*b;};
} });

var a = $.jiaFa(3,5)+$.jianFa(3,5)+$.chengFa(3,5);
alert(a);
< /script>