前言：
今天朋友们对“jquery登录插件下载地址”大体比较关注，我们都想要了解一些“jquery登录插件下载地址”的相关内容。那么小编也在网络上搜集了一些有关“jquery登录插件下载地址””的相关知识，希望朋友们能喜欢，你们一起来了解一下吧！概述
了解链式编程;链式编程中的"破坏性"操作;恢复"破坏性"操作的方法;通过链式编程的方式实现五星点评功能并将其做成简易的jQuery插件
链式编程
1) 链式编程
实现的核心是JQ对象在调用一系列的JQ方法后返回的还是同一个JQ对象(Dom数组)
调用一系列方法后返回同一个JQ对象
<p>五星点评</p>$(function () { //设置前景色$('p').css('color', 'red') //鼠标单击事件 .click(function () { console.log('click'); console.log($(this)); }) //鼠标移出事件 .mouseout(function () { console.log('mouseout'); console.log($(this)); })//=========上下两种书写方式等价================== //$('p').css('color', 'red').click(function () { console.log('click'); console.log($(this)); }).mouseout(function () { console.log('mouseout');console.log($(this)); });});2) "破坏性"操作
"破坏性"操作:在调用一系列JQ方法中的某个方法与之前调用方法返回的对象不一样
示例:单击第三个标签:1)自己变红 2)自己前面的也变红 3后面的变白;功能失效
此示例中共有两次"破坏性"操作即调用prevAll()与nextAll()方法,"破坏"了"链"
失效的原因是:调用prevAll()返回的是前两个p标签组成的新的JQ对象,不再是第三个p标签对象,因此单击第三个p标签时调用nextAll()方法不再以第三个p标签为起点设置红色而是以第一个p标签为起点,所以只有第一个变为红色,其它的变为白色
<style type="text/css"> p { display: inline; padding: 3px 13px; margin: 5px; border: 1px solid red; }</style><body> <p></p> <p></p> <p></p> <p></p> <p></p> <script src="jq/jquery-3.5.1.js"></script> <script type="text/javascript"> $(function () { $('p').click(function () { $(this).css('background-color', 'red')//设置自身 .prevAll().css('background-color', 'red')//设置前面的 .nextAll().css('background-color', 'white');//设置后面的 }); }); </script></body>3) end()方法
通过end()方法恢复每次"破坏性"操作之前的JQ对象(示例只针对被"破坏"的原始对象)
通过end()方法,实现自身及前面的背景色变红,后面的变白
$('p').click(function () { $(this).css('background-color', 'red')//设置自身 .prevAll().css('background-color', 'red')//设置前面的 .end()//恢复到第一次单击的对象,例如单击第四个 .nextAll().css('background-color', 'white');//设置后面的 });五星点评简易插件鼠标移入相应p标签,自身及之前p标签的五角星变为"★",之后的p标签的五角星变为"☆";鼠标移出所有p标签恢复为"☆";单击某个p标签后,添加一个自定义属性用于标记是否被单击,此自定义属性用于鼠标移入移出事件中
简易评分
$(function () { //动态创建p标签,将其追加到div中 $('#dvPF').append($('<p>☆</p><p>☆</p><p>☆</p><p>☆</p><p>☆</p>')); $('#dvPF p').mouseover(function () {//所有p标签的鼠标移入事件 $(this).text('★')//自身 .prevAll().text('★')//前面 .end()//恢复 .nextAll().text('☆')//后面 //删除被单击标记 $('#dvPF p').removeAttr('isClick') }).mouseout(function () {//所有p标签的鼠标移出事件 //获取自定义属性值判断 if (!$(this).attr('isClick')) { //此标签之后的设置为☆ $('#dvPF p').text('☆') } }).click(function () { //添加自定义属性,标记当前p标签是否被点击 $(this).attr('isClick', true); }); });复杂的点评插件包括图片,每个星星的评分及评语;
做成JQ插件
插件的最主要的特点是高内聚低耦合;示例唯一与页面耦合的就是指定id的div
1) 将样式提取到一个css样式表文件中
2) 将上面的代码提取到一个js文件中
3) 将两个文件及依赖的jQuery(压缩的)文件加入一个文件夹中
使用时在页面中添加一个id与插件中名称一致的div,将两个文件拖入文件中即可
页面中拖入插件即可
感兴趣的可在**上搜索关键词类似"jquery插件"查看或下载相关插件即可
标签： #jquery登录插件下载地址
