Javascript中的基本操作:
<script src="jquery.min.js"></script> <style> #aa { width:200px; } </style> </head> <body> <div id="aa">hello</div> <div class="bb">22</div> <div class="bb">33</div> <div class="bb">44</div> <input type="text" name="cc" /> </body> <script> var d = document.getElementById("aa");//根据ID找元素,找到是具体的DOM对象 var c = document.getElementsByClassName("bb"); var div = document.getElementsByTagName("div"); var input = document.getElementsByName("cc"); //操作内容 //1.非表单元素 d.innerHTML;//HTML代码 赋值d,innerHTML=""; d.innerTEXT;//纯文本 //2.表单元素 d.value; //操作属性 d.setAttribute("bs","pp"); //添加属性 d.getAttribute("bs"); //获取属性 d.removeAttribute("bs"); //移除属性 //操作样式 d.style.color = "red"; d.style.backgroundColor = "yellow"; //只能获取内联样式表 ,不能获取内嵌样式表和外联样式表
jQuery中的基本操作:
<script> $(document).ready(function(e) { //根据ID找元素,找出的是jQuery对象,如果要取DOM对象,取索引为0的元素 var jd = $("#aa");//根据ID //alert(jd); var jc = $(".bb");//根据class var div = $("div");//根据标签名 var ip = $("input[name=cc]"); //根据name找,利用属性选择器 //alert(ip.eq(0)[0]);//取第几个用eq()方法 for(var i =0;i<jc.length;i++) { jc.eq(i);//取数组里的第几个jquery对象 } //操作内容 //1.非表单元素 jd.html();//取值 赋值jd.html("vv"); jd.text(); //2.表单元素 jd.val();//取值 赋值jd.val("bb"); //属性操作 jd.attr("bs","aa");//设置属性 jd.attr("bs");//获取属性 jd.removeAttr("bs"); //移除属性 //操作样式 jd.css("background-color","#0F0"); //设置样式 jd.css("width"); //获取样式 //事件设置 $("#aa").click(function () //给一个元素加事件 { alert("aa"); }); $(".bb").click(function () //给多个元素加事件,设置同一个class { alert($(this).text()); }); $(".bb").css("color","#F00");; //给多个元素设置相同的样式 }); </script>