笔记 前端的$dom操作
jqueryDOM操作
1. 页面加载 函数
$(
function(){
具体内容
}
);
表示页面加载函数
2 dom 类操作
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
- ★★★★★设置参数变量等时候 var=" 内容" 内容如果换行书写
- 需要写成var=" 内容很长"+
" 拼接起来 " ; --------否则无法编译
;$("#btn1").click(function(){
$("#test1").text("Hello world!");
}); #选择test匹配的id元素 改变元素内的text 属性 元素本身不改变
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
}); #选择test2匹配的id元素 改变元素内的整体 html 属性 元素本身不改变 类似插入
$("#btn3").click(function(){ $("#test3").val("RUNOOB"); });
#选择test3匹配的id元素 改变元素内的整体 value 属值 (如果有才生效) 元素本身不改变 类似改变值update
设置属性
设置单个属性
-----------------------------------------------------------> <script> $(document).ready(function(){ $("button").click(function(){ $("#runoob").attr("href","http://www.runoob.com/jquery"); }); }); </script> -----------------------------------------------------------> <body> <p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p> <button>修改 href 值</button> <p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p> </body>
设置多个属性 .attr 后面用大括号 ({ ,}) 中间类似键值对 冒号:对应 用逗号,分割
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
});
$("p").append("追加文本");
$("p").append("追加可以设置 'html值 '"); p标签内部元素后添加 追加内容
