Cómo utilizar jQuery para operar formularios y tablas
1. Aplicación de formulario
El formulario tiene tres componentes básicos:
(1) Etiqueta de formulario: contiene la URL del programa del lado del servidor utilizado para procesar. los datos del formulario y el método para enviar datos al servidor.
(2) Campos de formulario: incluidos cuadros de texto, cuadros de contraseña, campos ocultos, cuadros de texto de varias líneas, casillas de verificación, cuadros de botones de opción, cuadros de selección desplegables y cuadros de carga de texto.
(3) Botones de formulario: incluido el botón de envío, el botón de reinicio y el botón normal, que se utilizan para transmitir datos al servidor o cancelar la transmisión, y también se pueden utilizar para controlar los trabajos de procesamiento de otros scripts de procesamiento definidos. .
1. Aplicación de cuadro de texto de una sola línea
Cuando el cuadro de texto recibe el foco, es necesario cambiar su color. Cuando pierde el foco, debería volver a su estilo original. Puede utilizar selectores de pseudoclases en CSS para lograr las funciones anteriores. El código CSS es el siguiente:
Entrada: foco, área de texto: foco {
Borde: 1px sólido # f00
Fondo: # fcc pero IE6 excepto para elementos de hipervínculo, no admite el selector de pseudoclase :hover, por lo que puedes usar jQuery para compensarlo:
. foco {
Borde: 1px sólido # f00
Fondo: # fcc
}
$(función(){
$(":input"). focus(function(){
$(this).addClass(" focus ");
}).blur(función) (){
$(this). remove class(" focus ");
});
}); 2. Cuadro de texto de varias líneas. Programa de aplicación
Cambio de altura: el evento de clic está vinculado por los botones "acercar" y "alejar", y la altura del cuadro de texto correspondiente también se ampliará o reducirá.
Cambio de altura de la barra de desplazamiento: los eventos de clic están vinculados por los botones "Arriba" y "Abajo".
3. Aplicación de casilla de verificación
$("#CheckedAll "). Click(function(){
$('[name=items]:checkbox '). attr('checked ', true); //La casilla de verificación está configurada en false }); CheckedRev"). Haga clic en (función(){
$('[nombre=elementos]:casilla de verificación ').each(función(){
$(this).attr("Marcado", $(this).attr("Checked")); //Selección inversa
});
}); 4. Aplicación del cuadro desplegable
Agregar opciones desde el margen izquierdo al margen derecho:
(' #add '). Click(function(){
var $ opciones = $(' # seleccionar 1 opciones:seleccionado '); //Obtener todas las opciones
$ opciones . appendto(' # seleccionar 2 '); //Agregar a la otra parte})5. Verificación formal
Verificar nombre de usuario:
if ($(this).
is(' # nombre de usuario '){
if(este . valor = = " " | | este . valor . longitud & lt; 6){
Var errorMsg= 'Por favor, ingresa Al menos 6 nombres de usuario'
$ parent . >}De lo contrario{
Var okMsg= 'Ingreso correcto';
$ parent . append(' & lt;' span class="formtips onSuccess " >+okMsg+' </ span>');
}
}Utilice el mismo método para verificar el correo electrónico;
Enviar evento:
}
} p>
$('#enviar '). clic(función(){
$("form.required:input "). trigger("desenfoque");
var numError=$('form.onError '). Longitud;
if(numError){
return false
}
Alert("Registro exitoso, la contraseña ha sido enviada a su correo electrónico, verifique"
}); 2. Solicitud de tabla
1. La tabla cambia de color
Cambio de color escalonado ordinario:
$(function(){
$(" tbody & gt; tr: número impar"). addClass(" odd "); // Agrega estilos a las filas impares de la tabla
$("tbody>tr:even").addClass("even");//Agrega estilos a las filas pares. en la tabla}) Radio El cuadro controla el resaltado de filas alternativas en la tabla:
$('tbody>tr'). )
. addClass('selected') //Agrega un estilo de resaltado a la fila actual en la que hiciste clic
Eliminar clase(' selected ') //Elimina la altura del. fila hermana. En modo ligero, el objeto se convierte en $(this).
. end() //Devuelve un objeto $(this): Elección única'). attr('checked ', true); //Seleccione el botón de opción donde se encuentra la fila}); 2. Expansión y cierre del formulario
$(function(){
$ ( 'tr. parent). click(function(){//Obtiene la llamada fila principal.
$(this)
.toggleClass("selected") // Agregar/eliminar resaltado
.sibling('.child_'+this.id).toggle(); //ocultar/mostrar las llamadas filas secundarias
}).click( ) ; //Cuando el usuario ingresa por primera vez a la interfaz, se reduce de forma predeterminada})3 Filtrado de contenido de tabla
$(function(){
$ ("# nombre de filtro"). keyup(function() {// Vincula el evento desencadenante al cuadro de texto.
$("table tbody tr")
Filter(":contains("+($) (this)). val())+" ')". show(); // Filtra las filas con valor val en el itinerario
});
}) ;