• JQuery


    1.javascript

    不爽的地方:
    1. 代码比较麻烦,需要遍历,可能还需要嵌套。
    2. 找对象麻烦,方法少,还长
    3. 会有兼容性问题。
    4. 如果想要实现简单的动画效果 animate
    5. js注册事件,会被覆盖,addEventListener

    2.JQuery

    JQuery:

    jQuery就是一个js库,使用jQuery的话,会比使用JavaScript更简单。

    js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。(animate.js、common.js)

    优点总结:

    1. 查找元素的方法多种多样,非常灵活
    2. 拥有隐式迭代特性,因此不再需要手写for循环了。
    3. 完全没有兼容性问题。
    4. 实现动画非常简单,而且功能更加的强大。
    5. 代码简单、粗暴。

    3.JQuery入口函数

    //js的入口函数执行要比jQuery的入口函数执行得晚一些。
    //jq的入口函数会等待页面的加载完成才执行,但是不会等待图片的加载。
    //js的入口函数会等待页面加载完成,并且等待图片加载完成才开始执行。
      
      window.onload = function () {
        console.log("我是js的入口函数");
      };
      
      //认识
      $(document).ready(function () {
        console.log("这是jQuery入口函数的第一种写法");
      });
      
      
      $(function () {
        console.log("这是jQuery入口函数的第二种写法");
      });

    4.DOM对象与JQ对象

    DOM对象(js对象):使用js的方式获取到的元素就是js对象(DOM对象)。

    jq对象:使用jq的方式获取到的元素就是jq对象。

    jq对象与js对象的区别:js对象对象不能调用jq对象的方法。

    jq对象与js对象的联系(jq对象其实就是js对象的一个集合,伪数组,里面存放了一大堆的js对象)(宏观上)

    5.选择器

    基本选择器

    ID选择器 ------------------   $(“#id”); (获取指定ID的元素) 
    类选择器  ------------------  $(“.class”);  (获取同一类class的元素) 
    标签选择器  ---------------- $(“div”); (获取同一类标签的所有元素)
    并集选择器 ----------------- $(“div,p,li”); (使用逗号分隔,只要符合条件之一就可)
    交集选择器  ---------------- $(“div.redClass”); (获取class为redClass的div元素)

    层级选择器

     子代选择器 ---------------- $(“ul>li”);  (使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素)
     后代选择器 ---------------- $(“ul li”); (使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等)

    过滤选择器:这类选择器都带冒号:

     :eq(index) ----------------  $(“li:eq(2)”).css(“color”, ”red”);  (获取到的li元素中,选择索引号为2的元素,索引号index从0开始。)
     :odd  ---------------- $(“li:odd”).css(“color”, ”red”); (获取到的li元素中,选择索引号为奇数的元素)
     :even  ----------------  $(“li:even”).css(“color”, ”red”);  ( 获取到的li元素中,选择索引号为偶数的元素)

    筛选选择器(方法):筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。

     children(selector) ----------------  $(“ul”).children(“li”)  (相当于$(“ul>li”),子类选择器)
     find(selector) ----------------  $(“ul”).find(“li”);  (相当于$(“ul li”),后代选择器)
     siblings(selector) ----------------  $(“#first”).siblings(“li”);  (查找兄弟节点,不包括自己本身。)
     parent()  ----------------  $(“#first”).parent(); (查找父亲)
     eq(index)  ----------------  $(“li”).eq(2);  (相当于$(“li:eq(2)”),index从0开始)
     next()  ---------------- $(“li”).next()  (找下一个兄弟)
     prev() ---------------- $(“li”).prev()  (找上一次兄弟)

    6.index()方法

    index()方法会返回当前元素在所有兄弟元素里面的索引。

    $("li").click(function () {
          console.log($(this).index());
        });

    7.css操作

    $(function () {
      
        //css(name, value)
        //修改单个样式
        //name:样式名 value:样式值
     
        $("li")
          .css("backgroundColor", "pink")
          .css("color", "red")
          .css("fontSize", "32px");
        
        //css(obj)
        //修改多个样式
        
        $("li").css({
          backgroundColor:"pink",
          color: "red",
          fontSize:"32px",
          border: "1px solid black"
        });
    
        //获取样式
        //css(name)
        //name:想要获取的样式
        $("li").eq(0).css("fontSize", "20px");
        $("li").eq(1).css("fontSize", "21px");
        $("li").eq(2).css("fontSize", "22px");
        $("li").eq(3).css("fontSize", "23px");
        
        //A:20  b:21  c:22   d:23  e:16  f:[20, 21, 22, 23]
        
        
        //隐式迭代:
          // 设置操作的时候:会给jq内部的所有对象都设置上相同的值。
          // 获取的时候:只会返回第一个元素对应的值。
        console.log($("li").css("fontSize"));//16px
      
      
      });

    8.class操作

    $(function () {
        
        $("input").eq(0).click(function () {
          
          // 添加一个类
          $("li").addClass("basic");
        });
      
        $("input").eq(1).click(function () {
          $("li").addClass("bigger");
        });
        
        
        $("input").eq(2).click(function () {
          
          //移除一个类
          $("li").removeClass("bigger");
        });
        
        //判断类
        $("input").eq(3).click(function () {
        
          //移除一个类
          console.log($("li").hasClass("bigger"));;
        });
      
      
        $("input").eq(4).click(function () {
        
          //判断li有没有basic类,如果有,就移除他,如果没有,添加他
          //toggle
          $("li").toggleClass("basic");
        });
      });

    9.属性操作

    //用法和css一样
        //设置单个属性
        //attr(name, value)
        $("img").attr("alt", "图破了");
        $("img").attr("title", "错错错错");
        
        //设置多个属性
        $("img").attr({
          alt:"图破了",
          title:"错错错",
          aa:"bb"
        })

    10.prop方法

    //对于布尔类型的属性,不要attr方法,应该用prop方法 prop用法跟attr方法一样。
      $(function () {
        $("input").eq(0).click(function () {
          $("#ck").prop("checked", true);
        });
      
        $("input").eq(1).click(function () {
          $("#ck").prop("checked", false);
        });
      });

    11.show方法

    $(function () {
        
        $("input").eq(0).click(function () {
          
          //show不传参数,没有动画效果
          //$("div").show();
          
          //show(speed)
          //speed:动画的持续时间  可以是毫秒值 还可以是固定字符串
          //fast:200ms   normal:400ms   slow:600
          //$("div").show("ddd");
        
          // show([speed], [callback])
          $("div").show(1000, function () {
            console.log("哈哈,动画执行完成啦");
          })
          
        });
        
        
        $("input").eq(1).click(function () {
          $("div").hide();
        })
        
      });

    12.滑入滑出动画

    $(function () {
        
        //滑入(slideDown)  滑出:slideU
        $("input").eq(0).click(function () {
          
          //slideDown:如果不传参数,有一个默认值normal
          //$("div").slideDown();
          //$("div").slideDown(1000);
          $("div").slideDown(1000, function () {
            console.log("额呵呵");
          });
        });
        
        
        $("input").eq(1).click(function () {
          $('div').slideUp();
        })
      
      
        $("input").eq(2).click(function () {
          
          //如果是滑入状态,就执行滑出的动画,
          $('div').slideToggle();
        })
      });

    13.淡入淡出动画

    $(function () {
      
        //淡入:fadeIn  淡出:fadeOut    切换:fadeToggle
        $("input").eq(0).click(function () {
          
          $("div").fadeIn(2000);
          
        });
        
        
        $("input").eq(1).click(function () {
          $("div").fadeOut(1000);
        })
        
        
        $("input").eq(2).click(function () {
          
          //如果是滑入状态,就执行滑出的动画,
          $('div').fadeToggle();
        })
      });

    14.自定义动画

    $(function () {
        $("input").eq(0).click(function () {
          
          //第一个参数:对象,里面可以传需要动画的样式
          //第二个参数:speed 动画的执行时间
          //第三个参数:动画的执行效果
          //第四个参数:回调函数
          $("#box1").animate({left:800}, 8000);
          
          //swing:秋千 摇摆
          $("#box2").animate({left:800}, 8000, "swing");
          
          //linear:线性 匀速
          $("#box3").animate({left:800}, 8000, "linear", function () {
            console.log("hahaha");
          });
        })
      });

    15.动画列表

    $(function () {
        $("#btn").click(function () {
          
          //把这些动画存储到一个动画队列里面
          $("div").animate({left:800})
            .animate({top:400})
            .animate({300,height:300})
            .animate({top:0})
            .animate({left:0})
            .animate({100,height:100})
        })
      });

    16.停止动画

    $(function () {
        $("input").eq(0).click(function () {
          $("div").slideDown(4000).slideUp(4000);
        });
    
        $("input").eq(1).click(function () {
          //stop:停止当前正在执行的动画
          //clearQueue:是否清除动画队列 true  false
          //jumpToEnd:是否跳转到当前动画的最终效果 true false
    
          //.stop().animate();
          $("div").stop(true, true);
        })
      });

    17.动态创建节点

    $(function () {
       // var box = document.getElementById("box");
    
       // var a = document.createElement("a");
       // box.appendChild(a);
       // a.setAttribute("href", "http://www.baidu.com");
       // a.setAttribute("target", "_blank");
       // a.innerHTML = "百度";
        
        $("#box").append('<a href="http://www.baidu.com" target="_blank">百度</a>');
        
      });

    18.创建与添加节点

    $(function () {
    
    //    //创建jq对象
          var $li = $('<a href="http://www.baidu.com" target="_blank">百度</a>');
    //    console.log($li);      $("div").append('<a href="http://www.baidu.com" target="_blank">百度</a>');
        
        //添加到子元素的最后面
          $("div").append($("p"));
          $("p").appendTo($("div"));
        
          $("div").prepend($("p"));
          $("p").prependTo($("div"));
        
          $('div').after($("p"));
          $('div').before($("p"));
      });

    19.html方法和text方法

    $(function () {
        
          //html:innerHTML  text:innerText
          console.log($("div").html());//<h3>我是标题</h3>
          console.log($("div").text());//我是标题
        
          $("div").html("<p>我是文本</p>");
          $("div").text("<p>我是文本</p>");
        
      });

    20.width方法和height方法

    $(function () {
        //获取div的宽度
         console.log($("div").css("width"));
         $("div").css("width", "400px");
    
        //直接获取到的是数字
        //就是获取的width的值
        console.log($("div").width());//width
        console.log($("div").innerWidth());//padding+width
        console.log($("div").outerWidth());//padding+width+border
        console.log($("div").outerWidth(true));//padding+width+border+margin
        //$("div").width(400);
      
        //需要获取页面可视区的宽度和高度
       $(window).resize(function () {
         console.log($(window).width());
         console.log($(window).height());
       });  
      });

    21.offset和position方法

    $(function () {
        
        //获取元素的相对于document的位置
        console.log($(".son").offset());
        
        //获取元素相对于有定位的父元素的位置
        console.log($(".son").position());
        
      });

    22.on注册事件

    //on注册简单事件
    // 表示给$(selector)绑定事件,并且由自己触发,不支持动态绑定。
    $(selector).on( "click", function() {});
    
    
    //on注册委托事件
    // 表示给$(selector)绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定
    $(selector).on( "click",“span”, function() {});
    
    
    //on注册事件的语法:
    // 第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
    // 第二个参数:selector, 执行事件的后代元素(可选),如果没有后代元素,那么事件将有自己执行。
    // 第三个参数:data,传递给处理函数的数据,事件触发的时候通过event.data来使用(不常使用)
    // 第四个参数:handler,事件处理函数
    $(selector).on(events[,selector][,data],handler);
  • 相关阅读:
    dsaljkfgklj;asdfkjlsa
    aaaaaaaaa
    实验 7 综合练习 第三题
    实验 7 综合练习 第一题
    实验 7 综合练习 第四题
    实验 7 综合练习 第二题
    实验6 1
    实验 5-2
    实验5-1
    3-6
  • 原文地址:https://www.cnblogs.com/lax-17xu/p/12452510.html
Copyright © 2020-2023  润新知