jQuery内容选择器
-
:empty
找到既没有文本内容也没有子元素的指定元素，返回集合元素
<script>
$(function () {
// 找到既没有文本内容也没有子元素的div
var $div = $("div:empty");
console.log($div);
});
</script>
-
:parent
找到有文本内容或有子元素的指定元素，返回集合元素
<script>
$(function () {
// 找到既有文本内容或有子元素的div
var $div = $("div:parent");
console.log($div);
});
</script>
-
:contains(text)
找到包含指定文本内容的指定元素，返回集合元素
<script>
$(function () {
// 找到包含我是div的div
var $div = $("div:contains('我是div')");
console.log($div);
});
</script>
-
:has(selector)
找到包含指定子元素的指定元素，返回集合元素
<script>
$(function () {
// 找到包含p标签的div
var $div = $("div:has('p')");
console.log($div);
});
</script>
jQuery选择器
-
id选择器
根据给定的id匹配一个元素，返回单个元素
<script>
$(function () {
// 找到id为box的元素
var $box = $("#box");
console.log($box);
});
</script>
-
类选择器
根据给定的类名匹配元素，返回找到的元素集合
<script>
$(function () {
// 找到所有类名box的元素
var $box = $(".box");
console.log($box);
});
</script>
-
元素选择器
根据给定的元素名称匹配元素，返回找到的元素集合
<script>
$(function () {
// 找到所有<p>元素
var $ps = $("p");
console.log($ps);
});
</script>
<script>
$(function () {
var $eles = $("*");
console.log($eles);
});
</script>
-
并集选择器
将所有选择器匹配到的元素合并后一起返回，返回找到的元素集合
<script>
$(function () {
// 选取所有<div>元素,所有<span>元素和所有类名为box元素
var $eles = $("div,span,.box");
console.log($eles);
});
</script>
-
后代选择器
选取指定元素的所有后代元素(包括孙子/重孙子等)，返回找到的元素集合
<script>
$(function () {
// 选取<div>元素里所有的<span>元素
var $eles = $("div span");
console.log($eles);
});
</script>
-
子元素选择器
找到指定元素的所有直接子元素，返回找到的元素集合
<script>
$(function () {
// 选取<div>元素下元素名称是<span>的直接子元素
var $eles = $("div>span");
console.log($eles);
});
</script>
-
相邻兄弟选择器
选取某个元素后面所有紧跟的那个元素，没有级别之分，返回找到的元素集合
<script>
$(function () {
// 选取类名为box后面所有<div>元素
var $eles = $(".box+div");
console.log($eles);
});
</script>
-
通用兄弟选择器
匹配某个元素之后的所有指定的同级元素，返回找到的元素集合
<script>
$(function () {
// 选取类名为box元素后面与其同级的div元素
var $eles = $(".box~div");
console.log($eles);
});
</script>
属性和属性节点
- 属性
- 属性就是对象身上的变量
- 只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象)
- 属性节点
- 在编写HTML代码时,在HTML标签中添加的属性就是属性节点
- 操作属性与属性节点
// 添加或修改属
对象.属性名称 = 值;
对象["属性名称"] = 值;
// 获取属性
对象.属性名称
对象["属性名称"]
// 获取属性节
DOM对象.getAttribute("属性节点名称")
// 设置属性节点
DOM对象.setAttribute("属性节点名称", "值");
- 属性和属性节点有什么区别
任何对象都有属性, 但是只有DOM对象才有属性节点
jQuery中的attr和prop方法
-
attr(name|pro|key,val|fn)
- 获取或者设置属性节点的值
- 可以传递一个参数, 也可以传递两个参数
- 如果传递一个参数, 代表获取属性节点的值
- 如果传递两个参数, 代表设置属性节点的值
- 如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
- 如果是设置:找到多少个元素就会设置多少个元素
- 如果是设置:如果设置的属性节点不存在, 那么系统会自动新增
<script>
$(function () {
// 获取标签为span的class属性节点的值
console.log($("span").attr("class"));
// 设置标签为span的class属性节点的值为box
$("span").attr("class", "box");
// 增加一个属性节点abc，取值为123
$("span").attr("abc", "123");
});
</script>
-
removeAttr(name)
- 用于删除指定属性节点
- 会删除所有找到元素指定的属性节点
<script>
$(function () {
// 删除所有span标签的class和name属性节点
$("span").removeAttr("class name");
});
</script>
-
prop(n|p|k,v|f)
- 用于设置或者获取元素的属性值
- 设置属性时,会设置所有找到元素的属性
- 获取属性时,只会获取找到第一个元素的属性
<script>
$(function () {
// 设置找到的第一个span标签的demo属性节点
$("span").eq(0).prop("demo", "it666");
// 获取找到的第一个span标签的demo属性节点
$("span").eq(0).prop("demo");
});
</script>
<script>
$(function () {
// 删除所有span标签的demo属性节点
$("span").removeProp("demo");
});
</script>
-
attr方法和prop方法区别
-
attr和prop即可以操作属性也可以操作属性节点
- 官方推荐在操作属性节点时,具有
true和false两个属性的属性节点，如checked, selected 或者disabled 使用prop()，其他的使用attr()
- 因为如果具有
true和false两个属性的属性节点,如果没有编写默认attr返回undefined,而prop返回false
jQuery类操作相关方法
-
addClass(class|fn)
- 给元素添加一个或多个类
- 如果要添加多个, 多个类名之间用空格隔开即可
<script>
$(function () {
// 给div添加class1 和 class2两个类
$("div").addClass("class1 class2");
});
</script>
-
removeClass([class|fn])
- 删除一个类
- 如果想删除多个, 多个类名之间用空格隔开即可
<script>
$(function () {
// 删除div的class1
$("div").removeClass("class1");
});
</script>
-
toggleClass(class|fn[,sw])
<script>
$(function () {
// 如果有class3就删除，不存在就天添加
$("div").removeClass("class3");
});
</script>
jQuery文本值相关的方法
-
html([val|fn])
- 添加或获取元素中的HTML，相当于JS中的
innerHTML
-
text([val|fn])
- 添加或获取元素中的文本，相当于JS中的
innerText
- text方法能做的html方法都能做,所以一般使用html方法
-
val([val|fn|arr])
<script>
$(function () {
$(".box1").html("<p>我是段落<span>我是span</span></p>");
$(".box2").text("<p>我是段落<span>我是span</span></p>");
console.log($("input").val());;
});
</script>
