什么是jquery？
就是一个用js的插件库 解决了原生dom的操作的兼容性和代码量
使用前需要引入它的插件
以下例子以
jquery-1.12.4.js 这个版本为例
一：jquery入口函数的写法
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <script src="js/jquery-1.12.4.js"></script>
7 <script>
8 // 1.第一种写法
9 $(document).ready(function () {
10 // alert("hello lnj");
11 });
12
13 // 2.第二种写法
14 jQuery(document).ready(function () {
15 // alert("hello lnj");
16 });
17
18 // 3.第三种写法(推荐)
19 $(function () {
20 // alert("hello lnj");
21 });
22
23 // 4.第四种写法
24 jQuery(function () {
25 alert("hello lnj");
26 });
27 </script>
28 </head>
29 <body>
30
31 </body>
32 </html>
二：jquery冲突问题
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title></title>
6 <script src="js/jquery-1.12.4.js"></script>
7 <script>
8 // 1.释放$的使用权
9 // 注意点: 释放操作必须在编写其它jQuery代码之前编写
10 // 释放之后就不能再使用$,改为使用jQuery
11 // jQuery原理.noConflict();
12 // 2.自定义一个访问符号
13 var nj = jQuery.noConflict();
14 nj(function() {
15 alert("hello lnj");
16 });
17 </script>
18 </head>
19 <body></body>
20 </html>
三：jquery核心函数
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <script src="js/jquery-1.12.4.js"></script>
7 <script>
8 // $();/jQuery原理();就代表调用jQuery的核心函数
9
10 // 1.接收一个函数
11 $(function () {
12 alert("hello lnj");
13 // 2.接收一个字符串
14 // 2.1接收一个字符串选择器
15 // 返回一个jQuery对象, 对象中保存了找到的DOM元素
16 var $box1 = $(".box1");
17 var $box2 = $("#box2");
18 console.log($box1);
19 console.log($box2);
20 // 2.2接收一个字符串代码片段
21 // 返回一个jQuery对象, 对象中保存了创建的DOM元素
22 var $p = $("<p>我是段落</p>");
23 console.log($p);
24 $box1.append($p);
25 // 3.接收一个DOM元素
26 // 会被包装成一个jQuery对象返回给我们
27 var span = document.getElementsByTagName("span")[0];
28 console.log(span);
29 var $span = $(span);
30 console.log($span);
31 });
32 </script>
33 </head>
34 <body>
35 <div class="box1"></div>
36 <div id="box2"></div>
37 <span>我是span</span>
38 </body>
39 </html>
四：jquery对象
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title></title>
6 <script src="js/jquery-1.12.4.js"></script>
7 <script>
8 $(function() {
9 /*
10 * 1.什么是jQuery对象
11 * jQuery对象是一个伪数组
12 *
13 * 2.什么是伪数组?
14 * 有0到length-1的属性, 并且有length属性,其实就是一个对象
15 */
16 var $div = $("div");
17 console.log($div);
18 console.log($div[0].innerText);
19
20 var arr = [1, 3, 5];
21 console.log(arr);
22 });
23 </script>
24 </head>
25 <body>
26 <div>div1</div>
27 <div>div2</div>
28 <div>div3</div>
29 </body>
30 </html>
五：静态方法和实例方法
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title></title>
6 <script>
7 // 1.定义一个类
8 function AClass() {}
9 // 2.给这个类添加一个静态方法
10 // 直接添加给类的就是静态方法
11 AClass.staticMethod = function() {
12 alert("staticMethod");
13 };
14 // 静态方法通过类名调用
15 AClass.staticMethod();
16
17 // 3.给这个类添加一个实例方法
18 AClass.prototype.instanceMethod = function() {
19 alert("instanceMethod");
20 };
21 // 实例方法通过类的实例调用
22 // 创建一个实例(创建一个对象)
23 var a = new AClass();
24 // 通过实例调用实例方法
25 a.instanceMethod();
26 a.staticMethod(); //报错，静态方法不能通过实例方法调用
27 </script>
28 </head>
29 <body></body>
30 </html>
原文地址：https://www.cnblogs.com/gsq1998/p/12253077.html
时间： 2024-10-22 20:33:43