jQUery的基本操作总结
什么是jquery?
就是一个用js的插件库 解决了原生dom的操作的兼容性和代码量
使用前需要引入它的插件
以下例子以
jquery-1.12.4.js 这个版本为例
一:jquery入口函数的写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.12.4.js"></script> <script> // 1.第一种写法 $(document).ready(function () { // alert("hello lnj"); }); // 2.第二种写法 jQuery(document).ready(function () { // alert("hello lnj"); }); // 3.第三种写法(推荐) $(function () { // alert("hello lnj"); }); // 4.第四种写法 jQuery(function () { alert("hello lnj"); }); </script> </head> <body> </body> </html>
二:jquery冲突问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title></title> <script src="js/jquery-1.12.4.js"></script> <script> // 1.释放$的使用权 // 注意点: 释放操作必须在编写其它jQuery代码之前编写 // 释放之后就不能再使用$,改为使用jQuery // jQuery原理.noConflict(); // 2.自定义一个访问符号 var nj = jQuery.noConflict(); nj(function() { alert("hello lnj"); }); </script> </head> <body></body> </html>
三:jquery核心函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.12.4.js"></script> <script> // $();/jQuery原理();就代表调用jQuery的核心函数 // 1.接收一个函数 $(function () { alert("hello lnj"); // 2.接收一个字符串 // 2.1接收一个字符串选择器 // 返回一个jQuery对象, 对象中保存了找到的DOM元素 var $box1 = $(".box1"); var $box2 = $("#box2"); console.log($box1); console.log($box2); // 2.2接收一个字符串代码片段 // 返回一个jQuery对象, 对象中保存了创建的DOM元素 var $p = $("<p>我是段落</p>"); console.log($p); $box1.append($p); // 3.接收一个DOM元素 // 会被包装成一个jQuery对象返回给我们 var span = document.getElementsByTagName("span")[0]; console.log(span); var $span = $(span); console.log($span); }); </script> </head> <body> <div class="box1"></div> <div id="box2"></div> <span>我是span</span> </body> </html>
四:jquery对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title></title> <script src="js/jquery-1.12.4.js"></script> <script> $(function() { /* * 1.什么是jQuery对象 * jQuery对象是一个伪数组 * * 2.什么是伪数组? * 有0到length-1的属性, 并且有length属性,其实就是一个对象 */ var $div = $("div"); console.log($div); console.log($div[0].innerText); var arr = [1, 3, 5]; console.log(arr); }); </script> </head> <body> <div>div1</div> <div>div2</div> <div>div3</div> </body> </html>
五:静态方法和实例方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title></title> <script> // 1.定义一个类 function AClass() {} // 2.给这个类添加一个静态方法 // 直接添加给类的就是静态方法 AClass.staticMethod = function() { alert("staticMethod"); }; // 静态方法通过类名调用 AClass.staticMethod(); // 3.给这个类添加一个实例方法 AClass.prototype.instanceMethod = function() { alert("instanceMethod"); }; // 实例方法通过类的实例调用 // 创建一个实例(创建一个对象) var a = new AClass(); // 通过实例调用实例方法 a.instanceMethod(); a.staticMethod(); //报错,静态方法不能通过实例方法调用 </script> </head> <body></body> </html>
相关推荐
83510998 2020-08-08
tthappyer 2020-07-25
tztzyzyz 2020-07-05
87281248 2020-07-04
82244951 2020-06-28
89510194 2020-06-27
牵手白首 2020-06-14
开心就好 2020-06-10
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15