本文实例讲述了jquery选择器和属性对象的操作。分享给大家供大家参考,具体如下:
<html>
<head>
<title>jQuery-选择器</title>
<meta charset="UTF-8"/>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function testId(){
//利用id获取对象,注意其在利用id的是时候必须在前面加#,毕竟是你自定义的名称
var inp=$("#inp");
alert(inp); //返回的是获取的对象类型[object Object] alert(inp.val()); //可以实时的获得对象的value值,注意:inp本质上是一个数组,所以其没有value属性(value是对象的属性),我们使用了其val方法
alert(inp.length); //返回数组的长度
}
function testTarget(){
//利用标签获得对象
var ta=$("input");
alert(ta.val()); //打印了第一个input的元素的value值
alert(ta.length); //返回数组长度,就是所有的input标签的数目
}
function testClass(){
//利用类获取对象,感觉和css的对应的选择器一样,利用类选择器时,用.类名
var cl=$(".common");
alert(cl.val());
alert(cl.length); //返回有这个类属性的数目
}
function testComponent(){
//利用组合的各种方法获取对象
var al=$(".common,input");
alert(al.val());
alert(al.length); //返回所有类型数目之和
}
function testComponent(){
//利用组合的各种方法获取对象
var al=$(".common,input");
alert(al.val());
alert(al.length); //返回所有类型数目之和
}
function testChild(){
//获取父类的对象
var fa=$("#showdiv>input");
alert(fa.val());
alert(fa.length);
}
function testCj(){
//测试层次结构
//直接获得其子属性,利用jQuery的方法
var c1=$("input:first");
alert(c1.val()); //利用数据的方式进行获得
// alert(c1.length);
// //利用非jQuery的方法
var c2=$("input");
alert(c2[0].value); //我们获得的是js的对象,而非数组,我们从中取得了对象值
}
function testCj2(){
//测试层次结构
var tds=$("td");
alert(tds.length); //返回值数目是6个
var tdm=$("td:not(td[width])");//返回的对象是指定对象减去后面的带限制的数据,的一个数组
alert(tdm.length); //返回值是4个,减去了td中有width属性的个数
alert(tdm.html()); //返回标签内部的数据,相当于js的innerHTML
}
//操作数据的属性
function testField(){
//获得对象
var fl=$("#inp");
alert(fl.attr("type")+":"+fl.attr("value")+":"+fl.val());
//在此声明一下,对应的利用attr可以获得对象的一系列属性,其中这种方法的value只能获得其默认的已经存在的值,但是利用数组对象.val()获取的可以获得实时的值










