php课程---JavaScript与Jquery的区别
使用Jquery必须在页面内引入一个Jquery包
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="jquery-1.11.2.min.js"></script> </head> <body> <div id="aa" bs="test"><span>DIV1</span></div> <div id="bb" class="a">DIV2</div> <div id="cc" class="a">DIV3</div> <div id="dd" class="a">DIV4</div> <input id="txt" bs="w" name="txt" value="hello" /> </body> <script type="text/javascript"> $(document).ready(function(e) { //1.找到元素 var a1 = document.getElementById("aa"); //JS找到的DOM对象 var bd = document.getElementById("txt"); //alert(a1); //var a2 = $("#aa"); //Jquery找到的是Jquery对象 var bd1 = $("#txt"); //alert(a2[0]); var b1 = document.getElementsByClassName("a"); var b2 = $(".a"); //alert(b2.eq(0)[0]); document.getElementsByTagName("div"); $("div"); document.getElementsByName("txt"); var c1 = $("[name=txt]"); //属性筛选 //alert(c1[0]); //2.操作内容 //alert(a1.innerHTML); //a1.innerHTML = "<span style='color:red'>hello</span>"; //a1.innerText="<span style='color:red'>hello</span>"; //alert(bd.value); //bd.value = "world"; //alert(a2.text()); //a2.text("hello"); //alert(a2.html()); //a2.html("<span style='color:red'>hello</span>"); //alert(bd1.val()); //bd1.val("world"); //3.操作属性 //a1.getAttribute("bs"); //a1.setAttribute("bs",""); //a1.removeAttribute("bs"); //alert(a2.attr("bs")); //a2.attr("bs","testjquery"); //4.操作样式 //a1.style.color = "red"; //a1.style.fontSize = "24px"; //alert(a2.css("color")); //a2.css("background-color","pink"); //5.事件 $("#aa").click(function(){ $(this).css("background-color","red"); alert("aa"); }) $(".a").click(function(){ var s1 = $(this).text(); alert(s1); }) //6.Json数据 var js = { "a":"hello", "b":123, "c":[1,2,3], "d":{"aa":5555,"bb":"hello world"}, }; }); </script> </html>
