JQuery - fantasy0107/notes GitHub Wiki

javascript Library
simplifies JavaScript

Basic

Use

Download

<head>
    <script src="jquery-3.3.1.min.js"></script>
</head>

CDN

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

Syntax

Pattern

 $(selector).action()
  1. $ - define/access jQuery
  2. (selector) - "query (or find)" HTML elements
    1. $(".test") - class="test"
    2. $("#test") - id="test"
  3. action() - to be performed on the element

Inside

預防任何 jquery code 偷跑在文件還沒有載好

$(document).ready(function(){
   // jQuery methods go here...
});

Selector


//element Selector
$("p")

// #id Selector
$("#test")

//.class Selector
$(".test")

// 所有的 <h1>, <div> and <p> 
$("h1,div,p")

// 某個底下的子孫
$("div p") 所有的 <p> 是 <div> 的子孫 

//兄弟
$("div ~ p") //所有是 <div> 的兄弟 <p>

//[attribute=value]
$("[href='default.htm']") //所有有 href  值為 default.htm

更多

w3cschool

// class
$("...").addClass('...');  //新增
$("...").removeClass('...'); //刪除

//值
$('...').val(); //取
$('...').val('aaa'); //設定

//HTML
$('...').html(); //取
$('...').html('aaa'); //設定

//文字
$('...').text(); //取
$('...').text('aaa'); //設定
<b>Test</b>

//attr
$('...').attr('id'); //取
$('...').attr('id', 'value'); //設定

額外

data-* attribute(HTML5)

ex: data-key='83';

<div id="slider" data-type="slideShow">
  <img class='photo' data-item="1" data-size="xs" src="http://fakeimg.pl/350x200/?text=Hello" />
  <img class='photo' data-item="2" data-size="lg" src="http://fakeimg.pl/550x200/?text=Welcome" />
</div>

//js get
用 js 中 dataset 物件去取得

let slider = document.getElementById('slider');
console.log(slider.dataset.type);

//jquery get
console.log($('#slider').data('type')); //  "slideShow"

//css get
<article data-content="Hello Everyone">
</article>
article::before{
  content: attr(data-content);
}

Event

不同的 action 網站會怎麼回應叫做event

Mouse Events

$("p").click(function(){
    $(this).hide();
});

on

附加一個或多個 event 對於被選擇的 elements

單一

$("p").on("click", function(){
    $(this).hide();
});

多個

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    }, 
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    }, 
    click: function(){
        $(this).css("background-color", "yellow");
    } 
});

w3cschool

範例

1

$.ajax({
            type: 'POST',
            url: '/api/rules',
            data: { title : '2015-03-12'},
            dataType: 'json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            },
            success: function(data){
                console.log(data.status);
            },
            error: function(xhr, type){
                alert('Ajax error!')
            }
});

2

$.ajax({
    url: "/api/test.php",
    method: "POST",
	data:
    {
        parameterName:value,
        parameterName2:value2,
    }}).done(function(data) {
	    //handle return data
    });

底端

⚠️ **GitHub.com Fallback** ⚠️