js 實現對jq選擇器 id class tag *選擇器的模仿封裝

阿新 • • 發佈：2018-12-03

簡單弄了一下，大神勿噴，僅供自己練習

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 500px;
                height: 200px;
                border: 1px solid #ee5600 
;
            }
        </style>
    </head>
    <body>
        <div id="box">
            設定背景顏色0
        </div>
        <span>
            設定背景顏色1
        </span>
        <p class="a">
            設定背景顏色2
        </p>
    </body>
    <script type 
="text/javascript"> 
    var  $ = function(selectdeom ,results){
        results = results || [] ;
        //匹配id class *  
        var requickExpr = /^(?:#([\w-]+)|\.([\w-]+)|([\w]+)|(\*))$/,
        m = requickExpr.exec(selectdeom);
        if(m){      
             if(m[1]){
                results =  getid(m[1 
],results ); 
             }else if(m[2]){
                results = getclass(m[2],results);
             }else{
               results = gettag(m[3] || "*",results);
            }
          } 
          return results;   
        }

    var getid = function(id,results){
        results = results || [] ;
        results.push(document.getElementById(id));      
        return results;
    }   
    var getclass = function(className,results){
        results = results || [] ;
        results.push.apply(results,document.getElementsByClassName(className));     
        return results;
    }   

    var gettag = function(tag,results){
        results = results || [] ;     results.push.apply(results,document.getElementsByTagName(tag));
        return results;
    }   
    var each = function(arr,fn){
            for(var i=0;i<arr.length;i++){  
                //將this指向在呼叫的函式上
                if(fn.call(arr[i],i,arr[i]) === false){
                    break;
                }
            }
        }    
       each($("#box"),function(){
         this.style.background = "red";
       });
       each($("span"),function(){
         this.style.background = "green";
       });  
       each($(".a"),function(){
         this.style.fontSize = 20+"px";
       });
//     each(get("*"),function(){
//       this.style.background = "#f5f5f5";
//     });  
    </script>
</html>

js 實現對jq選擇器 id class tag *選擇器的模仿封裝

簡單弄了一下，大神勿噴，僅供自己練習 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

基於svg.js實現對圖形的拖拽、選擇和編輯操作

鼠標移出 strong lse 方便 jquery cap .cn sta plot 本文主要記錄如何使用 svg.js 實現對圖形的拖拽，選擇，圖像渲染及各類形狀的繪制操作。 1、關於SVG SVG 是可縮放的矢量圖形，使用XML格式定義圖像，可以生成對應的DOM節點，便

真是奇怪，js可以，jq卻開啟了多個定時器，誰能解答一下

eve body stop 時鐘 time 就會 set () 方式 timer = setInterval(mar,30); //鼠標移上去清除時鐘 box.onmouseover = function(event){

js實現對象或者數組深拷貝

ber dex 改變 () 類型拷貝 ice function vue 今天遇到個問題，就是vue綁定的數組在push中所有的數組都會跟著改變。這個主要是因為 JavaScript中對象或者數組等引用類型，直接拷貝，改變一個另外一個也會改變；有個簡單的方法就是先轉換為字

js實現對cookie的增刪改查

簡單來說Cookie是以鍵值對的形式儲存的（Key=Value），各Cookie之間一般是以“；”隔開。簡單的操作：儲存cookie(key為test；value為testValue): document.cookie = "test=testValue";

JS實現根據物件之間的id以及pid構建目錄樹

1.遍歷得到頂層節點 var resultObj = [] function fn(jsonData) { //取得頂級的資料 var baseNode = jsonData.filter(function(element) { ret

Node.js實現對mysql資料庫的crud時報加密方式錯誤解決方案

本人在學習全棧開發過程中做一個Node的web專案在連線本地MySQL8.0版本的資料庫時，發現Navicat連線不上，它報了一個數據庫的加密方式導致連線不上的錯誤，錯誤如下： MySQL8.0版本的加密方式和MySQL5.0的不一樣，連線會報錯。解決方法如下：開啟mysql的命令列進入

原生js實現一個自定義下拉單選選擇框

　　瀏覽器自帶的原生下拉框不太美觀，而且各個瀏覽器表現也不一致，UI一般給的下拉框也是和原生的下拉框差別比較大的，這就需要自己寫一個基本功能的下拉選單/下拉選擇框了。最近，把專案中用到的下拉框元件重新封裝了一下，以建構函式的方式進行封裝，主要方法和事件定義在原型上，下面是主要的實現程式碼並添加了比較詳細的註釋

jQuery選擇器探究：TAG選擇器和CLASS選擇器

(jquery1.6.1版本)假設有一個html文件中存在多個<h1>標籤元素，那麼當我們敲入$("h1")後在jQuery內部將會執行怎樣的邏輯呢？分析jQuery建構函式我們同樣定位到find( selector )方法，這個方法是jQuery的例項方法，

原生js實現對select下拉列表的內容過濾

function selectOnchange(){ // alert("下拉內容改變了") // targetChangeFunction(obj) } <!-

js實現對url引數中數字字母的簡單加解密

function compile(code) { var c=String.fromCharCode(code.charCodeAt(0)+code.length); for

js實現對Android裝置物理返回鍵單擊／雙擊事件處理（Framework7框架）

單擊事件： //裝置返回鍵 document.addEventListener(“backbutton”, onBackKeyDown, false); function onBackKeyDown

原生js實現對Ajax的封裝(模仿jquery)

前言眾所周知，jquery在我們日常開發中的使用頻率非常高，與js相比，我們省去了冗長的獲取元素的程式碼，不用考慮一些麻煩的相容問題，更加方便的動畫實現，以及更加方便的方法呼叫讓我們覺得jquery真是越用越舒服。但是jquery說到底還是對js的封裝，

js實現對文字的擷取並新增。。。顯示

為了使頁面美觀化我們通常要對文字段落實現字元限制並用省略號顯示！！！具體實現上述需求的方法有兩種分別css實現和js實現。在這裡推薦js。第一種方式：js控制 var cutString = function(str ,len){//str len為引數

js 實現對Select動態賦值 C#從後臺獲取

js 程式碼 <script type="text/javascript"> $(function () { var Annuals = $("#txtAnnual"); var today = new Date();

一種在客戶端利用js實現對資料校驗的方法

通常為了減輕伺服器端的壓力會在客戶端利用js或其他指令碼對使用者填寫的需要提交的資料進行校驗，同時也會帶來使用者體驗的提升。下面介紹一種在客戶端利用js實現對資料進行校驗的方法，僅供參考。現在假設使用者需要在客戶端通過後臺進行對產品類別的新增操作，利用js

vue.js 實現點選後動態新增 class 並刪除同級 class

<div id = "prizeReport"><div class="swiper-container"> <div class="swiper-wrapper

js實現對上傳圖片進行壓縮並且預覽

js實現對上傳圖片的路徑轉成base64編碼，並且對圖片進行壓縮，實現預覽功能需要先引入jquery: <script src="http://i.gtimg.cn/qzone/biz/gdt/lib/jquery/jquery-2.1.4.js?max_age=3

使用js實現對cookie的增刪改查

簡單的操作cookie 儲存cookie(key為test；value為testValue): document.

css備忘：id選擇器的權重>class選擇器的權重=屬性選擇器的權重>元素選擇器

基本分享 bubuko col clas AS -c 測試 com 最近的項目要自己寫前端了，重新學習下前端的一下基本知識。一般在css樣式表中，上面的會被下面的覆蓋，如下圖，文字會顯示藍色：所以按照正常的來說，下面的css樣式，測試的文字應該還是藍色但結果，測

js 實現對jq選擇器 id class tag *選擇器的模仿封裝

相關推薦