1. AJAX代码封装 22-26
- AJAX请求相关的代码都是类似的，有很多重复的代码，这些重复的代码能不能不写，能不能封装一个工具类。要发送ajax请求的话，就直接调用这个工具类中的相关函数即可。
- 接下来，手动封装一个工具类，这个工具类我们可以把它看做是一个JS的库。我们把这个JS库起一个名字，叫做jQuery。（我这里封装的jQuery只是一个前端的库，和后端的java没有关系，只是为了方便web前端代码的编写，提高WEB前端的开发效率）
- 手动开发jQuery，源代码
E:\java学习\Ajax\course\course7\web
ajax10.html
<!--手动封装js库根据id获取元素 22-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手动封装js库</title>
</head>
<body>
<script type="text/javascript">
/*封装一个函数，通过这个函数可以获取到html页面中的节点，这个函数我给他起一个名字，叫做：jQuery*/
/*要封装的代码是：根据id来获取元素。document.getElementById("btn")*/
/*设计思路来自于CSS的语法。 #id 可以获取到这个元素 */
//下面这段代码是进行封装
function jQuery(selector){
//根据id获取元素 22
if(typeof selector=="string"){
// selector可能是#id，也可以能是其他的选择器，例如类选择器：.class
if(selector.charAt(0)=="#"){//解释这个selector就是一个变量,#号是封装的线索（也就是传过来的必须是以#号开头）
//selector是一个id选择器
//selector.substring(1)解释，利用substring截取字符串函数将传来的#id，截取留下id
//var domObj = document.getElementById(selector.substring(1));
//注意如果不写var domObj就是一个全局变量 25
domObj = document.getElementById(selector.substring(1));
//返回domObj
//return domObj
//返回jQuery对象
return new jQuery()
}
}
//页面加载完毕后注册回调函数 23
//typeof是判断参数的类型这里的typeof selector=="function"是判断类型是不是函数
if(typeof selector=="function"){
window.onload = selector
}
//定义一个html()函数，代替：domObj.innerHTML = "" 25
this.html = function (htmlStr){
//domObj全局变量
domObj.innerHTML = htmlStr
}
//定义一个click()函数，代替：domObj.onclick = function(){} 25
this.click = function (fun){
domObj.onclick = fun
}
//还可以封装很多事件 25
this.focus = function (fun){
domObj.onfocus = fun
}
this.blur = function(fun) {
domObj.onblur = fun
}
this.change = function (fun){
domObj.onchange = fun
}
// ....
//封装获取文本框中的用户名的value函数 ，代替domObj.value 26
this.val = function (v){
if(v==undefined){//如果没传参，就返回文本框的输入的
return domObj.value
}else{//传参了，姐把参数赋值
domObj.value = v
}
}
}
//但是我们嫌jQuery太长，就将jQuery赋值给$符号
$ = jQuery
//以上是封装工具类
//---------------------------------------------------------------------------------
/* window.onload = function (){
/!*document.getElementById("btn").onclick = function (){
document.getElementById("div1").innerHTML = "<font color = 'red'>用户名不可用</font>"
}*!/
/!*jQuery("#btn").onclick = function (){
jQuery("#div1").innerHTML = "<font color = 'red'>用户名不可用~~~</font>"
}*!/
$("#btn").onclick = function (){
$("#div1").innerHTML = "<font color = 'red'>用户名不可用~~</font>"
}
}*/
//把函数当作参数传走了 23
//$(function(){})的作用是什么
//只要你写上以上代码，就表示在页面加载完毕后，执行里面的回调函数
/*$(function (){
$("#btn").onclick = function (){
$("#div1").innerHTML = "<font color = 'red'>~~~用户名不可用~~</font>"
}
})*/
$(function (){
$("#btn").click(function (){
// 25
//解释：$("#div1")是根据id锁定目标，然后接收一个返回值（这个返回值是一个new JQuery()就是一个
// jQuery对象），jQuery对象里有个方法是html，是根据我么传过去的id生成的
// 对象domObj 去调用 domObj.innerHTML = htmlStr从而执行我们传进去的html代码的
$("#div1").html("<font color = 'red'>~~~用户名不可用</font>")
//获取文本框中的用户名 26
//var username = document.getElementById("username").value
//alert(username)
var username = $("#username").val()
alert(username)
//修改文本框的value 26
//document.getElementById("username").value = "呵呵"
$("#username").val("呵呵了~~~")
})
})
</script>
用户名：<input type="text" id="username">
<button id="btn">显示信息</button>
<div id="div1"></div>
</body>
</html>
2. 回顾js中的基于对象编程 24
E:\java学习\Ajax\course\course7\web
js-review.html
<!--回顾javascript中的类的定义，对象的创建，属性的访问，方法的访问 24-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>回顾javascript中的类的定义，对象的创建，属性的访问，方法的访问</title>
</head>
<body>
<script type="text/javascript">
//在JS当中定义一个类
function User(usercode,username){
//属性
this.usercode = usercode
this.username = username
//方法（实例方法，通过对象调用）
this.doSome = function (){
console.log(username+"doSome...")
}
//静态方法（直接用类名调用）
User.doOther = function (){
console.log("user doOther....")
}
}
/*User = function (usercode,username){
//属性
this.usercode = usercode
this.username = username
//方法（实例方法，通过对象调用）
this.doSome = function (){
console.log(username+"doSome...")
}
//静态方法（直接用类名调用）
User.doOther = function (){
console.log("user doOther....")
}
}*/
//创建对象，访问对象的属性，访问对象的方法，访问静态方法
// User(); 直接这样调用，你只是把它当做一个普通的函数去执行，不会创建对象，在堆中没有这个对象。
// new User(); 这样调用的话，其实就是调用该类的构造方法，创建对象，并且在堆中分配空间。
var user = new User("111","zhangsan");
//访问属性
alert(user.usercode+","+user.username)
//调用方法(实例方法)
user.doSome()
//调用静态方法
User.doOther()
//后期想给某个类型阔赞方法，还可以使用prototype属性
User.prototype.print = function (){
console.log("打印。。。。")
}
user.print()
</script>
</body>
</html>
3. 将jQuery单独写到js文件中使用是引入库 27
E:\java学习\Ajax\course\course7\web
jQueryTest.html
<!--测试我们自己写jQuery库 27-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试我们自己写jQuery库</title>
</head>
<body>
<!--首先要引进来jQuery库-->
<script type="text/javascript" src="js/jQuery-1.0.0.js"></script>
<script type="text/javascript">
$(function (){
$("#btn").click(function (){
//alert("hello")
//获取文本框中的内容
alert($("#username").val())
//修改文本框中的内容
$("#username").val("张三")
//设置div里的内容
$("#mydiv").html("我们自己封装的jQuery")
})
})
</script>
<button id="btn">hello</button><br>
用户代码：<input type="text" id="username"><br>
<div id="mydiv"></div>
</body>
</html>
E:\java学习\Ajax\course\course7\web\js
js库 jQuery-1.0.0.js
// 将jQuery单独写到js文件中使用是引入库 27
/*封装一个函数，通过这个函数可以获取到html页面中的节点，这个函数我给他起一个名字，叫做：jQuery*/
/*要封装的代码是：根据id来获取元素。document.getElementById("btn")*/
/*设计思路来自于CSS的语法。 #id 可以获取到这个元素 */
//下面这段代码是进行封装
function jQuery(selector){
//根据id获取元素 22
if(typeof selector=="string"){
// selector可能是#id，也可以能是其他的选择器，例如类选择器：.class
if(selector.charAt(0)=="#"){//解释这个selector就是一个变量,#号是封装的线索（也就是传过来的必须是以#号开头）
//selector是一个id选择器
//selector.substring(1)解释，利用substring截取字符串函数将传来的#id，截取留下id
//var domObj = document.getElementById(selector.substring(1));
//注意如果不写var domObj就是一个全局变量 25
domObj = document.getElementById(selector.substring(1));
//返回domObj
//return domObj
//返回jQuery对象
return new jQuery()
}
}
//页面加载完毕后注册回调函数 23
//typeof是判断参数的类型这里的typeof selector=="function"是判断类型是不是函数
if(typeof selector=="function"){
window.onload = selector
}
//定义一个html()函数，代替：domObj.innerHTML = "" 25
this.html = function (htmlStr){
//domObj全局变量
domObj.innerHTML = htmlStr
}
//定义一个click()函数，代替：domObj.onclick = function(){} 25
this.click = function (fun){
domObj.onclick = fun
}
//还可以封装很多事件 25
this.focus = function (fun){
domObj.onfocus = fun
}
this.blur = function(fun) {
domObj.onblur = fun
}
this.change = function (fun){
domObj.onchange = fun
}
// ....
//封装获取文本框中的用户名的value函数 ，代替domObj.value 26
this.val = function (v){
if(v==undefined){//如果没传参，就返回文本框的输入的
return domObj.value
}else{//传参了，姐把参数赋值
domObj.value = v
}
}
}
//但是我们嫌jQuery太长，就将jQuery赋值给$符号
$ = jQuery