jQuery 第一節課
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>第一節課
<script src="../jquery-1.12.4.js">
window.onload =function () {
alert("first hello");
}
window.onload =function () {
alert("second hello");
}
window.onload =function () {
alert("trind hello");
}
$(function () {
//編寫jQuery相關程式碼
alert("hello xyw");
$("#login").click(function () {
var $name=$("#name").val();
var $pwd=$("#pwd").val();
if($name.length<1&&$pwd.length<1){
alert("不能為空");
}
console.log($name);
console.log($pwd);
alert($name);
alert($pwd);
})
// //課堂筆記
// jQuery與js區別：jQuery是js的一個拓展，封裝，讓js更好用
//
// write less,do more
//
// 執行順序：jq>js
//
// jq 1.6版本是其功能改變跨度的區分點
//
// 文字與圖片會耗流量；
//
// js中的載入函式只用一個，否則後面的會覆蓋前面的
// jq與其相反
// jQuery的優勢：（12點）
// 開源 輕量級 強大的選擇器 DOM操作 鏈式操作（即簡單程式碼可以一行連寫）
// 瀏覽器相容完好 完善的Ajax 豐富的外掛 完善的文件
//行為層與結構層分離
//不汙染頂級變數 可靠的事件處理機制
});
function getValues() {
//jQuery寫法
var $name=$("#name").val();
var $pwd=$("#pwd").val();
if($name.length<1&&$pwd<1){
alert("不能為空");
}
console.log($name);
console.log($pwd);
alert($name);
alert($pwd);
//原生js（即DOM物件）
var name=document.getElementById("name").value();
alert(name);
//jQuery轉換為DOM物件
var $name=$("#name");
var name=$name[0];
alert(name.val());
// 第二種：.get[]
var $name=$("#name");
var name=$name.get[0];
alert(name.val());
//DOM物件轉換為jQuery
var name=document.getElementById("name");
var $name=$(name);
alert($name);
}
姓名：
<input type="text" id="name">
密碼：
<input type="text" id="pwd">
<input type="button" id="login" value="登入" >//onclick="getValues()"
</html>