Heim > Web-Frontend > js-Tutorial > Zusammenfassung der JavaScript-Wissenspunkte: allgemeine jQuery-Selektoren und Filterselektoren

Zusammenfassung der JavaScript-Wissenspunkte: allgemeine jQuery-Selektoren und Filterselektoren

coldplay.xixi
Freigeben: 2021-01-18 17:53:08
nach vorne
2289 Leute haben es durchsucht

Zusammenfassung der JavaScript-Wissenspunkte: allgemeine jQuery-Selektoren und Filterselektoren

Verwandte kostenlose Lernempfehlungen: Javascript(Video)

JQuery-Gemeinsame Selektoren und Filterselektoren

Verwendung
Laden Sie den Jquer herunter y-Dateibibliothek, vor Ort speichern Verwenden Sie im js-Ordner das script-Tag, um es einzuführen, und platzieren Sie es im Head-Tag.
window.οnlοad=function() kann zu $(function)

window.οnlοad=function(){ … Laden der Seite vereinfacht werden Ereignis}
$ (function) {... Seite ladenereignis}
Im Folgenden ist eine vereinfachte Methode des Selektors der obigen

jQuery -Selector

  1. -Selector
$("#id")  :id选择器 
	$("p") :p选择器	$(".class") :类选择器	$(".class,.class2,#id") :组合选择器
Nach dem Login kopieren
  1. hierarchical Selector
$("#id>.class") :子元素选择器$("#id .class") :后代选择器$("#id+.class") :紧邻下一个元素选择器$("#id~.class") :兄弟元素选择器
Nach dem Login kopieren
  1. Form Selektor
$(":input")//获取inpu。textarea,select,button元素$(":text")//所有的单行文本框$(":text")等价于$("[type=text]"),推荐使用$("input:text")效率更高$(":password") //获取type=password的input元素$(":radio") //获取type=radio的input元素$(":checkbox") //获取type=checkbox的input元素$(":submit") //获取type=submit的input元素$(":reset") //获取type=reset的input元素$(":button") //获取type=button的input元素$(":file") //获取type=file的input元素$(":image") //获取type=image的input元素
Nach dem Login kopieren

jQuery-Filter
Filterverwendung: Anfang

  1. Grundlegender Filterselektor
$("Ii:first") :第一个li 	
$("li:last") :最后一个li   
$("li:even") :挑选 下标为偶数的li  
$("li:odd") :挑选 下标为奇数的li  
$("Ii:eq(4)") :下标等 于4的li(第五个li元素)$("Ii:gt(2)") :下标大于 2的li  
$("li:lt(2)") :下标小于 2的li$("Ii:not(#runoob)") :挑选除id="runoob"以外的所有li$("Ii:header") :所有标题元素$("Ii:animated") :正在执行动画效果的元素
Nach dem Login kopieren
  1. Inhaltsfilterselektor
$("li:contains(text)") :含有文本内容为text的元素$("li::empty"):获取不包含后代元素或者文本的空元素$("li::has(selector)"):获取含有后代元素为selector的元素$("li::parent"):获取含有后代元素或者文本的非空元素
Nach dem Login kopieren
  1. Sichtbarkeit. Filter
$("li:hidden") :隐藏li元素$("li:visible") :显示li元素
Nach dem Login kopieren
  1. Attributfilterauswahl
$("li[title]") :获取所有属性包括title的li元素$("p[id^='qq']") :id属性值以qq开头的p元素$("p[id*='bb'") :id属性值包含bb的p元素$("li[title=text2]") :li属性值等于text2的元素$("p[id!='aa'") :id属性值不等于aa的p元素$("p[id$='z']") :id 属性值以zz结尾的p$("input[id][name$='man']"):多属性选过滤,同时满足两个属性的条件的元素
Nach dem Login kopieren
  1. Formularobjekt Attributfilterselektor
$("input:enabled") :选取可用的表单元素$("input:disabled") :选取不可用的表单元素$("input:checked") :选取被选中是input元素$("input:selected") :选取被选中的option元素
Nach dem Login kopieren

jQuery betreibt DOM

JQuery-Objekt generieren

var obj=$("#content")
Nach dem Login kopieren

HTML-Code innerhalb des Elements abrufen oder festlegen

var obj=$("#content");
obj.html("jQuery对象")
Nach dem Login kopieren

DOM-Objekt wird in jQuery-Objekt konvertiert

<script type="text/javascript">
		var $text=$(document.getElementsByTagName("li"));
		alert($text.eq(0).html());//获取第一个li里的值
		alert($text.eq(1).html());//获取第二个li里的值</script>
Nach dem Login kopieren

jQuery verwendet DOM, um Elemente zu manipulieren

Einzelattributsyntax jQuery object.css(name,value): Name ist der Stilname, value ist der Stilwert und legt mehrere Attribute gleichzeitig fest
jQuery object.css{(name:value,name:value, name:value …)}: name ist der Stilname, value ist der Stilwert

jQuery verwendet DOM-Manipulationselemente, um Klassenstile hinzuzufügen, Klassenstile zu löschen und verschiedene Klassenstile zu wechseln

jQuery object.addaClass(class)
jQuery object.removeaClass(class)
jQuery object.toggleClass(class)

jQuery verwendet DOM, um Elementinhalte und Wertoperationen zu manipulieren.

jQuery object.html(): wird verwendet, um den HTML-Inhalt oder Textinhalt des zu erhalten erstes passendes Element
jQuery-Objekt. html(content): wird verwendet, um den HTML-Inhalt oder Textinhalt aller passenden Elemente festzulegen
jQuery object.text(): wird verwendet, um den Textinhalt aller übereinstimmenden Elemente abzurufen
jQuery object.text(content ): wird verwendet, um den Inhalt aller übereinstimmenden Elemente festzulegen. Textinhalt
jQuery object.val(): wird verwendet, um den Wert des Elements abzurufen oder festzulegen
jQuery object.attr(name): wird verwendet, um den Attributwert des Elements abzurufen
jQuery object.attr(name, value): wird verwendet, um den Attributwert des Elements festzulegen
jQuery object.attr(name, function(index)): Bindefunktionsfunktion, über die die Funktion den Wert als Attributwert des Elements zurückgibt
jQuery object.removeAttr(name): Wird verwendet, um den Attributwert des Elements zu löschen. Fügen Sie b zu a

eg:$("<a href=&#39;http://www.baidu.com&#39;></a>").appendTo(p)
Nach dem Login kopieren
a.appendTo(b) hinzu: Fügen Sie a zu b

eg:$("ul").append("li"):a里添加b
Nach dem Login kopieren
a hinzu .after(b): Fügen Sie b nach a
eg:$li.appendTo("ul"):a添加到b
Nach dem Login kopieren

a.insertAfter(b) ein: Fügen Sie a nach b
eg:	$("ul").prependTo("li")
Nach dem Login kopieren

a ein.before(b): Fügen Sie b vor a

eg:	$li.prependTo("ul")
Nach dem Login kopieren

a.insertBefore(b) ein: Fügen Sie a ein vor b

eg:	$("ul").after($p)
Nach dem Login kopieren

a .replaceWith(b): Ersetze a durch b

eg:	$p.insertAfter("ul")
Nach dem Login kopieren

a.replaceAll(b): Ersetze a durch b

eg:	$("ul").before($p)
Nach dem Login kopieren

a.clon(ture): Kopiere a

eg:	$p.insertBefore("ul")
Nach dem Login kopieren

a.remove(a ): Ein

eg:	$("li").replaceWith("ol")
Nach dem Login kopieren

jQuery-Objekt löschen.each (Rückruf): Elemente durchlaufen

eg:	$("ol").replaceAll("li")
Nach dem Login kopieren

Animation und Spezialeffekte

show(): Anzeigen

hide(): Ausblenden

toggle(): Umschalten

fadeIn(): Einblenden

fadeOut(): Ausblenden

fadeToggle(): Ausblenden umschalten
  • fadeTo(): ​​​​Fade-Transparenzwert angeben
  • slideDown(): Einblenden
  • slideUp(): Schieben out
  • slideToggle(): Ein- und Ausschieben umschalten
  • animate(): Benutzerdefinierte Animation
  • stop(): Stoppen
  • Bewegungspositionscode wie gezeigt:
  • Benutzerdefinierter Animationscode wie gezeigt

Das obige ist der detaillierte Inhalt vonZusammenfassung der JavaScript-Wissenspunkte: allgemeine jQuery-Selektoren und Filterselektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage