JQuery元素选择器简介

最新推荐文章于 2024-07-12 17:29:49 发布

NationSoftware

最新推荐文章于 2024-07-12 17:29:49 发布

阅读量147

点赞数

分类专栏： JavaScript /JS框架/CSS/AJAX 文章标签： jQuery CSS HTML JavaScript J# ViewUI

JavaScript /JS框架/CSS/AJAX 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JQuery选择器（$( )）可以用来选择，创建DOM元素。一般来说，过去我们使用JS去控制页面的DOM，比如下面这段JS：

<script type="text/javascript"> 
function test()
{
  var frm = document.form1;
  var tb = document.getElementById("tb1");    //获取表格对象
  var trs = tb.getElementsByTagName("tr");        //获取所有的<tr>
  //等等
}
</script>

使用WINDOW.document对象的getElementById或getElementsByTagName去获取页面里的DOM元素，而现在，我们可以使用$( )，让一切变的简洁与简单。

$( )使用类似CSS的语法格式，比如：

$("li") 选中页面中所有包含li元素的DOM。等同的，$("a")。选中所有连接。

或者我们可以根据DOM的ID来进行选择，比如：

$("#someDiv")，我们责选中了以下DIV：

<div id="someDiv">我是DIV，ID叫someDiv <tt>someDiv</tt></div>

我们还可以使用更强大的选择器，比如：

$(".someDiv")或$("DomName.className")如：$("ul.myList")我们可以选中拥有CSS类someDiv的元素。

比如我们还可以对以下HTML代码：

<div id="someDiv">我是DIV，ID叫someDiv <tt>someDiv</tt></div>

这样选择：$("#someDiv tt")，我们就可以取得 <tt>someDiv</tt> 这个DOM元素。

还可以获取Form表单，如有下HTML：

<form action="" method="put" onsubmit="return false;">
  <div>
    <label>Text:</label> <input type="text" id="aTextField" name="someTextField"/>
  </div>

  <button type="submit" id="submitButton">Submit</button>
</form>

用选择器：$("form #aTextField") 获取 <input type="text" id="aTextField" name="someTextField"/> 。

JQuery选择器非常强大，包括子选择器，容器选择器，特性选择器，而且JQuery选择器本身附带了许多不同的方法，我们可以查询JQuery文档。

JQuery的子选择器，一般来说，有如下HTML：

<ul class="myList">
  <li><a href="http://jquery.com">jQuery supports</a>
    <ul>
      <li><a href="css1">CSS1</a></li>
      <li><a href="css2">CSS2</a></li>
      <li><a href="css3">CSS3</a></li>
      <li>Basic XPath</li>
    </ul>
  </li>
  <li>jQuery also supports
    <ul>
      <li>Custom selectors</li>
      <li>Form selectors</li>
    </ul>
  </li>
</ul>

如果我们要选择 <li><a href="css1">CSS1</a></li> 这个DOM元素，怎么办？我们这样使用JQuery选择器：$(".myList li ul li a")，发现我们会选中所有ul下的li。这个时候我们可以使用子选择器来选定第一个li。如： $(".myList > li > a")，这里使用了符号">"。

而特性选择器：如$(form[method])会选择所有form中含有method的form。

选择器还可以按位置来选择，比如：$("form div label:first")，它可以帮我们选择第一个label。$("form div label:odd")选中为奇数的label。或者偶数$("form div label:even")的label。最后一个label，$(form div label:last)。

包括我们还可以使用$(input[type=radio]:checked)，来选中radio被选中的元素。$(input[type=checkbox]:checked)来选中已经被选中的checkbox。

$(#languages tbody tr td:eq(2))这个选择器会选择第3个td。从0开始：

eq(n)，选择第n个DOM元素；gt(n)，选择除n以外的所有元素；lt(n)，选择除n以外之前的所有DOM元素。

包括可以让JQUERY创建一个新页面：


<html> 
  <head> 
    <title></title> 
    <script type="text/javascript" src="scripts/jquery-1.2.1.js"></script> 


    <script type="text/javascript"> 
     $(function(){
	  //add one div
	  $("<div class='foo'>I have foo!</div><div>I don 't</div>").appendTo("#someParentDiv");
	  //add two div
	  $("<div>Hi,I'm 2....OK?</div>").appendTo("#hello");
	 });

	 $(function(){
		$("#j").html("DOM元素DIV的总和为："+$("div").size());
	 });


    </script> 


  </head> 

  <body> 
    <div id="j">Div 1</div> 
    <div id="someParentDiv">Div 2</div> 
    <div id="hello">Div 3</div>
    <div id="gg">hi...gogo!</div>

  </body> 
</html>

一般来说，我们选择到了DOM元素的目的是为了取得列如TEXT这些元素的值，在JQUERY中我们可以这样获得：

/*获得TEXT.AREATEXT的值*/

var textval = $("#text_id").attr("value");//或者

var textval = $("#text_id").val();

/*获取单选按钮的值*/

var valradio = $("input[@type=radio][@checked]").val();

/*获取复选框的值*/

var checkboxval = $("#checkbox_id").attr("value")；

/*获取下拉列表中所有的值*/

var selectval = $('#select_id').val();

如：

<html> 
  <head> 
    <title></title> 
    <script type="text/javascript" src="scripts/jquery-1.2.1.js"></script> 


    <script type="text/javascript"> 

    function x(){
	var x=$("#aTextField").attr("value");
	 alert(x);
	}

    </script> 
</head> 

  <body> 
    <div id="j">Div 1</div> 
	<input type="text" id="aTextField" onclick="x()"/>
  </body> 
</html>