Web前端—— JQuery迷你版实现以及使用
2023-02-18 16:39:07 时间
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>
相关文章
- [windows] 保存浏览器网页长截图
- [PHP] PHP7.4.3安全版本的更改日志
- [项目] 系统迁移的几个注意点
- [PHP] PHP 7.4.4错误修复版本的更改日志
- [MySQL] order by field 自定义排序
- [PHP] PhpStorm折叠展开所有函数或者方法以及函数跳转
- [前端] 代码中执行绑定元素的指定事件trigger方法
- [PHP] 中英双语网站的设计思路
- [PHP] 生成数据库字典的PHP代码支持PDO扩展
- [PHP] 解决TP5 出现错误 "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"?
- [网络] 使用wireshark抓包数据
- [PHP] hyperf单元测试模拟http请求
- [MySQL] 有没有解决幻读问题
- [PHP] PDO 提供了三种不同的错误处理模式
- [composer] composer dump-autoload 的加载优化
- [MySQL] innoDB引擎的主键与聚簇索引
- [PHP] 解决hyperf出现404问题
- [PHP] 检测文件是否有病毒的实现逻辑
- [项目] 企业邮箱读信接口的缓存改造过程
- [PHP] 使用xdebug查看php的性能损耗