<!DOCTYPE html>
<html lang="en">
? ? <meta charset="UTF-8">
? ? <title>第一節(jié)課
? ? <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相關(guān)代碼
? ? ? ? ? ? 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區(qū)別：jQuery是js的一個拓展，封裝，讓js更好用
//
// write less,do more
//
// 執(zhí)行順序：jq>js
//
// jq? 1.6版本是其功能改變跨度的區(qū)分點
//
// 文字與圖片會耗流量；
//
// js中的加載函數(shù)只用一個，否則后面的會覆蓋前面的
// jq與其相反
// jQuery的優(yōu)勢：（12點）
// 開源? ? 輕量級? ? 強大的選擇器? ? DOM操作? 鏈?zhǔn)讲僮鳎春唵未a可以一行連寫）
// 瀏覽器兼容完好? 完善的Ajax? 豐富的插件? 完善的文檔
//行為層與結(jié)構(gòu)層分離
//不污染頂級變量? 可靠的事件處理機制
? ? ? ? });
? ? ? ? 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轉(zhuǎn)換為DOM對象
? ? ? ? ? ? var $name=$("#name");
? ? ? ? ? ? var name=$name[0];
? ? ? ? ? ? alert(name.val());
? ? ? ? ? ? // 第二種：.get[]
? ? ? ? ? ? var $name=$("#name");
? ? ? ? ? ? var name=$name.get[0];
? ? ? ? ? ? alert(name.val());
? ? ? ? ? ? //DOM對象轉(zhuǎn)換為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>
