jQuery-选择器,访问,事件

Selectors (选择器)

jQuery中使用 $ ,可以通过元素的id, css class或 tag name很容易的获取到相应的元素。

(1)简单的获取元素

Example:

$("p") //获取所有的P元素
$("#pid") //通过 ID
$(".p") //通过css class name

(2)当然,他的功能不仅限于如此,还可以钻取层次结构

Example:

$("table > tbody > tr") //获取Table的所有行
$("#t1 > tbody > tr") //获取t1 中所有行
$(".table > tbody > tr") // 获取css类名为.table的所有行

(3)Jquery为了让开发人员更准确方便的选择到相应的元素,还给我们提供了强大的筛选器的功能:

Example:

$(“p:first”)  //first 
$(“p:last”)  //last 
$(“table > tbody > tr:even”)  //even rows  
$(“table > tbody > tr:odd”) //odd rows  
$(“p:eq(1)”) //索引为1
$(“p:gt(2)”) //2以上的元素
$("p:lt(10)”) // 0-9  
$(“p:empty”) //没有子孩子的p 
$(“p:parent”) //为父的p

(4)访问文本,并可以控制其中的值:

Example:

$("input[type='text']").css("color""red"); 

关于selectors的作用还有很多,大家可以参看:http://docs.jquery.com/Selectors

 

访问内容

Examlple:

$("#span").html();  
$(:input).val();  
$("#name").text();

使text为空  $("#txtUser").val("");
获得text的值$("#txtUser").val();

上面的几个方法用来获取指定元素的基本结果集,在我们使用的时候应当注意:val()方法查找有一个属性和他相关联的元素。html()查找的是指定元素中HTML中的内容。text()方法获取的是指定元素的text。

操作HTML标记,还有其他的一些方法,比较常用的还有css()和attr()。

css()方法有两个参数,一个是css的元素名,另一个是其所对应的值,通过css()可以很容易的修改一个或多个元素的css样式。

attr()方法可以读取或修改元素的属性。并且他可以同时设置多个元素的属性.

 添加图片,移除图片
<img id="imgPassword" /></div>
 $("#imgPassword").attr("src","img/passerror.jpg");
$("#imgPassword").removeAttr("src");

Examlple:

$("p").css("background-color", "blue");  
$("p").css({ "background-color" : "navy", "color", "white" });  
$("button").attr("disabled", "disabled"); 

 

 事件

jQuery能够监听元素的事件。最引人注目并且频繁使用的事件就是ready 事件。这个事件在浏览器加载完之后触发。

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

处理一个按钮事件:

$("#buttonid").click(function() { alert("BUTTON CLICK"); }

 

posted @ 2009-08-04 09:08  ike_li  阅读(221)  评论(0)    收藏  举报