jQuery插件

最新推荐文章于 2024-11-13 01:18:00 发布
最新推荐文章于 2024-11-13 01:18:00 发布
阅读量98 收藏
点赞数
文章标签： javascript php json ViewUI
原文链接：http://www.cnblogs.com/hy96/p/11574260.html
版权

表单插件：

序号
规则
描述
1
required=true
必须输入的字段。
2
remote="check.php"
使用 ajax 方法调用 check.php 验证输入值。
3
email=true
必须输入正确格式的电子邮件。
4
url=true
必须输入正确格式的网址。
5
date=true
必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6
dateISO=true
必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7
number=true
必须输入合法的数字（负数，小数）。
8
digits=true
必须输入整数。
9
creditcard:
必须输入合法的信用卡号。
10
equalTo="#field"
输入值必须和 #field 相同。
11
accept:
输入拥有合法后缀名的字符串（上传文件的后缀）。
12
maxlength="5"
输入长度最多是 5 的字符串（汉字算一个字符）。
13
minlength="10"
输入长度最小是 10 的字符串（汉字算一个字符）。
14
rangelength=[5,10]
输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15
range=[5,10]
输入值必须介于 5 和 10 之间。
16
max=5
输入值不能大于 5。
17
min=10
输入值不能小于 10。

 

demo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery验证插件</title>
  <style>

  </style>
</head>
<body>
  <form action="">
  用户名：
      <input type="text" name="username" required=true/> <br />
    密码：<input type="password" name="password" required=true/> <br />
    邮箱: <input type="email" name="email" email=true required=true/> <br />
    网址: <input type="url" name="url" url=true required=true/> <br />
    手机号： <input type="tel" name="tel" digits=true maxlength="11"   minlength="11" required=true><br />
    <input type="submit" value="提交" />
  </form>

</body>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.js"></script>
<script src="jquery.validate.js"></script>
<script src="jquery.validate.messages_zh.js"></script>
<script>
  $('form').validate()
</script>
</html>

cookie插件：

创建一个会话cookie：
    $.cookie(‘cookieName’,'cookieValue’);
注：关闭了浏览器就没有了，就是回话cookie。

创建一个持久cookie：
    $.cookie(‘cookieName’,'cookieValue’，｛expires：7｝);
注：当指明时间时，就是持久cookie，expires后面传入的参数是天。

创建一个持久并带有效路径的cookie：
    $.cookie(‘cookieName’,'cookieValue’，｛expires：7，path：’/'｝);
注：如果不设置有效路径，在默认情况下，只能在cookie设置当前页面读取该cookie，"/"的设置能够读取cookie的顶级目录。

获取cookie：
    $.cookie(‘cookieName’);   //如果存在则返回cookieValue，否则返回null。

删除cookie：
    $.cookie(‘cookieName’,null);
注：如果想删除一个带有效路径的cookie，如下：
    $.cookie('cookieName',null,{path:'/'})；

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jquery cookie</title>
</head>
<body>
  
</body>
<script src="../jquery.min.js"></script>
<script src="jquery.cookie.js"></script>
<script>
  // $('form').va....()  ------ $('div').show()   ---   DOM
  // $.cookie()          ------ $.ajax()   ---   全局
  // 增、删、改、查
  // 设置cookie $.cookie(key, value[, options]) // options代表是可选参数

  // 1、设置cookie
  // $.cookie('username', 'wudaxun') // 临时设置 cookie，关闭浏览器cookie消失

  // 2、设置有效市场为7天的cookie
  // $.cookie('password', '123456', { expires: 7 }) // 设置cookie有效时长为7天

  // 3、删除cookie
  // $.cookie('password', null)

  // 4、修改cookie
  // $.cookie('username', 'wuxunxun')

  console.log($.cookie('username'))
</script>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jquery cookie 应用场景</title>
</head>
<body>
  <div>
    <button id="login">登陆</button>
    <button id="logout">退出</button>
  </div>
</body>
<script src="../jquery.min.js"></script>
<script src="jquery.cookie.js"></script>
<script>
  /**
   * 初次进入页面，判断用户是否登陆（依据cookie），如果登录，跳转到相应的页面（打印index），如果未登录，跳转到登陆页面（打印login）
   * 
   * 如果在登陆页面，点击登陆，成功之后设置 cookie
   * 
   * 应用场景：
   *  产品详情 点击加入购物车 要判断是否登陆
   *  提交订单 需要判断登陆
   *  付款 需要判断登陆
   *  ....
   *  
   *  本周作业：
   *    1、封装 是否登陆 的函数
   * */

   // 1、页面判断是否登陆
   if ($.cookie('isLogin') === 'ok') {
     console.log('index')
     // window.location.href = "/index"
   } else {
     console.log('login')
     // window.location.href = "/login"
   }

   // 2、login页面
  $('#login').on('click', function () {
    // $.cookie('isLogin', 'ok', { expires: 7 })
    // 拓展知识点： 设定 cookie 的有效路径
    $.cookie('isLogin', 'ok', { expires: 7, path: '/week7' })
  })

  // 退出
  $('#logout').on('click', function () {
    // $.cookie('isLogin', null)
    // 拓展： 如果设置cookie带了路径，那么删除一定也要带路径
    $.cookie('isLogin', null, { path: '/week7' })
  })
</script>
</html>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="http://libs.baidu.com/jquery/1.11.3/jquery.js"></script>
        <script src="jquery.cookie.js"></script>
        <script>

        $(function(){
            
            $('input[type=button]').click(function(){

                $.cookie('name',$('input[type=text]').val());

                window.location.href='index2.html'

            })
                
        })
        </script>
    </head>
    <body>
    <input type="text">
    <input type="button" value='储存cookie'>
    </body>
</html>

 

分页插件

 

参数名描述参数值
maxentries总条目数必选参数，整数
items_per_page每页显示的条目数可选参数，默认是10
num_display_entries连续分页主体部分显示的分页条目数可选参数，默认是10
current_page当前选中的页面可选参数，默认是0，表示第1页
num_edge_entries两侧显示的首尾分页的条目数可选参数，默认是0
link_to分页的链接字符串，可选参数，默认是"#"
prev_text“前一页”分页按钮上显示的文字字符串参数，可选，默认是"Prev"
next_text“下一页”分页按钮上显示的文字字符串参数，可选，默认是"Next"
ellipse_text省略的页数用什么文字表示可选字符串参数，默认是"..."
prev_show_always是否显示“前一页”分页按钮布尔型，可选参数，默认为true，即显示“前一页”按钮
next_show_always是否显示“下一页”分页按钮布尔型，可选参数，默认为true，即显示“下一页”按钮
callback回调函数默认无执行效果

demo:

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="referrer" content="no-referrer"/>

    <meta charset="UTF-8">
    <title>分页</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #pagination a{
            display: inline-block;
            width: 30px;
            height: 30px;
            margin: 10px;
            text-align: center;
            line-height: 30px;
            text-decoration: none;
        }
        #pagination .current{
            background-color: #00aa00;
            width: 30px;
            height: 30px;
            display: inline-block;
            text-align: center;
            line-height: 30px;
        }
        #pagination .next{
            background-color: white;
            width: 100px;
        }
        #pagination .prev{
            background-color: white;
            width: 100px;
        }
     #list {
         width: 1500px;
         margin: 0 auto;
         text-align: center;
     }  
     #list li{
         float: left;
         list-style: none;
         border: 1px solid #000;
         width: 270px;
         height: 400px;
         margin-left: 20px;
         margin-top: 30px;
        }
        #list li img{
            width: 100%;
            height: 350px;
        }
        #pagination{
            position: absolute;
            left: 600px;
            bottom: 20px;
        }
    </style>
</head>
<body>
    <ul id="list"></ul>
    <div id="pagination"></div>
<script src="../jquery.js"></script>
<script src="../jquery.pagination.js"></script>

<script>
    /**
     * 接口url:  https://www.daxunxun.com/douban
     *  提交类型： GET
     *  参数： start 默认为0，表示从第几条数据开始查询
     *        count 默认为20， 表示每页显示的个数
     * */
$('#pagination').pagination(10, {
    items_per_page:3,//每页显示的条目数 可选参数，默认是10   10/3=4  所以页号是1，2，3，4（总条数/每页显示的条目数=页码数）
    num_display_entries:4,//连续分页主体部分显示的分页条目数 可选参数，默认是10   
    current_page:0, //默认选中
    num_edge_entries:1,//两侧显示的首尾分页的条目数 可选参数，默认是0
    prev_text:"上一页",
    next_text:"下一页",
    prev_show_always:false,
    next_show_always:false,
    callback:function (index) {
        console.log(index)
        $.ajax({
            url:"http://localhost/fenye/ajax-page/page.json",
　　　　　　　　
         　　success:function (res) {
                var str=""
                for(var i=5*index;i<5*(index+1);i++){
                    if(i<res.length){
                        str += `<li>${res[i].title}
    <br>
                             <img src="${res[i].images.large}" alt="">
                             <span>豆瓣评分：${res[i].rating.average}分</span>

                             </li>`
                    }
                }
              $('#list').html(str)
          }
        })
    }
})
</script> </html>

 

 

转载于:https://www.cnblogs.com/hy96/p/11574260.html

anhumi4350
关注
jQuery 插件安装
yexiangCSDN的专栏
04-25 812
一、jQuery 插件安装 jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。 注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件 1. jQuery 插件常用的网站： 1. jQuery 插件库 http://www.jq22.com/ 2. jQuery 之家 http://www.htmleaf.com/ 2. jQuery 插件使用步骤： 1. 引入相关文件。（jQuery...
jQuery插件开发全解析
01-19
jQuery插件的开发包括两种：一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加...
jQuery 插件
m0_62604616的博客
03-22 1792
今天呢，给大家带来的是关于jQuery插件的分享。 插件分为自定义插件和第三方插件，自定义插分为$.extend和$.fn.extend，而第三方插件呢是别人写的，我给大家带来一个官方的表单验证插件。 一、自定义插件 1、$.extend: $.extend有两个作用，【作用1】对象继承： $.extend(对象1，对象2)---->对象1继承对象2 代码块： <script type="text/javascript"> $..
jQuery插件开发
m0_71873158的博客
01-05 2156
jQuery插件是对jQuery框架利用原型的扩展。插件通常是一个完备功能的封装，它是JQ功能的一个补充或扩展。注意：开发JQ插件，该插件是依赖jQuery的必须先引入jQuery，再引入插件。
编写jQuery插件
SeekerTime
07-11 1426
一、插件的种类        jQuery的插件主要分为三种类型：        1、封装对象方法的插件                         将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。        2、封装全局函数的插件                        可以将独立的函数加到jQuery命名空间之下。如jQuery.
jquery插件库
wh柒八九的博客
02-14 1447
下面是jquery的插件库，有很多好用的jquery插件，链接地址为：https://www.jq22.com/
jQuery插件库超级好用库
m0_49714202的博客
04-29 2387
点击进入 jQuery插件库-收集最全最新最好的jQuery插件 感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！
jQuery插件的使用
廖若星辰-LTY
07-07 1718
jQuery功能虽然强大但也有限，想要更复杂的特效效果，我们可以借助jQuery插件完成。 注：这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件才行，所以称为jQuery插件。 这里先分享两个jQuery插件的常用网站： jQuery插件库：http://www.jq22.com/ jQuery之家：http://www.htmleaf.com/ 下面直接来介绍jQuery插件的使用步骤： 首先进入插件网站（这里以jQuery之家为例）找到自己想要使用的插件； 可以先“查
JQuery插件
m0_61857264的博客
03-22 1157
目录 自定义插件 $.extend 作用二：扩展JQuery方法 $.fn.extend 第三方插件 使用步骤 使用插件完成表单验证 自定义插件 $.extend 作用一：对象继承 $.extend(对象一，对象二) 对象一包含对象二的所有方法 例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title&gt.
如何封装jQuery插件
HELLO WORLD
12-16 2331
大神请忽略此文章，本人适用于新手。 很多刚刚开始接触js的网友可能会觉得js很神奇，如果没有一些编程基础可能觉得插件是可远观而不可触摸的。我也是这样子的，没有人教只能依靠自己学习没有讲解，关键之处完全靠自己摸索。 我最开始想封装一个自己的插件的时候花了一个星期的时间阅读了大量的网友提供的插件封装方法，有可能是太深奥了吧也可能是没有说得太明白，总是会出现各种问题。 今天乘着刚好有一个项目的需求，我把...
jquery插件库大全（200个）.zip
03-03
jquery插件库大全（200个）： jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...
jquery插件库-jquery仿京东商品详情页图片放大效果.zip
03-15
"jquery插件库-jquery仿京东商品详情页图片放大效果.zip"这个压缩包文件包含了一个jQuery插件，旨在模仿京东商品详情页中的图片放大效果，为用户提供更直观的商品查看体验。 首先，我们来详细了解一下jQuery插件的...
jquery 插件
03-16
**jQuery插件详解** jQuery，一个轻量级、高性能的JavaScript库，因其简洁的API和强大的功能，成为了前端开发中的必备工具。jQuery插件是jQuery生态的重要组成部分，它们扩展了jQuery的基本功能，使得开发者能够更...
plugins.jquery.com：jQuery插件网站
02-20
jQuery插件网站 怎么运行的 插件站点是包含jQuery插件的GitHub存储库的索引。 存储库可以包含一个或多个jQuery插件，并在存储库根目录中带有有效的plugin.jquery.json清单文件。 该文件的规范位于。 如何列出插件 ...
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
最新发布
zhzijun的博客
11-13 425
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
Vue中的常用指令
m0_62388400的博客
11-12 1183
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 165
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
Javascript中Map与Set以及其常见遍历方式
警警的博客
11-12 763
在JavaScript中，Map和Set是两种非常重要的集合类型，它们提供了比传统对象（Object）和数组（Array）更强大和灵活的数据存储和操作方法。下面是对Map和Set的详细解释。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值