JS对HTML的常用操作

2024年6月20日 14:24 by wst

javascript

---

今天我们总结下JS对网页的常用操作：

1. 提交表单

var form = document.getElementById('myForm123');
    event.preventDefault(); // 阻止表单的默认提交行为

    // 检查表单数据
    var isValid = validateFormData(form);

    if (isValid) {
      // 如果数据有效，触发表单的提交
      storeFormData(form)
      form.submit();
    } else {
      // 如果数据无效，可以在这里添加错误处理逻辑
      console.error('Validation failed, form not submitted.');
    }

解读：

一般表单在提交之前，都需要做一些验证。那么首先要获取到表单，然后去验证，没问题了，再提交表单form.submit()，提交如果不设置提交到哪里，默认是提交到当前url。

2. 查询页面元素

/* 存储查询字符串 */
  function storeFormData(form){
    var req_arr = [];
    var inputs = form.querySelectorAll('input, select');
    for (var i = 0; i < inputs.length; i++) {
      req_arr.push(inputs[i].name +"="+ inputs[i].value)
    }
    localStorage.setItem("order_req_str", req_arr.join('&'));
    return true
  }

/*验证表单的有效性*/
  function validateFormData(form) {
    // 这里可以添加你的验证逻辑
    // 例如，检查输入是否为空，是否为有效的电子邮件等

    // 假设我们只检查表单是否为空
    var inputs = form.querySelectorAll('#start, #end');
    for (var i = 0; i < inputs.length; i++) {
      if (!inputs[i].value.trim()) {
        alert("请选择开始时间和结束时间。")
        return false; // 如果发现空值，返回false
      }
    }
    return true; // 如果所有输入都有效，返回true
  }

解读：

querySelectorAll方法可以查询多种类型的标签，参数是各种选择器。得到查询结果后，可以检测每个元素的值是否合法inputs[i].value.trim()。

3. 给元素添加事件

添加事件，一般是在页面载入的时候添加。比如这里：

document.addEventListener("DOMContentLoaded", function() {
    // 获取所有的分页链接
    var paginationLinks = document.querySelectorAll('a.pagination');
    // 为每个分页链接添加点击事件监听器
    paginationLinks.forEach(function(link) {
        link.addEventListener('click', function(event) {
            // 阻止默认的链接跳转行为
            event.preventDefault();
            var cond = localStorage.getItem('order_req_str');
            // 构造新的URL，添加查询参数a=1
            var newUrl = link.href + '&' + cond;
            // 执行动作后跳转
            window.location.href = newUrl;
        });
    });

解读：

这里时给a标签添加一个点击动作，开始先阻止默认的跳转行为，然后做一定的操作（这里是改变提交的的参数），最后再跳转。

4. 给窗口添加事件

$(window).resize(function(){
    $(".widget-box").height($(window).height());
});

解读：

当窗口改变的时候，执行这个函数：把某个元素的高度设置为窗口的高度。

5. 改变元素的属性

比如这里，设置元素的css属性，margin-left为125.

$('#sidebar').width(125)
$('#frame-container').css('margin-left', 125)

6.通过jquery操作元素

返回 <span> 的第一个祖先元素，是一个 <ul> 元素：

$("span").closest("ul").css({"color":"red","border":"2px solid red"});

判断id为sidebar的元素是否有个class为menu-min.

$("#sidebar").hasClass("menu-min");

判断f所代表的元素是否可见。

$(f).is(":visible")

查找直接子元素，然后对找到的元素执行这个函数。

d.find("> .open > .submenu").each(function(){
if(this!=f&&!$(this.parentNode).hasClass("active")){
        $(this).slideUp(200).parent().removeClass("open");
    }
})

 

---