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教程(28)Image视图和采样器

    [译]Vulkan教程(28)Image视图和采样器 Image view and sampler - Image视图和采样器 In this chapter we're going to creat ...

  2. 如何以管理员方式打开VS

    第一种 打开VS快捷方式的属性对话框. 勾选"用管理员身份运行" 但是这种方式只有在点击快捷方式直接打开vs时是一管理员身份启动的,也就是如果直接打开Solution,则不是管理员 ...

  3. Web前端基础(14):jQuery基础(一)

    1. jQuery概述 1.1 为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...

  4. Add an Item to the Navigation Control 将项目添加到导航控件

    In this lesson, you will learn how to add an item to the navigation control. For this purpose, the N ...

  5. Vue中调用另一个组件中自定义事件

    之前在一个场景中,遇到组件需要调用父组件中的方法tableInit(),字组件调用父组件常用的有三种方法,具体参考:https://www.cnblogs.com/jin-zhe/p/9523782. ...

  6. 你看不懂的spring原理是因为不知道这几个概念

    背景 问题从一杯咖啡开始. 今天我去楼下咖啡机买了一杯「粉黛拿铁」.制作过程中显示: 我取了做好的粉黛拿铁,喝了一口,果然就是一杯热巧克力.咦咦咦,说好的拿铁呢?虽然我对「零点吧」的咖啡评价很高,觉得 ...

  7. WebGIS小理论（持续更新）

    什么是OWC服务体系 它是开放地理空间协会(Open Geospatial Consortium,OGC)提出的OGC Web服务通用规范. 主要内容: 地理数据服务(Data Service) 对空 ...

  8. JAVA微信企业付款到零钱(十分钟搞定)，附完整DEMO下载

    最近帮朋友做了一个简单的微分销系统,实现从企业付款到零钱分润的功能,简单记录一下微信企业付款到零钱的开发过程, 主要就是按规则封装好请求参数调用微信接口,涉及一些签名校验: A.接口流程 1. 获取用 ...

  9. IE11,用Forms身份验证保存不了Cookie

    在web.config中添加如下信息,即可. <authentication mode="Forms">      <forms cookieless=" ...

  10. react-native 键盘遮挡输入框

    Android上已经自动对键盘遮挡输入框做了处理,所以我们只需要关注ios. 1.首先引入 KeyboardAvoidingView import { KeyboardAvoidingView } f ...