jQuery高级选择器,属性选择器,过滤器

时间:2020-9-1 作者:admin

创建元素

<div>1</div>
<div>2</div>
<div>3</div>

// jQuery的写法

$("div").text("你好");

// 普通js写法

var divs=document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
    divs[i].textContent="你好";
}
**$("div").text("你好");//等同于给每一个div里面增加textContent值为你好**
console.log($("div"));
选择器获取的是所有标签是div的列表,这个列表就叫做jQuery对象,jQuery对象不能使用任何DOM的方法
$("div").addEventListener()//错误的
如果希望使用DOM的方法,必须将jQuery转换为DOM对象

将jQuery列表中某个一个DOM获取出来
console.log($("div")[0]);
console.log($("div").get(0));

console.log(Array.from($("div")));//将jQuery对象转换为DOM数组

将DOM元素转换为jQuery

var div=document.createElement("div");
$(DOM) 就可以将DOM元素转换为jQuery对象
console.log($(div))
选择器:
$("div");       // 标签名选择器
    $("#div1");     // id选择器
    $(".div0");     //class选择器
    $("*");         //通配符选择器
    $("div .div1"); //后代选择器
    $("div>.div1"); //子代选择器
    $(".div1+div"); //下一个兄弟选择器
    $(".div1~div"); //下面所有的兄弟选择器
    $("div.div1");  //div中类名是div1的div 
    $(".div1>*");   //类名是div1所有的子元素
    $(".div1>*").length;//div1子元素的数量
    $(".div1>").length; //div1子元素的数量
    $(".div1+*")//div1下一个任意兄弟元素 
$(".div1").next();      // 等同于$(".div1+");
    $(".div1").nextAll();   // 等同于$(".div1~");
    $(".div1").nextUntil(".div2").css("color","red");//div1到div2之间的兄弟元素

    $(".div1").prev();      //向上的一个兄弟元素
    $(".div1").prevAll();   //向上的所有兄弟元素
    $(".div1").prevUntil(".div2");//向上到div2直接兄弟元素

    查找div1中的span标签
    $(".div1").find("span");//$(".div1 span");
    $(".div1").children();//$(".div>");
属性选择器:
$("div[a]");   //[a] 表示是否具备标签属性a
    $("[a]");      //[a] 表示是否具备标签属性a
    $("[a=1]");    //标签必须有a属性,并且属性值是1
    $("[a^=1]");   //属性值的开头是1的元素
    $("[b|=ab]").css("color", "red");//值是ab或者以ab起头后面使用—来连接的

    $("[b~=ab]").css("color", "red");
//值是ab或者值是以空格区分,并且中间包含ab的,一般用于class中的多个样式选择
    $("[b$=b]");   // 以b结尾的值
    $("[b!=ab]");  // 值不是ab的
    $("[b*=c]");   // 值中包含有c这个字符的
    $("[a][b]");   // 有a属性和b属性的元素
过滤器:
$("li:first");// 获取页面中的第一个li 
    $("li").first();// 将所有li放在一个列表中,筛选出第一个元素
    $("li:first-child")//将每个li父元素中的第一个子元素,如果是li的筛选出来
    $("li:first-of-type") // 将每个li父元素中第一个li类型的子元素筛选出来

    $("li:last")    // 获取页面中的最后一个li 
    $("li").last(); // 将所有li放在一个列表中,筛选出最后一个元素
   $("li:last-child")//将每个li父元素中的最后一个子元素,如果是li的筛选出来
    $("li:last-of-type")  // 将每个li父元素中第一个li类型的子元素筛选出来

    $("li:even") //偶数  列表是从0开始计数
    $("li:odd")  //奇数  列表是从0开始计数

    $("li:nth-child(even)")    //偶数,列表是从1开始计数
    $("li:nth-child(odd)")     //奇数,列表是从1开始计数

    $("li:nth-of-type(even)") //偶数,列表是从1开始计数
    $("li:nth-of-type(odd)")  //奇数,列表是从1开始计数

    $("li").eq(2)  //列表中下标为 2 的元素 
    $("li:gt(2)")  //列表中下标大于2的所有元素 
    $("li:lt(2)")  //列表中下标小于2的所有元素
    $(":header")   //所有h1-h6的元素 
    $(":animated") //所有使用aniamte动画的元素 
    $(":focus")    //聚焦元素   
    $(":empty"))   //没有内容或者子元素的元素 
    $(".div1:has(.div2)"))  //含有div2的内容的div1元素 
    $(".div2:parent")       //判断div2有子元素的或者有内容的 
    $(".div2").parent()     //获取div2的父元素
    $(".div2").parents()    //获取div2的所有父元素
    $(".div2").parentsUntil("html") //获取div2的所有父元素中到什么之前的 
    $(".div1:contains(1)")  //判断元素的后代中有1这个内容的元素 
    $(".div4:hidden")       //隐藏元素,针对display:none或者是不显示的元素
    $(":hidden")        //visibility: hidden;不是隐藏,因为它占位了
    $(":visible")       //显示元素 
    $(":only-child")    //只有一个子元素的元素 
    $("div").is(".div1") //这个方法得到一个布尔值,是否在div中有类名是div1的元素
    $("div").hasClass("div1") //这个方法得到一个布尔值,是否在div中类名是div1的元素
    $("li").slice(2,4)   //div列表中选择第2个到第4个之间的元素

    $(":input")
    $(":text");//type=text的input
    $(":password");

    $(":disabled");//不可用
    $(":enabled");//可用
    $(":checked");用于input中checkbox和radio
    $(":selected");//用于下拉菜单的元素
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。