JQuery--DOM

来源：互联网发布：多媒体互动软件编辑：程序博客网时间：2024/04/28 05:49

1、内容操作
（1）文本内容的捕获和设置text()
作用：获取或设置文本内容（等价于DOM操作中的innerText属性）

<body>    <p id="p1">土豆土豆呼叫地瓜</p></body><script>     $("#p1").text("哈哈");//更换内容    alert($("#p1").text());//捕获内容</script>

（2）html():获取元素中的所有内容（html的标签）
（3）val():获取或设置表单中的值
（4）attr()：获取或设置元素的属性

2、（1）append():在元素的最后边添加内容。
可以同时添加多个内容，这些内容可以是通过HTML、Jquery、DOM创建的
（2）prepend():在元素的最前边添加内容
可以同时添加多个内容，这些内容可以是通过HTML、Jquery、DOM创建的
（3）after()和befor():
两组添加的区别：append()和prepend()添加后成为了其子元素，
after()和befor()添加后成为了其兄弟元素。

3、元素的移除
（1）remove()：删除的是被选的元素及其子元素。

//删除被选中的元素$("#btn1").click(function () {    $("#div1").remove();});

（2）empty():

//仅删除被选元素的子元素$("#btn2").click(function () {    $("#div2").empty();});

注意：remove()还有过滤删除的作用，可以删除指定元素，里边的参数就是指定元素的名字。

//删除class为p1的所有元素$("#btn3").click(function () {    $("p").remove(".p1");});

这个代码块的作用就是删除所有p标签中class为p2的元素。

4.操作css类
（1）添加： addClass()

//添加样式$("#btnAdd1").click(function () {    $("#p1").addClass("style1");});

（2）删除：removeClass():

$("#btnAdd3").click(function () {    $("#p1").removeClass("style1");});

（3）切换：toggleClass();

//切换$("#btnAdd4").click(function () {    $("#p1").toggleClass("style1");});

5、操作css方法
css()：里面要传两个参数：第一个参数是要设置的属性名，第二个参数是设置属性。

$("#benAdd4").click(function () {      $("p").css("color","yellow");});$("p").css({"color":"blue","font-size":"30px"});

注意：CSS()：也可以设置多个属性，不同属性用“，”隔开，属性名和属性值用“：”，最外层用“{}”括起来。

阅读全文

0 0