JQuery迷你版实现以及使用

tiny_jquery.js

var $ = function (selector) {

    var ele = document.querySelector(selector);

	//返回当前元素的内容

    ele.val = function () {

        return ele.value;

    }

	//传入css样式，更改元素的样式

    ele.css = function (css) {

        if (typeof css === 'object') {

            var str = '';

            for(var k in css){ // {color: 'red', border: '1px solid blue'}

                str =str.concat(k, ':', css[k], ';')

            }

            ele.style = str;

        }

    }

    ele.html = (html) => {

        var str = ele.innerHTML;

        ele.innerHTML = str + html;

    }

    return ele;//返回当前元素

}

html文件需要引用上面的js文件

<script src="tiny_jquery.js"></script>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>迷你jquery</title>

	<script src="tiny_jquery.js"></script>

	<script>

	function test() {

		//调用jQuery的方法

		var username = $('#username').val();

		console.log(username);

		$('#username').css({color: 'red', border: '1px solid blue',background: 'pink'});

		$('.mydiv').html('<p>新加入的内容</p>');

	}

	</script>

</head>

<body>

    用户名：<input type="text" id="username" value="stars-one" >

    <br><br>

    <div class="mydiv">原来的内容，</div>

    <button type="button" onclick="test()">点击添加新内容</button>

</body>

</html>

Web前端—— JQuery迷你版实现以及使用的更多相关文章

  1. Web前端JQuery面试题（三）

    Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...

  2. Web前端JQuery面试题（二）

    Web前端JQuery面试题(二) 1.请写出jquery的语法? <script type="text/javascript"> $(document).ready( ...

  3. Web前端JQuery面试题（一）

    Web前端JQuery面试题(一) 一:选择器 基本选择器 什么是#id,element,.class,*,selector1, selector2, selectorN? 答: 根据给定的id匹配一 ...

  4. Python之Web前端jQuery扩展

    Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...

  5. web前端-----jQuery

    web前端之jQuery篇 一 jQuery是什么? ［1］   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. ［2］   j ...

  6. Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...

  7. web前端----jQuery扩展（很重要！！）

    1.jQuery扩展语法 把扩展的内容就可以写到xxxx.js文件了,在主文件中直接导入就行了. 用法1.$.xxx() $.extend({ "GDP": function () ...

  8. web前端----jQuery事件

    事件 常用事件 click(function(){...}) hover(function(){...}) blur(function(){...}) focus(function(){...}) c ...

  9. web前端----jQuery基础语法

    一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似python里面的模块)3 ...

随机推荐

  1. office2019专业版激活秘钥 激活码

    office2019专业版激活码 激活秘钥 2019年5月更新 [Key]:F4QWT-NMMKH-XPTV9-W9HFB-B4JCQ [剩余次数:900000+] office2019激活 产品秘钥 ...

  2. IDEA生成可执行的jar文件

    场景 用IDEA开发一个Java控制台程序,项目完成后,打包给客户使用. 做法 首先用IDEA打开要生成jar的项目,打开后选择File->Project Structure... 选择Arti ...

  3. Node.js module export async function

    一.Demo 1.首先定义 module 文件:bbb.js const fs = require("fs"); function readFileSync() { let res ...

  4. jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解

    本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html)               ;在每个匹配元素的外层添加一层DOM元素   ...

  5. 常用类-excel转csv

    public class ExcelFileHelper { public static bool SaveAsCsv(string excelFilePath, string destination ...

  6. JAVAEE学期总结

         声明:除第一张思维导图为博主所制作,其他思维导图皆来自网络,若侵权,望告知,必删除.                                                      ...

  7. Flask 教程 第九章：分页

    本文翻译自The Flask Mega-Tutorial Part IX: Pagination 这是Flask Mega-Tutorial系列的第九部分,我将告诉你如何对数据列表进行分页. 在第八章 ...

  8. Java生鲜电商平台-商城优惠券设计要点复盘与总结

    Java生鲜电商平台-商城优惠券设计要点复盘与总结 Java生鲜电商平台本文将从优惠券设计用户端,需求端,业务流程全方案解析优惠券设计方案 为什么要设计优惠券 设计优惠券的核心:拉新和促活 新产品上线 ...

  9. echarts 饼图 + 全屏显示

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  10. 使用elementUI的日期选择框，两选择框关联时间限值

    elementui 本身也提供了在一个输入框内关联选择时间的组件,非常好使,但无奈项目需要用两个输入框去关联的选择: <el-date-picker class="datepicker ...