分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

js--模仿jQuery的选择器

发布时间:2023-09-06 01:09责任编辑:傅花花关键词:jsjQuery选择器

之前刚好想要简单的模仿jQuery的选择器,今天就刚好学到了,简单点,功能也没有jQuery的完美,实用方便,但是勉强还可以用。

<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????div{ ???????????width: 100px; ???????????height: 100px; ???????????background-color: pink; ???????????margin: 10px; ???????} ???</style></head><body><div class="dome"></div><div></div><div class="test"></div><div></div><div class="dome test"></div><div></div><div></div><div></div><div class="dome"></div><div></div><script> ???????$(".dome")[0].style.backgroundColor = "blue"; ???function $(str){ ???????var s = str.charAt(0); ???????var ss = str.substr(1); ???????switch(s){ ???????????case "#": ???????????????return document.getElementById(ss); ???????????????break; ???????????case ".": ???????????????return getClass(ss); ???????????????break; ???????????default : ???????????????return document.getElementsByTagName(ss); ???????} ???} ???function getClass(className){ ???????//如果浏览器支持着,则直接返回 ???????if(document.getElementsByClassName){ ???????????return document.getElementsByClassName(className); ???????} ???????//不支持的浏览器 ???????var ?arr = []; ???????var dom = document.getElementsByTagName("*"); ???????for(var i=0; i < dom.length; i++){// ???????????????if(dom[i].className == className){// ???????????????????arr.push(dom[i]);// ???????????????}i ???????????//改进后的class ???????????var ?txt = dom[i].split(" ");//["dome","test"] ???????????for(var j=0; j < txt.length; j++){ ???????????????if(txt[j] == className){ ???????????????????arr.push(dom[i]); ???????????????} ???????????} ???????} ???????return arr; ???}</script></body></html>

  

js--模仿jQuery的选择器

原文地址:http://www.cnblogs.com/jiang-z/p/7482681.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved