手动封装JS库jQuery

<!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相关推荐

【jQuery】学习一下JS库——jQuery
[jQuery]学习一下JS库--jQuery jQuery 一.jQuery对象 01. 基本概念,区分DOM对象和jQuery对象 02. 两个对象之间的转换二.jQuery的使用方法关于隐式 ...
手动封装js的call和apply和bind和typeof和new方法
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注小歌谣一起学习前后端知识闲来无事做不如敲代码今天讲一下js里面的callapply和bind和typeof方法的手动封装由于最近比较忙但是有时 ...
贡献一个连jquery都觉的大的时候可以用的 js库
在一些很小的项目里,连用jquery都还觉的大的时候,你就可以用我的这个库了. 一个库或者框架,是应需求而生的,当你的项目实际上只需要简单的一个好用的选择器一个ajax 封装一个兼容的事件封装的时 ...
JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作，和其他js库冲突处理
今天我继续更新jQuery学习笔记,最近考试比较忙,也就更新的比较慢了,这里向大家说一声抱歉,嘻嘻. 让那不愉快的情绪过去吧,继续进行我们的jQuery之旅吧. 一:jQuery对象和DOM对象 1. ...
jQuery(JS库) | 一文带你掌握jQuery的使用
目录一:开篇基础 1. 为什么使用 jQuery 2. DOM 对象 3. JS对象和 jQuery 对象 4. 获取 jQuery 5. 牛刀小试 6. DOM 对象和 jQuery 对象二:选 ...
jQuery是一个非常优秀的js库
若有侵权随时可以联系作者删除 jQuery学习目录一.前言二.学习目标三.优点分析四.jQuery基础知识 (一)jQuery(load和read的区别) (二)jQuery选择器 (1).j ...
jQuery避免$符和其他JS库冲突的方法对比
jQuery避免$符和其他JS库冲突的方法对比 1.如果jquery库在第三方库之后引用.这个时候jquery库会占用$. 解决办法:剔除$符号的使用权. <script type=" ...
jQuery库与其他JS库冲突的解决办法
关键字: javascript 现在的js库很多,而且各有所长.像我,就比较喜欢jQuery,但同时也会使用一下其他的js库,如YUI,DWR什么的.但是它们却时不时地相互闹些小矛盾,真是让人头痛.究 ...
加js库和css库| jQuery hover()用法 |document.onreadystatechange |get和post
**************************************************************************************************** ...

手动封装JS库jQuery

手动封装JS库jQuery相关推荐

最新文章

热门文章