笔记前端的$dom操作

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标签内部元素后添加  追加内容

笔记 前端的$dom操作

jqueryDOM操作

笔记前端的$dom操作