html原生选择器,jQ选择器 原生实现.html

选择器

我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落

我是section标签1

我是section标签

我是articlen标签

我是articlen1标签

我是footer标签

我是footer1标签

我是footer2标签

• 列表1
• 列表2
• 列表3
• 列表4
• 列表5
• 列表6

• 列表1
• 列表2
• 列表3
• 列表4
• 列表5
• 列表6
• 列表7
• 列表8
• 列表9

• 列表1
• 列表2
• 列表3
• 列表4
• 列表5
• 列表6
• 列表7
• 列表8
• 列表9

第一个p元素

最后一个span元素

只有一个子元素

第一个span元素

最后一个P元素

第一个span元素

最后一个span元素

// JQ点击事件的写法

/**

$(function(){

// id 选择器

$("#box").click(function(){

alert("p");

})

$(".box").click(function(){

alert("alert");

})

$("article").click(function(){

alert("article");

})

$("footer[name]").click(function(){

alert("article");

})

$(":text").click(function(){

alert("请输入用户名");

})

$("p:first").css("background","#000");

$("p:last").css("background","#000");

$("p:even").css("background","#000");

$("p:odd").css("background","#000");

$("p:first-child").css("background","yellow");

$("p:last-of-type").css("background","#000");

$("p:nth-last-child(3)").css("background","#000");

$("p:nth-of-type(3)").css("background","#000");

$("p:only-child").css("background","#000");

$("span:only-of-type").css("background","#000");

});

**/

// 原生写法

// id 选择器

var boxP = document.getElementById("box"); // 通过Id获取

var boxP1 = document.querySelector("#box"); // 通过Id获取

// 以上两种方法都可以找 id="box" 的元素

console.log(boxP.innerHTML); // 我是section标签

console.log(boxP1.innerHTML); // 我是section标签

// class 选择器

var boxSection = document.getElementsByClassName("box"); // 通过class类名获取 返回是一个数组 (下标是0开始的)

var boxSection1 = document.querySelector(".box"); // 通过class类名获取 只获取一个元素

var boxSection2 = document.querySelectorAll(".box"); // 通过class类名获取 返回是一个数组 (这个跟getElementsByClassName相同，只是不同的写法)

// 以上三种方法都可以找 class="box" 的元素 (如果选择器返回是一个数组时，不加下标结果为undefined)

console.log(boxSection[0].innerHTML); // 我是section标签

console.log(boxSection1.innerHTML); // 我是section标签

console.log(boxSection2[1].innerHTML); // 我是section1标签

// 元素选择器

var articleElement = document.getElementsByTagName("article"); // 通过标签名获取 返回一个数组 (下标是0开始的)

var articleElement1 = document.querySelector("article"); // 只获取一个元素 (默认是第一个)

var articleElement2 = document.querySelectorAll("article"); //通过标签名获取 返回一个数组 (这个跟getElementsByTagName相同，只是不同的写法)

// 以上三种方法都可以找 article 标签 (如果选择器返回是一个数组时，不加下标结果为undefined)

console.log(articleElement.length); // 2

console.log(articleElement[0].innerHTML); // 我是articlen标签

console.log(articleElement1.innerHTML); // 我是articlen标签

console.log(articleElement2[1].innerHTML); // 我是articlen1标签

// 通过属性name值找元素

var footerElement1 = document.getElementsByName("footer"); // 这个方法仅限于name属性 返回的是一个数组 (下标是0开始的)

console.log(typeof footerElement1); // object

console.log(typeof footerElement1[1].innerHTML); // string

console.log(typeof footerElement1.length); // number

console.log(footerElement1.length); // 2

console.log(footerElement1[1].innerHTML); // 我是footer1标签

// 通过属性查找元素

var footerElement2 = document.querySelector("footer[name]"); // 通过标签属性获取 只获取一个

var footerElement3 = document.querySelectorAll("footer[name]"); // 通过标签属性获取 返回是一个数组 (下标是0开始的)

console.log(footerElement2.innerHTML); // 我是footer标签

console.log(footerElement3[2].innerHTML); // 我是footer2标签

console.log(footerElement3.length); // 3

// 通过input标签的属性type值查找元素

var input = document.querySelector("input[type='text']"); // 获取 type="text" 的 元素

var input1 = document.querySelectorAll("input[type='text']"); // 获取 type="text" 的 元素 (返回一个数组)

// type值有 text txt button submit radio search tel image password checkbox range reset color month week number email file file datetime-local hidden hidden

console.log(input.value); // 请输入用户名1

console.log(input1.value); // 不加下标 返回则是 undefined

console.log(input1[0].value); // 请输入用户名1

console.log(input1[1].value); // 请输入用户名2

console.log(input1[2].value); // 请输入用户名3

// 选择第一个元素

document.querySelector(":first-child").style.background = "#ff0"; // :first-child前面不加标签名就是直接获取根元素 html 并加背景颜色

document.querySelector("li:first-child").style.background = "#f00"; // 获取第一个列表的第一个li元素 并加上背景颜色

// document.getElementsByTagName("li:first-child").style.background = "#f00"; // getElementsByTagName 这个并不能找到第一个元素

// 选择最后一个元素

document.querySelector("body:last-child").style.background = "#f0f"; // :last-child前面不加标签名就是直接获取根元素 html 并加背景颜色

document.querySelector("li:last-child").style.background = "#00f"; // 获取第一个列表的最后一个元素 并加上背景颜色

// 从列表下标选择 (index从0开始)

document.querySelector("li:nth-child(2)").style.background = "#0f0";

var ul = document.querySelectorAll("ul")[1].querySelectorAll("li:nth-child(even)"); // 选择偶数元素

var ul1 = document.querySelectorAll("ul")[1].querySelectorAll("li:nth-child(odd)"); // 选择奇数元素

var ul2 = document.querySelectorAll("ul")[2].querySelectorAll("li");

for(var i=0;i

ul[i].style.background = "#dbc"; // 选择偶数

}

for(var i=0;i

ul1[i].style.background = "#abc"; // 选择奇数

}

for(var i=0;i

if(i%2==0){ // 取模(余数)

ul2[i].style.background = "#abcdef"; // 选择偶数

}else{

ul2[i].style.background = "#abc"; // 选择奇数

}

}

var ul3 = document.querySelectorAll("ul");

for(var i=0;i

var ul3ElementList1 = ul3[i].querySelectorAll("li:first-of-type"); // 找父级元素的第一个子元素

var ul3ElementList2 = ul3[i].querySelectorAll("li:last-of-type"); // 找父级元素的最后一个子元素

var ul3ElementList3 = ul3[i].querySelectorAll("li:nth-last-child(3)"); // 索引必须是数字

var ul3ElementList4 = ul3[i].querySelectorAll("li:nth-of-type(3)"); // 索引必须是数字

var ul3ElementList4 = ul3[i].querySelectorAll("li:nth-last-of-type(4)"); // 索引必须是数字

// :first-of-type 选取属于其父元素的第一个子元素

for(var j=0;j

ul3ElementList1[j].style.background = "#666";

}

// :last-of-type 选取属于其父元素的最后一个子元素

for(var k=0;k

ul3ElementList2[k].style.background = "#999";

}

// :nth-last-child(3) 选取属于其父元素的第三个子元素 从最后一个子元素开始计数 (索引是从1开始的)

for(var l=0;l

ul3ElementList3[l].style.background = "#eee";

}

// :nth-of-type(3) 选取属于其父元素的第三个子元素 从第一个子元素开始计数 (索引是从1开始的)

for(var g=0;g

ul3ElementList4[g].style.background = "#0ff";

}

// :nth-last-of-type(4) 选取属于其父元素的第四个子元素 从最后一个子元素开始计数 跟nth-last-child选择器一样的意思 只是写法不同 (索引是从1开始的)

for(var g=0;g

ul3ElementList4[g].style.background = "#0ff";

}

}

var div = document.querySelectorAll("div");

for(var i=0;i

var divP1 = div[i].querySelectorAll("p:only-child"); // 选择父级元素里的只有一个的p元素

var divP2 = div[i].querySelectorAll("span:only-child"); // 父级元素里没有找到只有一个span的子元素

var divP3 = div[i].querySelectorAll("span:only-of-type"); // 制定类型 span元素 选择父级唯一一个span元素

// 选择父级元素里只有一个子元素的元素

for(var j=0;j

divP1[j].style.background = "#eee";

}

// 找不到父级元素里只存在一个span元素的元素

for(var h=0;h

divP2[h].style.background = "#000";

}

// 选择父级元素里制定标签唯一子元素的元素

for(var k=0;k

divP3[k].style.background = "#ddd";

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史