JQuery DOM
1 内容操作
1、文本内容的操作text()
作用:获取或设置文本内容 (等价于Dom操作中的innerText属性)
错误:jQuery没有导入
2、Html():获取元素中的所有内容(html的标签);
3、val():数值获取或设置表单中的值;
4、attr();获取或设置元素属性值;
2 元素的添加删除
1、append():在元素的最后添加内容;
可以添加多个内容,这些内容可以是通过Html、jQuery、DoM创建的;
$("#btnApp").click(function(){
var txt1 ="<p>姓名:</p>";
var txt2 =$("<p></p>").text("电话:")
var txt3 =document.createElement("p");
txt3.innerText ="住址:";
$("#div1").append(txt1,txt2,txt3);
});
2、prepend();在元素的最前面添加内容;
可以添加多个内容,这些内容可以是通过Html、jQuery、DoM创建的;
3、after()和before()
两组添加的区别:append()和prepend()添加后成了其子元素
After()和befo()添加成为其兄弟元素;
3元素删除
1、remove();删除的是被选元素以及子元素
2、empty();删除的是子元素
3、remove();还有过滤删除的作用,可以指定删除的元素,里面的参数就是指定元素的名字; 代码如下:
$("#deDiv1").click(function(){
$("p").remove(".p2");
})
这个代码的作用就是,删除所有p标签中class名p2的元素!
4 操作css类
里面的参数都是一样的都是class名
1、添加class类:addclass();
2、删除class类:removeclass();
3、切换class类:Toggleclass();
5操作css()方法
$("#btnAdd1").click(function(){
$("p").css("color","green");
});
Css里面传两个参数;第一个参数要设置属性名,第二个参数是设置的属性值;
$("p").css({"color":"green","font-size":"40px"});
Css也可以传多个属性,不同属性用“,”隔开,属性名和属性值用{}括起来;