jQuery's operation on HTML (two)

1. jQuery gets and sets the content and attributes of HTML tags

tips: If there is no parameter in the parentheses, it is obtained, and if there is a parameter, it is set

• Get content-text(), html() and val()

  • text()-Set or return the text content of the selected element
  • html()-Set or return the content of the selected element (including HTML tags)
  • val()-Set or return the value of a form field

  testValue = $("#test").val();	// 获取
  $("#test").val("newValue");	// 设置
  $("#test2").html("<b>Hello world!</b>");	// 设置html
  

  Callback function : The callback function has two parameters: the subscript of the current element in the selected element list, and the original (old) value. Then return the string you want to use with the new value of the function.

   $("#test1").text(function(i,origText){
        
        
          return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
      });
  

• Get attributes-attr(), prop()

  url = $("#runoob").attr("href")	// 获取href属性（得到地址）
  $("#runoob").attr("href","www.baidu.com")	// 设置值
  $("#runoob").attr({
        
        "href":"www.baidu.com","title":"newTitle"})	// 同时设置多个属性
  

  Callback function : There are two parameters: the index of the current element in the selected element list, and the original (old) value. Then return the string you want to use with the new value of the function.

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

  tips: the result of attr and prop
  prop() function:
  1. If there is a corresponding attribute, return the specified attribute value.
  2. If there is no corresponding attribute, the return value is an empty string.
  The result of the attr() function:
  1. If there is a corresponding attribute, return the specified attribute value.
  2. If there is no corresponding attribute, the return value is undefined.

  For the inherent attributes of the HTML element itself, use the prop method when processing.
  For our own custom DOM attributes of HTML elements, we use the attr method when processing them.
  Properties with two attributes of true and false, such as checked, selected or disabled use prop()
  
  

Two, add and delete HTML content

• increase

  append()-insert content at the end of the selected element
  prepend()-insert content at the beginning of the selected element
  after()- insert content after the selected element
  before()- insert content before the selected element

  tips :
  append/prepend is embedded inside the selected element.
  after/before is appending outside the element.

  JS example:

  function appendText()
  {
        
        
      var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
      var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
      var txt3=document.createElement("p");
      txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
      $("body").append(txt1,txt2,txt3);        // 追加新元素
  }
  
  function afterText()
  {
        
        
      var txt1="<b>I </b>";                    // 使用 HTML 创建元素
      var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
      var txt3=document.createElement("big");  // 使用 DOM 创建元素
      txt3.innerHTML="jQuery!";
      $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
      $("img").after([txt1,txt2,txt3]);        // 参数也可以是list
  }
  

• delete

  remove()-delete the selected element (and its child elements)
  empty()-delete the child element from the selected element

  Optional parameter : selector

  $("#div1").remove();	
  $("#div1").empty();
  $("p").remove(".italic");	// 删除 class="italic" 的所有 <p> 元素
  

Three, operate CSS

addClass()-add one or more classes to the selected element
removeClass()-delete one or more classes from the selected element
toggleClass()-switch operations to add/remove classes to the selected element
css()-set or Return style attributes

• addClass add

  $("button").click(function(){
        
        
    $("div").addClass("important");	// 添加一个类
    $("h1,h2,p").addClass("blue");	// 给多个标签添加一个类
    $("body div:first").addClass("important blue"); // 给标签添加多个类
  });
  

• removeClass delete

  // 删除多个标签二的blue类
  $("h1,h2,p").removeClass("blue");	
  

• toggleClass toggle

  // 添加、删除类的切换-若有则删除，没有则添加
   $("h1,h2,p").toggleClass("blue");
  

• css get and set

  The css() method sets or returns one or more style attributes of the selected element.

  Get :

  var backgroundColor = $("p").css("background-color");
  

  Settings :

  $("p").css("background-color","yellow");
  // 设置多个属性
  $("p").css({
        
        "background-color":"yellow","font-size":"200%"});
  

• All operation html, css method reference☆

  Novice Tutorial-jQuery HTML / CSS Method
  
  
  

Fourth, the size of operating elements and browser windows

width()			—— 设置或返回元素的宽度（不包括内边距、边框或外边距）
height()		—— 设置或返回元素的高度（不包括内边距、边框或外边距）

innerWidth()	—— 返回元素的宽度（包括内边距）
innerHeight()	—— 返回元素的高度（包括内边距）

outerWidth()	—— 返回元素的宽度（包括内边距和边框）
outerHeight()	—— 返回元素的高度（包括内边距和边框）

$("button").click(function(){
    
    
  var txt="";
  txt+="div 的宽度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);


  txt+="div 宽度，包含内边距: " + $("#div2").innerWidth() + "</br>";
  txt+="div 高度，包含内边距: " + $("#div2").innerHeight();
  $("#div2").html(txt);

  txt+="div 宽度，包含内边距和边框: " + $("#div3").outerWidth() + "</br>";
  txt+="div 高度，包含内边距和边框: " + $("#div3").outerHeight();
  $("#div3").html(txt);
});

tips: width() gets the width set by css minus padding and border

Five, traverse DOM elements

Three-level relationship:
parents: father, grandfather, great-grandfather, etc.
Peer: compatriots (having the same father),
descendants: children, grandchildren, great-grandchildren, etc.

Parent lookup

parent() —— Returns the direct parent element of the selected element, and only traverses the DOM tree one level higher
parents() —— Returns all ancestor elements of the selected element, it
goes all the way up to the root element of the document () parentsUntil( )-Return all ancestor elements between two given elements

$(document).ready(function(){
    
    
  // 返回每个 <span> 元素的直接父元素
  var spanParent = $("span").parent();
  spanParent.css("color","red");	// 将每个 <span> 元素的直接父元素颜色设置为红色
  // 返回所有 <span> 元素的所有祖先
  $("span").parents();
  // 所有 <span> 元素的所有祖先，并且它是 <ul> 元素
  $("span").parents("ul");
  // 返回介于 <span> 与 <div> 元素之间的所有祖先元素
  $("span").parentsUntil("div");
});

Peer lookup

siblings()-return all siblings of the selected element
next()-return the next sibling element of the selected element, this method returns only one element
nextAll()-return all the following siblings of the selected element
nextUntil () —— Return all the following sibling elements between the two given parameters
prev() —— Same as above, but traverse the higher level
prevAll()
prevUntil()

$(document).ready(function(){
    
    
  // 返回 <h2> 的所有同胞元素
  $("h2").siblings();
  // 返回属于 <h2> 的同胞元素的所有 <p> 元素
  $("h2").siblings("p");
  // 返回 <h2> 的下一个同胞元素
  $("h2").next();
  // 返回 <h2> 的所有跟随的同胞元素
  $("h2").nextAll();
  // 返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
  $("h2").nextUntil("h6");
});

Offspring lookup

children()-return all direct children of the selected element, only traverse the DOM tree to the next level
find()-return the descendant elements of the selected element, all the way down to the last descendant

$(document).ready(function(){
    
    
  // 返回每个 <div> 元素的所有直接子元素
  $("div").children();
  // 返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素
  $("div").children("p.1");
  // 返回属于 <div> 后代的所有 <span> 元素
  $("div").find("span");
  // 返回 <div> 的所有后代
  $("div").find("*");
});

Filter search

first()-returns the first element of the selected element
last()-returns the last element of the selected element
eq()-returns the element with the specified index number in the selected element, the index number starts from 0, So the index number of the first element is 0 instead of 1.

$(document).ready(function(){
    
    
  // 选取首个 <div> 元素内部的第一个 <p> 元素
  $("div p").first();
  // 选择最后一个 <div> 元素中的最后一个 <p> 元素
  $("div p").last();
  // 选取第二个 <p> 元素（索引号 1）
  $("p").eq(1);
});

filter()-allows you to specify a standard. Elements that do not match this criterion will be deleted from the collection, and matched elements will be returned
not()-all elements that do not match the criterion are returned. The not() method is the opposite of filter()

$(document).ready(function(){
    
    
  // 返回带有类名 "url" 的所有 <p> 元素
  $("p").filter(".url");
  // 返回不带有类名 "url" 的所有 <p> 元素
  $("p").not(".url");
});

tips:
$("p").last().css("background-color","yellow");
and
$("p:last").css("background-color","yellow");
effect same.

$("p").first().css("background-color","yellow");
and
$("p:first").ss("background-color","yellow");
have the same effect.

$("p").not(".url");
and
$("p:not(.url)");
have the same effect.

Reference for all traversal methods☆

Novice Tutorial-jQuery Traversal Method