Resumo de algumas operações básicas em jQuery

Prefácio:

• jQuery, como o nome sugere, é JavaScript e Query, uma biblioteca js para auxiliar no desenvolvimento de JavaScript.
• $ É a função central do jQuery, que pode realizar muitas funções do jQuery. $ () é chamar a função $
• O objeto jQuery é uma matriz de objetos dom + uma série de funções fornecidas por jQuery.
• O objeto jQuery não pode usar as propriedades e métodos do objeto DOM, e o objeto DOM não pode usar as propriedades e métodos do objeto jQuery.
• Converter objeto dom em objeto jQuery:
  $ (objeto DOM) pode ser convertido em objeto jQuery
• Converter objeto jQuery em objeto dom objeto
  jQuery [subscript] Obtenha o objeto DOM correspondente

1. Operação DOM

1. Manipulação de atributos DOM

• html()Ele pode definir e obter o conteúdo na tag inicial e na tag final. Atributo DOM com innerHTMLo mesmo.
• text()Ele pode definir e obter o texto na tag inicial e na tag final. Atributo DOM com innerTexto mesmo.
• val()Ele pode definir e obter o valor do atributo value do item de formulário. Atributo DOM com valueo mesmo.

Exemplo:

a.html() 	  //取出a的html值  
a.html(val)   //让a的html值变为val
a.text()	  //取出a的text值  
a.text(val)   //让a的文本值变为val
a.val()  	  //取出a的val值（input） 
a.val(v)  	  //设置a的value值为v 
//val实战举例：
// 操作单选
$(":radio").val(["radio2"]);
// 批量操作多选框的选中状态 
$(":checkbox").val(["checkbox3","checkbox2"]); 
// 操作单选的下拉框选中状态 
$("#single").val(["sin2"]);
// 批量操作多选的下拉框选中状态 
$("#multiple").val(["mul2","mul3","mul4"]);

• attr()Você pode definir e obter o valor do atributo. Não é recomendado operar verificado, somente leitura, selecionado, desativado, etc.; O
  método attr também pode operar em atributos não padrão. Por exemplo, atributos personalizados: abc, edf.
• removeAttr('xxx') Remova o valor do atributo xxx.
• prop() Você pode definir e obter o valor do atributo, apenas as operações recomendadas são verificadas, somente leitura, selecionadas, desativadas, etc.
• removeProp('xxx') Remova o valor do atributo xxx.

Exemplo:

a.attr('name') //取出a的name值
a.attr("name","username") //把a的name值设置为username
a.attr("yushiwen","123")  //把a的自定义属性yushiwen的值设置为123
a.removeAttr('class')    //移除a的class属性
a.prop('id')  //取出a的id值
a.prop('id',"wh")  //设置a的id值为wh
a.removeProp('class')  //移除a的class属性

2. A diferença entre attr () e prop ():

Quando o valor do atributo marcado for obtido, se o atributo marcado estiver configurado, da seguinte forma:

attr () retornará verificado, prop () retornará verdadeiro, como segue:


quando o valor do atributo verificado for obtido, se o atributo verificado não for definido, como segue:

attr () retornará indefinido, prop () retornará false, como segue:


undefined in the end O que é? Funcionários pensam que retornar undefined é um erro, então devemos usar o método prop () ao operar a propriedade marcada.
Da mesma forma, os atributos readOnly, selected, disabled, etc. são os mesmos que os verificados, e o método prop () deve ser usado ao operar sobre eles.

3. Adição, exclusão e modificação de DOM

Inserção interna:

• appendTo() , Tal como a.appendTo (b) insere a no final do elemento filho de b e se torna o último elemento filho
• prependTo(), Como a.prependTo (b) insira a na frente de todos os elementos filho de b para se tornar o primeiro elemento filho

Inserção externa:

• insertAfter() , Como a.insertAfter (b) para obter ba
• insertBefore(), Como a.insertBefore (b) para obter ab

substituir:

• replaceWith(), Como a.replaceWith (b) substitua a por b, observe que aqui é substituir a por b
• replaceAll(), Como a.replaceAll (b) substitua todo b por um

excluir:

• remove() , Como a.remove (); exclua uma tag
• empty() , Como a.empty (); Limpe o conteúdo na tag a

2. Operação de estilo CSS

• css() Ler ou escrever atributos de estilo de elementos correspondentes
• addClass() Adicione um ou mais valores de classe ao elemento
• removeClass() Exclua o estilo, exclua o valor de classe do elemento; passe um ou mais valores de classe específicos, isso excluirá uma ou mais classes específicas; não passar o valor é para remover todos os valores de classe.
• toggleClass() Execute a operação de mudança de adicionar / excluir o elemento selecionado. A opção é excluir se ele tiver o tipo e adicioná-lo se não for.
• offset() Obtenha e defina as coordenadas do elemento.

Exemplo:

a.css('color') //取出a元素的color
a.css('color',"red") //设置a元素的color为red
//实战演示
//addClass() - 向被选元素添加一个或多个类，下述示例添加多个
$('div:first').addClass("redDiv blackDiv");
//removeClass() - 从被选元素删除一个或多个类 ，下述示例删除多个，也就是所有class
$('div:first').removeClass();
//toggleClass() - 对被选元素进行添加/删除类的切换操作 ,切换就是如果具有该类那么删除，如果没有那么添加上
$('div:first').toggleClass("redDiv");
//offset() - 返回第一个匹配元素相对于文档的位置。
var os = $('div:first').offset();
//注意通过offset获取到的是一个对象，这个对象有两个属性top表示顶边距，left表示左边距
alert("顶边距："+os.top+" 左边距："+os.left);

//调用offset设置元素位置时，也需要传递一个js对象，对象有两个属性top和left
//offset({ top: 10, left: 30 });
$('div:first').offset({
    
    
	 top:50,
	 left:60
 }); 

Três. Efeito jQuery

1. Efeito básico

• show() Mostrar elementos ocultos
• hide() Oculte os elementos visíveis.
• toggle() Oculte quando estiver visível e mostre quando não estiver visível.

2. Efeito deslizante

• slideDown() O método é usado para deslizar o elemento para baixo.
• slideUp() O método é usado para deslizar o elemento para cima.
• slideToggle()O método pode alternar entre os métodos slideDown () e slideUp (). Se os elementos deslizarem para baixo, slideToggle () pode deslizá-los para cima. Se os elementos deslizarem para cima, slideToggle () pode deslizá-los para baixo.

3. Fade in e fade out efeito

• fadeIn() Fade in (lentamente visível)
• fadeOut() Fade out (desaparecer lentamente)
• fadeTo()Modifique lentamente a transparência para o valor especificado dentro do tempo especificado. 0 transparente, 1 visível completo, 0,5 translúcido
• fadeToggle() Botão Fade in / out

4. Pontos comuns dos três conjuntos de métodos acima

Todos os métodos acima podem adicionar parâmetros.

• O primeiro parâmetro é a duração da animação, em milissegundos
• O segundo parâmetro é a função de retorno de chamada da animação (função chamada automaticamente após a conclusão da animação)

IV. $( function(){} )E window.onload = function(){}a diferença

1. Quando eles são acionados, respectivamente?

• $( function(){} )Depois que a página jQuery for carregada, ou seja, o kernel do navegador analisou as tags da página, e ela será executada imediatamente após a criação do objeto DOM.
• window.onload = function(){}É depois que a página js nativa é carregada, ou seja, além de esperar que o kernel do navegador analise a tag para criar um objeto DOM, mas também esperar que o conteúdo seja carregado quando a tag for exibida. (Etiqueta como iframe e img)

2. A ordem em que são acionados?

• $( function(){} )É executado após o carregamento da página jQuery
• window.onload = function(){}É depois que a página js nativa é carregada
• Em outras palavras, execute antes $( function(){} )dewindow.onload = function(){}

3. Quantas vezes eles executaram?

• $( function(){} )Depois que a página jQuery é carregada, todas as funções de função registradas são executadas em sequência.
• window.onload = function(){}Depois que a página js nativa for carregada, apenas a última função de atribuição será executada.

4. Demonstração do código:

Código:

<script type="text/javascript">

	$(function(){
    
    
		console.log(1);
	});

	$(document).ready(function () {
    
    
        console.log(2);
    });

    jQuery(function () {
    
    
        console.log(3);
    });

    window.$(function () {
    
    
        console.log(4);
    });

	window.jQuery(function () {
    
    
        console.log(5);
    });

	window.onload= function () {
    
    
        console.log(6);
    };

	onload = function (ev) {
    
    
        console.log(7);
	};


</script>

Resultado de saída:

Cinco. Operação de evento jQuery

• click()Ele pode ligar eventos de clique e acionar eventos de clique. Elementos adicionados posteriormente não vincularão eventos
• mouseover()O mouse se move para o evento. Elementos adicionados posteriormente não vincularão eventos
• mouseout()O mouse se move para fora do evento. Elementos adicionados posteriormente não vincularão eventos
• bind()Você pode vincular um ou mais eventos ao elemento de uma vez. Elementos adicionados posteriormente não vincularão eventos
• one()O uso é o mesmo que ligar. Mas o evento vinculado a um método responderá apenas uma vez.
• unbind() O oposto do método de vinculação, desvincule o evento
• live()Ele também é usado para vincular eventos. Ele pode ser usado para vincular eventos de todos os elementos correspondidos pelo seletor. Funciona mesmo se este elemento for criado dinamicamente mais tarde

Exemplo:

$("h5").click(function () {
    
     // 传function是绑定事件
	alert('h5单击事件 == click方法绑定')
});
$("h5").click(); // 不传function是触发事件
//鼠标移入
$("h5").mouseover(function () {
    
    
	console.log("你进来了")
});
//鼠标移出
$("h5").mouseout(function () {
    
    
console.log("你出去了")
});
// 给元素绑定事件，绑定事件可以链式操作
// jquery对象.事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 })
$(".head").click(function(){
    
    
	$(".content").toggle();
}).mouseover(function(){
    
    
	$(".content").toggle();
}); 
//jQuery提供的绑定方式：bind(type,[data],fn)函数把元素和事件绑定起来
//type表示要绑定的事件   [data]表示传入的数据   fn表示事件的处理方法
//bind(事件字符串,回调函数),后来添加的元素不会绑定事件
//使用bind()绑定多个事件   type可以接受多个事件类型，使用空格分割多个事件
$(".head").bind("click mouseover",function(){
    
    
	$(".content").toggle();
});
//one()只绑定一次,绑定的事件只会发生一次 one(type,[data],fn)函数把元素和事件绑定起来
//type表示要绑定的事件   [data]表示传入的数据   fn表示事件的处理方法
$(".head").one("click mouseover",function(){
    
    
	$(".content").toggle();
}); 
//live方法会为现在及以后添加的元素都绑定上相应的事件
$(".head").live("click",function(){
    
    
	$(".content").toggle();
});
$("#panel").before("<h5 class='head'>什么是jQuery?</h5>"); //之后动态添加元素

6. Bubbling de evento e objeto de evento javaScript

1. O borbulhar de eventos

• O que é bolha de evento? A bolha de
  evento significa que os elementos pai e filho ouvem o mesmo evento ao mesmo tempo. Quando o evento do elemento filho é disparado, o mesmo evento também é passado para o evento do elemento pai responder.
• Então, como evitar que o evento borbulhe?
  No corpo da função de evento do elemento filho, retorne falso; pode evitar o borbulhamento do evento.

2. Objeto de evento JavaScript

• O objeto de evento é um objeto javascript que encapsula as informações do evento acionado. Nossa principal preocupação é como obter esse objeto de evento javascript. E use.
• Como obter o objeto de evento javascript?
  Ao vincular um evento a um elemento, adicione um parâmetro à lista de parâmetros de função (evento) do evento. Este nome de parâmetro é usado para chamá-lo de evento. Este evento é o objeto de evento passado por javascript para o manipulador de eventos.

2.1 Javascript nativo para obter o objeto de evento

//原生javascript获取 事件对象
window.onload = function () {
    
    
	document.getElementById("areaDiv").onclick = function (event) {
    
    
		console.log(event);
	}
}

Resultado de saída:

2.2 código jQuery para obter o objeto de evento

//JQuery代码获取事件对象
$(function () {
    
     
	$("#areaDiv").click(function (event) {
    
    
		console.log(event);
	});
});

Você pode ver que o conteúdo dos dois é semelhante, exceto que o objeto de evento de aquisição de código jQuery envolve o objeto de evento de aquisição javascript nativo.

2.3 Exemplos de objetos de evento

Use bind para vincular a mesma função a vários eventos ao mesmo tempo. Como obter qual evento é a operação atual

$("#areaDiv").bind("mouseover mouseout",function (event){
    
    
	if (event.type == "mouseover") {
    
    
		console.log("鼠标移入");
	} else if (event.type == "mouseout") {
    
    
		console.log("鼠标移出");
	}
});