jQUery的基本操作总结
Posted gsq1998
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQUery的基本操作总结相关的知识，希望对你有一定的参考价值。
什么是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>
以上是关于jQUery的基本操作总结的主要内容，如果未能解决你的问题，请参考以下文章
Visual Studio 2012-2019的130多个jQuery代码片段。