一:如何调用jQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src=""></script> </head> <body> </body> </html>
src里面找jQuery的路径,../
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../jquery/jquery-3.4.1.min.js"></script> </head> <body> </body> </html>
二:jQuery写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../jquery/jquery-3.4.1.min.js"></script> <!-- 这样写才能拿到body里面的全部元素 --> <script> // 1:原生js的固定写法 window.onload=function(ev){} // 2:原生jQuery的固定写法 $(document).ready(function(){ alert('hello'); }); </script> </head> <body> </body> </html>
{}里也是jQuery的入口函数,只有在入口函数才能拿到DOM元素
区别1:
$(document).ready()是规定DOM(网页文档)加载完成后网页内容加载之前执行的,也就是说在html加载完成后,图片加载之前。
window.onlad()是在页面所有元素(包括图片、引用文件)加载完成后执行,也就是说页面的所有东西加载完之后在加载。
区别2:
$(document).ready()比window.onload()的加载速度要快
三:jQuery的几种不同写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../jquery/jquery-3.4.1.min.js"></script> <script> //第一种写法 $(document).ready(function(){ alert('hello1'); }); //第二种写法 jQuery(document).ready(function(){ alert('hello2'); }); //第三种写法 推荐这种 $(function(){ alert('hello3'); }); //第四种写法 jQuery(function(){ alert('hello4'); }); </script> </head> <body> </body> </html>
四:jQuery核心函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../jquery/jquery-3.4.1.min.js"></script> <script> //$();代表调用jQuery的核心函数 //核心函数的作用 // 1:(入口函数)接收一个函数 // $(function(){ // alert('hello'); // }) $(function () { alert('hello'); // 2:接收一个字符串 // 2.1:接收一个字符串选择器 //返回一个jQuery对象,对象中保存了找到的DOM元素 var $box1 = $('.box1'); var $box2 = $('#box2'); console.log($box1); console.log($box2); // 2.2:接收一个代码片段 会根据字符串的代码片段创建dom元素 //返回一个jQuery对象,对象中保存了创建的DOM元素 var $p = $("<p>我是段落</p>"); console.log($p); $box1.append($p); //检验是否创建了dom元素 // 3:接收一个dom元素 把原生js函数传给jq核心函数 。会被包成一个j对象返回给我们 var span =document.getElementsByTagName('span')[0]; console.log(span); var $span=$('span'); }) </script> </head> <body> <div class="box1"></div> <div id="box2"></div> <span>我是span</span> </body> </html>
五:jQuery对象
jQuery对象是一个伪数组,伪数组有0-length-1的属性,有length属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../jquery/jquery-3.4.1.min.js"></script> <script> $(function(){ var $div=$("div"); console.log($div); var arr=[1,3,5]; console.log(arr); }); </script> </head> <body> <div>div1</div> <div>div2</div> <div>div3</div> </body> </html>
六:
只要给jQuery的核心函数传递一个字符串,这个字符串如果是一个代码片段的话,就会创建里面所有的元素