---恢复内容开始---
使用jQuery要引用jQuery文件
<head></head>写在头里
<body> <div></div> <span id="aa"></span> <p class="bb"></p> <input type="button" name="cc" value="ff"/> </body> <script type="text/javascript"> var a = document.getElementById("aa");//根据id获取 var a = document.getElementsByClassName("bb");//根据class获取 var a = document.getElementsByName("cc");//表单元素根据name获取 var a = document.getElementsByTagName("div");//根据标签名查找 </script>
jQuery中获取元素
<body> <div> <a id="dd"></a> </div> <span id="aa"></span> <p class="bb"></p> <input type="button" name="cc" value="ff"/> </body> <script type="text/javascript"> var a = $("#aa");//根据id找 var a = $(".bb");//根据class找 class找到的是数组所以可以取索引 alert(a[0]); alert(a[1]); var a = $("div");//根据标签名查找 找到的是数组所以可以取索引 alert(a[1]); var a = $("[name='cc']");//根据属性查找 var a = $("[id='aa']");//根据属性查找 var a = $("div").children("#dd");//取子类 </script>
二、操作内容
js操作内容
<body> <div> <a id="dd"></a> </div> <span id="aa"><a>你好大家</a></span> <div class="bb"><p>大家好</p></div> <input type="button" name="cc" value="ff"/> </body> <script type="text/javascript"> var a = document.getElementById("aa"); var b = document.getElementsByClassName("bb"); var c = document.getElementsByName("cc"); a.innerHTML = "<p>你好大家</p>"//修改代码和文字 b.innerText //修改文字信息 c.value//修改表单元素的value值 </script>
jQuery操作内容
<body> <div> <a id="dd"></a> </div> <span id="aa"><a>你好大家</a></span> <div class="bb"><p>大家好</p></div> <input type="button" name="cc" value="ff"/> </body> <script type="text/javascript"> var a = $("#aa"); var b = $(".bb"); var c = $("[name='cc']"); a.html("<p>你好大家</p>")//修改代码和文字//取值()为空 b.text("hao")//修改文字信息 取值()为空 c.val("hello")//修改表单VALUE </script>
三 操作属性
js操作属性
<body> <div> <a id="dd"></a> </div> <span id="aa"><a>你好大家</a></span> <div class="bb"><p>大家好</p></div> <input type="button" name="cc" value="ff"/> </body> <script type="text/javascript"> var a = document.getElementById("aa"); var b = document.getElementsByClassName("bb"); var c = document.getElementsByName("cc"); a.setAttribute("","")//设置属性 a.removeAttribute("")//移出属性 a.getAttribute("")//获取属性 </script>
jquery操作属性
<body> <div> <a id="dd"></a> </div> <span id="aa"><a>你好大家</a></span> <div class="bb"><p>大家好</p></div> <input type="checkbox" name="cc" value="ff"/> </body> <script type="text/javascript"> var a = $("#aa"); var b = $(".bb"); var c = $("[name='cc']"); a.attr("","")//设置属性 a.removeAttr("aa")//移出属性 a.attr("aa")//获取属性 c.prop("checked",true)//true是选中,false是不选中 </script>
四、操作样式
js操作样式:只操作内联样式
<body> <div> <a id="dd"></a> </div> <span id="aa" style="background-color:#0FF; 20px; height:30px;"><a>你好大家</a></span> <div class="bb"><p>大家好</p></div> <input type="button" name="cc" value="ff"/> </body> <script type="text/javascript"> var a = document.getElementById("aa"); var b = document.getElementsByClassName("bb"); var c = document.getElementsByName("cc"); a.style.backgroundColor = "red"//修改背景色 </script>
jQuery操作样式:可以操作内嵌样式
<body> <div> <a id="dd"></a> </div> <span id="aa"><a>你好大家</a></span> <div class="bb" ><p>大家好</p></div> <input type="checkbox" name="cc" value="ff"/> </body> <script type="text/javascript"> var a = $("#aa"); var b = $(".bb"); var c = $("[name='cc']"); a.css("","")//设置css样式 a.css("width")//获取css样式 b.eq(0).addClass("")//增加class数组中索引为0的样式 b.addClass("")//增加样式 a.removeClass("")//移出样式 </script>
---恢复内容结束---