创立元素
<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");//用于下拉菜单的元素
发表回复