版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
08-jQuery属性操作相关方法
<script>
$(function () {
/*
1.attr(): 设置或者获取元素的属性节点值
*/
// 传递一个参数, 返回第一个元素属性节点的值
// console.log($("span").attr("class"));
// 传递两个参数, 代表设置所有元素属性节点的值
// 并且返回值就是方法调用者
// console.log($("span").attr("class", "abc"));
// 传递一个对象, 代表批量设置所有元素属性节点的值
$("span").attr({
"class": "123",
"name": "888"
});
});
</script>
<script>
$(function () {
/*
2.prop(): 设置或者获取元素的属性值
*/
// 传递两个参数, 代表设置所有元素属性节点的值
// 并且返回值就是方法调用者
console.log($("span").prop("abc", "lnj"));
// 传递一个参数, 返回第一个元素属性节点的值
console.log($("span").prop("abc"));
// 传递一个对象, 代表批量设置所有元素属性节点的值
$("span").prop({
"aaa": "111",
"bbb": "222"
});
});
</script>
<script>
$(function () {
/*
3.css(): 设置获取样式
*/
// 传递一个参数, 返回第一个元素指定的样式
// console.log($('div').css('height'));
// 传递两个参数, 代表设置所有元素样式
// 并且返回值就是方法调用者
// console.log($('div').css('height', '50px'));
// 传递一个对象, 代表批量设置所有元素样式
$('div').css({
height: '50px',
backgroundColor: 'pink'
});
// 获取样式
// var div = document.querySelector("div");
// console.log(window.getComputedStyle(div)["height"]);
// console.log(div.currentStyle["height"]);
// 设置样式
// div.style["height"] = "200px";
});
</script>
<script>
$(function () {
/*
4.val(): 获取设置value的值
*/
// 不传递参数, 返回第一个元素指定的样式
// console.log($('input').val());
// 传递两个参数, 代表设置所有元素样式
// 并且返回值就是方法调用者
console.log($('input').val( '新设置的' ));
/*
var input = document.querySelector("input");
// input.setAttribute("value", "123456");
var btn = document.querySelector("button");
btn.onclick = function (ev) {
// console.log(input.getAttribute("value"));
// console.log($('input').val());
console.log(input.value);
}
*/
});
</script>
<script>
$(function () {
/*
5.hasClass(): 判断元素中是否包含指定类
*/
// 传递参数, 只要调用者其中一个包含指定类就返回true,否则返回false
// console.log($("div").hasClass("cc"));
// console.log($("div").hasClass("abc"));
// 没有传递参数, 返回false
console.log($("div").hasClass());
/*
var div = document.querySelector("div");
// console.log(div.getAttribute("class"));
// console.log(div.className);
// 1.获取元素中class保存的值
var className = " "+div.className+" ";
// 2.通过indexOf判断是否包含指定的字符串
// console.log(className.indexOf("abc") != -1);
// console.log(className.indexOf("bb"));
// console.log(className.indexOf(" "+"bb"+" "));
console.log(className.indexOf(" "+"dd"+" "));
*/
});
</script>
<script>
$(function () {
/*
6.addClass(): 给元素添加一个或多个指定的类
*/
// 传递参数, 如果元素中没有指定类就添加, 有就不添加
// 会返回this方便链式编程
// console.log($("div").addClass("abc"));
// console.log($("div").addClass("abc def"));
// 没有传递参数,不做任何操作,返回this
console.log($("div").addClass());
// "aabb" + " " + "abc" = "aabb abc"
});
</script>
<script>
$(function () {
/*
7.removeClass(): 删除元素中一个或多个指定的类
*/
// 传递参数, 如果元素中有指定类就删除
// 会返回this方便链式编程
console.log($("div").removeClass("aabb"));
// console.log($("div").removeClass("aabb abc"));
// 没有传递参数, 删除所有类
// console.log($("div").removeClass());
});
</script>
<script>
$(function () {
/*
8.toggleClass(): 没有则添加,有则删除
*/
// 传递参数, 如果元素中没有指定类就添加, 有就不添加
// 会返回this方便链式编程
// console.log($("div").toggleClass("abc"));
// console.log($("div").toggleClass("aabb abc"));
// 没有传递参数, 删除所有类
console.log($("div").toggleClass());
});
</script>