JS中JQ框架的使用

作者: 追逐_chase | 来源:发表于2019-09-17 10:25 被阅读0次

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")

JS中JQ框架的使用

1.基本使用

1.1加载时机

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

2.选择器

2.1基本选择器

2.2 层级选择器

2.3属性选择器

2.4过滤选择器

3.操作样式类

3.1设置样式 css的3种方法

3.2操作class类名

3.3 标签位置的操作

3.4 操作元素的内容和属性

4动画

4.1隐藏和显示

4.2滑动

4.3淡出淡入

4.4 动画的停止

4.5 自定义动画

5 事件

5.1事件的绑定 on

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

5.3事件委托

5.4事件的自动触发 `trigger`

5.5事件的解绑

6.操作元素节点

6.1 元素的创建的2种方式

6.2获取节点

6.3 添加删除节点

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

JS中JQ框架的使用

1.基本使用

1.1加载时机

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

2.选择器

2.1基本选择器

2.2 层级选择器

2.3属性选择器

2.4过滤选择器

3.操作样式类

3.1设置样式 css的3种方法

3.2操作class类名

3.3 标签位置的操作

3.4 操作元素的内容和属性

4动画

4.1隐藏和显示

4.2滑动

4.3淡出淡入

4.4 动画的停止

4.5 自定义动画

5 事件

5.1事件的绑定 on

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

5.3事件委托

5.4事件的自动触发 trigger

5.5事件的解绑

6.操作元素节点

6.1 元素的创建的2种方式

6.2获取节点

6.3 添加删除节点

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

5.4事件的自动触发 `trigger`