jQuery轻便完结QQ空间点赞已经撤回点赞_jquery_脚本之家

看到有网友制作了对空间好友的动态点赞,加了个以及取消赞的功能。直接运行的脚本

jQuery简单实现QQ空间点赞已经取消点赞

 好友动态点赞代码

1

2

3

4

5

6

7

8

9

10

jQuery("a.qz_like_btn_v3[data-clicklog=’like’]").each(function(index,item){

console.log(item);

jQuery(item).trigger(‘click’);

});

jQuery(window).scroll(function(){

jQuery("a.qz_like_btn_v3[data-clicklog=’like’]").each(function(index,item){

jQuery(item).trigger(‘click’);

});

return true;

});

取消已点赞

1

2

3

4

5

6

7

8

9

10

jQuery("a.qz_like_btn_v3[data-clicklog=’cancellike’]").each(function(index,item){

console.log(item);

jQuery(item).trigger(‘click’);

});

jQuery(window).scroll(function(){

jQuery("a.qz_like_btn_v3[data-clicklog=’cancellike’]").each(function(index,item){

jQuery(item).trigger(‘click’);

});

return true;

});

好友动态点赞代码 1 2 3 4 5 6 7 8 9 10
jQuery(a.qz_like_btn_v3[data-clicklog=’like’]).each(function(index,item){
console.l…

本文实例讲解了jQuery实现简单的点赞效果的详细代码,具体内容如下

1:效果图 2:素材 3:编码 3.1思考 需要做什么?
1:分页控件需要向后台发送请求,发送的参数包括当前页,每页显示数量,查询条件;并且获取数据加载到当前页面;
2:进行修改删除操作的时候能记住当前页;
3:查询后翻页的时候可以可以记住当前查询的条件 3.2实现 HTML 复制代码 代码如下:

好友动态点赞代码

相关文章

相关搜索:

今天看啥

搜索技术库

返回首页

  • 手机版手机QQ音乐加速0.5天怎么获得?
  • 苹果OS X El Capitan开启第三方SSD
    TRIM支持更简单
  • php数组随机排序实现方法
  • IDisposable接口
  • 第一次写博客,一个简单的实例:java读写t
  • Java与微信不得不说的故事——实现微信公众

相关频道:
HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表达式  Flex教程  WEB前端教程  

下面提供一个”点赞”的实例代码,用ASP.NET MVC4+jQuery Ajax实现。Model:

jQuery
为了我们的控件可以随意使用,我们将其写成插件的形式,首先搭个框架,我们将插件命名为simplePage
复制代码 代码如下: {
$.fn.simplePage=function{ var options={ //配置参数 }; return //sth } })
默认有哪些参数呢? 由于需要发送当前页,每页显示数量,所以需要
currentPage,pageSize 两个基本参数;
由于需要查询表格内容,所以需要一个放置查询条件的表单 form;
由于需要修改删除后记住当前页,所以需要一个标志指示当前进行的是何操作type;
为了使我们的程序更具有灵活性,加上获取数据后需要加载到的container,还有就是分页控件加载的pager,
具体如下 复制代码 代码如下: var options={
pager: ‘.pager’,//表格控件的容器 container:
‘.tableData’,//放置表格数据的容器 form: ‘#form’,//放置查询条件的表单
pageForm: ‘#pageForm’,//放置隐藏与的Div url: ”,//发送请求的地址
currentPage: 1, pageSize: 2 type: null,//可选:action, pageShow:7 }
为了便于维护,我们声明一个独立的对象来进行获取数据,绑定事件的操作,我们将这个函数命名为$.page
复制代码 代码如下: $.page = { // setPage:
function{ }, //获取当前页 getCurrentPage: function{ },
//获取每页显示数量 getPageSize: function{ }, //生成发送所需要的json数据
genData: function{ }, //发送数据 loadData: function{ } }
实现以上所声明的函数,当分页第一次加载的时候,我们需要从服务器获取总页数来生成分页控件,所以首先实现loadData函数
复制代码 代码如下: loadData: function{
var that = this; var data = that.genData; $.ajax({ url: o.url, data:
data, type: ‘post’, dataType: ‘html’, cache: false, success: function{
var res = $.html(); var totalPage = $.find; var currentPage = $.find;
o.currentPage=currentPage; o.pager.empty(); $.line.setLine;
//调用生成分页控件的函数 }, error: function; } }) }
下面我们实现上面生成分页控件的函数$.line.setLine 复制代码 代码如下: $.line={ setLine:function{
for(var i=0;i’).addClass.bind{ var s=$.removeClass; s.addClass;
o.currentPage=s.text; }); if{ a.addClass; } o.pager.append; } var
limit=this.getLimit; var
aPage=o.pager.find.not(‘a.previous,a.nextAll,a.record’); aPage.hide();
aPage.slice(limit.start,limit.end).show.html.addClass.unbind.bind{ var
pageActive=o.pager.find; var s=$; if.text{ alert; return false; }
pageActive.removeClass; pageActive.prev().addClass;
o.currentPage=pageActive.prev; $.page.loadData; var
next=$.html.addClass.unbind.bind{ var pageActive=o.pager.find; var s=$;
if.text{ alert; return false; } pageActive.removeClass;
pageActive.next().addClass; o.currentPage=pageActive.next;
$.page.loadData; var pageActiveText=o.pager.find.text(); var
record=$.html(”+pageActiveText+’/’+totalPage+”).addClass;
o.pager.prepend.append; } }
在上面的代码中我们给当前的页面加上了pageActive类,所以现在我们可以实现$.page的getCurrentPage函数,非常简单
复制代码 代码如下: getcurrentPage:
function{ var p = o.pager.find.text(); return p; }
接着我们实现生成json数据的genData函数,json格式为{key:value,key:value}
复制代码 代码如下: genData: function{ var
sdata = $.extend({}, { “currentPage”: o.currentPage, “pageSize”:
o.pageSize}, $.jsonObj; return sdata; },
上面的$.jsonObj为自定义的函数,为了生成我们需要的json格式以便发送查询的数据,只支持input,select
复制代码 代码如下: $.jsonObj = function{
//判断是否有序列化的东东 if || $ == null || $.trim == “”) { return null;
} var formEl = $.find; var formselect = $; var json = “{“; for (var i =
0; i < formEl.length – 1; i++) { var name = formEl.eq; var val = “‘”

jQuery("a.qz_like_btn_v3[data-clicklog='like']").each{ console.log.trigger;jQuery.scroll{ jQuery("a.qz_like_btn_v3[data-clicklog='like']").each{ jQuery.trigger; return true;});

帮客评论

namespace MvcAjaxAdd.Models { public class ClickCountModel { [Key] [DatabaseGeneratedAttribute(System.ComponentModel.DataAnnotations.Schema.DatabaseGeneratedOption.Identity)] public int ID { get; set; } public string URL { get; set; } public int? Num { get; set; } } } 

@{ ViewBag.Title = "Index"; } @model MvcAjaxAdd.Models.ClickCountModel   $ { var obj = { "num": $, "url": window.location.pathname//&#33719;&#21462;/Home/Index }; $.click { $.ajax({ type: 'POST', url: '/Home/ClickGood', data: obj, success: function .text; //&#20854;&#23427;&#25805;&#20316;&#65292;&#27604;&#22914;&#27599;&#20010;&#30331;&#24405;&#29992;&#25143;&#21482;&#33021;&#28857;&#19968;&#27425;&#65292;&#25353;&#38062;&#31105;&#29992;&#31561; } }); }); });     顶   @Model.Num  
  • formEl.eq + “‘”; json += name; json += “:”; json += val; json += “,”;
    } var lname = formEl.eq.attr; var lval = “‘” + formEl.eq.val() + “‘”;
    json += lname; json += “:”; json += lval; if { json += “,”; for (var i =
    0; i < formselect.length – 1; i++) { var name = formselect.eq; var
    val = “‘” + formselect.eq + “‘”; json += name; json += “:”; json += val;
    json += “,”; } var lname = formselect.eq(formselect.length – 1).attr;
    var lval = “‘” + formselect.eq(formselect.length – 1).val() + “‘”; json
    += lname; json += “:”; json += lval; } json += “}”; var jsonObj = eval
    return jsonObj; }
    接着我们为查询表单的按钮绑定事件,我们扩展下我们的$.page函数 复制代码 代码如下:
    handleQueryLine:function.find.click{ //$.append); $; $.find.each{ var
    vals = $; var s = $.val.append.find.each{ var vals = $; var s =
    $.val.append; $.page.query; } ok,基本的函数已经完成,下面完成主函数
    复制代码 代码如下: $.fn.simplePage =
    function{ var options = { pager: ‘.pager’,//表格控件的容器 container:
    ‘.tableData’,//放置表格数据的容器 form: ‘#form’,//放置查询条件的表单
    pageForm: ‘#pageForm’,//放置隐藏与的Div url: ”,//发送请求的地址
    currentPage: 1, pageSize: 2, type: null,//可选:action, pageShow:7//, };
    var o = $.extend; return this.each{ o.pager = $; o.container = $.find;
    //首先清除click事件 o.pager.unbind; if {
    //指定的动作,比如删除时的事件,这时需要在当前页刷新数据 o.currentPage =
    $.page.getPageSize; o.pageSize = $.page.getCurrentPage; $.page.loadData;
    return; } $.page.loadData; $.line.handleQueryLine }
    现在我们的分页还不是很好看,我们用firebug查看下生成的分页结构,写了如下样式
    复制代码 代码如下: .pager a { display:
    block; float: left; width: 16px; height: 16px; margin: 5px; } .pager
    a.pageA{ background:url(“../images/grid/page.png”) no-repeat left 0px
    transparent; display:inline-block; font-size:14px; margin:0 3px;
    padding-left:6px; text-align:center; vertical-align:bottom; height:auto;
    width:auto; cursor:pointer; } .pager a.pageA span{
    background:url(“../images/grid/page.png”) no-repeat right 0px
    transparent; display:inline-block; height:24px; line-height:22px;
    padding-right:6px; } .pager a.pageActive{
    background:url(“../images/grid/page.png”) no-repeat left -24px
    transparent; } 大功告成!! DEMO 下载

取消已点赞

Controller:

jQuery("a.qz_like_btn_v3[data-clicklog='cancellike']").each{ console.log.trigger;jQuery.scroll{ jQuery("a.qz_like_btn_v3[data-clicklog='cancellike']").each{ jQuery.trigger; return true;});
namespace MvcAjaxAdd.Controllers { public class HomeController : Controller { private ClickCountContext db = new ClickCountContext(); public ActionResult Index() { ClickCountModel ClickCountModel = db.ClickCountModels.FirstOrDefault; return View; } [HttpPost] public JsonResult ClickGood(ClickCountModel ClickCountModel) { ClickCountModel newClickCountModel = db.ClickCountModels.FirstOrDefault(x => x.URL == ClickCountModel.URL); newClickCountModel.Num++;//数量+1 db.SaveChanges(); return Json; } } } 

以上所述就是本文的全部内容了,希望大家能够喜欢。

以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。

相关文章