乐趣区

关于javascript:jQuery高级选择器属性选择器过滤器

jiezi

创立元素 

<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");// 用于下拉菜单的元素
退出移动版