JQuery (notas)

Enterprise 2022-03-24 07:14:17 views: null

1. definición de jQuery

jQuery fue creado por el estadounidense John Resig en 2006. 
jQuery es la biblioteca de JavaScript más popular. Encapsula objetos y funciones de JavaScript. 
Su idea de diseño es escribir menos, hacer más.

2. ¿Por qué usar jQuery?

(1) js realiza un cambio de color entrelazado

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"/> 
    <script type="text/javascript"> 
    window.onload = function(){ 
        var trs = document.getElementsByTagName("tr" ); 
        for(var i=0;i<trs.length;i++){ 
            if(i%2==0){ 
            trs[i].style.background = "red"; 
            } 
        } 
    } 
    </script> 
  </head> 
  
  <body> 
        <form action=""> 
            <table> 
                <tr><td>序号</td><td>订单号</td><td>商品名称< /td><td>价格</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr> 
                <tr><td>2< /td><td>4</td><td>商品53称</td><td>价53</td></tr> 
                <tr><td>2</td><td>4< /td><td>商品53称</td><td>价53</td></tr> 
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr> 
                <tr><td>2</td><td>4</td><td>商品53称</td><td> 53</td></tr> 
                <tr><td>2</td><td>4</td><td>商品53称</td><td>53</td></ tr>
            </tabla> 
        </formulario> 
  </cuerpo> 
</html>

(2) jQuery realiza un cambio de color entrelazado

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"/> 
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script > 
    <script type="text/javascript"> 
        $(función(){ 
            $("tr:par").css("fondo","rojo"); 
        }); 
    </script> 
  </head> 
  
  <body> 
        <form action=""> 
            <table> 
                <tr><td>序号</td><td>订单号</td><td>商品名称</td> <td>价格</td></tr> 
                <tr><td>1</td><td>32<
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr> 
                <tr><td>2< /td><td>4</td><td>商品53称</td><td>价53</td></tr> 
                <tr><td>2</td><td>4< /td><td>商品53称</td><td>价53</td></tr> 
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr> 
            </table> 
        </form> 
  </body> 
</html>

3. estructura de sintaxis jQuery

$(selector).action() ; 
Función de 
fábrica 
Selector: obtener el elemento DOM que debe manipularse 
Método action(): el método proporcionado en jQuery, incluido el procesamiento de eventos de vinculación Métodos

4. Introducir la biblioteca de clases de jQuery

<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

5.jQuery-HelloWorld-implementación de un cuadro de aviso emergente

<script> 
     $(function() { 
        alert("Quiero ir al campo de batalla para luchar contra jQuery, ¡lo conquistaré!"); 
    }); 
</script>

6. Combate de aplicaciones jQuery

6.1addClass( ) agrega estilo

<!DOCTYPE html> 
<html> 
  <head> 
   <meta charset="utf-8"/> 
    <style type="text/css"> 
        .h{ 
            background:red 
        } 
    </style> 
    <script type="text/ javascript" src="js/jquery-1.8.3.min.js"></script> 
    <script type="text/javascript"> 
     $(function(){ 
        //$("tr:even").addClass ("h"); 
    }); 
    </script> 
  </head> 
​<
  cuerpo > 
        <forma acción="" > 
            <tabla > 
                <tr><td>序号</td>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr> 
                <tr><td>2< /td><td>4</td><td>商品53称</td><td>价53</td></tr> 
                <tr><td>2</td><td>4< /td><td>商品53称</td><td>价53</td></tr> 
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr> 
                <tr><td>2</td><td>4</td><td>商品53称</td><td> 53</td></tr> 
                <tr><td>2</td><td>4</td><td>商品53称</td><td>53</td></ tr>
            </tabla> 
        </formulario> 
  </cuerpo> 
</html>

6.2 css() para establecer el estilo

<!DOCTYPE html> 
<html> 
  <head> 
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 
    <script type="text/javascript"> 
     $(función(){ 
         $("tr:par").css("fondo","rojo"); 
    }); 
    </script> 
  </head> 
​<
  cuerpo > 
        <forma acción="" > 
            <tabla > 
                <tr><td>序号</td><td>订单号</td><td>商品名称</td ><td>价格</td></tr> 
                <tr><td>1</td><td>32</td><td>53</td><td>价35<
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr> 
                <tr><td>2< /td><td>4</td><td>商品53称</td><td>价53</td></tr> 
                <tr><td>2</td><td>4< /td><td>商品53称</td><td>价53</td></tr> 
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr> 
            </table> 
        </form> 
  </body> 
     
</html 
>

6.3 mostrar( ), ocultar( ) mostrar y ocultar elementos

<html> 
<head> 
<meta charset="utf-8"/> 
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 
<script type= "texto/javascript"> 
$(documento).ready(función(){ 
  $(".btn1").click(función(){ 
  $("p").hide(); 
  }); 
  $(".btn2 ").clic(función(){ 
  $("p").show(); 
  }); 
}); 
</script> 
</head> 
<body> 
<p>Esto es un párrafo.</p> 
<button class="btn1">Ocultar</button> 
<button class="btn2">Mostrar</button> 
< /cuerpo> 
</html>

6.4 Operación en cadena next()

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"/> 
  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script > 
</head> 
​<
body> 
<ul> 
   <li>elemento de lista 1</li> 
   <li>elemento de lista 2</li> 
   <li class="tercero-elemento">elemento de lista 3</li> 
   < li>elemento de lista 4</li> 
   <li>elemento de lista 5</li> 
</ul> 
​<
script> 
$('li.tercer-elemento').next().css('color-de-fondo', 'rojo'); 
</guión> 
​<
/cuerpo> 
</html>

6.5 css({}) iteración implícita

$(function() { 
        $("li").css({"font-weight":"bold","color":"red"}); 
 }); 
 Análisis: <Porque el li anterior es una matriz invisible , para que pueda establecer varios estilos >

Caso:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<script src="/jquery/jquery-1.11.1.min.js"></script> 
<script> 
$( documento).listo(función(){ 
  $("botón").clic(función(){ 
    $("p").css({"color-de-fondo":"amarillo","tamaño-de-fuente":"200 %"}); 
  }); 
}); 
</script> 
</head> 
​<
body> 
<h2>这是标题</h2> 
<p style="background-color:#ff0000">这是一个段落。</p> 
<p style="background -color:#00ff00">这是一个段落。</p> 
<p style="background-color:#0000ff"> Este es un párrafo. 
</p> <p>Esto es un párrafo. </p> 
<button>Múltiples estilos para el elemento p</button> 
</body> 
</html>

6.6 Conversión de objetos DOM y objetos jQuery

(1) objeto DOM a objeto jQuery

var txtName =document.getElementById("txtName"); //Objeto DOM 
var $txtName =$(txtName); //Objeto DOM convertido a 
objeto

(2) el objeto jQuery se convierte en objeto DOM

La primera forma:

var $txtName =$ ("#txtName"); //objeto jQuery 
var txtName =$txtName[0]; //objeto DOM

Segunda forma:

var $txtName =$("#txtName"); //objeto jQuery 
var txtName =$txtName.get(0); //objeto DOM

Caso:

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"/> 
    <style type="text/css"> 
        .h{ 
            background:red 
        } 
    </style> 
    <script type="text/ javascript" src="js/jquery-1.8.3.min.js"></script> 
    <script type="text/javascript"> 
     $(función(){ 
         var a = $("tabla").css( "background","red"); 
         //var b = document.getElementById("tr"); 
         alert(una instancia de jQuery); 
    }); 
    </script> 
  </head> 
<
  cuerpo>
                <tr><td>序号</td><td>订单号</td><td>商品名称</td><td>价格</td></tr> 
                <tr><td>1</ td><td>32</td><td>53</td><td>价35</td></tr> 
                <tr><td>2</td><td>4</td> <td>商品53称</td><td>价53</td></tr> 
                <tr><td>2</td><td>4</td><td>商品53称</ td><td>53</td></tr> 
                <tr><td>2</td><td>4</td><td>商品53称</td><td>53< /td></tr> 
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr> 
                <tr><td>2< /td><td>4</td><td>商品53称</td><td>价53</td></tr> 
            </table> 
        </form> 
  </body> 
</html>

7. Función de inicialización de extensiones: la diferencia entre $(document).ready() y window.onload

ventana.onload $(documento).listo()
Tiempo de ejecución flash, video, etc.) para ejecutar Todas las estructuras de documentos DOM en la página web se ejecutan inmediatamente después del dibujo y es posible que el contenido (imágenes, flash, videos, etc.) asociado con los elementos DOM no se cargue.
escribir número En una misma página no se pueden escribir más de una a la vez La misma página puede escribir varios al mismo tiempo
ortografía simplificada sin $(función(){ //Ejecutar código}) ;

Caso:

<html> 
  <head> 
    <meta charset="utf-8"/> 
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 
    <script type= "text/javascript"> 
        //window.onload = function(){ 
             //$("tr:eq(1)").css("background","red"); 
        //} 
        //ventana.cargar = función(){alerta(1);} 
        //ventana.cargar = función(){alerta(2);} 
        $(función(){alerta(3);}); 
        $(función(){alerta(4);}); 
    </script> 
  </head> 
​<
  cuerpo > 
        <formulario acción="" > 
            <tabla >
                <tr><td>1</td><td>32</td><td>53</td><td>35</td></tr> 
                <tr><td>2</td ><td>4</td><td>商品53称</td><td>价53</td></tr> 
                <tr><td>2</td><td>4</td ><td>商品53称</td><td>价53</td></tr> 
                <tr><td>2</td><td>4</td><td>商品53称< /td><td>53</td></tr> 
                <tr><td>2</td><td>4</td><td>商品53称</td><td>53 </td></tr> 
                <tr><td>2</td><td>4</td><td>商品53称</td><td>53</td></tr>
                <tr><td>2</td><td>4</td><td>商品53称</td><td>价53</td></tr> 
            </table> 
        </form> 
  </cuerpo> 
     
</html>

​​

Caso 2: La misma página puede escribir múltiples * al mismo tiempo

<cabeza>

  <juego de caracteres meta="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

​​

  <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

  <script tipo="texto/javascript">

$(función(){

alerta(1);

});

$(función(){

alerta(2);

});

</script>

</estilo>

</cabeza>

<cuerpo>

​​​

    

​

<tr><td>número de serie</td><td>número de pedido</td><td>nombre del producto</td><td>precio</td></tr>

<tr><td>1</td><td>32</td><td>53</td><td>35</td></tr>

<tr><td>2</td><td>4</td><td>商品53称</td><td>53</td></tr>

<tr><td>2</td><td>4</td><td>商品53称</td><td>53</td></tr>

<tr><td>2</td><td>4</td><td>商品53称</td><td>53</td></tr>

<tr><td>2</td><td>4</td><td>商品53称</td><td>53</td></tr>

<tr><td>2</td><td>4</td><td>商品53称</td><td>53</td></tr>

<tr><td>2</td><td>4</td><td>商品53称</td><td>53</td></tr>

</tabla>

</formulario>

</cuerpo>

</html>

Supongo que te gusta

Origin blog.csdn.net/weixin_45650003/article/details/120694676
Recomendado
Clasificación
Diario
Más
2024-05-02(0)
2024-05-01(4)
2024-04-30(33)
2024-04-29(5)
2024-04-28(9)
2024-04-27(28)
2024-04-26(22)
2024-04-25(34)
2024-04-24(31)
2024-04-23(29)

Code World

© 2018 codetd.com