jQuery DOM

Posted 2021-02-20 chengred

jQuery html

捕获

• test（） 设置或者返回所选元素的文本内容

• html() 所选元素的内容

• val（） 返回表单字段的值

• attr() 设置/改变属性值（可以允许访问多个属性值）

• attr（）的回调函数：回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

  $("button").click(function(){
    $("#runoob").attr("href", function(i,origValue){
      return origValue + "/jquery"; 
    });
  });
  

添加元素

• append（） 被选元素结尾插入内容

• predend（）被选元素开头插入内容

• after（） 被选元素之后插入内容

• before（） 在被选元素之前插入内容

  //例子
  $("p").prepend("在开头追加文本");
  

删除元素

• remove（） 删除被选元素

  $(‘#divone‘).remove();
  

• empty() 从被选元素中删除子元素

• 过滤被删除元素

  $(‘p‘).remove(‘.italic‘) //删除p标签中class=‘italic‘
  

操作css

• addClass（） 向被选元素添加一个或多个类

• removeClass（）向被选的元素删除一个或多个类

• toggleClass（) 对被选元素进行添加/删除类的切换操作

• css() 设置或返回样式属性

  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
  

  $("p").css("background-color");
  

尺寸方法

• width（）
• height（）
• innerWidth（）
• innerheight()
• outerWidth（）
• outerheight（）