jQuery概述

最新推荐文章于 2025-08-11 15:58:24 发布

最新推荐文章于 2025-08-11 15:58:24 发布 · 115 阅读

文章标签：

#jQuery #JavaScript #CSS #Ajax #框架 #ViewUI

Web技术专栏收录该内容

18 篇文章

订阅专栏

本文介绍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/）

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

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. 选择器

属性选择器

位置选择器