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
coldplay.xixinach vorne
2021-01-18 17:53:082288Durchsuche

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") :组合选择器
  1. hierarchical Selector
$("#id>.class") :子元素选择器$("#id .class") :后代选择器$("#id+.class") :紧邻下一个元素选择器$("#id~.class") :兄弟元素选择器
  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元素

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") :正在执行动画效果的元素
  1. Inhaltsfilterselektor
$("li:contains(text)") :含有文本内容为text的元素$("li::empty"):获取不包含后代元素或者文本的空元素$("li::has(selector)"):获取含有后代元素为selector的元素$("li::parent"):获取含有后代元素或者文本的非空元素
  1. Sichtbarkeit. Filter
$("li:hidden") :隐藏li元素$("li:visible") :显示li元素
  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']"):多属性选过滤,同时满足两个属性的条件的元素
  1. Formularobjekt Attributfilterselektor
$("input:enabled") :选取可用的表单元素$("input:disabled") :选取不可用的表单元素$("input:checked") :选取被选中是input元素$("input:selected") :选取被选中的option元素

jQuery betreibt DOM

JQuery-Objekt generieren

var obj=$("#content")

HTML-Code innerhalb des Elements abrufen oder festlegen

var obj=$("#content");
obj.html("jQuery对象")

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>

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)
a.appendTo(b) hinzu: Fügen Sie a zu b

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

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

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

eg:	$li.prependTo("ul")

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

eg:	$("ul").after($p)

a .replaceWith(b): Ersetze a durch b

eg:	$p.insertAfter("ul")

a.replaceAll(b): Ersetze a durch b

eg:	$("ul").before($p)

a.clon(ture): Kopiere a

eg:	$p.insertBefore("ul")

a.remove(a ): Ein

eg:	$("li").replaceWith("ol")

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

eg:	$("ol").replaceAll("li")

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!

Stellungnahme:
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen