$的本质就是一个方法
是jquery 的核心函数，能完成jquery的很多功能，$()就是调用这个函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> <script> // 1.传入参数为[函数]时,$(function (){}) // 文档加载完成后执行此方法 $(function (){ // 2.传入参数为[HTML] 时 ,$("<div>html</div>div>") // 根据字符串创建元素节点对象 $("<li>橘子</li>"). appendTo("#one") // 3.传入参数为[选择器字符串]时,$("#id") // 根据选择器查找出元素节点对象 $("#two").click(function (){ alert("你好"); }); // 4.传入参数为[DOM对象]时，$(this) // 将dom对象包装为jquery对象返回 //dom对象就是原生js查找(创建)到的元素 //jQuery对象，使用jQuery查找到的元素(包装的元素)都是jQuery对象 //dom对象-jQuery对象，不能相互操作彼此的方法 //要相互操作彼此的方法需要转化 //1.dom--->jQuery对象 $(dom对象) //2.jQuery对象--->dom对象 jquery对象[0] }); </script> </head> <body> <ul id="one"> <li>苹果</li> </ul> <!-- #是链接到本页面--> <a id="two" href="#">你好</a> </body> </html>dom对象–jquery对象相互转化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> <script> $(function (){ //点击第一个按钮，让div的文字变为红色，要求使用原生dom操作 var btn01 = document.getElementById("domTodom") btn01.onclick = function (){ var divEleDom = document.getElementById("testDiv") divEleDom.style.color = "red"; } //点击第二个按钮，让div的文字变为红色，要求使用dom对象调用jQuery方法 var btn02 = document.getElementById("domToJQuery") btn02.onclick = function (){ var divEleDom = document.getElementById("testDiv") $(divEleDom).css("color","red"); } //点击第三个按钮，让div的文字变成蓝色,使用jQuery对象调用jquery方法 $("#JQueryToJQuery").click(function (){ $("#testDiv").css("color","blue"); }) //点击第四个按钮，让div的文字变成黄色,使用jQuery对象调用dom方法 $("#JQueryTodom").click(function (){ $("#testDiv")[0].style.color = "yellow" }) }); </script> </head> <body> <div id="testDiv">hello</div> <button id="domTodom">使用DOM对象调用DOM方法</button> <button id="domToJQuery">使用DOM对象调用JQuery 方法</button> <button id="JQueryToJQuery">使用JQuery对象调用JQuery方法</button> <button id="JQueryTodom">使用JQuery对象调用DOM方法</button> </body> </html>