JS中JQ框架的使用

web.jpeg

1.基本使用

1.1加载时机

 //页面中所有加载完 触发
    $(window).load(function(){
        console.log("开始了");
    });

  $(document).ready(function(){
        console.log($(".demo"));
        
   });
// DOM加载完成  简写一
$().ready(function(){

});

// DOM加载完成 简写二
$(function(){

});

1.2JQ对象和DOM对象的相互转化

     //JQ转化为 DOM 
        //获取JQuery对象
        var jq_dom = $("div");
         //格式 jq_dom[0]
     console.log( "====="+jq_dom[0]);

        //方法二  Jq.get(0)
        jq_dom.get(0);

//DOM转化 jQ
 // 格式:$(要转化的DOM对象)
 var dom_obj = document.getElementsByTagName("div")[0];
   $(dom_obj).html();

2.选择器

2.1基本选择器

• $("元素名称") 标签选择器
• $("#test") id选择器
• $(".test") 类选择器
• $("*") 通配符选择器

2.2 层级选择器

• $("#dv span")后代选择器 空格隔开 获取div中所有span标签
• $("p.intro") 交集选择器 获取 class 为 intro 的 <p> 元素
• $("p#demo") 选取所有 id="demo" 的 <p> 元素
• $(".liItem,div") 并集选择器
• $("#dv > span") 子代选择器
• $("#dv~span") div后面的兄弟元素sapn
• $("#dv+sapn") 获取#dv后面的直接兄弟
• $("选择器名:odd/even") 奇数选择器/偶数选择器 是指元素的下标是奇数或者偶数

2.3属性选择器

<script>

    //属性选择器

    $(function(){
        // 查找a中有href属性的标签
        $("a[href]").css("background","red");
        
        //查找到有 www.baidu.com属性的 设置样式
        $("a[href='www.baidu.com']").css("background","yellow");

        //查找到 href != "www.jd.com" 的标签 设置样式
        $("a[href!='www.jd.com']").css("background","green");

       //找到包含 www的标签
       $("a[href^='www']").css("background","#ccc");

       //找到以dom结尾的元素 
       $("a[href$='dom']").css("background","black");

       // 包含摸个元素的标签
       $("a[href*='m']").css("background","red");

       //选择包含多个属性的 标签
       $("a[href][title='s']").css("background","pink");

    });

</script>

2.4过滤选择器

<script>
    $(function(){
        //选择第一个元素
        $("li:first").css("background","pink");

        //选择最后一个元素
        $("li:last").css("background","pink");

        //选择索引为3的元素
        // $("li").eq(3).css("background","red");
        $("li:eq(3)").css("background","red");

        //选择索引不等于2的元素 
        $("li:not(:eq(2))").css("background","yellow");

        //选择索引是奇数的元素
        $("li:odd").css("background","red");
          //选择索引是偶数的元素
        $("li:even").css("background","pink");

        //选择大于摸个索引值的 元素
        $("li:gt(5)").css("background","yellow");
      //选择小于摸个索引值的 元素
        $("li:lt(5)").css("background","yellow");

    });

</script>

3.操作样式类

3.1设置样式 css的3种方法

<script>
    $(function(){
        //设置CSS的样式
       // $().css("key","value") 方式一;
       
       $("button").eq(0).click(function(){
           //设置样式的 方法一
         $("div").css("width","100px");
         $("div").css("height","40px");
         $("div").css("background","red");

           
       });

       //设置样式的方法二  链式编程思想
       $("button").eq(1).click(function(){
           $("div").css("width","100px").css("height","60px").css("background","yellow");
       });

       //对象的方式 设置样式
       $("button").eq(2).click(function(){
           $("div").css({
               width:"100px",
               height:"80px",
               background:"pink"
           });
       });

       //获取div的样式
       $("button").eq(3).click(function(){
          console.log( $("div").css("height"));
          console.log( $("div").css("background"));
          
       });
       
    });

</script>

3.2操作class类名

• 添加类名 jQ.addClass()的3中方式

//添加样式
      $("button").eq(0).click(function(){
          //添加方式一
        //   $("div").addClass("class1");
        //添加方式二
        //   $("div").addClass("class1").addClass("class2");
          //添加方式三
          $("div").addClass("class1 class2");
      });

• 判断是否有这个类名 jQ.hasClass() 检查是否拥有指定的样式

   $("button").eq(1).click(function(){
          // 返回值是 bool值
          //该方法检测 只能检测一个样式，不能检测多个样式，也不可以链式检测
          console.log( $("div").hasClass("class1"));
          
      });

• 移除类名jQ.removeClass() 可以单个移除，也可以移除多个

     $("button").eq(2).click(function () {

            //说明:使用方式同addClass方法

            //$("div").removeClass("class1")
            //$("div").removeClass("class1").removeClass("class2");

            $("div").removeClass("class1 class2");
        })

• 样式切换 jQ.toggleClass()

 //样式切换
      $("button").eq(3).click(function(){
          //有这个样式就删除 没有这个样式就添加
          $("div").toggleClass("class1");
      });

3.3 标签位置的操作

• jQ.width()有参数设置宽和高，没有参数获取宽高

     //1.获取宽度和高度
        console.log($(".demo").width());
        console.log($(".demo").height());
  //2.设置宽度
        $(".demo").width(300)

• jQ.innerWidth()获取带有 边框padding 的宽度

• jQ.offset()获取当前标签相对于窗口的位移信息,返回的是json对象,可以直接访问对象的属性

• jQ.position()获取的是当前标签相对于父标签的位移信息

• $(“div”).scrollTop(); // 相对于滚动条顶部的偏移

• $(“div”).scrolllLeft(); // 相对于滚动条左部的偏移

3.4 操作元素的内容和属性

• jQ.text()没有参数是获取内容,有参数是设置内容

   $("button").eq(0).click(function () {
            //获取 文本内容 
            console.log($("div").text());
            //设置文本内容
            $("div").text("哈哈哈");
        });

• jQ.html()没有参数是获取内容,有参数是设置内容

        $("button").eq(1).click(function(){
            //获取 文本内容 
            console.log($("div").html());
            //设置 文本标签内容
            $("div").html("<h3>这是一个h3标签</h3>");
        });

上述：2个方法的区别是text()仅仅是内容显示遇到标签不会转化，html()遇到标签会语义化标签的内容

• jQ.val()设置或者返回表单的内容value的值

        //获取value的值
        console.log( $("input").val());
        //设置value的值
        $("input").val("设置一下");
        

• jQ.attr("key","value") 设置或者元素的属性值

  //设置
  $("#demoID").attr("title","我是标题")     //添加
  $("#demoID").attr("title","我是标题-X")   //修改
//获取
$("#demoID").attr("title")；

• jQ.removeAttr("属性") 移除摸一个属性

$("#demoID").removeAttr("id");

• jQ.prop("属性","属性值") 这个直接添加在DOM对象上
• jQ.removeProp()删除

4动画

4.1隐藏和显示

• $(selector).hide(speed,callback);
• $(selector).show(speed,callback);

   $("button").eq(0).click(function(){
            //显示
            $("div").show(2000,function(){
                console.log("动画执行完毕");
                
            });

        });

        $("button").eq(1).click(function(){
            //隐藏
            $("div").hide("slow",function(){
                console.log("hide动画执行完毕");
            });
        });
        $("button").eq(2).click(function(){
            //切换
            $("div").toggle("fast",function(){

                console.log("切换动画执行完毕");
                
            });
        });

4.2滑动

• slideDown()
• slideUp()
• slideToggle()

 //展开
        $("button").eq(3).click(function(){
                
            $("div").slideDown(1000,function(){
                console.log(22221);
            });
          
        });
        //收起
        $("button").eq(4).click(function(){
            $("div").slideUp(1000,function(){
                    console.log(1111);
                    
            });
        });
        //切换
        $("button").eq(5).click(function(){
            $("div").slideToggle(1000,function(){
                console.log(33333321);
            });
        });

4.3淡出淡入

• fadeOut() 用于淡出可见元素
• fadeIn() 用于淡入已隐藏的元素。
• fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
• fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。更改透明度

   $("button").eq(0).click(function () {
            $("div").fadeIn(2000,function () {
                console.log("动画执行完毕");
            })
        })

        $("button").eq(1).click(function () {
            $("div").fadeOut(2000,function () {
                console.log("动画执行完毕");
            })
        })

        $("button").eq(2).click(function () {
            $("div").fadeToggle(2000,function () {
                console.log("动画执行完毕");
            })
        })
        $("button").eq(3).click(function () {
            $("div").fadeTo(2000,0.5,function () {
                console.log("动画执行完毕");
            })
        })

4.4 动画的停止

• $(selector).stop(stopAll,goToEnd);

  • 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,如果是true，表示清空队列，就是后面的动画都不执行了

  • goToEnd 参数规定是否立即完成当前动画。默认是 false。如果为true，表示立即执行当前动画，然后在执行后续动画

  • stop(false)停止当前动画，后续队列中的动画继续执行

  • stop(true)停止当前动画，并清空队列中的所有动画

  • stop(false,true)当前动画立即执行完毕，后续队列中的动画继续执行

  • stop(true,true)当前动画立即执行完毕，并清空后续队列中的所有动画

<script type="text/javascript">

    $(function () {

       $("#btn1").click(function () {
           $("div>img:last").hide(300,function anHide() {
               //循环调用 完成函数  函数递归 
    
               $(this).prev().hide(300,anHide);

           });

       });


       $("#btn").click(function () {

           $("div>img:first").show(300,function aniShow() {
              //函数递归 自调用
               $(this).next().show(300,aniShow);
           })

       });

    });

</script>

案例.gif

4.5 自定义动画

• 格式animate(目标对象，时间，回调函数)

 /**
    自定义动画
    animate(目标对象，时间，回调函数)
 */

 $(function(){
     $("button").eq(0).click(function(){
        $("div").animate({width:"500px",height:"500px"},1000,function(){
         console.log("动画完成");
         
     });
     });

     $("button").eq(1).click(function(){
        $("div").animate({width:"+=50px",height:"+=50px"},1000,function(){
         console.log("动画完成");
         
     });
     });
     
 });

5 事件

• 常用的点击事件 对象.事件的名字(function(){})

 $("#btn1").click(function () {

            $("#box").append($("<p>先创建的P你标签</p>"));

        });

5.1事件的绑定 on

• 对象.on("事件名字"，"选择器"，"事件处理函数")

   $("div").on("click",function(event){

            console.log("点击事件");

            // event 事件处理对象
            //target是事件的目标对象 就是div
           
        });

每一个事件函数都有一个隐藏的参数 event,其中这个几个属性，type是事件类型，target目标对象(事件作用的对象), data是自定义数据，可以在点击事件传值

$("div").on("click",{name:"CC",age:"18"},function(e){

            console.log(e.data);
          
        })

image.png

这个事件绑定可以绑定多次，也可以是不同的事件 比如:mouseenter

5.2 事件冒泡 和 事件的默认行为

• 当标签事件被触发的时候,事件会向上层层传递直到根节点,如果这个过程中遇到注册了相同事件的标签那么也会触发

在jQ中阻止事件冒泡的方式有2种
1.直接 return:false
2.根据事件函数的参数event阻止 event.stopPropagation() | window.event.cancelBubble = true;

事件的默认行为主要是a标签的一些行为事件 ,有些时候是不需要这些行为自动触发的 所以需要阻止 event.preventDefault();

5.3事件委托

• 格式$("选择器-委托对象").on("事件类型","选择器(具体添加事件的对象)",回调函数)
• 作用: 可以给当前还没有创建(不存在)的标签添加事件, 可以提升性能

<script>
    //事件委托
    //
    // JQ.on("click","给那个标签添加对象",fn); 
    $(function () {
        //委托ul标签 给li标签 添加点击事件
        $("ul").on("click", "li", function () {

            alert($(this).text());

        });

  //新创建的li也可以 监听事件
        $("button").on("click", function () {
            var ulobj = document.getElementsByTagName("ul")[0];
            var liobj = document.createElement("li");
            liobj.innerHTML = "这是9个li";
            ulobj.appendChild(liobj);

            return false;
        })

    });


</script>

5.4事件的自动触发 trigger

script>

//自动触发事件，模拟被点击事件

$("div").click(function(){
  console.log("点击div了");
  
});

//自动触发相关方法 tigger/ tiggerHander
//触发的事件是那个标签
//要触发的事什么事件
$("div").trigger("click");

//如果页面中有多个div，tigger事件选中的所有的div都会被触发 click事件
// tiggerHander只会触发第一个div的click事件


</script>

5.5事件的解绑

<script>

$("div").click(fn);
function fn(){
  console.log("222222");
  
}

$("div").mouseenter(function(){
  console.log("鼠标进入。。。。");
  
});


//事件注销
//注销div的所有点击事件
// $("div").off("click");
// 如有参数有回调函数，那么这个fn是表示 你要处理那个click点击事件
// 这个fn的函数 必须是 click中 函数是同一个函数
$("div").off("click",fn);
</script>

6.操作元素节点

6.1 元素的创建的2种方式

• jQ.html()
• 原生创建 document.createElement("span")

$(".box").html("<span>spanA</span>");

6.2获取节点

• parent()父级节点
• children()子节点
• next()下一个兄弟元素
• siblings()所有的兄弟元素
• prev()上一个兄弟元素
• find() 比如：$("ul").find(li) 查找li元素 (相当于后代选择器 $("ul li"))
• eq() $("li").eq(2) 找到li的第二元素 (相当于$("li:eq(2)"))

<script type="text/javascript">

    $(function () {

        $("li").mouseenter(function () {

            $(this).css("backgroundColor","red");

        }).mouseleave(function () {

            //找到父元素里面的子元素 去除样式

            $(this).parent().find("li").css("backgroundColor","");

        }).click(function () {

            $(this).css("backgroundColor","red");

            $(this).prevAll().css("backgroundColor","yellow");
            $(this).nextAll().css("backgroundColor","green");

        });

    });
</script>

image.gif

6.3 添加删除节点

• append() - 在被选元素的结尾插入内容
• appendTo("父元素") 把子元素添加到父元素容器里
• prepend()- 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容
• remove()- 删除被选元素（及其子元素）
• empty()- 从被选元素中删除子元素
• clone() -克隆节点

7 jQ判断表单元素中的单选框或者是复选框是否选中

• $("input").is(":checked") 返回值是bool值

$("input").is(":checked")