JQuery学习笔记 偏执的太偏执、 2022-07-30 13:12 177阅读 0赞 一、jqery简介 jQuery是封装了很多预定义的js对象和函数的JS库。 第一步,首先要导入jQuery的js文件: <!-- 导入JQuery --> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 只需要在html文件中添加代码就可以了 第二步,是给组件添加选择器,下面是个小例子,弹出hello world <!-- 导入JQuery --> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> //$(function()\{\}相当于window.onload,代码写在\{\}之间 $(function()\{ //1.选取button //2.为button添加onclick响应函数 $("button").click(function()\{ //3.弹出helloworld alert("Hello World!"); \}); \}); </script> </head> <body> <Button>ClickMe</Button> </body> 二、jQuery对象 jQuery对象是通过$()包装DOM对象后产生的对象 jQuery对象可以调用jQuery里的方法,如:$("\#person").html();(通过id包装对象调用方法) jQuery对象不能使用DOM中的任何方法,同样DOM也不能使用jQuery中的任何方法 如何获取jQuery对象呢? 在变量前加“$” var $variable=jQuery对象 var variable=DOM对象 如何转换呢? jQuery对象转换成DOM对象 1.jQuery对象是一个数组对象,可以通过\[index\]的方法得到对应的DOM对象 var $or=$("\#or"); var or=$or(0); 2.使用jQuery中的get(Index)方法获得DOM对象 var $or=$("\#or"); var or=$or.get(0); DOM对象转换成jQuery对象 只需要用$()包装一下就可以了 下面是用来理解两个对象之间的关系的代码: $(function()\{ //1.选取button //2.为button添加onclick响应函数 $("button").click(function()\{ //3.弹出helloworld alert("Hello World!"); alert($(this).text()); //jQuery对象跟DOM对象 //1.获取一个jQuery对象 var $btn=$("button"); //2.jQuery对象是一个数组对象 alert($btn.length); //3.通过下标转换为DOM对象 alert($btn\[1\].firstChild.nodeValue); //4.DOM转换为jquery对象 var button=document.getElementById("btn"); alert("----"+$(button).text()); \}); \}); 三、jQuery选择器 方便、但不会报错
还没有评论,来说两句吧...