jQuery_day1
1.js与jQuery区别
1.
原生js和jQuery入口函数的加载模式不同
原生js会等到DOM元素加载完毕，并且图片也加载完毕才会执行
jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行
2.
原生的js如果编写了多个入口函数，后面编写的会覆盖前面编写的
jQuery中编写多个入口函数，后面的不会覆盖前面的
2.jQuery写法
//1.原生js的固定写法 window.onload=function (ev) { alert("h1") alert("h2") } //jQuery写法1 $(document).ready(function(){ alert("hello"); }); //jQuery写法2 jQuery(document).ready(function () { }) // jQuery写法3（推荐） $(function () { alert("hello") })
3.jquery冲突问题
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/test.js"></script>
//后引入框架中有$会把前面的框架中的$ 覆盖掉 /*可以通过jQuery.noConflict();释放$的使用权 释放之后就不能再使用$改为 */ jQuery.noConflict(); jQuery(function () { alert("hello") }) //自定义一个访问符号 var nj=jQuery.noConflict();
text.js
var $=123;
4.jquery核心函数
<script>
//$() 表示jQuery的核心函数
/*
1.接收一个函数
2.接收一个字符串
2.1接收一个字符串选择器
2.2接收一个代码片段
3.接收一个DOM
*/
//1.
$(function () {
console.log(1)
alert("hello")
//2.1返回一个jQuery对象，对象中保存了找到DOM的元素
var $box1=$(".box1")
var $box2=$("#box2")
console.log($box1);
console.log($box2);
//2.2返回一个jQuery对象，对象中保存了找到DOM的元素
var $p=$("<p>123</p>")
console.log($p);
var span=document.getElementsByTagName("span")
console.log(span)
//3.会被包装成一个jQuery对象返回给我们
var $span=$(span);
console.log($span)
});
</script>
5.jQuery对象、静态方法和实例方法
<script src="js/jquery-3.4.1.min.js"></script>
<script>
/*
jquery对象是一个伪数组-有0~length-1元素，有length属性
*/
var $div=$("div")
console.log($div)
/*
js没有类的概念，这里比拟Java中类的概念
静态方法：类上面的 类方法是属于整个类的，所以类方法的方法体中不能有与类的对象有关的内容。
实例方法：原型上面的 当一个类创建了一个对象后，这个对象就可以调用该类的方法（对象方法）。
*/
function f() {
}
f.staticMethod=function(){
alert(1)
}
//静态方法通过类名来调用
f.staticMethod()
f.prototype.instanceMethod=function () {
alert(2)
}
//实例方法通过类的实例调用
//创建一个实例（对象）
var a=new f();
a.instanceMethod();
</script>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
6.jquery的each方法
<script> //原生foreach 第一个参数-元素 第二个参数-索引 var arr=[1,2,3,4,5] arr.forEach(function (value,index) { console.log(index,value) }) //元素foreach方法只能遍历数组，不能遍历伪数组 var obj={0:1,1:2,2:5,length:5} //报错 // obj.forEach(function (value,index) { // console.log(index,value) // }) //jQuery的each方法既能静态数组，也能遍历伪数组 //第一个参数-索引 第二个参数-元素 $.each(obj,function (index,value) { console.log(obj) }) </script>
7.jquery的map方法
<script> //原生map 第一个参数-元素 第二个参数-索引 var arr=[1,2,3,4,5] var obj={0:1,1:2,2:5,length:5} //用原生js的map方法遍历 能遍历静态数组，不能遍历伪数组 //第一个参数-元素 第二个参数-索引 第三个参数-数组 arr.map(function (value,index,arr) { console.log(index,value,arr) }) /* jQuery的map 可以遍历静态数组和伪数组 第一个参数-数组 第二个参数-每遍历一个元素之后执行的回调函数 回调函数参数：第一个参数-元素 第二个参数-索引 */ var res=$.map(obj,function (index,value) { console.log(index,value) }) var res1=$.each(obj,function (index,value) { console.log(index,value) }) /* jQuery的each静态方法和map静态方法区别： each静态方法默认的返回值-遍历谁就返回谁 map静态方法默认值为空 each静态方法不支持在回调函数中对遍历的数组进行处理 map静态方法可以在回调函数中通过return对遍历的数组进行处理，生成一个新的数组返回 */ console.log(res) console.log(res1) var res3=$.each(obj,function (index,value) { console.log(index,value) return value+index }) console.log(res3)//Object { 0: 1, 1: 2, 2: 5, length: 5 } </script>
