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>