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. CentOS 7怎么删除mariadb

    参考链接:https://www.cnblogs.com/ytkah/p/10876824.html

  2. acwing 849 Dijkstra求最短路 I 模板

    地址 https://www.acwing.com/problem/content/description/851/ 给定一个n个点m条边的有向图,图中可能存在重边和自环,所有边权均为正值. 请你求出 ...

  3. ETCD:TLS

    原文地址:TLS etcd支持用于客户端到服务器以及对等方(服务器到服务器/集群)通信的自动TLS以及通过客户端证书的身份验证. 要启动并运行,首先要获得一个成员的CA证书和签名密钥对. 建议为集群中 ...

  4. Flutter竟然发布了1.5版本！！！！

    2018年2月,Flutter推出了第一个Beta版本,在2018年12月5日,Flutter1.0版本发布,当时用了用觉得这个东西非常好用,对于当时被RN搞的头皮发麻的我来说简直是看到了曙光.而在昨 ...

  5. Python进阶二

    文章目录 函数参数1.位置传递2.名称传递 def f(a,b): f(1,2) f(b=2,a=1) 3.可选参数传递(可选参数必须放在最后)def f(a,b=1) ✔def f(b=1,a) ❌ ...

  6. ASP.NET Core 设置默认起始页（如default.html）

    测试页面foo.html 在Startup.cs内使用middleware 代码如下: DefaultFilesOptions defaultFilesOptions = new DefaultFil ...

  7. ES6-扩展运算符和rest运算符

    es6-扩展运算符和rest运算符 扩展运算符:不确定他的参数个数时使用运算扩展符 // 声明一个方法 但不确定他的参数个数时使用对象运算扩展符 function ananiha(...arg){ c ...

  8. 【Gradle】Gradle任务

    Gradle任务 多种方式创建任务 1.直接以一个任务名字创建一个任务的方式: def Task task1 = task(task1) task1.doLast{ println 'task1' } ...

  9. Swift实战技巧

    Swift实战技巧 从OC转战到Swift,差别还是蛮大的,本文记录了我再从OC转到Swift开发过程中遇到的一些问题,然后把我遇到的这些问题记录形成文章,大体上是一些Swift语言下面的一些技巧,希 ...

  10. Thymeleaf对象的使用：数字对象

    Thymeleaf主要使用 org.thymeleaf.expression.Numbers 类处理数字,在模板中使用 #numbers 对象来处理数字. 开发环境:IntelliJ IDEA 201 ...