jQuery 第三天 表单、插件

1.表单提交

​ 表单会提交，看上去像刷新页面；

​ 表单提交会触发submit事件；

​ 用户按回车键或点击提交按钮时，会触发form的submit事件；

​ 原生DOM中e.defalutprevent()阻止表单的默认行为不让它提交，在jQuery中return false就可以阻止表单的默认行为；

​ button中type的默认值就是submit

2.表单序列化

​ 表单如果提交后面有参数，必须有name，值就是表单的value

​ 表单中标签中如果没有value,提交后地址栏是xxx=on 要自己设置value值，在标签本身加

多选框name要是一个数组

​ 表单中获取？后面的一串值时用$('元素').serialize()

3.插件

​ 插件的机制就是jQuery原型对象中的一堆方法用$.fn添加插件方法

表单验证插件 jquery-validate

<form action="">
    用户名:<input 
      type="text" 
      name="ming" 
      id="re" 
      data-required   //必填项
      data-pattern="[a-z]{6,12}"  //正则表达式
      data-description="username"  //指定错误信息的内容(标签)
      data-describedby="yonghuming">// 显示错误信息往里面放
      <span id="yonghuming"></span><br>
    密码:<input 
      type="password" 
      name="mi" 
      id="de"
      data-required
      data-description="pass"
      data-describedby="mima">
      <span id="mima"></span><br>
    <button>提交</button>
  
  <script src="./jquery/jquery-3.5.1.min.js"></script>
  <script src="./jquery-validate/jquery-validate.min.js"></script>
  <script>
    $('form').validate({
      description : {
          username : {
            required : '用户名不能为空',
            pattern : '用户名为字母并且6到12位',
          },
          pass : {
            required : '密码不能为空',
          }
      }
    });
  <script>

轮播图插件 slick

<div class="slider">
    <ul>
      <li>
        <a href="javascript:;">
          <img src="./images/1.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="./images/2.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="./images/3.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="./images/4.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="./images/5.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="javascript:;">
          <img src="./images/6.jpg" alt="">
        </a>
      </li>
    </ul>
    <a href="javascript:;" class="prev"></a>
    <a href="javascript:;" class="next"></a>
  </div>
​
  <script src="./jquery/jquery-3.5.1.min.js"></script>
  <script src="./slick/slick.min.js"></script>
  <script>
    $('.slider ul').slick({
      autoplay : true,   //自动播放
      arrows : true,     //是否显示翻页按钮
      prevArrow : ('.prev'),  //自定义上一页按钮
      nextArrow : ('.next'), //自定义下一页按钮
      dots : true, //是否显示指示器，就是下面的小圆点点
    });
  </script>

图片裁切插件 Jcrop

<div class="jcrop-demo">
    <h4>原始图片</h4>
    <div class="original">
      <img src="./images/xiaohei.jpg" alt="">
    </div>
    <p class="coords"></p>
  </div>
​
  <script src="./jcrop/js/jquery.min.js"></script>
  <script src="./jcrop/js/jquery.Jcrop.min.js"></script>
  <script>
    $('img').Jcrop({
      // 设置宽高比
      aspectRatio : 1,
      // 初始的位置
      setSelect : [0, 0, 200, 200],
      // 整张图片占的宽度
      boxWidth : 600,
      // 回调函数
      onSelect : function (c) {
        console.log(c);
      }
    });
  </script>

日期选择器插件 datepicker

<h3>选择日期</h3>
​
  <input type="text">
​
  <script src="./jquery/jquery-3.5.1.min.js"></script>
  <script src="./datepicker/datepicker.min.js"></script>
  <script src="./datepicker/i18n/datepicker.zh-CN.js"></script>
  <script>
    $('input').datepicker({
      format : 'yyyy-mm-dd',  //设置时间的显示格式
      language : 'zh-CN',  //日期里的是中文
      autoShow : true,  //一运行打开页面就会显示日期那个
      date : '2022-3-1', //指定日期
    });
全屏滚动插件 fullpage

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">第三屏</div>
    <div class="section">第四屏</div>
  </div>
​
  <script src="./jquery/jquery-3.5.1.min.js"></script>
  <script src="./fullpage/jquery.fullpage.min.js"></script>
  <script>
    $('#fullpage').fullpage({
      sectionsColor : ['red', 'orange', 'yellow', 'pink'],  //设置颜色
      navigation : true,  //是否显示指示器
      navigationPosition : 'right',  //指示器的方向
      anchors : ['page1', 'page2', 'page3', 'page4'],
      afterLoad : function (a, b) {
        // 第一个参数是显示的是anchors中的内容，第二个参数是翻的哪个页
        console.log(a, b);
      }
    });
  </script>

4.迭代/遍历

​ $(对象).each(function (i, dom) { }) i是当前项，dom是当前dom对象 一般遍历元素

​ $.each(对象，function (i, dom) { }) i是当前项，dom是当前dom对象 一般遍历数据

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
​
  <script src="../jquery/jquery-3.5.1.min.js"></script>
  <script>
​
    let arr = ['orange', 'yellow', 'pink'];
​
    // 都可以遍历元素和数据，一般是遍历元素用它
    $('li').each(function (i, dom) { //i是当前项的索引值，dom是当前dom对象
      $(dom).css('background', arr[i]);
    });
​
    // 都可以遍历元素和数据，一般是遍历数据用它
    $.each($('li'),function (i, dom) {
      $(dom).css('background', arr[i]);
    });
    
    // 它也可以遍历数组
    $.each(arr, function (i, d) {
      console.log(i, d);
    });
  </script>

5.数组转换

​ $.makeArray()

​ 假数组转换为真数组，转换为真数组之后就不能用jQuery中的那些方法了

  <p>刘</p>
  <p>佳</p>
  <p>慧</p>
​
  <script src="./jquery/jquery-3.5.1.min.js"></script>
  <script>
    let ps = document.querySelectorAll('p');
​
    let pArr = $.makeArray(ps);
    pArr.pop();
    console.log(pArr);
  </script>

6.多库共存

​ 如果一个程序性中如果引入了多个js文件，会引起冲突，这时就要不重名

​ 一定要先改名jQuery对象的名，在引入其他的js文件

<!-- 释放$ -->
  let jq = $.noConflict();  //把jQuery对象的别称改为jq
​
​
​
<script src="./assets/jquery/jquery-3.5.1.min.js"></script>
<script>
  let _ = $.noConflict();
  // 重新命名 jQuery v3.5.1 为全局标识 _
  console.log(_.fn.jquery);
</script>
<script src="./jquery-2.2.4.js"></script>
<script>
  // jQuery v2.2.4 仍然使用全局标识 $
    console.log($.fn.jquery);
</script>

7.合并对象

​ 就是拷贝，jQuery封装的拷贝的方法 $.extend()

​ $.extend(newObj, obj); //前面不加true是浅拷贝 $.extend(true, newObj, obj); //前面加true是深拷贝

<script src="./jquery/jquery-3.5.1.min.js"></script>
  <script>
  //   let o1 = {
  //   uname : '张三丰',
  //   age : 22
  // }
  // let o2 = {
  //   index : 666,
  //   score : 99,
  // }
  // let o3 = {
  //   uname : '阿飞',
  //   sex : '男'
  // }
​
  // // 合并对象
  // $.extend(o1, o2, o3);
  // console.log( o1 );
​
  let obj = {
                uname : '张三丰',
                age : 22,
                sex :'男',
                color : ['red', 'blue', 'yellow', 'pink'],
                message : {
                    index : 6,
                    score : 99
                }
            }
  let newObj = {};
​
  $.extend(newObj, obj);    //前面不加true是浅拷贝
  $.extend(true, newObj, obj); //前面加true是深拷贝
    
  obj.uname = '刘佳慧';
  obj.message.index = 66;
​
  console.log(obj, newObj);
  </script>