Javascript_JQuery初探

JQuery 初探

 一、 语法学习

1.  $()引用的元素包括：

元素id, 元素名, class, 元素层级关系, DOM或XPath条件等。返回的对象为JQuery对象（集合对象）。

$("#msg").html(); -->通过ID $("div").html(); -->通过元素名(jQuery获取的是一个集合) $("div p"); -->得到所有<div>标签下的<p>元素。 $("div.container") -->得到 class为container的<div>元素 $("div #msg"); -->得到<div>标签下面id为msg的元素。 $("table a",context); -->得到context为上下文的table里面所有的连接元素。

2. JQuery对象和DOM对象之间的转化

JQuery -> DOM：从对象中取出一个，例如 $("#msg")[0]

DOM -> JQuery：加$()就行，例如$(document.getElementById("msg"))

 

$("div").eq(2).html();        //取出的是JQuery对象

$("div").get(2).innerHtml();        //取出的是DOM对象

 

3. 几个常用的JQuery方法

1. 集合处理

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]}) //为索引分别为0，1，2的p元素分别设定不同的字体颜色。 $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]}) //实现表格的隔行换色效果 $("p").click(function(){alert($(this).html())}) //为每个p元素增加了click事件，单击某个p元素则弹出其内容

2. 表格排序

<mce:script src="lib/jquery.tablesorter.js" mce_src="lib/jquery.tablesorter.js" type="text/javascript"></mce:script>代码：$(document).ready(function() {$("#large").tableSorter();});

还可以为表格的行增加一些间隔色（斑马色）

$(document).ready(function() {$("#large").tableSorter({stripingRowClass: ['odd','even'],// Class names for striping supplyed as a array.stripRowsOnStartUp: true// Strip rows on tableSorter init.});});