<!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").valuealert(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相关推荐

  1. 【jQuery】学习一下JS库——jQuery

    [jQuery]学习一下JS库--jQuery jQuery 一.jQuery对象 01. 基本概念,区分DOM对象和jQuery对象 02. 两个对象之间的转换 二.jQuery的使用方法 关于隐式 ...

  2. 手动封装js的call和apply和bind和typeof和new方法

    我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注小歌谣一起学习前后端知识 闲来无事做 不如敲代码今天讲一下js里面的callapply和bind和typeof方法的手动封装由于最近比较忙但是有时 ...

  3. 贡献一个连jquery都觉的大的时候可以用的 js库

    在一些很小的项目里,连用jquery都还觉的大的时候,你就可以用我的这个库了. 一个库或者框架,是应需求而生的,当你的项目实际上只需要简单的一个好用的选择器 一个ajax 封装 一个兼容的事件封装的时 ...

  4. JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作,和其他js库冲突处理

    今天我继续更新jQuery学习笔记,最近考试比较忙,也就更新的比较慢了,这里向大家说一声抱歉,嘻嘻. 让那不愉快的情绪过去吧,继续进行我们的jQuery之旅吧. 一:jQuery对象和DOM对象 1. ...

  5. jQuery(JS库) | 一文带你掌握jQuery的使用

    目录 一:开篇基础 1. 为什么使用 jQuery 2. DOM 对象 3. JS对象和 jQuery 对象 4. 获取 jQuery 5. 牛刀小试 6. DOM 对象和 jQuery 对象 二:选 ...

  6. jQuery是一个非常优秀的js库

    若有侵权随时可以联系作者删除 jQuery学习目录 一.前言 二.学习目标 三.优点分析 四.jQuery基础知识 (一)jQuery(load和read的区别) (二)jQuery选择器 (1).j ...

  7. jQuery避免$符和其他JS库冲突的方法对比

    jQuery避免$符和其他JS库冲突的方法对比 1.如果jquery库在第三方库之后引用.这个时候jquery库会占用$. 解决办法:剔除$符号的使用权. <script type=" ...

  8. jQuery库与其他JS库冲突的解决办法

    关键字: javascript 现在的js库很多,而且各有所长.像我,就比较喜欢jQuery,但同时也会使用一下其他的js库,如YUI,DWR什么的.但是它们却时不时地相互闹些小矛盾,真是让人头痛.究 ...

  9. 加js库和css库| jQuery hover()用法 |document.onreadystatechange |get和post

    **************************************************************************************************** ...

最新文章

  1. 30 分钟成交额破 3723 亿,天猫双 11 剁手主力军从哪儿来?
  2. Kail Linux渗透测试实训手册第3章信息收集
  3. Mac NIFI 安装
  4. 统计学习方法|K近邻原理剖析及实现
  5. ARP欺骗原理与模拟
  6. 局域网常用的DOS命令查IP
  7. linux shell 字符串操作详解 (长度,读取,替换,截取,连接,对比,删除,位置 )
  8. php 面相对象设计,PHP面向对象设计的规范
  9. linux使用设备文件的目录,Linux系统下的/dev目录
  10. 2022年中国足球球迷行为洞察白皮书
  11. 数组(array)(小谈)
  12. 详细设计 存储分配_零基础学C语言(7):存储类型
  13. lbochs模拟器最新版_Bochs模拟器
  14. 去掉Xcelsius报表在EP展示空白边界
  15. Ubuntu上打开windows共享文件夹进行读写操作的命令
  16. Java岛屿的最大面积leetcode
  17. 单位根检验、协整检验和格兰杰因果检验三者之间的关系
  18. greasemonkey_Google Chrome浏览器中的Greasemonkey脚本入门指南
  19. 什么是 Java 输入输出流?流的用法大全
  20. border属性 php,使用CSS的border属性构建变形边框的方法总结

热门文章

  1. 【初识C语言】用C语言实现猜数字游戏
  2. dlt645 2007 java源码,DLT645 1997 协议解析
  3. 学报格式和论文格式一样吗_发表学报论文格式是什么
  4. js中,转义单双引号
  5. python毕业设计作品基于django框架校园新生报到系统毕设成品(4)开题报告
  6. 遇到Redis server went away报错解决
  7. 3dsmax2015 64位中文版 安装
  8. 活用这五种软文素材的收集方法,初学者也能变高手
  9. 客户关系管理软件crm是越早使用越好的软件
  10. 开元媒体观察:被忽视的网络媒体竞争的核武器