首页 > 程序开发 > web前端 > JavaScript >

jquery选择器全解

2017-08-05

jquery选择器全解。

jquery选择器全解。

//$被宏定位为jQuery。$("#foo')等价于jQuery("#foo"),$.ajax等价于jQuery.ajax
//jQuery.noConflict();  //不再使用$代表jQuery,则$可以在其他js插件中代表其他的变量了
//var $j = jQuery.noConflict();  //使用$j代表jQuery
//==========================================Dom对象与jQuery对象。Dom对象对象只能使用DOM方法,jquery对象只能使用jquery方法。有对应的的部分,但是写法不一样
var $cr = $("#cr");             //使用$获取的是jquery对象,jquery对象习惯使用$开头表示,但不是必须的
var cr = $cr[0];                //jquery对象转化为DOM对象,
cr = $cr.get(0);                //jquery对象转化为DOM对象
$cr = $(cr);                    //DOM对象转化为jquery对象
if($cr.length>0)                //jquery对象判断元素是否存在
    if(cr)                      //DOM对象判断元素是否存在
      alert("元素存在");


//================================================jquery选择器$("xxxx"),传入字符串获取元素,字符串的写法与css的写法相同
//基本选择器
$("#myid");                     //根据id获取元素,等价于document.getElementById(),
$("#myid\\#b");                 //根据id为myid#b的元素,对于属性中含有.#([等特殊字符的要转义获取
$("label");                     //根据标签名称获取元素列表,等价于document.getElementByTagName(),
$(".myclass");                  //根据class获取元素列表
$("div.myclass");               //根据class获取元素列表
$("label,div,input");           //根据元素并集
$("body *");                     //*获取所有元素,空格表示后代元素

//层次选择器
$("#myid a");                   //获取所有子孙后代元素列表
$("#myid>a");                   //获取一级子元素列表(不包含孙元素)
$("#myid").next("a");           //获取紧接在之后的同辈元素列表,等价于$("#myid+a");
$("#myid").nextAll("a");        //获取之后的所有同辈元素列表,等价于$("#myid~a");
$("#myid").siblings("a");       //获取所有同辈元素列表,无论前后

//过滤选择器
//基本过滤选择器,可以
$("div:first");                 //所有div中的第一个div元素
$("div:last");                  //所有div中的最后一个div元素
$("div:not(.myclass)");        //不是myclass类的所有div元素列表
$("div:even");                  //索引是偶数的div列表,索引从0开始
$("div:odd");                   //索引是奇数的div列表,索引从0开始
$("div:eq(1)");                 //索引等于1的div,索引从0开始
$("div label:gt(5):not(:last)");//div元素下,索引大于5的不包含最后一个的label列表(不包含5,索引从0开始)
$("div:lt(1)");                 //索引小于1的div列表(不包含1),索引从0开始
$(":header");                   //所有标题元素列表
$("div:animated");              //正在执行动画的div元素列表
$(":focus");                    //当前聚焦元素列表
//内容过滤选择器
$("div:contains('我')");       //含有文本“我”的div元素列表
$("div:empty");                 //不含有子元素或文本的div空元素列表
$("div:has(p)");                //含有p元素的div元素列表
$("div:parent");                //含有子元素或文本的div元素列表
//可见性过滤
$("div:hidden");                //获取所有隐藏的div列表
$("div:visible");               //获取所有可见的div列表
//属性过滤器
$("div[title]");                //拥有属性title的div列表
$("div[title=test]");           //属性title为"test"的div列表
$("div[title!=test]");          //属性title不等于"test"或没有title属性的div列表
$("div[title^=test]");          //属性title以"test"开始的div列表
$("div[title$=test]");          //属性title以"test"结束的div列表
$("div[title*=test]");          //属性title含有"test"的div列表
$("div[title|=test]");          //属性title等于"test"或以"test-"开头的div列表
$("div[title~=test]");          //属性title用空格分割的值中包含test的div列表
$("div[id][title$=test]");      //包含属性id,同时属性title以"test"结束的div列表
//子元素过滤器,通过冒号前加空格实现,和基本过滤器的区别,基本过滤器冒号前没有空格,基本过滤器对元素进行操作,获取元素列表,此处的过滤器对父元素进行操作,获取子元素列表
$("div :nth-child(2)");         //获取每个div下的第2个子元素,索引从1开始
$("div :nth-child(even)");      //获取每个div下的索引为偶数的子元素,索引从1开始
$("div :nth-child(odd)");       //获取每个div下的索引为奇数的子元素,索引从1开始
$("div :nth-child(3n+1)");       //获取每个div下的索引为3n+1的子元素,索引从1开始
$("div label:first-child");     //获取每个div下的第一个label列表
$("div label:last-child");      //获取每个div下的最后一个label列表
$("div label:only-child");      //获取每个div下的是唯一子元素的label的列表
//表单对象属性过滤器
$("#form1 input:enabled");      //id为form1的表单内所有可用input元素列表
$(".form1 :disabled");          //class为form1的元素内所有不可用元素列表
$(".form1:disabled");           //所有不可用的且class为form1的元素
$("input:checked");             //所有被选中的iput元素(单选框,复选框)
$("select option:selected");    //所有被选中的选项元素(下拉列表)$("select :selected");也可以

//表单选择器
$("#form1 :input");             //选取id为form1的表单的所有input,textarea,select,button元素
$("#form1 input");              //选取id为form1的表单下的input元素
$(":text");                      //选取所有单行文本框,:前可以有其他过滤器
$(":password");                 //选取所有密码框
$(":radio");                    //选取所有单选框
$(":checkbox");                 //选取所有复选框
$(":submit");                   //选取所有提交按钮
$(":image");                    //选取所有图片按钮
$(":reset");                    //选取所有重置按钮
$(":button");                   //选取所有按钮
$(":file");                     //选取所有上传域
$(":hidden");                   //选取所有不可见元素
相关文章
最新文章
热点推荐