欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery基础入门学习

程序员文章站 2022-04-29 14:06:53
...

jQuery基础入门学习

入口函数

  • JavaScript的入口函数

      window.onload=function(){
          console.log('这是Javascript的入口函数!');
      };
  • jQuery的两种入口函数

      $(document).ready(function(){
          console.log('只是jq的第一种入口函数!');
      });
    
    
      $(function(){
          console.log('只是jq的第二种入口函数!');
      });

javaScript上的入口函数是等网站加载完(图片也要加载完才会执行),而JQuery上的入口函数只是让网站的代码加载完就执行,(不需要等图片加载),所以Jq的入口函数会比Js的入口函数要快。

DOM对象和jQuery对象

DOM对象和jQuery对象不能换着用

  • dom对象->jQuery对象 加上$()
  • jQuery对象->dom对象 $li[0] 或者 $li.get(0)

jQuery中$的作用

$ === jQuery 成立

  1. 参数是一个function,表示入口函数 $(function(){})
  2. 把dom对象转换成jq对象 $(document).ready(function(){})
  3. 参数可以是一个字符串,用来找对象 $('#id') $('.class') $('li')

选择器

  • $("s1,s2") 并集选择器
  • $("s1 s2") 后代选择器
  • $("s1>s2") 子代选择器
  • $(".s1.s1") 交集选择器

更多选择器查找API

修改样式

  • 修改单个样式

      <script>
         $(function(){
              $("li").css("backgroundColor","pink")
              .css("color","red")
              .css("fontSize","14px")
         })
      </script>
  • 修改多个样式

      <script>
       $(function(){
          $("li").css({
          backgroundColor:"pink",
          color:"red",
          fontSize:"14px",
          })
      })
      </script>   
  • 获取样式

      <script>
       $(function(){
          $("li").css("fontSize");
          })
      </script>

修改class和属性

  • 增加一个类

    $("li").addClass("bigger");

  • 移除一个类

    $("li").eq(0).removeClass("bigger");

  • 判断是否有这个类

    $("li").hasClass("bigger");

  • 判读有没有这个类,有就添加,没有就移除

    $("li").toggleClass("bigger");

  • 操作属性

    $("img").attr("title","这是一张图片")

    $("img").attr([title:"这是一张图片",alt:"错错错"])

    $("img").removeAttr("title")

对于布尔类型(disabled,selected,checked)的属性,不要用attr方法,用prop方法,因为没有定义的属性用attr方法回返回一个undefine,

`$(".select").prop("select","true")`

三组基本动画

  • 显示动画 show(speed) speed是动画持续时间

    $("div").show();

    $("div").show(1000); //可以传字符串,"slow","fast","normal"

    $("div").show([speed],[callback]);

    $("div").show(1000,function(){alert("测试")});

  • 隐藏动画

    $("div").hide();

  • 滑入滑出

    $("div").slideDown(1001); //划入
    $("div").slideUp(1000); //划出
    $("div").slideToggle(); //切换

  • 淡入淡出

    $("div").fadeIn(1001); //划入
    $("div").fadeOut(1000); //划出
    $("div").fadeToggle(); //切换

  • 自定义动画

    第一个参数:对象,里面传的是需要动画的样式

    第二个参数:speed 动画的执行时间

    第三个参数:动画的执行效果

    第四个参数:回掉函数

    $("#box").animate({left:800},8000,"swing");

    $("#box").animate({left:800},8000,"linear");

    动画队列问题,每个动画都放在一个队列里面,一个一个执行。当鼠标过快,队列速度跟不上,鼠标突然停了,但是动画还是在进行。在鼠标移入移出的动画的前面加上stop()

  • 停止动画

    第一个参数:clearQueue 是否清楚动画队列 true or false
    第二个参数:jumpToEnd 是否跳转到当前动画的最终效果

    $("div").stop(true,true);

##创建节点

`$("div").append('<a href="" targey="_blank">'); //添加节点`    
`$("p").appendTo($('div'));`

`$("div").prepend($("p"));  //在之前`        
`$("p").prependTo($("div"));`

` $("div").after($("p"));   //在之后`.   
`$("div").before($("p"));`

##清空、删除、克隆元素

$("div").html(""); //尽量不要使用,因为不删除时间,导致内存泄漏

$("div").empty(); //把节点内容还有对应的事件都删除

$("div").remove(); //移除一个节点

$("div").clone(); //有参数,ture和false,ture把时间也复制上