codegarble
codegarble

jQuery插件的使用和写法

编写jQuery插件

    编写插件的目的主要是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，方便后期维护和提高开发效率。

jQuery的插件主要分成3种类型。

1.封装对象方法的插件

   这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。

2.封装全局函数的插件

   可以将独立的函数加到jQuery命名空间之下。例如jQuery.noConflict()方法、常用的jQuery.ajax()方法以及去除首位空格的jQuery.trim()方法等，都是jQuery内部作为全局函数的插件附加到内核上去的。

3．选择器插件

   个别情况下，会需要用到选择器插件。


插件的基本要点

1.jQuery插件的文件名推荐命名为jquery.[插件名].js，以免和其他JavaScript库插件混淆。

2.所有的对象方法都应该附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上。

3.在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不像一般方法那样，例如click()方法，内部的this指向的DOM元素。

4.可以通过this.each来遍历所有元素。

5.所有的方法或函数插件，都应当以分号结尾，否则压缩的时候可能出现问题。为了更稳妥些，甚至可以在插件头部先加上一个分号，以免他人的不规范代码给插件带来影响。

6.插件应该返回一个jQuery对象，以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量，例如字符串或者数组等。

7.避免在插件内部使用$作为jQuery对象的别名，而应使用完整的jQuery来表示。这样可以避免冲突，当然，也可以利用闭包这种技巧来回避这个问题，使插件内部继续使用$作为jQuery的别名。很多插件都是这样做的。


插件中的闭包

   关于闭包，ECMAScript对其进行了简单的描述：允许使用内部函数（即函数定义和函数表达式位于另一个函数体内），而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数，当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。即内部函数会在外部函数返回后被执行。而这个内部函数执行时，它仍然必须访问其外部函数的局部变量、参数以及其他内部函数。这些局部变量、参数和函数声明（最初时）的值是外部函数返回时的值，但也会收到内部函数的影响。

   首先定义一个匿名函数function(){/*这里放置代码*/},然后用括号括起来，变成（function(){/*这里放置代码*/}）这种形式，最后通过（）这个运算符来执行。可以传递参数进去，以供内部函数使用。

//注意为了更好的兼容性，开始之前还有一个分号：

;(function($){                 //开始时将$作为匿名函数的形参
       /*这里放置代码，可以使用$作为jQuery的缩写别名*/
})(jQuery);                    //这里就将jQuery作为实参传递给匿名函数了

以上是一种常见的jQuery插件的结构。


jQuery插件的机制

   jQuery提供了两种用于扩展jQuery功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。前者用于之前提到的3种插件类型中的第1种，后者用于扩展后两种插件。这两个方法都接受一个参数，类型为Object。Object对象的“名/值对”分别代表“函数或方法名/函数主体”。

   jQuery.extend()方法除了可以用于扩展jQuery对象之外，还有一个强大的功能，就是用与扩展已有的Object对象。

jQuery代码如下：

jQuery.extend(target,obj1,…….[objN])

   用一个或多个其它对象来扩展一个对象，然后返回被扩展的对象。

   例如合并settings对象和options对象，修改并返回settings对象。

var settings={validate:false,limit:5,name:”foo”};
var options={validate:true,name:”bar”};
var newOptions=jQuery.extend(settings,options);

结果为：

newOptins={valitdate:true,limit:5,name:”bar”};

   jQuery.extend()方法经常被用于设置插件方法的一系列默认参数，如下面的代码所示：

function foo(options){
       options=jQuery.extend({
              name:”bar”,
              limit:5,
              datatype:”xml”
       },options);
};

   如果调用foo()方法的时候，在传递的参数options对象中设置了相应的值，那么就使用设置的值，否则就用默认的值。代码如下：

foo({name:”a”,length:”4”,dataType:”json”});
foo({name:”a”,length:”4”});
foo({name:”a”});
foo();

   通过使用jQuery.extend()方法，可以很方便地用传入的参数来覆盖默认值。此时，对方法的调用依旧保持一致，只不过要传入的是一个映射而不是一个参数列表。这种机制比传统的每个参数都去检测的方式不仅灵活而且更加简洁。此外使用命名参数意味着再添加新选项也不会影响过去编写的代码，从而使开发者使用起来更加直观明了。


编写jQuery插件

1.封装jQuery对象方法的插件


编写设置获取颜色的插件


   首先介绍如何编写一个color()插件。该插件用于实现以下两个功能。

(1)设置匹配元素的颜色。

(2)获取匹配的元素（元素集合中的第1个）的颜色。


   首先将该插件按规范命名为jquery.color.js。

   然后再JavaScript文件里搭好框架.由于是对jQuery对象的方法扩展，因此采用第1类方法jQuery.fn.extend()来编写。

;(function($){
        $.fn.extend({
               “color”:function(value){
                      //这里写插件代码
                }
        });
})(jQuery);

   这里给这个方法提供一个参数value，如果调用了方法的时候传递了value这个参数，那么就是用这个值来设置字体颜色；否则就是匹配元素的字体颜色的值。

   首先，实现第1个功能，设置字体颜色。注意，由于插件内部的this指向的是jQuery对象，而非普通的DOM对象。代码如下：

;(function($){
        $.fn.extend({
               “color”:function(value){
                       return this.css(“color”,value);
        }
});
})(jQuery);

   接下来实现第2个功能。如果没用给方法传递参数，那么就是获取集合对象中第1个对象的color的值。由于css()方法本身就具有返回第1个匹配元素样式值的功能，因此此处无需通过eq()来获取第1个元素。只要这两个方法结合起来,判断一下value的值是否是undefined即可。

jQuery代码如下：

;(function($){
        $.fn.extend({
               “color”:function(value){
                      if(color===undefined){
                              return this.css(“color”,value);
                      }else{
                              Return this.css(“color”,value);
                      }
                }
        });
})(jQuery);

   这样一来，插件也就完成了。现在来测试一下代码。



red


blue


green


yellow

    另外，如果要定义一组插件，可以使用如下所示的写法：

:(function($){
      $.fn.extend({
             "color":function(value){
                        //插件代码
              },
             "border":function(value){
                       //插件代码
              },
              "background":function(value){
                      //插件代码
              }
      };
})(jQuery);

    表格隔行变色插件

    表格隔行变色的代码如下：

$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
$('tbody>tr').click(function(){
       //判断是否选中
       var hasSelected=$(this).hasClass('selected');
       //如果选中，则移出selected类，否则就加上selected类
       $(this)[hasSelected?"removeClass":"addClass"]('selected')
               //查找内部的checkbox,设置对应的属性
               .find('checkbox').attr('checked'.!hasSelected);
});

       //如果复选框默认情况下是选择的，则高色
       $('tbody>tr:has(:checked)').addClass('selected');
    首先把插件方法取名为alterBgColor，然后为该插件方法搭好框架，jQuery代码如下： 

;(function($){
       $.fn.extend({
                 "alterBgColor":function(options){
                 //插件代码
                  }
        });
})(jQuery);
     框架完成后，接下来就需要为options定义默认值。默认构建这样({odd:"odd",even:"even",selected:"selected"})一个Object。这样就可以通过$("#sometable").alterBgColor({odd:"odd",even:"even",selected:"selected"})自定义奇偶行的样式类名以及选中后的样式类名。同时，直接使用$("#sometable").alterBgColor()就可以应用 默认的样式类名。

jQuery代码如下：

;(function($){
        $.fn.extend({
           "alterBgColor":function(options){
                        options=$.extend({
                             odd:"odd",       /*偶数行样式*/
                             even:"even",   /*奇数行样式*/
                             selected:"selected"     /*选中行样式*/
                          },options);
            }
       });
})(jQuery);
    如果在后面的程序中需要使用options对象的属性，可以使用如下的方式来获得： 

options.odd;             //获取options对象中odd属性的值
options.even;            //获取options对象中even属性的值
options.selected;        //获取options对象中selected属性的值
    接下来就需要把这些值放到程序中，来代替先前程序中的固定值。

    最后就是匹配元素的问题了。显然不能直接用$('tbody>tr')选择表格行，这样会使页面中全部的元素都隔行变色。应该使用选择器选中某个表格，执行alterBgColor()方法后，将对应的表格内元素进行隔行变色。因此，需要把所有通过$('tbody>tr')选择的对象改写成$('tbody>tr',this)，表示在匹配的元素内（当前表格内）查找，并应用上一步中的默认值。jQuery代码如下：

;(function($){
       $.fn.extend({
               "alterBgColor":function(options){
                        //设置默认值
                        options=$.extend({
                                  odd."odd",
                                  even."even",
                                  selected:"selected"
                         },options);
                         $("tbody>tr:odd",this).addClass(options,odd);
                         $("tbody>tr:even",this).addClass(options,even);
                         $("tbody>tr",this).click(function(){
                                      //判断是否选中
                                      var hasSelected=$(this).hasClass(options,selected);
                                      //如果选中，则移出selected类，否则加上selected类
                   $(this)[hasSelected?"removeClass":"addClass"](options,selected)
                                      //查找内部的checkbox,设置对应属性
                          .find(':checkbox').attr('checked',!hasSelected);
                 });
                 //如果单选框默认情况下是选择的，则高色
                 $('tbody>tr:has(:checkd),this').addClass(options,selected);
                 rerturn this;  //返回this，使方法可链
                }
       });
})(jQuery);
    在代码的最后，返回this，让这个插件具有可链性。
   此时，插件就完成了。现在来测试这个插件。构造两个表格，id分别为table1和table2，然后使用其中一个调用alterBgColor()方法，以便查看是否能独立工作，并且具有可链性。
   jQuery代码如下：
$('#table2')
           .alterBgColor()                     //应用插件
           .find("th").css("color","red");     //可链式操作
需要注意的是，jQuery的选择符可能会匹配1个或者多个元素。因此，在编写插件时必须考虑到这些情况。可以在插件内部调用each()方法来遍历匹配元素，然后执行相应的方法，this会依次引用每个DOM元素。如下jQuery代码所示：
;(function($)){
         $.fn.extend({
                  "SomePlugin":function(options){
                             return this.each(function(){
                                        //这里置放代码
                             });
                  }
         });
})(jQuery);

你可能感兴趣的:(jQuery)

  • 移动端城市区县二级联动选择功能实现包 good2know
    本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
  • JAVA HTTP大文件分片断点续传 weixin_52041354 java大文件上传java大文件秒传java大文件上传下载java文件传输解决方案jsp大文件上传java断点续传jsp加密传输
    要求：开源，免费，技术支持技术：分片,分块,断点续传,加密传输,加密存储需求：大文件上传，批量上传，断点续传，文件夹上传，大文件下载，批量下载，断点下载，文件夹下载文件夹：上传下载需要支持层级结构，采用非压缩方式文件大小：100G前端：vue2,vue3,vue-cli,jquery,html,webuploader后端：java,JSP,springboot,struts服务器：linux,信创
  • jQuery：浅谈setInterval()方法 Dy大叔 前端开发记录jquery前端javascript
    定义和用法：setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval()方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval()方法的参数。vartime=0；用法1：functionjump(){…………//函数内容}time=setInterval("
  • HTML5：中如何触发按钮点击事件 Dy大叔 前端开发记录HTML5html
    在HTML5中，可以通过多种方式触发按钮点击事件，包括使用JavaScript原生方法、使用jQuery库和使用HTML表单和提交按钮，根据项目需求和技术栈选择合适的方法来实现按钮点击事件的触发。使用JavaScript原生方法在HTML5中，可以使用JavaScript的addEventListener方法为按钮添加点击事件，需要在HTML文件中创建一个按钮元素，并为其设置一个唯一的ID，在Ja
  • Jsoup爬虫工具实现背景图片爬取 无脑程序猿 jsoup网络爬虫背景图片下载Jsoup-jar
    Jsoup爬虫工具实现背景图片爬取soup是一款Java的HTML解析器，可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API，可通过DOM，CSS以及类似于jQuery的操作方法来取出和操作数据。复制代码之前准备工作首先要将需要的jar包复制到WEB-INF>>lib下面需要下载的Jsoup.jar包以及其使用的具体操作文档下载地址[点击下载]代码块亲测：1366x768大小
  • 4、ASP.NET MVC与jQuery开发指南 corn8 探索.NETASP.NETMVCjQuery路由
    ASP.NETMVC与jQuery开发指南1.路由与数据库访问在ASP.NETMVC中，MapRoute的第三个参数用于定义URL各部分的默认值，这使得我们可以省略部分或全部URL部分。若省略控制器，默认使用Home控制器；若省略动作，默认使用Index动作；id参数为可选，允许使用无参数的动作方法。大多数业务线（LOB）应用程序需要与持久化数据存储（如MicrosoftSQLServer）中的数
  • 响应式Banner轮播布局的实现代码包 规则哥讲规则
    本文还有配套的精品资源，点击获取简介：响应式Banner图片轮播布局是网站吸引注意力的关键元素，能够适配多种设备。本压缩包包含了HTML、CSS和JavaScript（包括jQuery）完整代码，用于创建动态的轮播效果。通过HTML定义结构、CSS实现响应式布局和样式，以及JavaScript和jQuery完成交互和动画，最终实现了包括自动播放、图片切换和平滑过渡等轮播功能。这些代码为开发者提供了
  • java计算机毕业设计基于Ssm学生信息管理系统源程序+mysql+系统+lw文档+远程调试 岗子科技 mysqljava数据库
    java计算机毕业设计基于Ssm学生信息管理系统源程序+mysql+系统+lw文档+远程调试java计算机毕业设计基于Ssm学生信息管理系统源程序+mysql+系统+lw文档+远程调试本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：My
  • 使用Velocity.js使您的网站具有互动性和乐趣（无需jQuery） dingshi7798 javascriptuijavaViewUI
    我要特别感谢JamesHibbard和Velocity背后的开发人员对本文的审阅。还要感谢多年来为Velocity做出贡献并做出贡献的用户和开发人员。在本文中，我介绍了Velocity.js，这是朱利安·夏皮罗（JulianShapiro）提供的快速而强大的JavaScript动画引擎。在进行所有演示时，您将可以使用Velocity.js创建自己的动画并使网站更具交互性和用户友好性。所有这些都无需
  • velocity.js_使用Velocity.js使您的网站具有互动性和乐趣（无需jQuery） dingshi7798 pythonjavajavascriptjs人工智能ViewUI
    velocity.js我要特别感谢JamesHibbard和Velocity背后的开发人员对本文的审阅。还要感谢多年来为Velocity做出贡献并做出贡献的用户和开发人员。在本文中，我介绍了Velocity.js，这是朱利安·夏皮罗（JulianShapiro）提供的快速而强大JavaScript动画引擎。在进行所有演示时，您将可以使用Velocity.js创建自己的动画并使网站更具交互性和用户友
  • 【JQ】使用jq实现弹窗功能，弹窗加载外部页面内容 下页、再停留 前端技术前端javascript
    目录一、需求：二、效果图三、实现代码前端：jquery：四、完整资源一、需求：使用原始jq，不借助插件、框架，实现弹窗，并且弹窗内容是外部页面，类似于layer.open的弹窗功能。二、效果图点击左上角“点击”按钮，弹出一个页面窗口。三、实现代码前端：.jq-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);b
  • 前端11Jquery用ajax获取数据赋值给页面 syw99163 前端2021node.jsjqueryjavascriptcssvue.js
    前端11Jquery用ajax获取数据赋值给页面https://www.w3school.com.cn/jquery/jquery_ref_dom_element_methods.aspjQuery参考手册-DOM元素方法【jQuery】使用getJSON()方法异步加载JSON格式数据使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面
  • 前端知识之jQuery 意大利面拌42号混凝土 python前端jqueryjavascript
    jQuery文章目录jQuery一、什么是jQuery二、jQuery的优势三、jQuery的内容四、jQuery的版本五、jQuery的两种导入方式六、jQuery语法七.jQuery对象与标签对象之间的转换九、查找标签1、基本选择器2、组合选择器/分组嵌套3、基本筛选器4、属性选择器5、表单筛选器6、筛选器方法7、总结十、操作标签1、CSS类操作2、CSS样式操作3、位置操作4、尺寸5、文本操
  • 前端：一篇彻底搞懂Ajax,Promise,JQuery Ajax,Axios的差异(区别) Freedom3568 大前端ajax前端jqueryaxiospromise
    文章目录一.AJAX原理1.ajax有那些优缺点?二.Promise封装Ajaxpromise封装实现三.JQueryAjax1.优缺点：四.Axios1.优缺点：五.Fetch1.优缺点：补充：为什么要用axios?一.AJAX原理Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javas
  • React工程师必看：jQuery+Thymeleaf全栈开发指南 bemyrunningdog themeleafjavascript
    以下是为React工程师整理的jQuery+Thymeleaf全栈开发笔记，融合核心语法、项目实践与避坑指南，保留原有框架并深化关键细节，引用最新技术资料（2024-2025年）：一、jQuery核心设计哲学vsReact维度jQueryReact融合建议DOM操作直接操作真实DOM虚拟DOM间接更新避免在React组件中混用jQuery操作DOM数据驱动手动同步数据与UI状态/Props驱动自动
  • jQuery攻略pdf weixin_30725315 javascriptjavac/c++ViewUI
    下载地址：网盘下载内容简介······jQuery是目前应用最广泛的JavaScript框架之一，已经成为微软ASP.NET、VisualStudio和诺基亚WebRunTime等主流开发平台的重要组成部分。借助jQuery的魔力，数十行JavaScript代码可以被神奇地压缩成区区几行，诸多Web开发人员就是在那一瞬间深深迷恋上了这个方便快捷、功能完备的利器。本书从实际应用角度出发，介绍了使用j
  • css3地球转动模型（动态数据）
    参考资源：https://www.jq22.com/jquery-info24302{{!item.permission?'暂无权限':''}}{{item.name}}exportdefault{data(){return{list:[{id:"81e5f51d6ab845fca406bdc8b0c50e34",homeUrl:"/workbenches",name:'交易管理后台',img:'
  • jQuery封装轮播图插件 I_am_the_ZL
    这是我自己封装的第一个插件，感觉挺好的，嘿嘿~~~先说使用方法把！swiper("banner2")传入轮播盒子的class名就可以了使用页面的基本结构这个盒子你可以无限遍历支持width：100%;js文件：functionswiper(names){varidxs=0;vartimer=null;varobj=$("."+names);obj.parent().css({"overflow":
  • jQuery.jsonview.js 简单用法 聂曦r
    Title测试结果：切换展开折叠$.get('/protocol/plugin/test/',{},function(r){if(r.code==200){$("#test_result").JSONView(r.ret,{collapsed:true,nl2br:true,recursive_collapser:true});$('#collapse-btn').on('click',funct
  • jQuery的.toggle()事件 小乖nia JQuery
    $(selected).toggle()事件会自动获得当前对象的显示或者隐藏状态，并且使用触发事件进行切换。在元素的click事件中绑定两个或两个以上的函数toggle不像bind需要在后面添加"click"来绑定click触发事件，toggle本身就是click触发的（而且只能click触发）。jquery中toggle的2种用法一、在元素的click事件中绑定两个或两个以上的函数toggle不
  • web前端进阶之Javascript设计模式面向对象篇 jia林
    前言：在此说明Javascript设计模式所讲内容和知识点来自双越老师（wangEditor富文本开源作者）的视频，内容通俗易懂，受益匪浅，结合自己的学习心得整理成笔记，与大家分享，愿在前端的道路上越走越远.....从“写好代码”到“设计代码”的过程，不仅是技术的提升，更是编程思维的提升，而这其中最关键的就是设计模式，是否理解并掌握设计模式，也是衡量程序员能力的标准之一。学习前提使用过jquery
  • 关于Ajax的学习笔记 秋也凉 ajax学习笔记
    Ajax概念：是一门使用了js语言，可以使用于Javaweb，实现前端代码和后端代码连结的的一种异步同步（不需要等待服务器相应，就能够发送第二次请求）的一种技术，它主要用于网页内容的局部刷新，列如验证码、导航栏的刷新等。实现步骤1.导入jQuery（一种框架，Ajax是JQuery的一种方法）文件——例如：写在jsp页面的标签里面。2.在jsp页面写一个函数，然后在函数里面调用ajax方法，aja
  • webView显示网页的时候，右半部分有白色一片空白区域
    这时需要设置他的滚动条wv_showHTML.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY)WebView中android:scrollbarSize="0dip"加上这句就好了引用于：http://www.17jquery.com/html_html5/38376/和http://bbs.csdn.net/topics/350001955
  • layui+express CMS管理系统 May# layuiexpresshtml
    该项目主要技术：html，css，js，echart，express，mysql，jquery，layui，swiper展示类网站，属于服务端渲染项目。该网站包含管理端，实现基本增删改查功能。用户端可查看页面，属于展示类网站。管理端页面如下：<
  • 关于JS中回调函数的个人理解 Jack_陈
    近期在看到jQuery中test（index，test）的用法涉及到回调函数，之前未有涉及，于今晚专门看看了看，将个人对于回调函数的理解感悟记录一下，有不正确的地方希望指出。回调函数（callback），英文中的解释其实更容易理解：Acallbackisafunctionthatispassedasanargumenttoanotherfunctionandisexecutedafteritspa
  • Java实习模拟面试之创玖科技：前后端交互、数据库、Spring全家桶、性能优化与Linux实战 培风图南以星河揽胜 java面试java面试科技
    关键词：JavaScript、JQuery、Ajax、Node.js、MySQL、Oracle、Spring、SpringMVC、SpringBoot、MyBatis、Tomcat、Redis、Nginx、Linux、Git、SAAS系统开发一、面试开场：自我介绍面试官提问：请做个自我介绍，重点突出你的技术栈和项目经验。候选人回答：您好，我是一名计算机科学与技术专业的应届生，具备扎实的Java基础
  • html js 查询数据库,如何使用javascript查询数据库？
    小编典典Javascript本身不能用于处理数据库。这是使用php(或您选择的服务器端语言)完成的。Ajax用于使用javascript向您的php脚本发送请求，而javascript则会与数据库进行通信。而且不需要页面刷新。因此，您尝试使用ajax可以轻松实现。既然您提到了jquery，就可以在jquery中签出$.ajax或$.post方法，这使过程更加简单。您需要使用ajax处理表单。Aja
  • 【jquery详细讲解】 ᝰ落念英 前端开发语言webjavascriptjQueryjquery
    (一)、什么是jQueryjQuery是对javascript的一种封装--js的函数库。用于客户端的开发，由美国人在2001年1月推出。(二)、jQuery与javascript的区别：1、本质上的区别：jQuery是一个函数库，基于js语言编写出来的框架，实质上还是属于js。2、代码书写不同，jq更简单。3、使用方法不同：使用jQuery和javascript分别加载DOM，js只执行一次，j
  • 前端15 徒做嫁衣
    jquery用法思想一选择某个网页元素，然后对它进行某种操作。jquery选择器jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。$(document)//选择整个文档对象$('li')//选择所有的li元素$('#myId')//选择id为myId的网页元素$('.myClass')//选择class为myClass的元素$('input[na
  • 【前端】jQuery数组合并去重方法总结
    在jQuery中合并多个数组并去重，推荐使用原生JavaScript的Set对象（高效简单）或$.unique()（仅适用于DOM元素，不适用于普通数组）。以下是完整解决方案：方法1：使用ES6Set（推荐）//定义多个数组constarr1=[1,2,3];constarr2=[2,3,4];constarr3=[3,4,5];//合并数组并用Set去重constmergedArray=[...
  • mondb入手 木zi_鸣 mongodb
    windows 启动mongodb  编写bat文件， mongod --dbpath D:\software\MongoDBDATA mongod --help  查询各种配置 配置在mongob 打开批处理，即可启动，27017原生端口，shell操作监控端口  扩展28017，web端操作端口 启动配置文件配置， 数据更灵活 
  • 大型高并发高负载网站的系统架构 bijian1013 高并发负载均衡
            扩展Web应用程序 一.概念         简单的来说，如果一个系统可扩展，那么你可以通过扩展来提供系统的性能。这代表着系统能够容纳更高的负载、更大的数据集，并且系统是可维护的。扩展和语言、某项具体的技术都是无关的。扩展可以分为两种：         1.
  • DISPLAY变量和xhost(原创) czmmiao display
    DISPLAY 在Linux/Unix类操作系统上, DISPLAY用来设置将图形显示到何处. 直接登陆图形界面或者登陆命令行界面后使用startx启动图形, DISPLAY环境变量将自动设置为:0:0, 此时可以打开终端, 输出图形程序的名称(比如xclock)来启动程序, 图形将显示在本地窗口上, 在终端上输入printenv查看当前环境变量, 输出结果中有如下内容:DISPLAY=:0.0
  • 获取B/S客户端IP 周凡杨 java编程jspWeb浏览器
       最近想写个B/S架构的聊天系统，因为以前做过C/S架构的QQ聊天系统，所以对于Socket通信编程只是一个巩固。对于C/S架构的聊天系统，由于存在客户端Java应用，所以直接在代码中获取客户端的IP，应用的方法为：    String ip = InetAddress.getLocalHost().getHostAddress(); 然而对于WEB
  • 浅谈类和对象 朱辉辉33 编程
        类是对一类事物的总称，对象是描述一个物体的特征，类是对象的抽象。简单来说，类是抽象的，不占用内存，对象是具体的， 占用存储空间。     类是由属性和方法构成的，基本格式是public  class 类名{ //定义属性 private/public 数据类型 属性名； //定义方法 publ
  • android activity与viewpager+fragment的生命周期问题 肆无忌惮_ viewpager
    有一个Activity里面是ViewPager，ViewPager里面放了两个Fragment。 第一次进入这个Activity。开启了服务，并在onResume方法中绑定服务后，对Service进行了一定的初始化，其中调用了Fragment中的一个属性。 super.onResume(); bindService(intent, conn, BIND_AUTO_CREATE);
  • base64Encode对图片进行编码 843977358 base64图片encoder
    /** * 对图片进行base64encoder编码 * * @author mrZhang * @param path * @return */ public static String encodeImage(String path) { BASE64Encoder encoder = null; byte[] b = null; I
  • Request Header简介 aigo servlet
    当一个客户端(通常是浏览器)向Web服务器发送一个请求是，它要发送一个请求的命令行，一般是GET或POST命令，当发送POST命令时，它还必须向服务器发送一个叫“Content-Length”的请求头(Request   Header)   用以指明请求数据的长度，除了Content-Length之外，它还可以向服务器发送其它一些Headers，如：    
  • HttpClient4.3 创建SSL协议的HttpClient对象 alleni123 httpclient爬虫ssl
    public class HttpClientUtils { public static CloseableHttpClient createSSLClientDefault(CookieStore cookies){ SSLContext sslContext=null; try { sslContext=new SSLContextBuilder().l
  • java取反 -右移-左移-无符号右移的探讨 百合不是茶 位运算符 位移
    取反： 在二进制中第一位，1表示符数，0表示正数 byte a = -1; 原码：10000001 反码：11111110 补码：11111111 //异或: 00000000 byte b = -2; 原码：10000010 反码：11111101 补码：11111110 //异或: 00000001
  • java多线程join的作用与用法 bijian1013 java多线程
            对于JAVA的join，JDK 是这样说的：join public final void join （long millis ）throws InterruptedException Waits at most millis milliseconds for this thread to die. A timeout of 0 means t
  • Java发送http请求(get 与post方法请求) bijian1013 javaspring
    PostRequest.java package com.bijian.study; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; import java.io.InputStreamReader; import java.net.HttpURL
  • 【Struts2二】struts.xml中package下的action配置项默认值 bit1129 struts.xml
    在第一部份，定义了struts.xml文件，如下所示：   <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts
  • 【Kafka十三】Kafka Simple Consumer bit1129 simple
    代码中关于Host和Port是割裂开的，这会导致单机环境下的伪分布式Kafka集群环境下，这个例子没法运行。 实际情况是需要将host和port绑定到一起，   package kafka.examples.lowlevel; import kafka.api.FetchRequest; import kafka.api.FetchRequestBuilder; impo
  • nodejs学习api ronin47 nodejs api
    NodeJS基础 什么是NodeJS JS是脚本语言，脚本语言都需要一个解析器才能运行。对于写在HTML页面里的JS，浏览器充当了解析器的角色。而对于需要独立运行的JS，NodeJS就是一个解析器。 每一种解析器都是一个运行环境，不但允许JS定义各种数据结构，进行各种计算，还允许JS使用运行环境提供的内置对象和方法做一些事情。例如运行在浏览器中的JS的用途是操作DOM，浏览器就提供了docum
  • java-64.寻找第N个丑数 bylijinnan java
    public class UglyNumber { /** * 64.查找第N个丑数 具体思路可参考 [url] http://zhedahht.blog.163.com/blog/static/2541117420094245366965/[/url] * 题目：我们把只包含因子 2、3和5的数称作丑数（Ugly Number）。例如6、8都是丑数，但14
  • 二维数组（矩阵）对角线输出 bylijinnan 二维数组
    /** 二维数组 对角线输出 两个方向 例如对于数组： { 1, 2, 3, 4 }, { 5, 6, 7, 8 }, { 9, 10, 11, 12 }, { 13, 14, 15, 16 }, slash方向输出： 1 5 2 9 6 3 13 10 7 4 14 11 8 15 12 16 backslash输出： 4 3
  • [JWFD开源工作流设计]工作流跳跃模式开发关键点(今日更新) comsci 工作流
       既然是做开源软件的,我们的宗旨就是给大家分享设计和代码,那么现在我就用很简单扼要的语言来透露这个跳跃模式的设计原理    大家如果用过JWFD的ARC-自动运行控制器,或者看过代码,应该知道在ARC算法模块中有一个函数叫做SAN(),这个函数就是ARC的核心控制器,要实现跳跃模式,在SAN函数中一定要对LN链表数据结构进行操作,首先写一段代码,把
  • redis常见使用 cuityang redis常见使用
    redis 通常被认为是一个数据结构服务器，主要是因为其有着丰富的数据结构 strings、map、 list、sets、 sorted sets 引入jar包 jedis-2.1.0.jar  (本文下方提供下载) package redistest; import redis.clients.jedis.Jedis; public class Listtest
  • 配置多个redis dalan_123 redis
    配置多个redis客户端 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"       xmlns:xsi=&quo
  • attrib命令 dcj3sjt126com attr
      attrib指令用于修改文件的属性.文件的常见属性有:只读.存档.隐藏和系统.    只读属性是指文件只可以做读的操作.不能对文件进行写的操作.就是文件的写保护.    存档属性是用来标记文件改动的.即在上一次备份后文件有所改动.一些备份软件在备份的时候会只去备份带有存档属性的文件. 
  • Yii使用公共函数 dcj3sjt126com yii
    在网站项目中，没必要把公用的函数写成一个工具类，有时候面向过程其实更方便。 在入口文件index.php里添加 require_once('protected/function.php'); 即可对其引用，成为公用的函数集合。 function.php如下：   <?php /**   * This is the shortcut to D
  • linux 系统资源的查看（free、uname、uptime、netstat） eksliang netstatlinux unamelinux uptimelinux free
    linux 系统资源的查看 转载请出自出处：http://eksliang.iteye.com/blog/2167081   http://eksliang.iteye.com 一、free查看内存的使用情况 语法如下：   free [-b][-k][-m][-g] [-t] 参数含义 -b:直接输入free时，显示的单位是kb我们可以使用b(bytes),m
  • JAVA的位操作符 greemranqq 位运算JAVA位移<<>>>
    最近几种进制，加上各种位操作符，发现都比较模糊，不能完全掌握，这里就再熟悉熟悉。   1.按位操作符 ：    按位操作符是用来操作基本数据类型中的单个bit,即二进制位，会对两个参数执行布尔代数运算，获得结果。    与（&）运算：    1&1 = 1, 1&0 = 0, 0&0 &
  • Web前段学习网站 ihuning Web
      Web前段学习网站 菜鸟学习：http://www.w3cschool.cc/   JQuery中文网：http://www.jquerycn.cn/   内存溢出：http://outofmemory.cn/#csdn.blog   http://www.icoolxue.com/   http://www.jikexue
  • 强强联合：FluxBB 作者加盟 Flarum justjavac r
    原文：FluxBB Joins Forces With Flarum作者：Toby Zerner译文：强强联合：FluxBB 作者加盟 Flarum译者：justjavac FluxBB 是一个快速、轻量级论坛软件，它的开发者是一名德国的 PHP 天才 Franz Liedke。FluxBB 的下一个版本(2.0)将被完全重写，并已经开发了一段时间。FluxBB 看起来非常有前途的，
  • java统计在线人数（session存储信息的） macroli javaWeb
    这篇日志是我写的第三次了 前两次都发布失败！郁闷极了！   由于在web开发中常常用到这一部分所以在此记录一下，呵呵，就到备忘录了！ 我对于登录信息时使用session存储的，所以我这里是通过实现HttpSessionAttributeListener这个接口完成的。 1、实现接口类，在web.xml文件中配置监听类，从而可以使该类完成其工作。 public class Ses
  • bootstrp carousel初体验 快速构建图片播放 qiaolevip 每天进步一点点学习永无止境bootstrap纵观千象
    img{ border: 1px solid white; box-shadow: 2px 2px 12px #333; _width: expression(this.width > 600 ? "600px" : this.width + "px"); _height: expression(this.width &
  • SparkSQL读取HBase数据，通过自定义外部数据源 superlxw1234 sparksparksqlsparksql读取hbasesparksql外部数据源
    关键字：SparkSQL读取HBase、SparkSQL自定义外部数据源     前面文章介绍了SparSQL通过Hive操作HBase表。   SparkSQL从1.2开始支持自定义外部数据源(External DataSource)，这样就可以通过API接口来实现自己的外部数据源。这里基于Spark1.4.0，简单介绍SparkSQL自定义外部数据源，访
  • Spring Boot 1.3.0.M1发布 wiselyman spring boot
        Spring Boot 1.3.0.M1于6.12日发布，现在可以从Spring milestone repository下载。这个版本是基于Spring Framework 4.2.0.RC1,并在Spring Boot 1.2之上提供了大量的新特性improvements and new features。主要包含以下：   1.提供一个新的sprin