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. java之this关键字和super关键字的区别

    编号 区别点 this super 1 访问属性 访问本类中的属性,如果本类没有此 属性则从父类中继续查找 访问父类中的属性 2 调用方法 访问本类中的方法 直接访问父类中的方法 3 调用构造器 调用 ...

  2. Mac-无法进入mysql，你这样做就对了

    mysql -uroot -p 输入密码之后报错:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passwo ...

  3. Java连载54-两种单例模式、接口详解

    一.单例模式分为两种: (1)饿汉式单例:在类加载阶段就创建了一个对象. (2)懒汉式单例:用对对象的时候才会创建对象.(连载53中例子就是懒汉式) 饿汉式举例: package com.bjpowe ...

  4. 朝花夕拾《精通CSS》三、对一些标签元素的使用

    一.背景 翻出我4年前看的<精通CSS>一书,可惜当初没有整理读书笔记的习惯,最近又很少写前端,遂很多东西.知识点遗忘了,恰且现在 css 也有些变化和进步,遂一起打包整理,输出成几篇 b ...

  5. PHP程序执行的过程原理

    为了以后能开发PHP扩展,就一定要了解PHP的执行顺序.这篇文章就是为C开发PHP扩展做铺垫. Web环境我们假设为Apache.在编译PHP的时候,为了能够让Apache支持PHP,我们会生成一个m ...

  6. HDU 1081 To the Max 最大子矩阵（动态规划求最大连续子序列和）

    Description Given a two-dimensional array of positive and negative integers, a sub-rectangle is any ...

  7. JavaWeb中验证码校验的功能实现

    后台生成验证码工具方法 /* * 设置图片的背景色 */ public static void setBackGround(Graphics g, int WIDTH, int HEIGHT) { / ...

  8. Java操作数据库——使用连接池连接数据库

    Java操作数据库——使用连接池连接数据库 摘要:本文主要学习了如何使用JDBC连接池连接数据库. 传统方式和连接池方式 传统方式的步骤 使用传统方式在Java中使用JDBC连接数据库,完成一次数据库 ...

  9. JavaScript 运动（加速度运动，弹性运动）

    加速度运动(加速度不变的加速运动) function addSpeed(dom){ var a = 5; timer = setInterval(function(){ speed = speed + ...

  10. CSS学习笔记_1

    1.调用 内部样式表: css可以直接在html代码里面使用</style></style>节点.允许html代码中有两个style节点,但是起作用的是靠后的节点 如图的代码, ...