未来之窗昭和仙君(V2025.159)-天和八年秋

HTML结构

<img id="user-avatar" class="avatar" src="/images/avatar.jpg" />
<a id="home-link" name="nav-link" href="/home">首页</a>

JavaScript代码

// 获取图片元素属性
console.log($cq("#user-avatar").id);        // 输出: "user-avatar"
console.log($cq("#user-avatar").className); // 输出: "avatar"
console.log($cq("#user-avatar").src);       // 输出: "/images/avatar.jpg"
console.log($cq("#user-avatar").tagName);   // 输出: "IMG"

// 获取链接元素属性
console.log($cq("#home-link").name);        // 输出: "nav-link"
console.log($cq("#home-link").href);        // 输出: "/home"
console.log($cq("#home-link").tagName);     // 输出: "A"

HTML结构

<input type="checkbox" id="agree" name="terms" />
<input type="text" class="form-control" />
<input type="text" class="form-control" />

JavaScript代码

// 获取属性值
console.log($cq("#agree").prop("type"));    // 输出: "checkbox"
console.log($cq("#agree").prop("name"));    // 输出: "terms"
console.log($cq("#agree").prop("checked")); // 输出: false

// 设置属性值
// 为复选框设置checked属性
$cq("#agree").prop("checked", true);
// 为多个元素设置属性
$cq(".form-control")
  .prop("disabled", true)
  .prop("placeholder", "请输入内容"); // 支持链式调用

// 验证结果
console.log($cq("#agree").prop("checked"));      // 输出: true
console.log($cq(".form-control:first").prop("disabled")); // 输出: true

完整示例：表单输入框事件处理

HTML结构

<form id="user-form">
    <div>
        <label>用户名：</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
    </div>
    <div>
        <label>搜索：</label>
        <input type="search" id="search-input" placeholder="搜索内容">
    </div>
    <div>
        <label>爱好：</label>
        <select id="hobby">
            <option value="">请选择</option>
            <option value="reading">阅读</option>
            <option value="sports">运动</option>
        </select>
    </div>
</form>

JavaScript代码

// 用户名输入框事件处理
$cq("#username")
    // 获得焦点事件
    .事件("focus", function() {
        // 聚焦时添加高亮样式
        this.style.border = "2px solid #165DFF";
        this.style.backgroundColor = "#f0f7ff";
    })
    // 失去焦点事件
    .事件("blur", function() {
        // 失焦时恢复样式
        this.style.border = "1px solid #ccc";
        this.style.backgroundColor = "";
        
        // 验证输入内容
        if (this.value.length < 3) {
            alert("用户名长度不能少于3个字符");
        }
    })
    // 输入事件（实时监测）
    .事件("input", function(e) {
        console.log("正在输入：", this.value);
        // 限制输入长度为10
        if (this.value.length > 10) {
            this.value = this.value.substring(0, 10);
        }
    })
    // 键盘按下事件
    .事件("keydown", function(e) {
        // 禁止输入空格
        if (e.keyCode === 32) {
            e.preventDefault(); // 阻止默认行为
            alert("用户名不能包含空格");
        }
    });

// 搜索框事件处理
$cq("#search-input")
    // 搜索事件（回车或搜索按钮）
    .事件("search", function() {
        if (this.value.trim()) {
            console.log("搜索内容：", this.value);
            // 执行搜索逻辑
            // searchAction(this.value);
        } else {
            alert("请输入搜索内容");
        }
    });

// 下拉选择框事件处理
$cq("#hobby")
    // 选项改变事件
    .事件("change", function() {
        console.log("选择了：", this.value);
        if (this.value) {
            alert("您选择的爱好是：" + this.options[this.selectedIndex].text);
        }
    });

// 批量绑定事件示例
$cq("input, select")
    .事件({
        "focus": function() {
            console.log("元素获得焦点：", this.id);
        },
        "blur": function() {
            console.log("元素失去焦点：", this.id);
        }
    });

示例说明

• focus/blur：用于处理输入框获取和失去焦点时的样式变化和验证逻辑
• input：实时监测输入框内容变化，可用于实时验证或输入限制
• keydown：捕获键盘输入，可用于禁止特定字符输入或快捷键处理
• search：专门用于搜索框，在用户执行搜索操作时触发
• change：适用于下拉框、复选框等，在值改变并确认后触发
• 批量绑定方式可简化多事件绑定代码，提高开发效率