3 操作元素—属性 CSS 和 文档处理
- 3.1 属性操作
$("p").text() $("p").html() $(":checkbox").val()$(".test").attr("alex") $(".test").attr("alex","sb")
$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")
$(".test").prop("checked",true)
$(".test").addClass("hide")
- 详见实例 【返回顶部】：实例之 返回顶部 【点击链接】
- 3.1.1、html text val
代码展示：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script></head><body>
<script>
// html([val|fn]) $(‘p‘).html(); $("p").html("Hello <b>world</b>!"); $("p").html(function(n){ return "这个 p 元素的 index 是：" + n; });
// text（） text([val|fn]) 取得所有匹配元素的内容。 $(‘p‘).text(); $("p").text("Hello world!"); $("p").text(function(n){ return "这个 p 元素的 index 是：" + n; }); // val([val|fn|arr]) $("input").val(); $("input").val("hello world!"); $(‘input:text.items‘).val(function() { return this.value + ‘ ‘ + this.className; });
</script></body></html>
html text val
- 3.1.2、属性
<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.12.4.js"></script></head><body>
<script>
// html([val|fn]) $(‘p‘).html(); $("p").html("Hello <b>world</b>!"); $("p").html(function(n){ return "这个 p 元素的 index 是：" + n; });
// text（） text([val|fn]) 取得所有匹配元素的内容。 $(‘p‘).text(); $("p").text("Hello world!"); $("p").text(function(n){ return "这个 p 元素的 index 是：" + n; }); // val([val|fn|arr]) $("input").val(); $("input").val("hello world!"); $(‘input:text.items‘).val(function() { return this.value + ‘ ‘ + this.className; });
</script></body></html>
- 3.1.3、class css 类
代码展示：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../jquery-1.9.1.min.js"></script></head><body><ul> <li>Hello</li> <li>Hello</li> <li>Hello</li></ul><strong>jQuery 代码:</strong><script>
// addClass(class|fn) addClass 为每个匹配的元素添加指定的类名。 $("p").addClass("selected"); $("p").addClass("selected1 selected2");
$(‘ul li:last‘).addClass(function() { return ‘item-‘ + $(this).index(); });
// removeClass([class|fn]) $("p").removeClass("selected"); //从匹配的元素中删除 ‘selected‘ 类
//删除匹配元素的所有类 $("p").removeClass(); //删除最后一个元素上与前面重复的class $(‘li:last‘).removeClass(function() { return $(this).prev().attr(‘class‘); });
//toggleClass(class|fn[,sw]) 如果存在（不存在）就删除（添加）一个类。
//根据父元素来设置class属性 $(‘div.foo‘).toggleClass(function() { if ($(this).parent().is(‘.bar‘) { return ‘happy‘; } else { return ‘sad‘; } });
//每点击三下加上一次 ‘highlight‘ 类 var count = 0; $("p").click(function(){ $(this).toggleClass("highlight", count++ % 3 == 0); });
</script></body></html>
3.2、 CSS操作
3.2.1(样式) css("{color:‘red‘,backgroud:‘blue‘}")
3.2.2(位置) offset() position() scrollTop() scrollLeft()
3.2.3(尺寸) height() width()
- 例子详见【滚动菜单-案例】 滚动菜单 【点击链接】
3.3 文档处理
内部插入 $("#c1").append("<b>hello</b>") $("p").appendTo("div")
prepend() prependTo()
外部插入 before() insertBefore() after insertAfter()
replaceWith() remove() empty() clone()
- 例子详见【添加项目和减去 - 案例】 实例之 添加项目，减去项目案例 【点击链接】
时间： 2024-10-20 12:43:41