深入理解jQuery选择器与事件处理-优快云博客

本文链接：https://blog.youkuaiyun.com/w_l_j/article/details/7307963

选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器

jQuery选择器的优点：

1、简洁的写法

$(“#id”);//document.getElementById(“id”);

2、完善的事件处理机制

//若在网页中，没有id为“id”的元素，浏览器会报错

//document.getElementById(“id”).style.color=”red”;

//需要先判断document.getElementById(“id”)是否存在

if(document.getElementById(“id”)){

document.getElementById(“id”).style.color=”red”;

}

//使用jQuery获取网页中的元素即使不存在网页也不会报错

$(“#id”).css(“color”,”red”);

基本选择器

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id,class 和标签名来查找DOM 元素(在网页中id 只能使用一次, class 允许重复使用).

<body>

用户名:<input type="text" id="name" class="myCls"/>

性别:<input type="text" name="sex" class="myCls"/>

年龄:<input type="text" name="age" class="myCls"/>

出生日期:<input type="text" name="birth"/>

薪资:<input type="text" name="salary"/>

电话:<input type="text" name="phone" id="phone"/>

<div>

用户名:<input type="text" id="name" class="myCls"/>

</div>

</body>

//当窗体加载完毕后触发function()匿名函数

$(document).ready(function(){

//id选择器根据它来获取指定的jQuery对象

//$("#id名称") 获取指定id的jQuery对象

var$uName=$("#name");//获取jQuery对象 jQuery对象是一个数组对象

//调用jQuery对象的方法

$uName.css("color","red");//名称、vaule值 css中的属性的键值对

$uName.css("border-color","#800000");

//element元素选择器元素名称----标签

var$inputs=$("input");//返回的是一个jQuery对象,多个值

alert($inputs.size());//返回jQuery对象的元素个数

//jQuery对象的遍历

for(var i=0;i<$inputs.size();i++){

var$ipt=$($inputs.get(i));//转换成DOM对象

if(i%2==0){

$ipt.css("background-color","pink");

}else{

$ipt.css("background-color","yellow");

}

$inputs.each(function(i,ipt){

if(i%2==0){

ipt.style.background="pink";

}else{

ipt.style.background="yellow";

}

});

//$inputs.css("background-color","pink");

//根据class获取jQuery对象

var$inpcls=$(".myCls");

$inpcls.css("background-color","sienna");

//遍历该对象

$inpcls.each(function(i,domcls){

domcls.style.background="green";

});

//*返回所有元素的一个jQuery对象

//selector1,selector2,......//并列合并后返回jQuery对象

//var$sels=$(".myCls,#phone");

var$sels=$("div.myCls,#phone");

alert($sels.size());

});

//每个文本框的背景都呈现不同的颜色

functionforEach(){

//jQuery对象的遍历

for(var i=0;i<$inputs.size();i++){

/*var$ipt=$($inputs.get(i));//转换成DOM对象

if(i%2==0){

$ipt.css("background-color","pink");

}else{

$ipt.css("background-color","yellow");

}*/

vaript=$($inputs.get(i));//转换成DOM对象

if(i%2==0){

ipt.style.background="pink";

}else{

ipt.style.background="yellow";

}

层次选择器：

如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.

注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而jQuery 中的方法siblings() 与前后位置无关, 只要是同辈节点就可以选取

<div>

用户名:<input type="text" id="name"/>

</div>

用户名:<input type="text" id="name"/>

性别:<input type="text" id="sex"/>

密码:<input type="text" id="pass"/>

用户名:<input type="text" id="name"/>

</div>

<div>hello</div>

</div>

//层级关系

$(document).ready(function(){

//获取id=tbody里边的所有input元素 $("#tbyinput")//代表祖先关系-----祖先下面的所有都可以出来

var$ipts=$("#tby input");

alert($ipts.length);//5

$ipts=$("#tby>input");//父子关系，只获取它的子标签中的input

alert($ipts.length);//3

var$x=$("#tby + div");//并列兄弟关系紧跟着的弟弟必须是div

//alert($x);//object对象

alert($x.html);//null .html方法：获取当前jQuery对象的文本内容

$x=$("#tby~div");//兄弟关系下面所有的弟弟

alert($x.html());

$x.each(function(i,domDiv){

var$div=$(domDiv);

alert($div.html());

});

jQuery选择器(一)