jQuery概述

jQuery是一个优秀的JavaScript框架

 

  主要提供如下功能

　 访问页面框架的局部（获取页面节点）

　 修改页面的表现（类似css）

　 更改页面的内容

　 响应事件

　 为页面添加动画（自定义参数）

　 与服务器异步交互（与Ajax交互）

　 简化常用的JavaScript操作（例如数组操作）

举例：隔行变色的表格

　 CSS的实现方法(缺点：不易动态更改)

       

<tr class="altrow">  <!-- 偶数行 -->
    <td></td>
    <td></td>
</tr>

<tr>  <!-- 奇数行 -->
    <td></td>
    <td></td>
</tr>


#altrow{
background-color:#a5e5aa;
}

 

 

　 JavaScript的实现方法(js代码多，复杂)

<table id="oTable">
<tr > 
    <td></td>
    <td></td>
</tr>

<tr>  
    <td></td>
    <td></td>
</tr>

</table>

<script language="javascript">

window.onload=function(){
var oTable=documnet.getElementById("oTable");
for (var i=0;i<oTable.rows.length;i++)
   if(i%2==0)   //偶数行时
    oTable.rows[i].className="altrow";
}

</script>

#altrow{
background-color:#a5e5aa;
}

 

 

 

　 jQuery的实现方法（代码简单）

<table>
<tr > 
    <td></td>
    <td></td>
</tr>

<tr>  
    <td></td>
    <td></td>
</tr>

</table>
<script language="javascript src="jquery.min.js"></script>

<script language="javascript">

$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});

</script>

#altrow{
background-color:#a5e5aa;
}

 

 

下载并使用jQuery

　 官方网站（http://jquery.com/）

　 不需要任何安装过程，在页面中引入即可

  <script language="javascript src="jquery.min.js"></script>

2. jQuery的“$”

  选择器（对页面中的元素进行选择）

   

<script language="JavaScript" src="jquery.min.js"></script>

<h1><a>test</a>New Web Project Page</h1>

<script type="text/javascript">
	window.onload=function(){
	var oElements=$("h1 a");
	 oElements[0].innerHTML=1;
  }
</script>

 

 

功能函数前缀

  

<script language="JavaScript" src="jquery.min.js"></script>

<script type="text/javascript">

var sString="  1234  ";  
alert(sString.length);
sString=$.trim(sString);  //去掉字符串前后空格
alert(sString.length);
			
</script>

 

 

- window.onload

　 js中出现多个 window.onload会冲突

　 jQuery中用ready()方法解决

       $(document).ready(function(){...});

       简写：$(function(){...});

创建DOM元素

   

<script language="JavaScript" src="jquery.min.js"></script>

<p id="myId">第一</p>

<script type="text/javascript">
	$(function(){
	var oNewP=$("<p> 一段文字 </p>");
	oNewP.insertAfter("#myId");
		});
</script>	

 

 

3. 选择器

属性选择器

位置选择器