jquery基础

时间 2019-11-18

标签 jquery 基础栏目 JQuery 繁體版

原文原文链接

本文转载自https://blog.csdn.net/xiaogeldx/article/details/85467270javascript

JQ简单介绍

JQ是JS写的插件库，就是一个js文件
凡是用jq能实现的，js都能实现，js能实现的，jq不必定能实现
JQ理念
- write less，do more

在JQ中使用选择器选择元素和在css中使用CSS选择器是同样的,以下：css

<p id="p1">111</p>
  <p id="p2">hahaha</p>
  <script src="../js/jquery-3.3.1.js"></script>   #下面的也同样
  #<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  #在https://www.bootcdn.cn/jquery/里https://cdn.bootcss.com/jquery/3.3.1/jquery.js复制到本地或者直接引用
  <script type="text/javascript">
      $("p").click(function () {  //必须引用jquery文件才能用$，$表示jquery
      //$('#p1').click(function(){        //选择器方法同css
          alert("qwe");
      });
      //$('.p1').on('click',function() {  //绑定事件，效果同上，用与动态的网页效果更好
          //alert('qwe');
      //});
  </script>

JQ基本使用

JQ基本使用1

修改内容

html（）至关于JavaScript的innerHTML

text（）至关于JavaScript的innerTexthtml

<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
  </ul>
  <script src="../js/jquery-3.3.1.js"></script>
  <script type="text/javascript">
     // $("ul li").html(111);     //text()亦可
      $("ul li").eq(0).html(111);     //111       (0)是索引，不加索引表示选择所有
                                         2
                                         3
                                         4    
  </script>

转换

get()/[]：jq对象使用js方法java

var p1 = document.getElementById('p1');
  $(p1).html('hahaha');

$()：js对象使用jq方法jquery

$('.p2')[0].innerText = 'hengheng'; //两种方法效果同样，索引表示第几个
  $('#p1').get(0).innerText = 'hengheng';

点击

click()json

$("#btn").click(function () {
     alert("qew");
 })

鼠标

hover()app

//当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
  　$("#p1").hover(function () {
        console.log("移入")
    },function () {
        console.log("移出")
    })

追加

append()less

$("#p1").append("我是被追加进来的") //加到后面

添加

prepend()ide

$("#p1").prepend("我是被添加进来的“)    //添加到前面

先后

before()

after()函数

$("#p1").before("我是他哥哥");   //加到上一行
  $("#p1").after("我是他兄弟");    //加到下一行

移除

empty() 清空

remove() 移除

$("div").empty()    // 清空里面的内容，保留本身属性

$("div").remove()    // 移除本身和下面子集的全部

JQ的基本使用２

操做属性

attr()

removeAttr()

alert($("#p1").attr("id"));     //返回属性值
  $("#p1").attr("a","b")  //添加/修改属性，无则增，有则改
      $("#p1").attr({
      "a":"b",    //注意符号
      "class":"d"
      });
  $(".d").removeAttr("a");    //移除

添加/移除class

addClass()

removeClass()

$("#div1").addClass("div3");     //写多个也能够加多个
  $("#div1").addClass("div4");     //写多个也能够加多个
  $("#div1").removeClass("div3")  //移除
  $(".div3").removeClass("div3")  //同上

判断

hasClass() 看是否存在该css

<div id="div1" class="div12">
  alert($(".div12").hasClass("div12"));   //hasClass中添属性值
   alert($("#div1").hasClass("div12"));   //返回结果都是true

索引

each() each() 方法为每一个匹配元素规定要运行的函数

index() 索引至关于jq的indexOf()

$("ul li").each(function (i) {
      $(this).html("我是第"+i+"个")   //this表示当前标签
  })
  alert($("#li2").index());   //2，查索引

滚动条事件

scroll()
scrollTop()

scrollLeft()

$(window).scroll(function () {
          console.log($(document).scroll());
          console.log($(document).scrollLeft());  //左右
          console.log($(document).scrollTop());       //上下
        })

JQ基本使用３

父子元素

parent
children()

兄弟
siblings

后代
find

祖宗(父级之上)

parents

<div id="div1">
  <input type="button">
  <div><ul class="abc">
      <li id="li1"></li>
      <li id="li2"></li>
      <li></li>
  </ul>
  </div>
  <ul></ul>
  <p><span>222</span></p>
  <p></p>
  </div>
  <script src="js/jquery-3.3.1.js"></script>
  <script type="text/javascript">
      // 父级
      console.log($(".abc").parent());
      // 子级
      console.log($("#div1").children());
      // 兄弟
      console.log($("#li1").siblings());
      // 后代 find须要传参
      console.log($("#div1").find("li"))
      // 祖宗 parents逐层向外查，能够加参
      console.log($("li").parents())
      console.log($("li").parents("div"))

结果：

定位父级
position()

窗口
offset()

宽高
width()/height()

循环添加
on

移除
off

JQ操做样式

$选中元素.css({css样式，以json形式})

$('.div1').css({
      'width':'400px',
      'background':'yellow',
      'color':'red',
      'font-size':29
  })

JQ动画

经常使用的特殊符号

hide():隐藏
show():显示
slideUp:向上
slideDown:向下
slideToggle:取反
fadeIn:淡入
fadeOut:淡出
fadeTo:自定义
fadeToggle;取反
animate;动画
stop:中止

delay:延迟

$('#btn1').click(function(){
          $('div').hide();    //hide()中可加参数，参数表示执行多久
      });
      $('#btn2').click(function () {
          $('div').show(2000);    //show()中可不加参数
      });
      $('#btn1').click(function () {
          $('div').slideUp(); //slideUp()中可加参数
          $('div').slideToggle(); //可加参数,加此条代码拉上后自动下来
      });
      $('#btn2').click(function () {
          $('div').slideDown(1000);   //slideDown()中可不加参数
          $('div').slideToggle(); //可加参数，加此条代码拉下后自动上去
      });
      $('#btn3').click(function () {
          $('div').slideToggle(); //可加参数，点一下拉下，再点拉上
      });
      $('#btn1').click(function () {
          $('div').fadeOut(2000);     //淡出
          $('div').fadeToggle();  //取反,淡出后自动淡入
      });
      $('#btn2').click(function () {
          $('div').fadeIn(1000);  //淡入
          $('div').fadeOut(); //取反,淡入后自动淡出
      });
      $('#btn3').click(function () {
          $('div').fadeToggle(1000);  //可加参数，点一下淡出，再点淡入
      });
      $('#btn1').click(function () {
          $('div').animate({
              width:'600px',
              height:'600px',
          },2000)
      });
      $('#btn2').click(function () {
          $('div').stop();    //暂停动画
      });
      $('#btn3').click(function () {
          $('div').delay(2000).fadeOut(2000); //delay延迟,这里延迟两秒再淡出
      });

练习

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>轮播图</title>
      <link rel="stylesheet" href="css/reset.css">
      <style type="text/css">
          /*li {*/
              /*list-style: none;*/
          /*}*/
          #center {
              width: 800px;
              height: 180px;
              position: relative;
              border: 1px solid red;
              line-height: 180px;
              background: url('image/zql1.jpeg');
              background-size: 100% 100%;
          }
          #center .ul1 li span {
              font-size: 80px;
              color: white;
              position: absolute;
          }
          #center .ul2 {
              position: absolute;
              /*text-align: center;*/
              left: 325px;
              bottom: 15px;
          }
          #center .ul2 li {
              width: 20px;
              height: 20px;
              border: 1px solid aqua;
              background: greenyellow;
              border-radius: 50%;
              float: left;
              margin: 8px;
              //不透明度
              opacity: 0.7;
              /*position: absolute;*/
            }
          #center .ul2 .li1:hover {
              border:1px solid yellow;
              background: yellow;
          }
      </style>
  </head>
  <body>
  <div id="center">
      <ul class="ul1">
          <li><span onclick="last()">&lt;</span></li>
          <li><span style="right: 0px;" onclick="add()">&gt;</span></li>
      </ul>
      <ul class="ul2">
          <li class="li1" style="background: yellow;"></li>
          <li class="li1" style="background: greenyellow;"></li>
          <li class="li1" style="background: greenyellow;"></li>
          <li class="li1" style="background: greenyellow;"></li>
      </ul>
  </div>
  <script src="js/jquery-3.3.1.js"></script>
  <script type="text/javascript">
      var bfr_aft = document.getElementsByClassName('li1');
      var scroll = document.getElementById('center');
      var i = 1;
      function add() {
          i += 1;
          if (i>4) {
              i = 1;
          }
          scr_img(i);
      }
      // var down = 4;
      function last() {
          i -= 1;
          if (i<1) {
              i = 4;
          }
          scr_img(i);
      }
      bfr_aft[0].onclick = function () {
          scr_img(1);
      };
      bfr_aft[1].onclick = function () {
          scr_img(2);
      };
      bfr_aft[2].onclick = function () {
          scr_img(3);
      };
      bfr_aft[3].onclick = function () {
          scr_img(4);
      };
      function scr_img(num) {
          switch (num) {
              case 1:
                  scroll.style.background = "url('image/zql1.jpeg')";
                  scroll.style.backgroundSize = '100% 100%';
                  $('.li1').css({
                      'background-color': 'greenyellow'
                  });
                  $('.li1').eq(0).css({
                      'background-color': 'yellow'
                  });
                  break;
              case 2:
                  scroll.style.background = "url('image/zql2.jpg')";
                  scroll.style.backgroundSize = '100% 100%';
                  $('.li1').css({
                      'background-color': 'greenyellow'
                  });
                  $('.li1').eq(1).css({
                      'background-color': 'yellow'
                  });
                  break;
              case 3:
                  scroll.style.background = "url('image/xingye1.jpg')";
                  scroll.style.backgroundSize = 'contain';
                  $('.li1').css({
                      'background-color': 'greenyellow'
                  });
                  $('.li1').eq(2).css({
                      'background-color': 'yellow'
                  });
                  break;
              case 4:
                  scroll.style.background = "url('image/xingye2.jpg')";
                  scroll.style.backgroundSize = 'contain';
                  $('.li1').css({
                      'background-color': 'greenyellow'
                  });
                  $('.li1').eq(3).css({
                      'background-color': 'yellow'
                  });
                  break;
          }
      }
      var timer = setInterval(
          'add()',4000
          );
  </script>
  </body>
  </html>