<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手动封装JS库jQuery</title>
</head>
<body>
<script type="text/javascript">
/*封装一个函数,通过这个函数可以获取到html页面中的节点,这个函数我给他起一个名字,叫做:jQuery*/
/*要封装的代码是:根据id来获取元素。document.getElementById("btn")*/
/*设计思路来自于CSS的语法。 #id 可以获取到这个元素 */
function jQuery(selector){ // selector可能是#id,也可以能是其他的选择器,例如类选择器:.class
// 根据id获取元素
if (typeof selector == "string") {
if (selector.charAt(0) == "#") {
// selector是一个id选择器
//var domObj = document.getElementById(selector.substring(1))
// 升级成全局变量
domObj = document.getElementById(selector.substring(1))
// 返回的dom对象
//return domObj
// 返回的jQuery对象
return new jQuery()
}
}
// 页面加载完毕之后,注册回调函数。
if (typeof selector == "function") {
window.onload = selector
}
// 定义一个html()函数,代替:domObj.innerHTML = ""
this.html = function(htmlStr){
domObj.innerHTML = htmlStr
}
// 定义一个click()函数,代替:domObj.onclick = function(){}
this.click = function(fun){
domObj.onclick = fun
}
this.focus = function (fun){
domObj.onfocus = fun
}
this.blur = function(fun) {
domObj.onblur = fun
}
this.change = function (fun){
domObj.onchange = fun
}
// ....
this.val = function(v){
if (v == undefined) {
return domObj.value
}else{
domObj.value = v
}
}
}
$ = 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>"
}
}*/
// $(function(){}) 作用是什么?
// 只要你写上以上的代码,就表示在页面加载完毕之后,执行里面的回调函数。
/*$(function () {
$("#btn").onclick = function(){
$("#div1").innerHTML = "<font color='red'>%%%%%%%%用户名不可用~~~~</font>"
}
})*/
$(function () {
$("#btn").click(function(){
$("#div1").html("<font color='red'>%%%%%%%%用户名不可用%%%%%%%%%</font>")
// 获取到文本框中的用户名
/*var username = document.getElementById("username").value
alert(username)*/
var username = $("#username").val()
alert(username)
// 修改文本框的value
//document.getElementById("username").value = "呵呵"
//先获得文本文档 在获得输入的值 这里是把输入的值在覆盖掉页面加载完毕之后调用
$("#username").val("呵呵了!!!")
})
})
</script>
用户名:<input type="text" id="username">
<button id="btn">显示信息</button>
<div id="div1"></div>
</body>
</html>
手动封装JS库jQuery
猜你喜欢
转载自blog.csdn.net/m0_56398287/article/details/128351556
今日推荐
周排行