suchen

Heim >Web-Frontend >js-Tutorial >Ausführliche Erläuterung der grundlegenden Beispiele für die Verwendung von Selektoren in Jquery_jquery

Ausführliche Erläuterung der grundlegenden Beispiele für die Verwendung von Selektoren in Jquery_jquery

WBOY
WBOYOriginal
2016-05-16 15:58:221083Durchsuche

Die Beispiele in diesem Artikel beschreiben die grundlegende Verwendung von Selektoren in Jquery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery 基本选择器</title>
<style type="text/css">
.myDiv{width:100px;background-color:Blue;}      
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//JQuery选择器用于查找满足条件的元素。
//基本选择器是JQuery中最常用的选择器,也是最简单的选择器,
//它通过元素id,class和tagName来查找dom元素
//1.$("#id") : id选择器,document.getElementById("id");
//2.$("div") :元素选择器 document.getElementByTagName("div");
//3.$(".myClass") : 类选择器,返回所有class="myClass"的元素
//4.$("*") : 返回所有元素,多用于结合上下文搜索
//5.$("div,span,p.myClass") : 多条件选择器,返回所有查到的元素
$(function () {
  //-----1.id选择器
  //var $divMain = $("#main");
  //alert($divMain.get(0));
  //-----2.元素选择器
  //var $divs = $("div");
  //for (var i = 0; i < $divs.length; i++) {
  //  alert($divs.get(i).innerHTML);
  //}
  //-----3.类选择器
  //var $divs = $(".myDiv");
  //for (var i = 0; i < $divs.length; i++) {
  //  alert($divs.get(i).innerHTML);
  //}
  //-----4.返回所有元素
  //var $Elements = $("*");
  //for (var i = 0; i < $Elements.length; i++) {
  //  alert($Elements.get(i).innerHTML);
  //}
  //-----5.多条件选择器
  var $MyObjs = $("div,input,span");
  for (var i = 0; i < $MyObjs.length; i++) {
    alert($MyObjs.get(i).id);
  }
});
</script>
</head>
<body>
<input id="button1" type="button" value="我是button1" />
<div id="main">
<div id="div1" class="myDiv">我是div1
<span id="span1">我是span1</span>
</div>
<div id="div2" class="myDiv">我是div2
<span id="span2">我是span2</span>
</div>
</div>
<input id="button2" type="button" value="我是button2" />
</body>
</html>

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：
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
Vorheriger Artikel：Bestätigungsfeld mit dem JQuery-Boxy-Plug-in in AspNet_jqueryNächster Artikel：Bestätigungsfeld mit dem JQuery-Boxy-Plug-in in AspNet_jquery

In Verbindung stehende Artikel

Mehr sehen