回顧前端JQuery

阿新 • • 發佈：2018-11-06

二.jQuery是什麼

jQuery由美國人John Resig建立,至今已經吸引了來自實踐各地的眾多javascript高手加入其team
jQuery是繼prototype之後又一個優秀的JavaScript框架,其宗旨是----WRITE LESS,DO MORE!
它是輕量級的JS庫(壓縮後只有21K),這是其他JS庫所不及的,它相容CSS3,還相容各種瀏覽器
jQuery是一個快速的,簡潔的JavaScript庫,使使用者能更方便處理HTMLdocuments,events,實現動畫效果,並且方便地為網站提供Ajax互動
jQuery還有一個比較大的優勢是,他的文件說明很全,而且各種應用也說得很詳細,同時還有許多成熟的外掛可供選擇

三什麼是jQuery物件

jQuery 物件就是通過jQuery包裝DOM物件後產生的物件。jQuery 物件是 jQuery 獨有的. 如果一個物件是 jQuery 物件, 那麼它就可以使用 jQuery 裡的方法: $(“#test”).html();

$("#test").html() 
   
         意思是指：獲取ID為test的元素內的html程式碼。其中html()是jQuery裡的方法 

         這段程式碼等同於用DOM實現程式碼： document.getElementById(" test ").innerHTML; 

         雖然jQuery物件是包裝DOM物件後產生的，但是jQuery無法使用DOM物件的任何方法，同理DOM物件也不能使用jQuery裡的方法.亂使用會報錯

         約定：如果獲取的是 jQuery 物件, 那麼要在變數前面加上$. 

var $variable = jQuery 物件
var variable = DOM 物件

$variable[0]：jquery物件轉為dom物件      $("#msg").html(); $("#msg")[0].innerHTML

jQuery的基礎語法:$(selector).action()

參考:http://jquery.cuishifeng.cn/

四.尋找元素(選擇器加篩選器)

1.選擇器

(1).基本選擇器

$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

(2).層級選擇器

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

(3).基本篩選器

$("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

(4).屬性選擇器

$('[id="div1"]')   $('["wahaha"="sb"][id]')

(5).表單選擇器

$("[type='text']")----->$(":text")         注意只適用於input標籤  : $("input:checked")

2.表單屬性選擇器

:enabled
:disabled
:checked
:selected

<body>

<form>
    <input type="checkbox" value="123" checked>
    <input type="checkbox" value="456" checked>

  <select>
      <option value="1">Flowers</option>
      <option value="2" selected="selected">Gardens</option>
      <option value="3" selected="selected">Trees</option>
      <option value="3" selected="selected">Trees</option>
  </select>
</form>

<script src="jquery.min.js"></script>
<script>
    // console.log($("input:checked").length);     // 2

    // console.log($("option:selected").length);   // 只能預設選中一個,所以只能lenth:1

    $("input:checked").each(function(){

        console.log($(this).val())
    })

</script>

</body>

View Code

3.篩選器

(1).過濾篩選器

$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")

(2).查詢篩選器

查詢子標籤:    　　　$("div").children(".test")    $("div").find(".test")

向下查詢兄弟標籤:    $(".test").next()    $(".test").nextAll()　　$(".test").nextUntil()

向上查詢兄弟標籤:    $("div").prev    $("div").prevAll()　　$("div").prevUntil()

查詢所有兄弟標籤:    $("div").siblings()

查詢父標籤:         $(".test").parent()    $(".test").parents()　　$(".test").parentUntil()

五.操作元素(屬性,CSS,文件處理)

1.事件

(1).頁面載入

ready(fn)  // 當DOM載入就緒可以查詢及操縱時繫結一個要執行的函式。
$(document).ready(function(){}) -----------> $(function(){})

(2).事件繫結

//語法:  標籤物件.事件(函式)
eg: $("p").click(function(){})

(3).事件委派

$("").on(eve,[selector],[data],fn)  // 在選擇元素上繫結一個或多個事件的事件處理函式。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<hr>
<button id="add_li">Add_li</button>
<button id="off">off</button>

<script src="jquery.min.js"></script>
<script>
    $("ul li").click(function(){
        alert(123)
    });

    $("#add_li").click(function(){
        var $ele=$("<li>");
        $ele.text(Math.round(Math.random()*10));
        $("ul").append($ele)

    });


//    $("ul").on("click","li",function(){
//        alert(456)
//    })

     $("#off").click(function(){
         $("ul li").off()
     })
    
</script>

(4).事件切換

hover事件：一個模仿懸停事件（滑鼠移動到一個物件上面及移出這個物件）的方法。這是一個自定義的方法，它為頻繁使用的任務提供了一種“保持在其中”的狀態。

over:滑鼠移動到元素上要觸發的函式

out:滑鼠移出元素要觸發的函式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .test{

            width: 200px;
            height: 200px;
            background-color: wheat;

        }
    </style>
</head>
<body>


<div class="test"></div>
</body>
<script src="jquery.min.js"></script>
<script>
//    function enter(){
//        console.log("enter")
//    }
//    function out(){
//        console.log("out")
//    }
// $(".test").hover(enter,out)


$(".test").mouseenter(function(){
        console.log("enter")
});

$(".test").mouseleave(function(){
        console.log("leave")
    });

</script>
</html>

View Code

2.屬性操作

--------------------------CSS類
$("").addClass(class|fn)
$("").removeClass([class|fn])

--------------------------屬性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();

--------------------------HTML程式碼/文字/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])

---------------------------
$("#c1").css({"color":"red","fontSize":"35px"})

(1).attr方法的使用

<input id="chk1" type="checkbox" />是否可見
<input id="chk2" type="checkbox" checked="checked" />是否可見

<script>

//對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
//對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。
//像checkbox，radio和select這樣的元素，選中屬性對應“checked”和“selected”，這些也屬於固有屬性，因此
//需要使用prop方法去操作才能獲得正確的結果。


//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    false

//  ---------手動選中的時候attr()獲得到沒有意義的undefined-----------
//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    true

    console.log($("#chk1").prop("checked"));//false
    console.log($("#chk2").prop("checked"));//true
    console.log($("#chk1").attr("checked"));//undefined
    console.log($("#chk2").attr("checked"));//checked
</script>

View Code

3.each迴圈

我們知道:

$("p").css("color","red")

是將css操作加到所有的標籤上，內部維持一個迴圈；但如果對於選中標籤進行不同處理，這時就需要對所有標籤陣列進行迴圈遍歷啦

jQuery支援兩種迴圈方式:

(1).方式一:

格式:$.each(obj,fn)

li=[10,20,30,40];
dic={name:"yuan",sex:"male"};
$.each(li,function(i,x){
    console.log(i,x)
});

(2).方式二

格式:$(" ").each(fn)

$("tr").each(function(){
    console.log($(this).html())
})

其中,$(this)代指當前迴圈標籤

(3).each擴充套件

/*
        function f(){

        for(var i=0;i<4;i++){

            if (i==2){
                return
            }
            console.log(i)
        }

    }
    f();  // 這個例子大家應該不會有問題吧!!!
//-----------------------------------------------------------------------


    li=[11,22,33,44];
    $.each(li,function(i,v){

        if (v==33){
                return ;   //  ===試一試 return false會怎樣?
            }
            console.log(v)
    });

//------------------------------------------


    // 大家再考慮: function裡的return只是結束了當前的函式,並不會影響後面函式的執行

    //本來這樣沒問題,但因為我們的需求裡有很多這樣的情況:我們不管迴圈到第幾個函式時,一旦return了,
    //希望後面的函式也不再執行了!基於此,jquery在$.each裡又加了一步:
         for(var i in obj){

             ret=func(i,obj[i]) ;
             if(ret==false){
                 return ;
             }

         }
    // 這樣就很靈活了:
    // <1>如果你想return後下面迴圈函式繼續執行,那麼就直接寫return或return true
    // <2>如果你不想return後下面迴圈函式繼續執行,那麼就直接寫return false


// ---------------------------------------------------------------------

View Code

4.文件節點處理

//建立一個標籤物件
    $("<p>")


//內部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
    $("").appendTo(content)       ----->$("p").appendTo("div");
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替換
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//刪除

    $("").empty()
    $("").remove([expr])

//複製

    $("").clone([Even[,deepEven]])

5.動畫效果

(1).顯示隱藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>

$(document).ready(function() {
    $("#hide").click(function () {
        $("p").hide(1000);
    });
    $("#show").click(function () {
        $("p").show(1000);
    });

//用於切換被選元素的 hide() 與 show() 方法。
    $("#toggle").click(function () {
        $("p").toggle();
    });
})

    </script>
    <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>


    <p>hello</p>
    <button id="hide">隱藏</button>
    <button id="show">顯示</button>
    <button id="toggle">切換</button>

</body>
</html>

View Code

(2).滑動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
    $(document).ready(function(){
     $("#slideDown").click(function(){
         $("#content").slideDown(1000);
     });
      $("#slideUp").click(function(){
         $("#content").slideUp(1000);
     });
      $("#slideToggle").click(function(){
         $("#content").slideToggle(1000);
     })
  });
    </script>
    <style>

        #content{
            text-align: center;
            background-color: lightblue;
            border:solid 1px red;
            display: none;
            padding: 50px;
        }
    </style>
</head>
<body>

    <div id="slideDown">出現</div>
    <div id="slideUp">隱藏</div>
    <div id="slideToggle">toggle</div>

    <div id="content">helloworld</div>

</body>
</html>

View Code

(3),淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
    $(document).ready(function(){
   　　$("#in").click(function(){
       $("#id1").fadeIn(1000);


   });
    $("#out").click(function(){
       $("#id1").fadeOut(1000);

   });
    $("#toggle").click(function(){
       $("#id1").fadeToggle(1000);


   });
    $("#fadeto").click(function(){
       $("#id1").fadeTo(1000,0.4);

   });
});
    </script>

</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>

      <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>

</body>
</html>

View Code

(4).回撥函式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>

</head>
<body>
  <button>hide</button>
  <p>helloworld helloworld helloworld</p>

 <script>
   $("button").click(function(){
       $("p").hide(1000,function(){
           alert($(this).html())
       })

   })
    </script>
</body>
</html>

View Code

6.CSS操作

(1).位置操作

$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])

例項一:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test1{
            width: 200px;
            height: 200px;
            background-color: wheat;
        }
    </style>
</head>
<body>


<h1>this is offset</h1>
<div class="test1"></div>
<p></p>
<button>change</button>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
    var $offset=$(".test1").offset();
    var lefts=$offset.left;
    var tops=$offset.top;

    $("p").text("Top:"+tops+" Left:"+lefts);
    $("button").click(function(){

        $(".test1").offset({left:200,top:400})
    })
</script>
</html>

View Code

例項二:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: rebeccapurple;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: darkcyan;
        }
        .parent_box{
             position: relative;
        }
    </style>
</head>
<body>




<div class="box1"></div>
<div class="parent_box">
    <div class="box2"></div>
</div>
<p></p>


<script src="jquery-3.1.1.js"></script>
<script>
    var $position=$(".box2").position();
    var $left=$position.left;
    var $top=$position.top;

    $("p").text("TOP:"+$top+"LEFT"+$left)
</script>
</body>
</html>

View Code

例項三:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            margin: 0;
        }
        .returnTop{
            height: 60px;
            width: 100px;
            background-color: peru;
            position: fixed;
            right: 0;
            bottom: 0;
            color: white;
            line-height: 60px;
            text-align: center;
        }
        .div1{
            background-color: wheat;
            font-size: 5px;
            overflow: auto;
            width: 500px;
            height: 200px;
        }
        .div2{
            background-color: darkgrey;
            height: 2400px;
        }


        .hide{
            display: none;
        }
    </style>
</head>
<body>
     <div class="div1 div">
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
           <h1>hello</h1>
     </div>
     <div class="div2 div"></div>
     <div class="returnTop hide">返回頂部</div>

 <script src="jquery-3.1.1.js"></script>
    <script>
         $(window).scroll(function(){
             var current=$(window).scrollTop();
              console.log(current);
              if (current>100){

                  $(".returnTop").removeClass("hide")
              }
              else {
              $(".returnTop").addClass("hide")
          }
         });


            $(".returnTop").click(function(){
                $(window).scrollTop(0)
            });


    </script>
</body>
</html>

View Code

(2).尺寸操作

$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: wheat;
            padding: 50px;
            border: 50px solid rebeccapurple;
            margin: 50px;
        }

    </style>
</head>
<body>




<div class="box1">
    DIVDIDVIDIV
</div>


<p></p>

<script src="jquery-3.1.1.js"></script>
<script>
    var $height=$(".box1").height();
    var $innerHeight=$(".box1").innerHeight();
    var $outerHeight=$(".box1").outerHeight();
    var $margin=$(".box1").outerHeight(true);

    $("p").text($height+"---"+$innerHeight+"-----"+$outerHeight+"-------"+$margin)
</script>
</body>
</html>

例項

六擴充套件方法(外掛機制)

1.JQuery.extend(object)

擴充套件jQuery物件本身

用來在jQuery名稱空間上增加新函式

在jQuery名稱空間上增加兩個函式:

<script>
    jQuery.extend({
      min: function(a, b) { return a < b ? a : b; },
      max: function(a, b) { return a > b ? a : b; }
});


    jQuery.min(2,3); // => 2
    jQuery.max(4,5); // => 5
</script>

2.jQuery.fn.extend(object)

擴充套件jQuery元素集來提供新的方法(通常用來製作外掛)

增加兩個外掛方法:

<body>

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

<script src="jquery.min.js"></script>
<script>
    jQuery.fn.extend({
      check: function() {
         $(this).attr("checked",true);
      },
      uncheck: function() {
         $(this).attr("checked",false);
      }
    });


    $(":checkbox:gt(0)").check()
</script>

</body>

https://www.cnblogs.com/rixian/p/9878936.html jquery練習

回顧前端JQuery

二.jQuery是什麼 jQuery由美國人John Resig建立,至今已經吸引了來自實踐各地的眾多javascript高手加入其team jQuery是繼prototype之後又一個優秀的JavaScript框架,其宗旨是----WRITE LESS,DO MORE! 它是輕量級的JS庫(

11 回顧前端JQuery

auto heat 回調 .class tro hang 基本選擇器 outer graph 二.jQuery是什麽 jQuery由美國人John Resig創建,至今已經吸引了來自實踐各地的眾多javascript高手加入其team jQuery是繼prototy

前端JQuery基礎

前端 jquery 一、查找元素1、常用選擇器1.1 基本選擇器$("*") $("#id") $(".class") $("element") $(".class,p,div")1.2層級選擇器$(".outer div") // 所有的後代 $(".outer>div")

前端——jquery

鼠標 repl mode 網站復制代碼 event float mda 名稱一、jQuery是什麽？　　1.jQuery由美國人John Resig創建，至今已吸引了來自世界各地的眾多JavaScript高手加入其team 　　2.jQuery是繼prototyp

2017年 JavaScript 框架回顧 -- 前端框架

開發 width family reg 成長爆炸維護資源 normal 概述：對於 JavaScript 社區來說，npm 的主要功能之一就是幫助開發者發掘所需的 npm Registry 中的庫和框架。npm 強大的搜索功能能夠幫助找到一組相關的軟件包，同時其內置的

前端——JQuery表單驗證插件

params brush xxx pass java blog scrip ida red 1、引入JQuery插件（依賴JQuery） <script src="js/jquery-1.11.3.min.js" type="text/javascript">

Web前端JQuery基礎

數組下標新浪互轉 jquery事件結果 eap 獲得 isp spa JQuery知識匯總一、關於Jquery簡介

前端jQuery實現瀑布流

first pre rst for init 本地 utf int AI 瀑布流是我們經常會見到的東西，一直刷新一直有，其實它實現起來是很簡單的。具體代碼如下 1、css代碼 <style> *{ m

前端 ----jQuery的文件操作

選擇 taf 技術分享 key script operator dom before div 之前js中咱們學習了js的DOM操作,也就是所謂的增刪改查DOM操作。通過js的DOM的操作，大家也能發現，大量的繁瑣代碼實現我們想要的效果。那麽jQuery的文檔操作的A

前端 ----jQuery的介紹

會有不同 tel show ie6 nbsp 最新版部分 fun 1.為什麽要使用jQuery 在用js寫代碼時，會遇到一些問題： window.onload 事件有事件覆蓋的問題，因此只能寫一個事件。代碼容錯性差。瀏覽器兼容性問題。書寫很

前端 ----jQuery的屬性操作

css ogg 集合 siblings ava classname style 對象屬性 define jquery的屬性操作模塊分為四個部分：html屬性操作，dom屬性操作，類樣式操作和值操作 html屬性操作：是對html文檔中的屬性進行讀取，設置和移除操作

前端 ----jQuery的動畫效果

控制前端 spa tool style class gpo posit lis jQuery提供的一組網頁中常見的動畫效果，這些動畫是標準的、有規律的效果；同時還提供給我們了自定義動畫的功能。顯示動畫方式一： $("div").show(); 解釋：無

前端 ----jQuery操作表單

gif mes 中項 timespan body 表單屬性表 function box 表單控件是我們的重中之重，因為一旦牽扯到數據交互，離不開form表單的使用，比如用戶的註冊登錄功能等那麽通過上節知識點我們了解到，我們在使用jquery方法操作表單控件的方法

前端 -----jQuery的選擇器

類選擇器 bubuko size eth char inpu id選擇器 bar 元素我們以前在CSS中學習的選擇器有：今天來學習一下jQuery 選擇器。 jQuery選擇器是jQuery強大的體現，它提供了一組方法，讓我們更加方便的獲取到頁

前端 ---jQuery的補充

補充常用知識 src www class osc ear jqueryui 包含 jquery內容補充 jquery除了咱們上面講解的常用知識點之外，還有jquery 插件、jqueryUI知識點 jqueryUI 官網： https://jqueryui.com

layui tree treegrid javascript js treetable 前端 jquery form

最近接了個活，被狠狠的坑了一把，也沒有什麼收穫。接近尾聲，把唯一的一點成果發出來。新專案，沒有完整的前端框架，選擇了layui做為後臺管理系統的前端js框架。layui挺好的（尤其是layui.use宣告式的元件載入，要比提前大量的js檔案引入優雅的多），但是畢竟是新的框架，可用的東西太少了，

前端-jQuery的ajax方法

0、什麼是ajax AJAX = 非同步的javascript和XML（Asynchronous Javascript and XML）簡言之，在不過載整個網頁的情況下，AJAX通過後臺載入資料，並在網頁上進行顯示。通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和

前端 - jquery方式 / iframe +form 方式上傳檔案

環境與上一章一樣 jquery 方式上傳檔案: HTML程式碼 {#html程式碼開始#} <input type="file" id="img" > <button onclick="a1()">提交</button> {#

前端jquery學習--03

1、tab切換 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta na

python前端jQuery高階

知識點預習1、jQuery事件冒泡2、事件委託 3、元素節點操作 4、正則表示式及表單驗證例項 01- submit事件 //監聽提交的事件 $("form").submit(function (abc) { //阻止系統的預設行為 // abc.preventDefault();

回顧前端JQuery

二.jQuery是什麼

三什麼是jQuery物件

四.尋找元素(選擇器加篩選器)

1.選擇器

(1).基本選擇器

(2).層級選擇器

(3).基本篩選器

(4).屬性選擇器

(5).表單選擇器

2.表單屬性選擇器

3.篩選器

(1).過濾篩選器

(2).查詢篩選器

五.操作元素(屬性,CSS,文件處理)

1.事件

(1).頁面載入

(2).事件繫結

(3).事件委派

(4).事件切換

2.屬性操作

(1).attr方法的使用

3.each迴圈

(1).方式一:

(2).方式二

(3).each擴充套件

4.文件節點處理

5.動畫效果

(1).顯示隱藏

(2).滑動

(3),淡入淡出

(4).回撥函式

6.CSS操作

(1).位置操作

(2).尺寸操作

六擴充套件方法(外掛機制)

1.JQuery.extend(object)

2.jQuery.fn.extend(object)

相關推薦