Jquery基本选择器

最新推荐文章于 2025-09-10 19:44:49 发布

原创最新推荐文章于 2025-09-10 19:44:49 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xhtml #javascript #ViewUI

Jquery 专栏收录该内容

2 篇文章

订阅专栏

1.JavaScirpt对象的innerText属性相当于Jquery对象的text()方法：它的作用是输出标签体里面的文本内容。

JavaScirpt对象的innerHtml属性相当于Jquery对象的html()方法：它的作用是输出标签体里面的所有内容。

<head>
<script type="text/javascript" src="jquery-1.4.4.js"></script>

	<script type="text/javascript">

    $(document).ready(function()
	{
		alert($("#test").html());//输出“<b>google</b>”
                          //alert($("#test").text())  //输出“google”
	});

	</script>


 </head>

 <body>
  
<a id="test" href="http://www.google.com"><b>google</b></a>

2.Jquery的基本选择器：

1）$(“#id”)，根据id值找到匹配的元素，最多只返回一个元素（如果该元素存在），如果不存在，则返回一个空的jQuery对象。

2）$(“.class”)，根据css的class属性来返回一个集合，无论该css类是否真的存在，只要定义在元素中就能被jQuery查询到。

实例：

<!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" />

 <link rel="stylesheet" type="text/css" href="style.css" /> 

  <script type="text/javascript" src="jquery-1.4.4.js"></script>

  <script type="text/javascript">

  $(document).ready(function()
  {
	$("#button1").click(function()
	{
		$("#one").css("background", "red");
	});

    $("#button2").click(function()
	{
		$(".mini").css("background", "green");
	});

    $("#button3").click(function()
	{
		$("div").css("background", "orange");
	});

	$("#button4").click(function()
	{
		$("*").css("background", "blue");
	});

	$("#button5").click(function()
	{
		$("span, #two, .mini").css("background", "pink");
	});


  });
</script>

</head>
<body>

 <h3>基本选择器.</h3>
 
 <input type="button" value="将id为one的元素的背景颜色设为红色" id="button1">
 <input type="button" value="把class为mini的所有元素的背景颜色设为绿色" id="button2">
 <input type="button" value="把所有div元素的背景颜色设为橘色" id="button3">
 <input type="button" value="把所有元素的背景颜色设为蓝色" id="button4">
 <input type="button" value="把span元素、id为two、class为mini的元素的背景颜色设为粉色" id="button5">




   <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
	 id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"></div>
  </div>



  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>
  
  <div class="hide">class为"hide"的div</div>
 
  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>

</body>
</html>

Style.css:

div,span,p {
    width:140px;
    height:140px;
    margin:5px;
    background:#aaa;
	border:#000 1px solid;
    float:left;
    font-size:17px;
    font-family:Verdana;
  }
  div.mini { 
    width:55px;
    height:55px;
    background-color: #aaa;
    font-size:12px;
  }
  div.hide { 
    display:none;
  }