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. [译]Vulkan教程(12)图形管道基础之入门

    [译]Vulkan教程(12)图形管道基础之入门 Introduction 入门 Over the course of the next few chapters we'll be setting u ...

  2. JavaScript中使用正则表达式

    JavaScript中正则表达式的使用 创建正则对象 RegExp 对象是带有预定义属性和方法的正则表达式对象. 方式一: var reg = new RegExp("\d", ' ...

  3. Selenium(十二)：操作Cookie、调用JavaScript、HTML5的视频播放

    1. 操作Cookie 有时候我们想要验证浏览器中cookie是否正确,因为基于真实cookie的测试是无法通过白盒和集成测试的.WebDriver提供了操作Cookie的相关方法,可以读取.添加和删 ...

  4. jwt认证生成后的token后端解析

    一.首先前端发送token token所在的位置headers {'authorization':token的值',Content-Type':application/json} 在ajax写 //只 ...

  5. MySQLl存储过程学习总结

    1.简介 : 逻辑处理一般不是一条语句组成,需要多条之间相互配合使用              这时,存储过程就是为了以后使用而保存的的一条或多条Mysql语句的集合 2.为何 : 1)简单:将处理单 ...

  6. C#中实现文件重命名的方式

    场景 在C#中如果是删除文件的话可以直接使用 if (System.IO.File.Exists(fileName)) { System.IO.File.Delete(fileName); } 但是如 ...

  7. 松软科技web课堂:SQLServer之ROUND() 函数

    ROUND() 函数 ROUND 函数用于把数值字段舍入为指定的小数位数. SQL ROUND() 语法 SELECT ROUND(column_name,decimals) FROM table_n ...

  8. Linux查看文件系统的挂载时间浅析

    我们在Linux系统中如何找到文件系统的挂载时间呢,下面实验测试环境为RHEL 6.6,其它Linux版本没有验证测试.这个简单测试了一下常用的ext3/4.xfs.nfs文件系统. ext文件系统 ...

  9. android 获得一些设备信息的静态函数

    1.Brand,IMEI,DeviceOS,DeviceFactoryTime public static String getDeviceBrand(Context context) { Strin ...

  10. Linux-3.14.12内存管理笔记【伙伴管理算法（3）】

    前面分析了伙伴管理算法的初始化,在切入分析代码实现之前,例行先分析一下其实现原理. 伙伴管理算法(也称之为Buddy算法),该算法将所有空闲的页面分组划分为MAX_ORDER个页面块链表进行管理,其中 ...