国开电大 JavaScript程序设计 实训八:使用jQuery技术实现企业信息展示系统的相关功能

更新时间:2023-07-28 05:03:24 阅读: 评论:0

1. 题目
使用jQuery技术实现企业信息展示系统的相关功能。
大年初一祝福语
2. 目的
(1)掌握jQuery的基本知识。
(2)掌握jQuery的应用方法。
(3)进一步理解Ajax 程序的设计方法。
(4)会利用所学知识设计简单的应用程序。
3. 内容
用jQuery技术实现产品的查询、添加、修改与删除,用户的登录、注册、查询和删除。
4. 要求
(1)从 下载 jQuery库。
(2)将在客户端网页中使用的MyTools中的函数转换为jQuery函数。
(3)进一步完善功能,优化界面。
代码示例:
class Jq {
    constructor(arg, root) {
   
        // 记录上次操作的节点;
        if (typeof root == 'undefined') {
            this.prevObject = new Jq(document, null);
        }
        if (root) {
总有一种力量            this.prevObject = root;
异开头的成语        }
        if (typeof arg == "string") {
            // 字符串
            let eles = document.querySelectorAll(arg);
            this.addEvent(eles);
        } el if (typeof arg == "function") {
            window.addEventListener("DOMContentLoaded", arg);
        } el {
            // 原生节点;
春节英文祝福语            if (typeof arg.length == "undefined") {
                this[0] = arg;
                this.length = 1;
            } el {
                this.addEvent(arg);
            }
        }
    }
    addEvent(eles) {
        eles.forEach((el, index) => {
            this[index] = el;
        })
        this.length = eles.length;
    }
    eq(index) {
        return new Jq(this[index], this);
    }
    end() {
        return this.prevObject;
    }
    click(fn) {
        for (let i = 0; i < this.length; i++) {
            this[i].addEventListener("click", fn);
        }
    }
    on(eventName, fn) {
        let reg = /\s+/g;
        eventName = place(reg, " ");
        // console.log(eventName);
        let eventArr = eventName.split(" ");
        for (let i = 0; i < eventArr.length; i++) {
            for (let j = 0; j < this.length; j++) {
                this[j].addEventListener(eventArr[i], fn);
            }
        }
    }
    css(...arg) {
        if (arg.length > 1) {
            if(arg[0] in $.cssHooks){
                let item=arg[0];
                for (let i = 0; i < this.length; i++) {
                    $.cssHooks[item].t(this[i],arg[1]);
                }
            }
            el{
                //  2个参数
                // 设置样式
                for (let i = 0; i < this.length; i++) {
                    this.tStyle(this[i], arg[0], arg[1]);
                }
            }
       
        } el {
            // 1个参数:--》字符串  、 对象;[obj]
            if (typeof arg[0] == 'string') {
             
                if(arg[0]=="wh"&&arg[0] in $.cssHooks){
           
                    return  $.cssHooks[arg[0]].get(this[0]);
                }el{
                    // 字符串 :获取样式
                    Style(this[0], arg[0]);
                }
           
            } el {
                // 对象; 设置样式
                for (let i = 0; i < this.length; i++) {
                    for (let j in arg[0]) {
                        this.tStyle(this[i], j, arg[0][j]);
                    }
                }
            }
        }
    }
    tStyle(ele, styleName, styleValue) {
        if (typeof styleValue == "number" && !(styleName in $.cssNumber)) {
            styleValue = styleValue + "px";
        }
        ele.style[styleName] = styleValue;
    }
    getStyle(ele, styleName) {
        ComputedStyle(ele, null)[styleName];
    }
}
function $(arg) {
    return new Jq(arg);
}
固态硬盘和机械硬盘区别
$.cssNumber = {
    animationIterationCount: true,
    columnCount: true,
    fillOpacity: true,
    flexGrow: true,
    flexShrink: true,
    fontWeight: true,贮藏的近义词
    gridArea: true,
    gridColumn: true,
    gridColumnEnd: true,
    gridColumnStart: true,
    gridRow: true,
    gridRowEnd: true,
    gridRowStart: true,
    lineHeight: true,
    opacity: true,
    order: true,
    orphans: true,
    pm: true,
    widows: true,
盘古开天辟地读后感>国产999    zIndex: true,
    zoom: true
}
$.cssHooks={
 
}

本文发布于:2023-07-28 05:03:24,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/89/1099529.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:设计   样式   硬盘   实现   查询   节点   技术   方法
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图