版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
06-jQuery原型上的属性和方法
<script>
$(function () {
/*
jQ原型上的核心方法和属性：
1、jquery 获取jQ版本号
2、selector 实例默认的选择器取值
3、length 实例默认的长度
3、push 给实例添加新元素
4、sort 对实例中的元素进行排序
5、splice 按照指定下标指定数量删除元素，也可以替换删除的元素
6、toArray 把实例转换为数组返回
7、get 获取指定下标的元素，获取的是原生DOM
6、eq 获取指定下标的元素，获取的是jQuery类型的实例对象
7、first 获取实例中的第一个元素，是jQuery类型的实例对象
8、last 获取实例中的最后一个元素，是jQuery类型的实例对象
9、each 遍历实例，把遍历到的数据传给回调使用
10、map 遍历实例，把遍历到的数据传给回调使用，然后把回调的返回值收集起来组成一个新的数组返回
* */
// console.log($().jquery);
/*
var res = $("div");
console.log(res);
var res2 = res.toArray();
console.log(res2);
*/
/*
var res = $("div");
console.log(res);
// get方法如果不传递参数, 相当于调用toArray()
// console.log(res.get());
// console.log(res.get(0));
// console.log(res.get(1));
console.log(res.get(-1)); // (3 + -1) = 2
// console.log(res.get(-2)); // (3 + -2) = 1
*/
/*
var res = $("div");
// console.log(res.eq());
// console.log(res.eq(0));
// console.log(res.eq(-1));
// console.log(res.first());
console.log(res.last());
*/
/*
var arr = [1, 3, 5, 7, 9];
var obj1 = {0:"lnj",1:"333",2:"male",length:3};
var obj2 = {"name":"lnj","age":"33"};
njQuery.each(arr, function (key, value) {
// if(key === 2){
// return false;
// }
// console.log(key, value);
console.log(this);
});
// jQuery.each(arr, function (key, value) {
// // console.log(key, value);
// console.log(this);
// });
$(arr).each(function (key, value) {
// console.log(key, value);
console.log(this);
});
*/
var arr = [1, 3, 5, 7, 9];
var obj1 = {0:"lnj",1:"333",2:"male",length:3};
var obj2 = {"name":"lnj","age":"33"};
var res = njQuery.map(arr, function (value, key) {
// console.log(value, key);
if(key === 2){
return value;
}
});
console.log(res);
});
</script>
07-jQueryDOM操作相关方法
<script>
$(function () {
/*
DOM 操作:
1、empty ==> 清空指定元素中的所有内容
2、remove ==> 删除所有的元素或指定元素
*/
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
// $("div").empty();
// console.log($("div").empty());
// $("div").remove();
// console.log($("div").remove());
$("div").remove(".box");
}
});
</script>
<script>
$(function () {
/*
DOM 操作:
3、html ==> 设置所有元素的内容，获取第一个元素的内容
4、text ==> 设置所有元素的文本内容，获取所有元素的文本内容
*/
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
var $div = $("div");
// console.log($div.html());
// $div.html("123");
// $div.html("<div><span>我是span</span></div>");
// console.log($div.text());
// $div.text("123");
$div.text("<div><span>我是span</span></div>");
// console.log($div.get(0).innerText);
}
});
</script>
<script>
$(function () {
/*
DOM 操作:
5、元素.appendTo.指定元素 ==> 将元素添加到指定元素内部的最后
*/
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
/*
特点:
1.如果指定元素有多个,会将元素拷贝多份添加到指定元素中
2.给appendTo方法传递字符串, 会根据字符串找到所有对应元素后再添加
3.给appendTo方法传递jQuery对象,会将元素添加到jQuery对象保存的所有指定元素中
4.给appendTo方法传递DOM元素, 会将元素添加到所有指定DOM元素中
*/
// 接收一个字符串 $(".item"); ==> jQuery
// $("p").appendTo(".item");
// 接收一个jQuery对象 $($("div")); ==> jQuery
// $("p").appendTo($("div"));
// 接收一个DOM元素 $(divs); ==> jQuery
// var divs = document.querySelectorAll("div");
// $("p").appendTo(divs);
console.log($("p").appendTo(".item"));
}
function appendTo(source, target) {
// target.appendChild(source);
// 1.遍历取出所有指定的元素
for(var i = 0; i < target.length; i++){
var targetEle = target[i];
// 2.遍历取出所有的元素
for(var j = 0; j < source.length; j++){
var sourceEle = source[j];
// 3.判断当前是否是第0个指定的元素
if(i === 0){
// 直接添加
targetEle.appendChild(sourceEle);
}else{
// 先拷贝再添加
var temp = sourceEle.cloneNode(true);
targetEle.appendChild(temp);
}
}
}
}
// var p = document.querySelector("p");
// var ps = document.querySelectorAll("p");
// var div = document.querySelector("div");
// var divs = document.querySelectorAll("div");
// appendTo(ps, divs);
// console.log(p.cloneNode(true));
// console.log(p.cloneNode(false));
});
</script>
<script>
$(function () {
/*
DOM 操作:
7、元素.prependTo.指定元素 ==> 将元素添加到指定元素内部的最前面
*/
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
// 接收一个字符串 $(".item"); ==> jQuery
$("p").prependTo(".item");
// 接收一个jQuery对象 $($("div")); ==> jQuery
// $("p").prependTo($("div"));
// 接收一个DOM元素 $(divs); ==> jQuery
// var divs = document.querySelectorAll("div");
// $("p").prependTo(divs);
// console.log($("p").prependTo(".item"));
}
function prependTo(source, target) {
/*
调用者.insertBefore(插入的元素, 参考的元素);
insertBefore方法, 调用者是谁就会将元素插入到谁里面
*/
target.insertBefore(source, target.firstChild);
}
var p = document.querySelector("p");
var div = document.querySelector("div");
// prependTo(p, div);
});
</script>
<script>
$(function () {
/*
DOM 操作:
6、指定元素.append.元素 ==> 将元素添加到指定元素内部的最后
*/
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
// 接收一个字符串
// $("p").appendTo(".item");
$(".item").append("p");
// $(".item").append("<span>我是span</span>");
// console.log($(".item").append("p"));
// 接收一个jQuery对象 $($("div")); ==> jQuery
// $("div").append($("p"));
// 接收一个DOM元素 $(divs); ==> jQuery
// var divs = document.querySelectorAll("div");
// var ps = document.querySelectorAll("p");
// $(divs).append(ps);
}
});
</script>
<script>
$(function () {
/*
DOM 操作:
8、指定元素.prepend.元素 ==> 将元素添加到指定元素内部的最前面
*/
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
// 接收一个字符串
// $("p").prependTo(".item");
// $(".item").prepend("p");
// $(".item").prepend("<span>我是span</span>");
console.log($(".item").prepend("p"));
// 接收一个jQuery对象 $($("div")); ==> jQuery
// $("div").prepend($("p"));
// 接收一个DOM元素 $(divs); ==> jQuery
// var divs = document.querySelectorAll("div");
// var ps = document.querySelectorAll("p");
// $(divs).prepend(ps);
}
});
</script>
<script>
$(function () {
/*
DOM 操作:
元素.insertBefore.指定元素 ==>将元素添加到指定元素外部的前面
*/
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
// 接收一个字符串 $(".item"); ==> jQuery
// $("p").prependTo(".item");
$("p").insertBefore(".item");
// 接收一个jQuery对象 $($("div")); ==> jQuery
// $("p").insertBefore($("div"));
// 接收一个DOM元素 $(divs); ==> jQuery
// var divs = document.querySelectorAll("div");
// $("p").insertBefore(divs);
// console.log($("p").insertBefore(".item"));
}
function insertBefore(source, target) {
/*
调用者.insertBefore(插入的元素, 参考的元素);
insertBefore方法, 调用者是谁就会将元素插入到谁里面
*/
// 1.拿到指定元素的父元素
var parent = target.parentNode;
// 2.利用指定元素的父元素来调用insertBefore方法
parent.insertBefore(source, target);
}
var p = document.querySelector("p");
var div = document.querySelector("div");
// insertBefore(p, div);
});
</script>
<script>
$(function () {
/*
DOM 操作:
// 提示这两个方法内部需要用到nextSibling和previousSibling属性
(作业)next([expr]) 获取紧邻的后面同辈元素的元素
(作业)prev([expr]) 获取元素紧邻的前一个同辈元素
// 提示: 实现insertAfter需要用到原生JavaScript的nextSibling属性
(作业)元素.insertAfter.指定元素 ==>将元素添加到指定元素外部的后面
(作业)指定元素.after.元素 ==>将元素添加到指定元素外部的后面
元素.insertBefore.指定元素 ==>将元素添加到指定元素外部的前面
(作业)指定元素.before.元素 ==>将元素添加到指定元素外部的前面
13、元素.replaceAll.指定元素 ==> 替换所有指定元素
(作业)指定元素.replaceWith.元素 ==> 替换所有指定元素
15、clone ==> 复制节点(true深复制,false浅复制)
*/
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
// 接收一个字符串 $(".item"); ==> jQuery
$("p").replaceAll("li");
// 接收一个jQuery对象 $($("div")); ==> jQuery
// $("p").replaceAll($("li"));
// 接收一个DOM元素 $(divs); ==> jQuery
// var divs = document.querySelectorAll("div");
// $("p").replaceAll(divs);
// console.log($("p").replaceAll("li"));
}
function replaceAll(source, target) {
// 1.将元素插入到指定元素的前面
$(source).insertBefore(target);
// 2.将指定元素删除
$(target).remove();
}
var p = document.querySelector("p");
var li = document.querySelector("li");
// replaceAll(p, li);
});
</script>
<script>
$(function () {
/*
1.clone: 复制一个元素
*/
$("button").eq(0).on("click",function () {
// 1.浅复制一个元素
var $li = $("li").clone(false);
console.log($li);
// 2.将复制的元素添加到ul中
$("ul").append($li);
});
$("button").eq(1).on("click", function () {
// 1.深复制一个元素
var $li = $("li").clone(true);
// 2.将复制的元素添加到ul中
$("ul").append($li);
});
/*
li.eventsCache = {
click: [];
};
*/
$("li").on("click", function () {
alert($(this).html());
});
var li = document.querySelector("li");
li.onclick = function (ev) {
alert(123);
}
var temp = JSON.parse(JSON.stringify(li));
var ul = document.querySelector("ul");
ul.appendChild(temp);
});
</script>