06-jQuery核心函数
<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>
07-jQuery对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07-jQuery对象</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);
var arr = [1, 3, 5];
console.log(arr);
});
</script>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>
08-静态方法和实例方法
<script>
// 1.定义一个类
function AClass() {
}
// 2.给这个类添加一个静态方法
// 直接添加给类的就是静态方法
AClass.static1Method666 = function () {
alert("staticMethod");
}
// 静态方法通过类名调用
AClass.static1Method666();
console.log(AClass);
// 3.给这个类添加一个实例方法
AClass.prototype.instanceMethod666 = function () {
alert("instanceMethod");
}
// 实例方法通过类的实例调用
// 创建一个实例(创建一个对象)
var a = new AClass();
// 通过实例调用实例方法
a.instanceMethod666();
console.log(a);
</script>
09-静态方法each方法
forEach()
方法为每个数组元素调用一次函数(回调函数)。
<script>
var arr = [1, 3, 5, 7, 9];
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
/*
第一个参数: 遍历到的元素
第二个参数: 当前遍历到的索引
注意点:
原生的forEach方法只能遍历数组, 不能遍历伪数组
*/
// arr.forEach(function (value, index) {
// console.log(index, value);
// });
// obj.forEach(function (value, index) {
// console.log(index, value);
// });
// 1.利用jQuery的each静态方法遍历数组
/*
第一个参数: 当前遍历到的索引
第二个参数: 遍历到的元素
注意点:
jQuery的each方法是可以遍历伪数组的
*/
// $.each(arr, function (index, value) {
// console.log(index, value);
// });
$.each(obj, function (index, value) {
console.log(index, value);
});
</script>
原生的forEach方法只能遍历数组, 不能遍历伪数组
jQuery的each方法是可以遍历伪数组的
10-静态方法map方法
map()
方法通过对每个数组元素执行函数来创建新数组。
map()
方法不会对没有值的数组元素执行函数。
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方法遍历
/*
第一个参数: 当前遍历到的元素
第二个参数: 当前遍历到的索引
第三个参数: 当前被遍历的数组
注意点:
和原生的forEach一样,不能遍历的伪数组
*/
var newarr;
newarr = arr.map(function (value, index, array) {
value++;
console.log(index, value, array);
return value;
});
console.log(arr);
console.log(newarr);
obj.map(function (value, index, array) {
console.log(index, value, array);
});
var arr = [1, 3, 5, 7, 9];
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
var newarr = $.map(arr, function (value, index) {
// console.log(index, value);
value++;
return value;
});
var res = $.map(obj, function (value, index) { //得到的res为一个新的数组
// console.log(index, value);
value++;
return value;
});
var res2 = $.each(obj, function (index, value) {
// console.log(index, value);
value++;
return value;
});
console.log(newarr);
console.log(res);
console.log(res2);
/*
jQuery中的each静态方法和map静态方法的区别:
each静态方法默认的返回值就是, 遍历谁就返回谁
map静态方法默认的返回值是一个空数组
each静态方法不支持在回调函数中对遍历的数组进行处理
map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回
*/