jw.js库新版教程

置顶 a181001_

已于 2025-05-02 17:42:05 修改

阅读量1.5k

点赞数 46

分类专栏： html javscript 库文章标签： javascript 开发语言 ecmascript 前端

于 2025-04-30 17:19:37 首次发布

©️版权归王小玗所有，文章标注则不要版权

本文链接：https://blog.csdn.net/a181001_/article/details/147635897

版权

html 同时被 3 个专栏收录

18 篇文章

订阅专栏

javscript

8 篇文章

订阅专栏

库

2 篇文章

订阅专栏

下载链接:

jw.js链接https://download.csdn.net/download/a181001_/90734196

json.php下载https://download.csdn.net/download/a181001_/90730898?_refluxos=a10

使用方法:

一、使用$()函数创建jw对象，有两种使用方式:

1. $(string):

string:选择器字符串，和css选择器类似，但input[type=xxx]简化为input:xxx,会返回一个jw对象。

2. $(dom):

dom:是获取到的dom元素,会返回一个jw对象。

例子:

<button class="glass-button"> 
  <span id="glass">玻璃按钮</span>  
</button> 
<script>
  var $glassBtn=$("#glass");
  //或
  $glassBtn=$(document.getElementById("glass"));
</script>

二、使用$create()创建jw对象

$create(name)

name:元素名称

//创建
var $input=$create("input");
//添加有三种方法:
//1.添加到
$input.addin($("body"));
//2.在xxx元素后添加
$("body").append($input);
//3.在xxx元素前添加
$("body").prepend($input);

三、jwHTMLElement的方法:

1.设置或获取html内容,使用对象的html属性即可。

2.设置或获取文字内容,使用对象的html属性即可。

//设置
$glassBtn.html="<b>xxx</b>";
$glassBtn.text="xxx";
//获取
alert($glassBtn.html,$glassBtn.text);

3.css内容:

(1)使用对象的css(属性,内容)设置

$glassBtn.css("background-color","blue");

(2)使用对象的css属性设置或获取:

//设置
$glassBtn.css={
  "background-color":"blue",
  "color":"white"
};
//获取
alert($glassBtn.css["background-color"]);

4.获取dom对象,使用对象的dom属性即可。

5.设置属性setAttr(属性名,属性值)，获取属性getAttr(属性名)。

6.动画方法:

(1)show()和hide()方法，用于显示或隐藏元素

(2)empty()或delete()方法，用于清空内容或删除元素

$glassBtn.show();
$glassBtn.hide();
$glassBtn.empty();
$glassBtn.delete();

7.class方法与属性:

(1)addClass(类名)用于添加类

(2)delClass(类名)用于删除类

(3)toggleClass(类名)用于切换类

(4)class属性用于设置或获取className

$glassBtn.addClass("red");
$glassBtn.delClass("blue");
$glassBtn.toggleClass("yellow");
$glassBtn.class="xxx"

8.绑定事件,用on(事件名称,函数)

$glassBtn.on("click",function (){
  alert();
});

9.绑定内容:

(1)用jwele.bind(要绑定的input)单向绑定

(2)用jwele.bindtwo(要绑定的input)双向绑定

注意：参数只能是input!!!

10.添加元素:

append(jwele):在最后添加，相当于appendChild(dom);

prepend(jwele):在最前添加，相当于prepend(dom);

11.获取或设置对象的值(value),使用对象的value属性即可。

12.获取或设置对象的id,使用对象的id属性即可。

四、jwHTMLElement的属性:

版本号:对象.version

五、DOMContentLoaded事件的简化:<

$(document).ready(fun)或

$(fun)简化写法

$(document).ready(function (){
  //代码
});
//或
$(function (){
  //代码
});

六、XMLHttpRequest对象的简化:

$get(url,fun,ifjson)GET请求:

url:路径

fun:成功时函数,data为文本或json

ifjson:是否为json格式,不写为默认值false

<b>$post(url,data,fun,ifjson,head)</b>POST请求

url:路径

data:数据json格式

fun:成功时函数,data为文本或json

head:数据类型可不写

ifjson:是否为json格式

$json(url,data)JSON文件编辑(参数在data里,请下载json.php)

例子:

//get请求
$get("ddd.php?name=hh",function (data){
    // 代码(成功时调用)
    //data为返回值文本或json
});
//post请求
$post("eee.php",{
    name:"as"
  },function (data){
    // 代码(成功时调用)
    //data为返回值文本或json
},'application/x-www-form-urlencoded');
//json
$json("json.json",{
  name:"as"
});

注意:请把php和js文件放在一个文件夹,ifjson为true时返回json格式

七、获取临近元素:

使用[...对象]获取数组:

[...对象][0]:相当于对象本身

[...对象][1]:对象的下一个邻居

[...对象][2]:对象的下一个邻居的下一个邻居

...

//相当于input
alert([...input][0]);
//下一个
alert([...input][1]);
//下一个的下一个
alert([...input][2])

八、JSON与字符串互相转换:

$toJSON(str):字符串转JSON

$toText(json):JSON转字符串

//字符串转JSON
json=$toJSON("{id:xxx}");  //{id:xxx}
//JSON转字符串
text=$toText({
  id:"xxx",
  class:"yyy"
});    //text="{id:\"xxx\",class:\"yyy\"}"

小贴士：只有$()、$create()、$get()、$post()、$toJSON()、$toText()和类方法属性可用哦！😊

例子:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./jw.js"></script>
    <title>VPN控制面板</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f5f5f5;
        }
        .container {
            text-align: center;
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 350px;
        }
        h1 {
            color: #333;
            margin-bottom: 30px;
        }
        .btn {
            padding: 12px 24px;
            margin: 10px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 200px;
        }
        #startBtn {
            background-color: #4CAF50;
            color: white;
        }
        #stopBtn {
            background-color: #f44336;
            color: white;
        }
        .btn:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }
        .status {
            margin-top: 20px;
            padding: 10px;
            border-radius: 5px;
            font-weight: bold;
        }
        .active {
            background-color: #e8f5e9;
            color: #2e7d32;
        }
        .inactive {
            background-color: #ffebee;
            color: #c62828;
        }
        .connection-info {
            margin-top: 20px;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>VPN控制面板</h1>
        <button id="startBtn" class="btn">开启VPN</button>
        <button id="stopBtn" class="btn">关闭VPN</button>
        <div id="statusDisplay" class="status inactive">VPN状态: 未连接</div>
        <div id="connectionInfo" class="connection-info">点击上方按钮控制VPN连接</div>
    </div>

    <script>
        // 当前VPN状态
        let vpnStatus = false;
        let connectionStartTime = null;
        
        // 获取DOM元素
        const startBtn = $('#startBtn');
        const stopBtn = $('#stopBtn');
        const statusDisplay = $('#statusDisplay');
        const connectionInfo = $('#connectionInfo');
        
        // 更新状态显示
        function updateStatus() {
            if (vpnStatus) {
                statusDisplay.text = "VPN状态: 已连接(全局模式)";
                statusDisplay.class = "status active";
                const duration = Math.floor((Date.now() - connectionStartTime) / 1000);
                connectionInfo.text = "已连接+duration+秒 | 全局加速模式";
            } else {
                statusDisplay.text = "VPN状态: 未连接";
                statusDisplay.class = "status inactive";
                connectionInfo.text = "VPN已断开，所有流量将直接连接";
            }
        }
        
        // 开启VPN
        startBtn.on('click', function() {
            if (!vpnStatus) {
                
                vpnStatus = true;
                connectionStartTime = Date.now();
                updateStatus();
                
                console.log("VPN启动命令已发送");
                
                // 更新连接时长计时器
                if (window.connectionTimer) {
                    clearInterval(window.connectionTimer);
                }
                $get("vpn.php?val=start",function (data){});
                window.connectionTimer = setInterval(updateStatus, 1000);
            }
        });
        
        // 关闭VPN
        stopBtn.on('click', function() {
            if (vpnStatus) {                               
                vpnStatus = false;
                updateStatus();
                console.log("VPN停止命令已发送");
                $get("vpn.php?val=end",function (data){});
                if (window.connectionTimer) {
                    clearInterval(window.connectionTimer);
                }
            }
        });
        
        // 初始化状态
        updateStatus();
    </script>
</body>
</html>