什么是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 // 释放之后就不能再使用$,改为使用jQuery11 // 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>
