Operación de jQuery en HTML (dos)

1. jQuery obtiene y establece el contenido y los atributos de las etiquetas HTML

consejos: si no hay un parámetro entre paréntesis, se obtiene, y si hay un parámetro, se establece

• Obtenga content-text (), html () y val ()

  • text (): establece o devuelve el contenido de texto del elemento seleccionado
  • html (): establece o devuelve el contenido del elemento seleccionado (incluidas las etiquetas HTML)
  • val (): establece o devuelve el valor de un campo de formulario

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

  Función de devolución de llamada: La función de devolución de llamada tiene dos parámetros: el subíndice del elemento actual en la lista de elementos seleccionados y el valor original (antiguo). Luego devuelva la cadena que desea usar con el nuevo valor de la función.

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

• Obtener atributos-attr (), prop ()

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

  Función de devolución de llamada : hay dos parámetros: el índice del elemento actual en la lista de elementos seleccionados y el valor original (antiguo). Luego devuelva la cadena que desea usar con el nuevo valor de la función.

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

  tips: el resultado de la función attr y prop
  prop ():
  1. Si hay un atributo correspondiente, devuelve el valor del atributo especificado.
  2. Si no hay un atributo correspondiente, el valor de retorno es una cadena vacía.
  El resultado de la función attr ():
  1. Si hay un atributo correspondiente, devuelve el valor de atributo especificado.
  2. Si no hay un atributo correspondiente, el valor de retorno no está definido.

  Para los atributos inherentes del propio elemento HTML, utilice el método prop al procesar.
  Para nuestros propios atributos DOM personalizados de elementos HTML, usamos el método attr al procesarlos.
  Las propiedades con dos atributos de verdadero y falso, como marcado, seleccionado o deshabilitado usan prop ()
  
  

Dos, agregar y eliminar contenido HTML

• incrementar

  append () - inserta contenido al final del elemento seleccionado
  prepend () - inserta contenido al principio del elemento seleccionado
  después de () - inserta contenido después del elemento seleccionado
  antes () - inserta contenido antes del elemento seleccionado

  consejos :
  añadir / anteponer está incrustado en el elemento seleccionado.
  after / before se agrega fuera del elemento.

  Ejemplo de JS:

  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
  }
  

• Eliminar

  remove (): elimina el elemento seleccionado (y sus elementos secundarios).
  empty (): elimina el elemento secundario del elemento seleccionado.

  Parámetro opcional : selector

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

Tres, operar CSS

addClass () - agrega una o más clases al elemento seleccionado
removeClass () - elimina una o más clases del elemento seleccionado
toggleClass () - cambia las operaciones para agregar / eliminar clases al elemento seleccionado
css () - establecer o Devolver atributos de estilo

• addClass añadir

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

• removeClass eliminar

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

• toggleClass alternar

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

• css obtener y configurar

  El método css () establece o devuelve uno o más atributos de estilo del elemento seleccionado.

  Obtener :

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

  Configuraciones :

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

• Toda la operación html, referencia del método css ☆

  Tutorial novato-jQuery Método HTML / CSS
  
  
  

Cuarto, el tamaño de los elementos operativos y las ventanas del navegador.

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);
});

consejos: width () obtiene el ancho establecido por css menos el relleno y el borde

Cinco elementos DOM transversal

Relación a tres niveles:
padres: padre, abuelo, bisabuelo, etc.
Compañeros: compatriotas (que tienen el mismo padre),
descendientes: hijos, nietos, bisnietos, etc.

Búsqueda de padres

parent (): devuelve el elemento principal directo del elemento seleccionado y solo atraviesa el árbol DOM un nivel superior parent
(): devuelve todos los elementos ancestros del elemento seleccionado,
va hasta el elemento raíz del documento () parentUntil ( ) -Return todos los elementos ancestros entre dos elementos dados

$(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");
});

Búsqueda de pares

hermanos () - devuelve todos los hermanos del elemento seleccionado
next () - devuelve el siguiente elemento hermano del elemento seleccionado, este método devuelve solo un elemento
nextAll () - devuelve todos los hermanos siguientes del elemento seleccionado
nextUntil () —— Devuelve todos los siguientes elementos hermanos entre los dos parámetros dados.
Prev () —— Igual que arriba, pero atraviesa el nivel superior
prevAll ()
prevUntil ()

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

Búsqueda de descendientes

children (): devuelve todos los elementos secundarios directos del elemento seleccionado, solo atraviesa el árbol DOM hasta el siguiente nivel
find (): devuelve los elementos descendientes del elemento seleccionado, hasta el último descendiente

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

Filtrar búsqueda

first () - devuelve el primer elemento del elemento seleccionado
last () - devuelve el último elemento del elemento seleccionado
eq () - devuelve el elemento con el número de índice especificado en el elemento seleccionado, el número de índice comienza desde 0, Entonces, el número de índice del primer elemento es 0 en lugar de 1.

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

filter (): le permite especificar un estándar. Los elementos que no coincidan con este criterio se eliminarán de la colección y los elementos coincidentes se devolverán
not (): se devolverán todos los elementos que no coincidan con el criterio. El método not () es lo contrario de filter ()

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

consejos:
$ ("p"). last (). css ("color de fondo", "amarillo");
y
$ ("p: último"). css ("color de fondo", "amarillo");
efecto mismo.

$ ("p"). first (). css ("color de fondo", "amarillo");
y
$ ("p: primero"). ss ("color de fondo", "amarillo");
tienen el mismo efecto.

$ ("p"). not (". url");
y
$ ("p: not (.url)");
tienen el mismo efecto.

Referencia para todos los métodos de recorrido ☆

Tutorial novato-método transversal jQuery