jQuery选择器介绍
jQuery选择器分为:
#id,.class,element, selector1,selector2,selector3.....
以以下的html为例：
<body>
用户名：<input type="text" id="name" class="myCalss"/>
性别：<input type="text" name="sex" class="myCalss"/>
年龄：<input type="text" name="age" class="myCalss"/>
薪资：<input type="text" name="salary" class="myCalss"/>
出生日期：：<input type="text" name="birth"/>
电话：<input type="text" name="phone" id="phone"/>
<div class="myClass" style="width:100,height:100,border="1px">
</div>
</body>
1. id选择器
//1.id选择器，根据它来获取指定的jQuery对象
//$("#id名称")获取指定的id的jQuery对象
var $uName = $("#name");//jQuery对象 是一个数组对象
//调用jQuery对象的方法 name名称 value值
$uName.css("color","red");//使得输入框的文字为red
$uName.css("border-color","blue");//使得文本框的元素为blue
2．emement选择器 元素节点 ---标签 获取到的是所有的指定的标签
var $inputs = $("input");//返回jQuery对象 是一个数组对象
//alert($inputs.size());//长度为6
//jQuery对象的遍历
$inputs.each(function(i,ipt){ //i相当于是for循环中的i 并且i++
//ipt是一个dom对象
if(i%2==0){
ipt.style.background="yellow";
}else{
ipt.style.background="blue";
}
});
3．class选择器 根据class获取jQuery对象
var $inpCls = $(".myCalss");
$inpCls.css("background-color","pink");
//遍历该对象
$inpCls.each(function(i,domCls){
if(i%2==0){
domCls.style.background="yellow";
}else{
domCls.style.background="blue";
}
});
4.selector1,selector2,selector3.....多向选择器
//是返回所有元素的一个jQuery对象
var $sels = $(".myClass,#phone");
alert($sels.size());
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
