Résumé des points de connaissances JavaScript : sélecteurs communs et sélecteurs de filtres jQuery

Recommandations d'apprentissage gratuites associées : javascript(vidéo)

Sélecteurs communs et sélecteurs de filtres jQuery

Comment utiliser
Téléchargez la bibliothèque de fichiers Jquery et enregistrez-la dans le dossier js de le site , introduit à l'aide de la balise script, placé dans la balise head
window.οnlοad=function() peut être simplifié en $(function)

window.οnlοad=function(){ … événement de chargement de page}
$(function){ ...événement de chargement de page}
Ce qui suit est une manière simplifiée de ce qui précède

le sélecteur de jQuery

1. Sélecteur de base

$("#id")  ：id选择器 
	$("p") ：p选择器	$(".class") ：类选择器	$(".class,.class2,#id") ：组合选择器

2. Sélecteur hiérarchique

$("#id>.class") ：子元素选择器$("#id .class") ：后代选择器$("#id+.class") ：紧邻下一个元素选择器$("#id~.class") ：兄弟元素选择器

3. Sélecteur de formulaire

$(":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元素

Filtres jQuery pour
Filtres à utiliser : Démarrer

1. Sélecteur de filtre de base

$("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") ：正在执行动画效果的元素

2. Sélecteur de filtre de contenu

$("li:contains(text)") ：含有文本内容为text的元素$("li::empty")：获取不包含后代元素或者文本的空元素$("li::has(selector)")：获取含有后代元素为selector的元素$("li::parent")：获取含有后代元素或者文本的非空元素

3. Filtre de visibilité

$("li:hidden") ：隐藏li元素$("li:visible") ：显示li元素

4. Sélecteur de filtre d'attribut

$("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']")：多属性选过滤，同时满足两个属性的条件的元素

5. Sélecteur de filtre d'attribut d'objet de formulaire

$("input:enabled") ：选取可用的表单元素$("input:disabled") ：选取不可用的表单元素$("input:checked") ：选取被选中是input元素$("input:selected") ：选取被选中的option元素

jQuery exploite le DOM

Générer un objet jquery

var obj=$("#content")

Obtenir ou définir le code HTML à l'intérieur de l'élément

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

Conversion d'objet DOM en jQuery object

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

jQuery utilise des éléments de manipulation DOM

Syntaxe d'attribut unique jQuery object.css(name,value) : le nom est le nom du style, la valeur est le la valeur de style définit plusieurs attributs en même temps. Syntaxe
jQuery object.css{(name:value,name:value,name:value...)} : name est le nom du style, value est la valeur du style

jQuery utilise des éléments de manipulation DOM pour ajouter des styles de classe, supprimer des styles de classe et changer de style de classe

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

jQuery utilise DOM pour manipuler le contenu des éléments et les opérations de valeur

jQuery object.html() : utilisé pour obtenir le contenu HTML du premier élément correspondant ou contenu texte
jQuery object.html(content) : utilisé pour définir le contenu HTML ou le contenu texte de tous les éléments correspondants
jQuery object.text() : utilisé pour obtenir le texte contenu de tous les éléments correspondants
objet jQuery. text(content) : utilisé pour définir le contenu du texte de tous les éléments correspondants
objet jQuery.val() : utilisé pour obtenir ou définir la valeur de l'élément
jQuery object.attr(name) : utilisé pour obtenir la valeur d'attribut de l'élément
jQuery object.attr(name, value) : utilisé pour définir la valeur d'attribut de l'élément
jQuery object.attr(name, function ( index)) : lie la fonction function, à travers laquelle la valeur est renvoyée comme attribut de l'élément Value
jQuery object.removeAttr(name) : valeur d'attribut utilisée pour supprimer des éléments

jQuery utilise le nœud d'opération DOM
$(html) : Créer un objet html jQuery

eg:$("<a></a>").appendTo(p)

a.append(b) : ajouter b

eg:$("ul").append("li"):a里添加b

a.appendTo(b) : ajoutez a à b

eg:$li.appendTo("ul"):a添加到b

a.prepend(b ) : ajoutez b dans a

eg:	$("ul").prependTo("li")

a.prependTo(b) : ajoutez a à b

eg:	$li.prependTo("ul")

a. after(b) : Insérer b dans After a

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

a.insertAfter(b) : Insérer a après b

eg:	$p.insertAfter("ul")

a.before(b) : Insérer b avant a

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

a .insertBefore(b) : Insérer a avant b

eg:	$p.insertBefore("ul")

a.replaceWith(b) : Remplacer a par b

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

a.replaceAll(b) : Remplacer a par b

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

a.clon(ture) : Copier a

eg:	$("ol").clon(ture)

a.remove(a) : Supprimer a

eg:	$("ul li").remove()//删除ul下的所有li
	$("ul li").remove("li li:last")//删除ul下的最后一个li

jQuery object.each (callback) : Traverser les éléments

 
	
		<meta>
		<title></title>
		<script></script>
		<script>
			$(function(){
				$("input[type=&#39;button&#39;]"). click(function(){
					$("img").each(function(index, element){
						//jQuery对象
						//$(this).css("border","2px solid red");
						//$(this).attr("title"," 第 "+(index+1)+"副风景画");
						//DOM对象
						this.style.border="2px solid red";
						this.title="第"+(index+1)+"幅风景画";
					});
				});
			});

		</script>
	<p>
		<img  alt="Résumé des points de connaissances JavaScript : sélecteurs communs et sélecteurs de filtres jQuery" >   
		<img  alt="Résumé des points de connaissances JavaScript : sélecteurs communs et sélecteurs de filtres jQuery" >
	</p>
	<input>	

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!