Zusammenfassung häufig verwendeter JQuery-Funktionen und function_jquery

1. Funktion zum Abschluss des Ladens von Dokumenten

$(document).ready(function(){
alert("开始了");
});

2. CSS-Klassen hinzufügen/entfernen

$("#some-id").addClass("NewClassName");
$("#some-id").removeClass("ClassNameToBeRemoved");

3. Selektoren nutzen die Funktionen von CSS- und Xpath-Selektoren (XML Path Language) sowie die einzigartigen Selektoren von jQuery

3.1 Häufig verwendet:

1. Wählen Sie alle Absätze im Dokument basierend auf dem Tag-Namen aus: $('p')

2. Gemäß ID: $("#some-id")

3. Klasse: $('.some-class')

3.2 Verwendung von CSS-Selektoren:

$("#some-id > li") 选择特定id下的所有子li元素
$("#some-id li:not(.horizontal)") 伪类选择，特定id下所有没有.horizontal 类的li元素

3.3 Verwendung von XPath-Selektoren:

Attributauswahl: $("a[@title]") wählt alle Links mit Titelattribut aus

$("div[ol]") wählt alle div-Elemente aus, die ein ol-Element enthalten

$('a[@href^="mailto:%22]') wählt alle href-Attribute [@href] aus und der Attributwert beginnt mit mailto^="mailto" (^ identifiziert die Zeichenfolge, die mit $ String Knot beginnt

Schwanz, * stellt eine beliebige Position in der Zeichenfolge dar)

$('a[@href$=".pdf"]') wählt alle Links mit href-Attribut aus und der Attributwert endet mit .pdf

$('a[@href*="mysite.com"]') wählt alle Links aus, bei denen mysite.com irgendwo in href erscheint (einschließlich mysite.com)

3.4JQuery benutzerdefinierter Selektor (Filter, alle Elemente aus der ausgewählten Ergebnismenge herausfiltern, die eine bestimmte Bedingung erfüllen), ähnlich dem CSS-Pseudoklassenselektor, beginnend mit „:“

1.$('div.horizontal:eq(1)') wählt das 2. Element in der div-Sammlung mit der Klasse horizontal aus

$('div:nth-child(1)') wählt alle Divs aus, die das erste untergeordnete Element seines übergeordneten Elements sind

2. Benutzerdefinierte Selektoren: odd und :even, um ungerade und gerade Zeilen auszuwählen

$('tr:odd').addClass('odd'); //Filtern und wählen Sie ungerade Elemente in der Ergebnismenge aus

$('tr:even').addClass('even'); //Gerade Elemente in der Ergebnismenge filtern und auswählen

3. Benutzerdefinierter Selektor: enthält()

$('td:contains("Henry")') wählt alle Tabellen aus, die den Henry-String enthalten

3.5JQuery-Auswahlfunktion

1.$('#some-id').parent() wählt das übergeordnete Element eines bestimmten Elements aus

2.$('#some-id').next() wählt das nächstnächste Geschwisterelement eines bestimmten Elements aus

3.$('#some-id').siblings() wählt alle Geschwisterelemente eines bestimmten Elements aus

4.$('#some-id').find('.some-class') wählt alle Elemente aus, die eine bestimmte Klasse unter einem bestimmten Element enthalten

5.$('#some-id').find('td').not(':contains("Henry")') Wählen Sie alle Elemente aus, deren Tabelleninhalt unter einem bestimmten Element nicht Henry enthält

5.$('#some-id').find('td').not(':contains("Henry")').end() .end() bedeutet, zum letzten .find zurückzukehren ( ) Element bei

3.6 Greifen Sie auf DOM-Elemente zu, verwenden Sie die Methode get(), um vom ausgewählten JQuery-Objekt abzurufen, und entfernen Sie die JQuery-Verpackung

var myTag = $('#some-id').get(0).tagName;
var myTag = $('#some-id')[0].tagName; //与上面的等效

4. Ereignisse (alle Ereignisse sind an ein bestimmtes Element gebunden)

4.1 Bindungsereignisse

$("#some-id").bind("click", function(){ })
$("#some-id").unbind("click", bindedFunctionName); //移除已绑定的事件，前提是绑定的函数有名称（不是匿名函数）
$("#some-id").click(function(){ })

4.2 Zusammengesetztes Funktionsbindungsereignis

$("#some-id").toggle(function(){ } ,function(){ }); //交替执行
$(“#some-id”).toggleClass("hidden"); // 添加/删除类交替进行
$("#some-id").hover(function(){ }, function(){ }); //鼠标进入元素时执行第一个函数，离开元素时执行第二个函数
$("#some-id").one("click", functionName); //只需触发一次，随后便立即解除绑定

4.3 Imitieren Sie Benutzer, um ein Ereignis auszulösen

$("#some-id").trigger("click"); //Das Klickereignis eines bestimmten Elements auslösen

5. Effekte zu Elementen hinzufügen

5.1 CSS-Stilattribute lesen oder festlegen

$("#some-id").css("property") //Stilwert lesen
$('#some-id').css('property', 'value') //Legen Sie einen Stilwert fest
$('#some-id').css({property1: 'value1', property2: 'value2'}) //Mehrere Stilattribute festlegen

5.2 Schriftgröße ändern

$(document).ready({
$('#button-id').click(function(){
var currentSize = $('#text-id').css('fontSize'); //获取字体大小，如30px
var num = parseFloat(currentSize, 10); //将值转为浮点数，.parseFloat( , )为javascript内置函数，这里是转为10进制的浮点数
var unit = currentSize.slice(-2); //获取单位名称，如px，.slice()是javascript内置函数，获取字符串指从定位置开始的子字符串，-2表示倒数两个字符
num *= 1.5;
$('text-id').css('fontSize', num + unit); //设置字体大小样式
});
});

5.3隐藏和显示

$('#some-id').show(); //无效果，会自动记录原来的display属性值（如：block, inline），再回复display值
$('#some-id').hide(); //无效果，等效于：$('#some-id').css('display', 'none'); 隐藏元素，不保留物理位置
大小、透明度逐渐变化的显示或隐藏

$('#some-id').show('slow'); //指定显示速度，在指定时间内元素的高、宽、不透明度逐渐增加到属性值，有：slow是0.6秒，normal是0.4秒，fast是0.2秒，或者直接填入毫秒数
$('#some-id').hide(800); //与.show()指定速度显示一样，指定时间内高、宽、不透明度逐渐减小到0

淡入淡出

$('some-id').fadeIn('slow'); //指定时间内不透明度属性值由0增加到1
$('some-id').fadeOut('slow'); //指定时间内不透明度值由1减小到0

5.4构建具有动画效果的show

主要调用.animate()方法，其有4个参数：包含样式属性及值的映射；可选的速度参数；可选的缓动类型；可选的回调函数；

1.并发显示多个效果

$('#some-id').animate({height: 'show', width: 'show', opacity: 'show'}, 'slow', function(){ alert('动画显示元素');});
$('div .button').animate({left:600, height:44}, 'slow'); //水平位置从0移动到600，高度由0增加到44

2.排队显示多个效果，级联多个.animate()，一个效果显示完了再显示下一个效果

$('#some-id').animate({left:600}, 'slow').animate({height: 44}, 'slow');
6DOM操作

6.1属性操作

$('#some-id').attr('property'); //获取属性
$('#some-id').attr('property','value'); //设置属性
$('#some-id').attr({'property1': 'value1', 'property2': 'value2'}); //设置多个属性
修改一个段落中所有链接，并给每个链接附上新的id号
$('div p .content a').each(function(index){
$(this).attr({
'rel': 'external',
'id': 'link_' + index
});
});
// ********* JQuery的.each()类似一个迭代器，给其传递的参数index类似一个计数器 *********

6.2插入新元素

1.将元素插入到其他元素前面：.insertBefore()和.before()

2.将元素插入到其他元素后面：.insertAfter()和after()

3.将元素插入到其他元素内部或后面（相当于追加一个元素）：appendTo()和append()

4.将元素插入到其他元素内部或前面（相当于追加一个元素）：prependTo()和prepend()

6.3包装元素，将元素包装到其他元素中 .wrap();

$('#some-id').wrap('

'); // 将某一特定元素包装到li中，即在特定元素外围添加一个包围元素

6.4复制元素 .clone()

1.$('#some-id').clone().appendTo($('body'));

2.复制深度，当传入false参数时，只复制匹配上的元素，其内部的其他元素不复制

$('#some-id').clone(false)

注意：.clone()方法不会复制元素中的事件

6.5移除匹配元素中的元素，类似清空元素

$('#some-id').empty();

6.6从DOM中移除匹配的元素及其后代元素

$('#some-id').remove();

有关常用的JQuery函数及功能小结 小编就给大家介绍到这里，希望对大家有所帮助！