初识jQuery
什么是jQuery？
他是js库，他可以简化原生js的操作
关于版本
1x支持ie678，文件稍大
2x不支持ie678
3x不支持ie678
目前大公司用的是1x
未压缩版本：有空格换行完整版本有利于阅读，开发阶段使用
压缩版本：单词不完整没空格换行不利于阅读，上线阶段使用
引入jQuery库
下载好之后
在
中引入
jQuery的入口函数
- 原生js和jQuery入口函数的加载模式不同
- 原生js会等到DOM袁术加载完毕，并且图片也加载完毕才会执行
- jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行
- 多个入口函数的情况
- 原生js如果编写多个入口函数那么后边编写的会覆盖前边编写的
- jQuery如果编写多个入口函数那么后边编写的不会覆盖前边编写的
jQuery的入口函数的写法
//第1种
// $(document).ready(function(){
// alert(‘hello inj’);
// });
//第二种
// jQuery(document).ready(function(){
// alert(‘hello inj’);
// });
//第三中
// $(function(){
// alert(‘hello inj’);
// });
//第四种
jQuery(function(){
alert(‘hello inj’);
});
在企业开发时推荐写第三种
jQuery的冲突问题
1.释放$的使用权
jQuery.noConflict();
2.自定义一个访问符号
var nj=jQuery.noConflict();
jQuery的核心函数
// $();就代表调用jQuery的核心函数
//1.接受一个函数
$(
function(){
alert('hi hi hi ')
//2.接受一个字符串
//2.1接受一个字符串选择器
var (".box1");
var ("#box2");
console.log($box1);
console.log($box2);
//2.2接受一个代码片段
var $p= $(“
我是段落
”); console.log($p);
p);
//3.接受一个DOM元素
var span=document.getElementsByTagName(“span”)[0];
console.log(span);
var (span);
console.log($span);
jQuery对象
1.什么是jQuery的对象
jQuery对象是一个伪数组
2.什么是伪数组
有0到length-1的属性，并且有length属性
静态方法和实例方法
- 直接添加给类的就是静态方法
- 静态方法通过类名调用
- 实例方法添加给实例
- 实例方法通过类的对象的实例调用
each方法
用来遍历数组或者伪数组
var arr=[1,3,5,7,9,10];
var obj={0:1,1:3,2:5,3:7,4:9,lenth:5};
/*
第一个参数遍历到的元素
第二个参数当前遍历到的索引
注意：
原生的forEach方法只能遍历数组，不能遍历伪数组
*/
arr.forEach(function(value,index){
console.log(index,value);
})
//利用jQueryeach静态方法遍历数组
/*
第一个参数便利到的索引
第二个参数遍历到的值
注意：
jQuery的each方法可以遍历伪数组
*/
$.each(arr,function(index,value){
console.log(index,value);
})
map方法
//1.利用原生js的map方法遍历
/*
第一个参数：当前遍历到的元素
第二个参数：当前遍历到的索引
第三个参数：当前被遍历的数组
注意：
可以遍历伪数组
*/
var arr=[1,3,5,7,9];
var obj={0:1,1:3,2:5,3:7,4:9,length:5};
//1.利用原生js的map方法遍历
/*
第一个参数：当前遍历到的元素
第二个参数：当前遍历到的索引
第三个参数：当前被遍历的数组
注意：
不能遍历伪数组
*/
arr.map(function(value,index,array){
console.log(value,index,array);
});
/*
第一个参数：要遍历的数组
第二个参数：每次遍历执行的回调函数
函数的第一个参数：
第一个：
遍历到的元素
第二个：遍历到的索引；
注意：
可以遍历伪数组
*/
$.map(arr,function(value,index){
console.log(index,value);
});
console.log(index,value);
return value+index;
});
//对比map和each
var res2= $.each(arr,function(index,value){
console.log(index,value);
return value+index;
})
/*
jquery中each静态方法和map的区别：
each静态方法默认的返回值就是遍历谁就返回谁
map的返回值是一个空数组
2.each不可以对回调函数中遍历的数组进行处理
在map中可以
*/