<!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>
网友评论