1,内容选择器
(1),:empty找到既没有文本内容也没有子元素的指定元素
var $div = $("div:empty");
console.log($div);
(2),:parent找到有文本内容或有子元素的指定元素
var $div = $("div:parent");
console.log($div);
(3),:contains(text)找到包含指定文本内容的指定元素
var $div = $("div:contains('我是div')");
console.log($div);
(4),:has(selector)找到包含指定子元素的元素
var $div = $("div:has('span')");
console.log($div);
<body>
<div></div>
<div>我是div</div>
<div>他们说我是div</div>
<div><span></span></div>
<div><p></p></div>
</body>
2,属性和属性节点
属性:对象身上保存的变量就是属性
如何操作属性:对象.属性名称 = 值;对象.属性名称
对象["属性名称"] = 值;对象["属性名称"]
属性节点:在编写HTML代码时,在HTML标签中添加的属性就是属性节点
如何操作属性节点:DOM元素.setAttribute("属性名称",“值”);
DOM元素.getAttribute("属性名称");
两者区别:任何对象都有属性,但只有DOM对象才有属性节点
3,attr和removeAttr,prop和removeProp
(1),attr(name|pro|key,val|fn)
传一个参数是获取属性节点的值,传两个参数是设置属性节点的值
获取:无论找到多少个元素,只返回第一个元素1指定的属性节点的值
设置:找到多少个就设置多少个,不存在便新增
$("span").attr("class","box");
$("span").attr("abc","123");
(2),removeAttr(name)
删除属性节点
会删除所有找到指定的元素节点
$("span").removeAttr("class");
(3),prop
特点和attr一致
$(function(){
$("span").eq(0).prop("demo","it666");
$("span").eq(1).prop("demo","hello");
console.log($("span").prop("demo"));
});
(4),removeProp
特点和removeAttr一致
$(function(){
$("span").removeProp("demo");
});
注意:
prop既能操作属性也能操作属性节点
返回true/false的(checked,selected,disabled)使用prop(),其它用attr()
<body>
<span class="span1" name="hello666"></span>
<span class="span2" name="rng"></span>
</body>
4,类操作
addClass(class|fn)添加一个类,多个用空格隔开
removeClass([class|fn])删除一个类,多个用空格隔开
toggleClass(class|fn[,sw])切换类,有就删除没有就添加
5,文本值操作
html([val|fn])和原生的JS的innerHTML一模一样
设置
$("div").html("<p>这是一个段落<span>这是一个span</span></p>");
获取
console.log($("div").html());
text([val|fn])和原生的JS的innerText一模一样
设置
$("div").text("<p>这是一个段落<span>这是一个span</span></p>");
获取
console.log($("div").text());
val([val|fn|arr])
设置
$("input").val("你想问什么");
获取
console.log($("input").val());
6,样式操作
$(function(){
//逐个设置
$("div").css("width","100px");
$("div").css("height","100px");
$("div").css("background","red");
//链式操作(大于3步建议分开)
$("div").css("width","100px").css("height","100px").css("background","red");
//批量设置
("div").css({
width:"100px",
height:"100px",
background:"red"
});
//获取CSS样式
console.log($("div").css("width"));;
});
7,尺寸和位置
width()宽度
height()高度
offset()元素距窗口的偏移位
position()元素距离定位元素的偏移位(只能获取不能设置)
scrollTop()获取滚动或者网页滚动的偏移位