JQuuery保姆级

什么是JQuuery

一个快速、简洁的 JavaScript 框架

设计思想

1.模拟CSS选择网页元素

          //选择器写法
          $("#div1").css("background" , 'red'); //将ID为 div1 的元素背景设为红色
          $("ul li").css("background", 'red');  //将ul下所有li标签背景设为红色
          $("[name=hello]").css("background",'red');//将name=hello的元素背景设为红色           $("li").siblings()

2.独有表达式选

          //表达式写法
           $("li:first").css("background" , 'red');//将第一个li标签背景设为红色
           $("li:even").css("background" , 'red');//将下标为偶数的li标签背景设为红色
           $("li:odd").css("background" , 'red');//将下标为奇数的li标签背景设为红色
           $("li:eq(2)").css("background" , 'red');//将下标为2的li标签背景设为红色
           $("p:not('.text')")  //选择除class=text的p标签

3.多种筛选方式

           $("li:eq(2)").css("background" , 'red');//将下标为2的li标签背景设为红色
           $("li").eq(2).css("background" , 'red');
           $("li.box").css("background",'red');//将class=box的li标签背景设为红色
           $("li").filter(".box").css("background",'red')

JQuery写法

1.方法函数化

           $("h1").click(function(){
               this.style.background='red'
           }) //为h1标签添加点击事件
            // $(function(){}) === (  window.οnlοad=function(){}  ) 

2.链式操作

              $("h1").width(200)
              $("h1").mousemove(function() {
                    this.style.background = 'red';
             })
              $("h1").mouseout(function() {
                    this.style.background = 'none'
             })  
             //如果是一个操作对象，可以简化
             $("h1").width(200).mouseover(function() {
                    this.style.background = 'red';
             }).mouseout(function() {
                    this.style.background = 'none'
             })  

3.取值赋值一体化

             $("div").text(); //获取或赋予div内文本内容
             $("input").val();//input取值或赋值

JQ与JS的关系

​ 可以共存，不能混用

JQuery 方法

​ .has() 直接判断子节点是否拥有符合条件的标签
​ .filter()
​ .not()

       $("div").filter(".box2").css("background", 'red')//过滤出class=box2的div标签
       $("div").not(".box2").css("background", 'red')//排除class=box2的div标签
       $("div").has(".box2").css("background", 'red')//找到div中子节点class=box2的div   类比：(请孩子是男孩的家长出列)

​ .prev() 查找当前兄弟节点中的上一个节点
​ .next() 查找当前兄弟节点中的下一个节点
​ .find() 查找子节点

          $("ul").find("li")
          $("ul li")

​ :nth-child() 作为子元素，找到p中的第一个，并且位置必须是子元素中的第一个
​ :nth-of-type() 作为子元素，找到p中的第一个，只需是第一次出现的
​ .map(function(index, item){}) 遍历 item是原生DOM对象
​ .add() 在当前集合的基础上加上add里的集合
​ .addBlack() 在当前集合的基础上加上前面的集合
​ .addClass(“类名1，类名2”)
​ .removeClasss()
​ .offsetWidth() 包括Width + boder + padding;

宽

          $("div").css("width")   //结果为带px的字符串
​         $("div").width()        //仅数字  width
​         $("div").innerWidth()   //仅数字  width+padding 
​         $("div").outerWidth()  //仅数字   width+boder+padding
           $("div").outerWidth(true)  //仅数字   width+boder+padding+margin

高

​ .height() .innerHeight() .outerHeight()

节点操作

​ .before()

       $("div").before("span")   //div节点的前面是span  

​ .after()

​ .append() 作为子节点插入到父元素最后一位

​ .prepend() 作为子节点插入到父元素首位

​ .insertBefore()

        $("span").insertBefore($("div"))   //将span插入到div前面  

​ .insertAfter()
​ .remove() 移除节点

   //新增节点
     var i = 1;
      $(`<li>${i++}</li>`).appendTo("ul");

删除元素节点

​ .remove()
​ .detach()

         $("div").remove(); //删除节点后 不保留节点之前的行为
         $("div").detach();//删除节点后  保留节点之前的行为

on和off方法

//on方法实现事件绑定
    //给一个事件添加一个函数
      $("div").on("click",function(){
          console.log("1")
      })
    //给多个事件添加一个函数  事件间用空格间隔
      $("div").on("click mouseover",function(){
          console.log("1")
      })
    //给多个事件添加多个函数
      $("div").on({
          click:function(){
              console.log("1")
          },
          mouseover:function(){
              console.log("2")
          }
      })
     //实现事件委托, 第二个参数是触发对象的选择器
       $("ul").on("click","li",function(){
           $(this).css("background",'red')
       })
      

​

   //off方法取消事件     
        $("div").off(); //取消所有事件的所有函数
        $("div").off("mouseout") //取消某一事件下的所有函数
        $("div").off("mouse",show) //取消某一事件下指定的函数

滚动

    // 滚动高度，不考虑兼容
    $(document).click(function(){
        alter($(window).scrollTop())
    })

事件冒泡

      //阻止事件冒泡（从里向外），不考虑兼容
      ev.stopPropagation();
      ev.preventDefault();

offset和position

      .offset().left   //直接获取当前元素，距离最左边的距离 ，margin不算内 
      .position() //直接获取当前元素距第一个有定位的父节点的位置 ，margin算内
      .offsetParent() //查找第一个有定位的父节点

动画

​ slideUp() 收缩
​ . slideDown() 展开 动画的卷闸效果
​ .fadeIn() 淡入
​ .fadeOut() 淡出
​ .fadeTo(动画持续时间，透明度0~1，回调函数)
​ .animate()

       $("div1").click(function(){
           $("div").animate({
           width:300,
           heigth:200,
       } , 4000,"leaner");   //匀速
           $("div2").animate({
           width:300,
           heigth:200,
       } , 4000,)           //慢快慢,默认
       })

特效函数

​ .val() 获取或设置表单元素的值 == value

​ .size() 输出获取到的网页元素个数

​ .length 没有括号

循环

        $("li").each(function(index,item){
            $(item).val(index)
        })  

.hover(移入函数，移出函数)

        $("div").hover(function(){
            $(this).html("移入")
        },function(){
            $(this).html("移出")    
        })

.hide() 隐藏 .Show() 展示

插件

关于cookie

	$.cookie(name)  //通过name取值
​    $.cookie(name,value)  //设置name和value
​    $.cookie(name,value,{
​         //可选项
​     })
​ 	$.cookie(name,null) // 删除cookie
​    // 例： 
    $.cookie("姓名","汤姆",{
      expires:7  //7天后过期
    })