iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
0
Modern Web

小白的JavaScript讀書日記系列 第 17

Day17:jQuery介紹(二)

  • 分享至 

  • xImage
  •  

Day16的小練習

<body>
 <p>This is P</p>
 <p id="test">This is ID</p>
 <p class="test">This is Class</p>
 <button class="p">Click me to hide All</button>
 <button id="hId">Click me to hide ID</button>
 <button class="hClass">Click me to hide Class</button>
<script>

    $(document).ready(function(){
        $(".p").click(function(){
            $("p").hide()
        });
        $("#hId").click(function(){
            $("#test").hide()
        });
        $(".hClass").click(function(){
            $(".test").hide()
        });
    });
</script>
</body>

以上可以實現案對應的按鈕就消失囉,但我想實作中應該是用不到吧...
當作是複習選擇器的概念啦~開始今天的內容吧



基本事件

之前有講過事件了,這邊我們用jQuery來寫看看,
步驟基本上一樣,這邊再透過jQuery複習一下:

  • 選取id
    $('#id')
  • 加入事件
    $('#id').click()
  • 在事件中加入不具名函式
    $('#id').click(function(){});
  • 再加上需要執行的程式
    $('#id').click(function(){ $('.p').hide() });

以上,有沒有很熟悉呢!,Day16的例子中有用到呦!

今天我們透過程式碼來看更多的事件吧!

<body id="events">
<div class="wrapper">
	<div class="content">
			<div class="main">
		<h1>Events</h1>
		<p><a href="#">A Link</a></p>
        <input name="button" type="button" id="button" value="A Button">
		<input name="textfield" id="textfield" type="text" placeholder="Click InputBox!">
		</div>
	</div>
</div>
<script>
    $(document).ready(function(){
        //任意點選頁面兩下會出現Good day視窗
        $('html').dblclick(function(){
            alert('Good day!')
        });

        //當滑鼠滑動到有連結的地方,將You moused over a link文字增加到<div class="main">裡面
        $('a').mouseover(function(){
            let message = "<p>You moused over a link</p>";
            $('.main').append(message);
        });

        //點擊按鈕時,將按鈕 A Button 替換成 "Stop that!
        $('#button').click(function(){
            $(this).val("Stop that!");
        });

        //點選到inputBox,將其背景更改為黃色
        $('#textfield').focus(function(){
            $(this).css("background-color", "yellow")
        });
    })
</script>
</body>

上述例子示範了一些基本的方法,dbclick()mouseoverclick()focus()...等,執行前別忘了記的載入jQuery哦。
同時也附上jQuery官網對事件的介紹,有興趣的朋友可以參考參考~
https://learn.jquery.com/events/

進階事件

由於範例越來越長了~這邊我也開始練習使用CodePen
提醒一下,在CodePen裡面的JS如果要使用jQuery記得要載入噢!
載入方法如下:
1.點選小齒輪
https://ithelp.ithome.com.tw/upload/images/20200916/20129488YkFPmxX4sP.png
2.將cdn複製到紅色底線處,然後記得保存!
https://ithelp.ithome.com.tw/upload/images/20200916/20129488ar0KlaXjux.png

CodePen範例
有使用到is()slideDown()fadeOut()...等,來呈現問答的感覺
這邊用is()來判斷是否該元素存在。
我們可以在w3c中看到更多jQuery的介紹jQuery



今日總結

今天用到了jQuery的事件來寫了兩個範例,在最後附上的w3c中,有更多的資訊可以去練習看看呦!
我想jQuery到這邊應該差不多了,透過幾個簡單的例子,可以發現比寫純JS來得更省事,程式碼更簡短,
更多的例子網路上都有,特別是w3c!真心覺得有w3c對新手(我)真的是幫助太大了!

p.s.:今天的範例都是參照『JavaScript&jQuery the missing manual』這本書,以及w3c的範例做修改~


上一篇
Day16:jQuery介紹(一)
下一篇
Day18:JavaScript前端框架?
系列文
小白的JavaScript讀書日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言