js+jq笔记整理

1.关于js
  1)基本语法 输入输出 变量 数据类型  选择结构 循环结构  数组   对象
         1)变量 和数据类型  运算符
           var 变量  =值;//值是什么类型的值  变量就是什么类型
           注意: var 还可以 省略
           例如:    var x=5; //x就是整数   var x=12.3;  x就是float var x="哈喽";x就是字符串
         2)输出 输入
           a.输出:  document.write("输出内容");
             document.write("哈喽");  //会在页面输出哈喽
           b.输入:  prompt("提示信息","默认值，不写就为空");  默认的返回值是字符串
             例如:  var v =prompt("请输入一个数",0);  //  这个时候 v就默认会是 字符串  即使你输入的是整数，也会当成字符串
           c.类型转换:
              parseInt("字符串"); 将字符串 转 int
              parseFloat("字符串");将字符串转 小数
            注意:js里输出 换行  <br/>标签 实现 ，也就是说可以将标签直接写到 document.write(" "); 括号里
         3)选择结构  与java一样
         4)循环结构  与java一样
                  <script>
                      document.write("<h1>循环显示1-50之间能被5整除的数</h1>");
                      for(var i=1;i<=50;i++){
                          if(i%5==0){
                              document.write(i+",");
                          }
                      }
                  </script>
                5)关于数组
                  var 数组名 = new Array(值1,值2,...);
                     数组名[索引] 来获取 数组元素
                  一个属性   length
                  两个方法    arr.push("爱奇艺");  sort() 方法

                6)关于函数
                  a. 自定义函数 :
                     格式: function 函数名(参数列表){
                              //执行js代码
                           }
                     调用方式  :   函数名(参数列表); 直接调用
                                   相应元素 onclick 事件 ，例如   点击 按钮 触发 函数
                                   <input type="button" value="点一下" onclick="函数名(参数列表)" />
                  b.匿名函数 ：没有名字的函数
                    格式:  var 变量 = function (参数列表){
                                    //执行js代码
                                   }
                       或     元素的事件 = function (参数列表){
                                             //执行js代码
                                         }
                       一般这个函数用在页面 onload事件  或者元素  点击 事件里
  2)内置对象
         Array：用于在单独的变量名中存储一系列的值
         String：用于支持对字符串的处理
         Math：用于执行常用的数学任务，它包含了若干个数字常量和函数
         Date：用于操作日期和时间
        a.Date对象
            getFullYear() 返回 Date 对象的年份，其值为4位数
            getMonth()    返回 Date 对象的月份，其值介于0～11之间
            getDate()     返回 Date 对象的一个月中的每一天，其值介于1～31之间
            getDay()      返回 Date 对象的星期中的每一天，其值介于0～6之间
            getHours()    返回 Date 对象的小时数，其值介于0～23之间
            getMinutes()  返回 Date 对象的分钟数，其值介于0～23之间
            getSeconds()  返回 Date 对象的秒数，其值介于0～23之间
        b. Math对象
            floor()  对数进行下舍入       Math.floor(25.5);返回25  Math.floor(-25.5);返回-26
            random() 返回0~1之间的随机数  Math.random();例如：0.6273608814137365
  3)定时器函数
      1) setInterval(执行函数,每间隔时间以毫秒为单位);  --重复执行
         /* setInterval(function () {
               alert('aaa');
               },500);*/
          结果是 每隔0.5秒 弹出aaa

        清除定时器  clearInterval ()
          var  myTime＝setInterval("disptime() ", 1000 );
          clearInterval(myTime)；

       2)  setTimeout(执行函数,间隔时间以毫秒为单位);  --执行1次
         setTimeout(function () {
                      location.href='js5.html';//等待3秒调转页面
                  },3000);
        清除定时器  clearTimeout()
                var  myTime＝setTimeout("disptime() ", 1000 );
                clearTimeout(myTime);
                
  4)使用js 操作BOM  浏览器对象模型（Browser Object Model）
    a.window
      常用方法  open()  alert() prompt() confirm()
             window.open("弹出窗口的url","窗口名称","窗口特征”)
             window.open("http://www.baidu.com");在当前页面加载的同时 打开新页面
                window.alert('弹一个看看!');  //消息框
              // window.prompt("确定吗");     //输入框
               window.confirm("确定要删除吗?"); //询问框
                  window.close();  关闭当前页面
    b.history
      常用方法     forward() 下一个  前进
                   back()    上一个  后退
                   go()     替换前两个 ，括号里必须写数字    0表示当前页   正数表示 前进   负数表示后退
                   所有的方法  只有在先是实现跳转之后，才可用
    c.location
      常用方法  reload()
      常用属性  href="";  跳转到目标地址
               <a href="location.href='http://www.baidu.com'">百度一下，你就知道</a>
              方法: reload()    重新加载当前文档
                    replace()  用新的文档替换当前文档
              <a href="javascript:location.reload()">刷新</a> <br/>
              <a href="javascript:location.replace('http://www.baidu.com')">替换</a> <br/>
              跟超链接一样能实现页面的跳转，但是原理不一样， 前者是同标签来实现 ，后者是用 js代码实现
    d.document
       属性:  referrer  返回载入当前文档的URL

                     URL      返回当前文档的URL     document.write(document.URL);
              方法:
                 页面输出内容  document.write();
                 获取页面元素
                        按照ID获取   getElementById()        获取一个
                        按照名称获取 getElementsByName()     获取一个或多个
                        按照标签获取 getElementsByTagName()  获取一个或多个
                        按照类名获取 getElementsByClassName()获取一个或多个
                        除了按照id来获取 直接写之外，其他都需要 通过[索引]方式获取 ，即使只有一个也不例外
  5) 使用js来操作DOM   同jqDOM操作
     1.使用js操作dom
       1)根据节点层次来访问节点(Element属性)
         a.firstElementChild       第一个    孩子
         b.lastElementChild        最后一个  孩子
         c.nextElementSibling      下一个    兄弟
         d.previousElementSibling  上一个    兄弟
         ----------------------------------------------
         parentNode        父节点
         firstChild        第一个子节点
         lastChild         最后一个子节点
          nextSibling      下一个子节点
         previousSibling   上一个子节点

       2) 更改 节点
           a.更改节点  内容    innerHTML="内容";
           b.更改 节点 样式    style.样式名="值";
           c.更改节点  属性
--------------------------------------------------
2.关于jq
  1.jQuery:
   1)它是js的一个函数库
   2)对js封装 ，使用的方法类似，但是更简洁
   3)多了一个以.js后缀名文件
   4) 版本 1x  2x  3 x   如果你浏览器 版本比较低  ，建议用1x
   5)https://www.jquery123.com
  2.使用jquery
    1) 引入   jquery-1.12.4.js 文件
       <script src="文件地址"></script>
    2)获取元素 对它进行各种操作
        选择器: 用来选取元素，规则与css样式操作类似，也能使用length来判断是否选取成功!
        文档选择器
        $(document)  用来获取 整个文档对象   它有一个方法 read(); 所有jQquery代码都写在这里
       标签选择器
        $('标签名')  用来获取 某个特定标签元素 相当于 js 的 document.getElementByTagName('标签名');
        类选择器
        $('.类名')    用来获取 某个特定类样式标签元素 相当于 js 的 document.getElementByClassName('类名');
        ID选择器
        $('#ID名')    用来获取 某个特定类样式标签元素 相当于 js 的 document.getElementByClassName('ID名');
        一般情况下  三个选择器  常用事件 是click  或者悬浮的事件
   3.操作步骤:
       1）引入js文件    jquery-1.12.4.js
       2)  编写文档就绪函数   $(选择器).方法（函数1);  //所有的操作写到函数1
       3)  在函数1里继续写页面元素的 操作事件
          $('选择器').事件(函数2);  函数2 为元素事件触发的操作
           例如  点击p元素弹出内容"123"
           $('p').click(function(){ alert(123);});
   4.常用的元素操作的方法:
      1）操作文本
          a.获取  text();
          b.设置  text('设置的内容');
      2)操作标签及文本
          a.获取   html();
          b.设置  html(需要设置的标签及里面的内容);
      3)操作 样式
          a. 单个样式 css("样式名","样式值");
          b.多个样式  css({样式名:样式值,样式名:样式值});
          c.可以连缀操作样式
      4)操作属性
         a. 单个属性  attr("属性名","属性值");
         b. 多个属性  attr({属性名:属性值,属性名:属性值});
  5.整理所有选择器使用:
     1)基本 选择器
              标签选择器
               $('标签名')  用来获取 某个特定标签元素 相当于 js 的 document.getElementByTagName('标签名');
               类选择器
               $('.类名')    用来获取 某个特定类样式标签元素 相当于 js 的 document.getElementByClassName('类名');
               ID选择器
               $('#ID名')    用来获取 某个特定类样式标签元素 相当于 js 的 document.getElementByClassName('ID名');
       补充2个
                并集选择器
               $('选择器1，选择器2,..') 用来选取多个元素同时进行操作
                全局选择器
               $('*')  选取所有元素

     2)属性选择器
       a. 包含 属性    [属性名]    例如: 选取所有class属性的元素  $('[class]')
       b. 属性等于 值  [属性=值]   例如: 选取class属性为 asv的 元素  $('[class=asv]')
       c. 属性以 值开头  [属性^=值]   例如: 选取class属性以  a  开头的 元素  $('[class^=a]')
       d. 属性以 值开头  [属性$=值]   例如: 选取class属性以  a  结尾的 元素  $('[class$=a]')
       e. 属性以 值开头  [属性*=值]   例如: 选取class属性包含a 的 元素  $('[class*=a]')
       f.还有一个属性不等于值  慎用

     3)过滤选择器
       //$('li:first').css({"color":"red","font-size":"36px"}); //第一个li
       //$('li:last').css({"color":"red","font-size":"36px"}); //最后一个li
       // $('li:even').css({"color":"red","font-size":"36px"}); //偶数元素  第一个索引 是 0  所以 它是偶数开始
       //$('li:odd').css({"color":"red","font-size":"36px"}); //奇数元素  第一个索引 是 0  所以 它是偶数开始
       //  $('li:eq(2)').css({"color":"red","font-size":"36px"}); //索引值的元素  第一个索引 是 0  所以 如果想选第3个元素 应该是2
       // $('li:gt(2)').css({"color":"red","font-size":"36px"}); //值大于索引的元素  第一个索引 是 0
       //$('li:lt(2)').css({"color":"red","font-size":"36px"}); //值小于索引的元素  第一个索引 是 0
                  //:last 选最后一个  :not() 括号里是什么  就是除了这个一个以外 所有的
        $('li:not(:last)').css({"color":"red","font-size":"36px"}); //值小于索引的元素  第一个索引 是 0
     4)层次选择器
       a.后代选择器          $('#u p').addClass('bg');//选取id为u 的后代元素p
       b.子选择器            $('#u>p').addClass('bg');//选取id为u 的子元素p
       c.相邻元素选择器      $('#u+p').addClass('bg');//相邻元素选择器
       d.同辈元素选择器      $('#u~p').addClass('bg');//同辈元素选择器
3.事件
   文档就绪事件
         $(document).ready(function(){
         //做的事
         });
   1)单击事件 click
     $('选择器').click(function(){
         点击后执行的操作;
     });
   2)鼠标悬浮 移除时间
      $('选择器').mouseover(function(){
                鼠标悬浮后执行的操作;
             });
     $('选择器').mouseout(function(){
           鼠标移走后执行的操作;
        });
   3)hover事件  模拟 鼠标 悬浮 和移除事件
        $('选择器').hover(function () {
               鼠标悬浮后执行的操作;
             }, function () {
                 鼠标移走后执行的操作;
             });
      hover 的括号内，有且只有2个函数

   4)toggle事件  模拟 鼠标连续点击
      $('选择器').toggle(function () {
                 第一次点击后执行的操作;
                }, function () {
                   第2次点击后执行的操作;
                }, function () {
                   第3次点击后执行的操作;
                 });
           toggle的括号内，可以有n个函数
   5)toggleClass('样式名');  切换 样式  点一下 添加样式 ，再点移除样式
      相当于 addClass('样式1'); removeClass('样式1');两个的结合
        <style>
              .psty{
                  background-color:pink;
                  width:300px;
                  height:100px;
              }
          </style>
          $('span').click(function () {
                     // $('p').css({"background":"pink","width":"300px","height":"100px"});
                      // $('p').addClass('psty'); //追加样式 removeClass(); 移除样式
                    $('p').toggleClass('psty');
                });
4.动画
    1)显示与隐藏
        显示 show(动画持续时间，动画执行完毕后调用函数)   一般只有第一个参数  可以用单词   fast 200  normal 400  slow 600
        隐藏  hide(动画持续时间，动画执行完毕后调用函数)
     2)淡入淡出
         淡入  fadeIn(3000);
         淡出  fadeOut();
     3) 折叠与展开
        折叠  .slideUp(1000);
        展开  .slideDown(3000);
     4) 自定义:
        $(selector). animate({params},speed,callback)
       $(".man").animate({"bottom":"0px"});
5.jq操作DOM
        那 与 js操作DOM有什么区别呢?  jQuery对JavaScript中的DOM操作进行了封装
    1)样式操作
             a.设置和获取样式
             设置  css(name,value) ;    或   css({name:value, name:value,name:value…}) ;
             获取  css(name)

              $(document).ready(function () {
                     $('div').css("background-color","red");//设置单个样式
                     $('div').css({"height":"80","width":"200"});//设置多个样式
                   alert(  $('div').css('background-color') );//获取样式

                 });
              b.追加和移除样式
                追加
                   $(selector).addClass(class);或   $(selector).addClass(class1 class2 … classN);
                   $("h2").mouseover(function() {
                        $("p").addClass("content border");
                   });
                移除
                    $(selector).removeClass("class") ;或   $(selector).removeClass("class1 class2 … classN ") ;
                    $("h2").mouseout(function() {
                            $("p").removeClass("text content");
                    });
              c.切换样式( 透明度样式设置  opacity:0 )
                    $(selector).toggleClass(class) ;
                     $("h2").click(function() {
                         $("p").toggleClass("content  border");
    2)内容及Value值操作
         a. $("div.left").html();
            或
             $("div.left").html("<div class='content'>…</div>");
         b. val()可以获取或设置元素的value属性值
                $(this).val();     获取元素的value属性值
               $(this).val(value); 设置元素的value属性值
    3)节点操作
         查找节点（前面章节已讲） $('p')：通过选择器获取 p标签 节点   $('#aa')：通过选择器获取ID为aa的元素 节点
         创建节点  $('节点名')
              $("<li></li>");   $("<p></p>");  $("<h2</h2>");

         插入节点
                append(节点变量)  谁到我这来  ,我就是参考   谁  就是创建 的那个 节点
              例如 : 创建一个p标签  ，追加到已有div里
                    a. var p=  $("<p></p>");
                    b. $('div').append(p);
         删除节点
            remove()：删除整个节点
            empty()：清空节点内容
            detach()：删除整个节点，保留元素的绑定事件、附加的数据

         替换节点
           replaceWith()和replaceAll()用于替换某个节点
            $("<li>aaa</li>");
            $(".gameList li:eq(2)").replaceWith(v);
         复制节点
             $('span').click(function () {
                           alert('弹出内容 ');
              });
            $('.up').click(function () {
               var v  = $('span').clone(true  );
                $('h2').append(v);
            });
    4)节点属性操作
          a.  attr("属性名")        用来获取 元素属性
          b.  attr("属性名","值")  用来 设置元素属性
          c. removeAttr("属性名")用来删除元素的属性
    5)节点遍历
      a.遍历子元素  children()方法可以用来获取元素的所有子元素
         var $section =$("section").children();
         alert($section.length);

      b.遍历同辈元素 next( )、prev( )、siblings( )
        下一个:    $("li:eq(1)").next().addClass("orange");
        上一个:    $("li:eq(1)").prev().addClass("orange");
       前后所有的: $("li:eq(1)").siblings().addClass("orange");
      c.遍历前辈元素  parent( )、parents( )
         parent()：获取元素的父级元素
         $("li:eq(1)").parent().addClass("orange");
      其他遍历方法 each( ) 、end( )、find( )、eq( )、first( )…
      d.CSS-DOM操作
6.表单验证
   1)为什么?
      减轻服务器的压力     --非空
     保证输入的数据符合要求--验证格式
    2)使用h5验证表单
      a.验证非空     required   如果要给值   required="required"
      b.格式验证     pattern=" 正则表达式 "
      c.默认给出提示 placeholder="提示消息"