JQuery笔记(一)jq的使用方法

我用的jq版本是支持pc版为主的最高1版本里最高的1.124版本

官网的链接是只有最新的3下载，我把我在官网下载的jq代码链接发出来，如下

点我获取jq代码

和js不同的是，jq开发者封装了一些方法

在js获取元素节点的方式是这样的:

document.getElementById("#div");

而在jq中的方式是这样的:

$("div")[0]

 

在js获取对象的方式是这样的:

document.getElementsByTagName("#div");

而在jq中的方式是这样的:

$("div")

下面我具体举个例子

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7     <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
 8     <style type="text/css">
 9         * {
10             margin: 0;
11             padding: 0;
12         }
13     </style>
14 </head>
15 
16 <body>
17     <div id="jq1"></div>
18 
19 
20 
21     <script>
22         //alert($("div")[0]);
23         //通过alert可以知道$("div")[0]是一个dom元素,后面可以通过符号.来点出一些style之类的属性
24         $(jq1)[0].style.width = "100px";
25         $(jq1)[0].style.height = "100px";
26         $(jq1)[0].style.background = "red";
27         $(jq1)[0].style.position = "absolute";
28 
29         //通过alert可以知道$("div")是一个jq对象，后面可以通过符号.来点出一些已经封装好的方法
30     </script>
31 
32 </body>
33 
34 </html>

 

通过以上代码，可以看到css中我是没有设置样式的，只是初始化了一下，

而我通过一段jq代码，我给id为jq1的DIV设置了一个样式

如图就显示出来了

所以，可以在jq中修改样式，比在CSS里面高端了一点

posted @ 2016-12-01 14:51  rookieM  阅读(1123)  评论(0)  编辑  收藏  举报