*在使用jQuery時,要在頁面最上端加上
<script src="../jquery-1.11.2.min.js"></script>
看一下js與jQuery的區別:
JS是這樣使用的:
<script type="text/javascript"> 根據ID取元素,取到的是具體的元素 var a = document.getElementById("p1"); 根據CLASS取 var a = document.getElementsByClassName("aa"); 根據標簽名取 var a = document.getElementsByTagName("div"); 根據name取 var a = document.getElementsByName("cc"); alert(a); 操作元素 操作內容 非表單元素 a.innerText = "hello"; a.innerHTML = "<span style='color:red'>world</span>"; 表單元素 a.value = "hello"; 操作屬性 a.setAttribute("bs","1"); a.getAttribute("bs"); a.removeAttribute("bs"); 操作樣式 a.style.color = red; //只能獲取內聯屬性 三個DIV隱藏 var a = document.getElementsByClassName("aa"); for(var i=0;i<a.length;i++) { a[i].style.display = "none"; } <script>
這是jQuery的使用方法():
<script type="text/javascript"> 根據ID找元素,取到的是JQUERY對象 var b = $("#a1"); 根據CLASS取 var b = $(".aa"); 根據標簽名取 var b = $("div"); 根據屬性篩選 var b = $("[name=aa]"); 操作元素 操作內容 非表單元素 b.text(); b.html();
賦值:<div id="a1">11</div>
var b = $("#a1");
b.text("aaa")
//b.html("aaa")
取值:var b = $("#a1");
alert(b.text());
//alert(b.html());
表單元素 b.val();
賦值:
var b = $("#a1"); b.val("aaa")
取值:
var b = $("#a1"); b.val();
操作屬性 b.attr("bs","1");
b.attr("bs");
b.removeAttr("bs");
操作樣式 alert(b.css("color"));
b.css("font-size","50px"); //可以獲取、設置任意樣式
alert(b[0]); 取jquery對象用eq()取元素本身用[]
隱藏三個元素 $(".aa").css("display","none");
</script>
jQuery事件:掛事件、移除事件
<style type="text/css"> #a1{color:red} .aa{ width:100px; height:100px; background-color:#39F} </style>
<div id="a1" style="width:100px; height:200px;">11</div> <div class="aa" bs="1">aaaa</div> <div class="aa" bs="2">bbbbb</div> <div class="aa" bs="3">ccccc</div>
<input type="text" id="p1" /> <input type="button" id="b1" value="掛事件" /> <input type="button" id="b2" value="移除事件" />
Jquery【加】事件 頁面加載完成 $(document).ready(function(e) { 給a1加點擊 $("#a1").click(function(){ alert('aa'); }) 給class為aa的所有元素加事件 $(".aa").click(function(){ alert($(this).attr("bs")); $(".aa").css("background-color","#39F"); $(this).css("background-color","red"); }) 第二種方式【掛】事件 $("#b1").click(function(){ $("#a1").bind("click",function(){ alert("我是掛上的事件"); }); }) $("#b2").click(function(){ $("#a1").unbind("click"); }) });