JQuery笔记
JQuery和JS入口函数的区别
获取dom元素
// 原生js
window.onload = function () {
console.log(document.querySelector("img"));
};
//JQuery
$(document).ready(function () {
console.log($("img")[0]);
});
获取图片width
// 原生js
window.onload = function () {
console.log(document.querySelector("img").width);
};
// JQuery
$(document).ready(function () {
console.log($("img").width());
});
js可以获取到，JQuery获取不到
- 原生JS和JQuery入口元素的加载模式不同
- 原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行
- JQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行
// 原生js
window.onload = function () {
alert("1");
};
window.onload = function () {
alert("2");
};
//弹2
// JQuery
$(document).ready(function () {
alert("3");
});
$(document).ready(function () {
alert("4");
});
//弹3,4
- 原生JS如果编写了多个入口函数，后面编写的会覆盖前面编写的
- JQuery中编写多个入口函数，后面的不会覆盖前面的
JQuery入口函数多种写法
// 写法1
$(document).ready(function () {
console.log("1");
});
// 写法2
jQuery(document).ready(function () {
console.log("2");
});
// 写法3
$(function () {
console.log("3");
});
// 写法4
jQuery(function () {
console.log("4");
});
JQuery的核心函数
$(function () {
// 接收一个函数
// 那不就是入口函数嘛，哈哈
// 接收一个字符串
console.log($("img")[0]);
// 接收一个字符串选择器
console.log($("#box01"));
// 接收一个字符串代码片段
console.log($("<p>我是段落</p>"));
// 接收一个DOM元素
//会被包装成一个JQuery对象返回
var span = document.querySelector("span");
console.log($(span));
});
静态方法和实例方法
$(function () {
function function01() { function01.staticMethod = function () { alert("static");
}
// 静态方法调用
function01.staticMethod();
// 实例方法
function01.prototype.instanceMethod = function () {
alert("instance");
}
var a = new function01();
// 通过实例调用实例方法
a.instanceMethod();
});
静态方法each方法
$(function () {
var arr = [1, 3, 5, 7, 9];
// 第一个参数：遍历到的元素
// 第二个参数：当前遍历到的索引
// 原生js只能遍历数组，不能遍历伪数组
arr.forEach(function (value, index) {
console.log(value + ":" + index);
});
// 第一个参数：当前遍历到的索引
// 第二个参数：遍历到的元素
// 可以遍历伪数组
$.each(arr, function (index, value) {
console.log(value + ":" + index);
});
});
map方法
$(function () {
var arr = [1, 3, 5, 7, 9];
// 原生js的map方法遍历
// 第一个参数：当前遍历的元素
// 第二个参数：当前遍历到的索引
// 第三个参数：当前被遍历的数组
// 不能遍历伪数组
arr.map(function (value, index, array) {
console.log(value, index, array);
});
// 回调函数
// 第一个参数：要遍历的数组
// 第二个参数：没遍历一个元素之后执行的回调函数
// 可以遍历伪数组
$.map(arr, function (value, index) {
console.log(value, index);
})
});
JQuery的map和each区别？
-
each默认返回值就是遍历的对象
-
map默认返回值是空数组
-
each不支持在回调函数中对遍历的数组进行处理
-
map可以在回调函数的返回值中处理遍历的数组
其他静态方法
// 去除两边的空格
var str=" str ";
console.log(str);
var res=$.trim(str);
console.log(res);
// 判断是否为window对象
console.log($.isWindow(window));
// 判断是否为数组对象
console.log($.isArray(str));
静态方法holdReady
暂停入口函数
$.holdReady(true)
false：恢复入口函数
内容选择器
// 既没有子元素也没有文本内容的指定元素
console.log($("div:empty"));
// 有文本内容或者有子元素的指定元素
console.log($("div:parent"));
// 包含指定文本(div01)内容的指定元素
console.log($("div:contains('div01')"));
// 包含指定子元素(span)的指定元素
console.log($("div:has('span')"));
属性和属性节点
原生JS
function Person() {
}
var person = new Person();
// 属性
person.name = "jack";
person["age"] = 12;
console.log(person.name);
console.log(person.age);
// 设置属性节点
$(".div01")[0].setAttribute("name", "haha");
// 获取属性节点
console.log($(".div01")[0].getAttribute("name"));
JQuery
// attr()
// 注意点：
//一个参数是获取： 无论找到多少个元素，都只会返回第一个元素指定的属性节点的值
// 两个参数是设置：找到多少个元素就会设置多少个元素
// 设置属性节点
$(".div01").attr("name", "haha");
// 获取属性节点
console.log($(".div01").attr("name"));
// removeAttr
// 注意点：
// 删除找到的所有指定元素的属性节点(name和class节点)
$(".div01").removeAttr("name class");
prop和removeProp
// prop特点和attr一致
$("div").eq(1).prop("demo","haha");
console.log($("div").eq(1).prop("demo"));
// removeProp和removeAttr一致
$("div").removeProp("demo");
console.log($("div").eq(1).prop("demo"));
// prop能操作属性，还能操作属性节点
$("div").eq(1).prop("class","haha");
// prop和attr区别
console.log($("input").prop("checked"))//true or false
console.log($("input").attr("checked"))//checked or undefined
操作类
<style>
.red {
background-color: red;
}
.border {
border: 1px solid #000;
}
div {
height: 100px;
width: 100px;
}
</style>
<script>
$(function () {
var btn01 = $("button")[0];
btn01.addEventListener("click", function () {
// 添加类（red border）
$("div").addClass("red border")
});
var btn02 = $("button")[1];
btn02.addEventListener("click", function () {
// 删除类（red border）
$("div").removeClass("red border")
});
var btn03 = $("button")[2];
btn03.addEventListener("click", function () {
// 切换类（有就删除，没有就添加）
$("div").toggleClass("red border")
});
});
</script>
</head>
<body>
<button>添加</button>
<button>删除</button>
<button>切换</button>
<div></div>
</body>
文本值
// 和原生的innerHtml一致
// 设置普通文本
$("div").eq(0).html("我是普通文本呀");
// 设置标签
$("div").eq(1).html("<p>我是p标签</p>");
// 获取标签
console.log($("div").eq(0).html());
console.log($("div").eq(1).html());
// 和原生的innerText一致
// 设置普通文本
$("div").eq(0).text("我是普通文本呀");
// 设置标签
$("div").eq(1).text("<p>我是p标签</p>");
// 设置输入框的输入值
$("input").eq(0).val("我是普通文本呀");
// 设置输入框的输入值 <p>我是p标签</p>
$("input").eq(1).val("<p>我是p标签</p>");
// 获取输入框的输入值
console.log($("input").eq(1).val());
操作样式
// 设置样式
$("div").css({
width: "100px",
height: "100px",
backgroundColor: "red"
});
// 获取样式
console.log($("div").css("width"));
位置
// 获取元素宽度
console.log($("div").eq(0).width());
// 左偏移量距离屏幕，可以设置offset({left:20px})
console.log($("div").eq(0).offset().left);
// 左偏移量距离上一个定位元素，不能设置
console.log($("div").eq(0).position().left);
scroll滚动
window.addEventListener("scroll", function () {
// 滚动偏移位
console.log($(window).scrollTop());
});
$("textarea")[0].addEventListener("scroll", function () {
// 可以设置滚动偏移量
console.log($("textarea").scrollTop(100));
});
事件绑定
// 多个绑定事件都不会覆盖
$("button").eq(0).click(function(){
alert("click");
});
$("button").eq(0).mouseenter(function(){
alert("mouseenter");
});
// 多个绑定事件都不会覆盖
$("button").eq(0).on("click",function(){
alert("click");
});
$("button").eq(0).mouseenter(function(){
alert("mouseenter");
});
事件移除
function clickEvent(){
alert("click");
}
function mouseenterEvent(){
alert("mouseenter");
}
// 多个绑定事件都不会覆盖
$("button").eq(0).click(clickEvent);
$("button").eq(0).mouseenter(mouseenterEvent);
// 不传递参数，则解除所有事件
// $("button").off();
// 传递一个参数，解除指定类型的事件
$("button").off("mouseenter");
// 解除指定类型的指定事件
$("button").off("mouseenter",click);
事件冒泡和默认行为
$(".son").click(function (event) {
alert("son");
// 阻止事件冒泡方法一
// return false;
// 阻止事件冒泡方法二
event.stopPropagation();
});
$(".father").click(function () {
alert("father");
});
$("a").click(function(event){
// 阻止默认行为方法一
// return false;
// 阻止默认行为方法二
event.preventDefault();
})
事件自动触发
$(".father").click(function () {
alert("father");
});
// 自动触发事件，触发冒泡，会触发默认行为
$(".father").trigger("click");
// 自动触发事件，不会触发冒泡，不会触发默认行为
$(".father").triggerHandler("click");
事件委托
// 事件委托：请别人帮忙办事，将结果反馈给我
$("button").click(function(){
$("ul").append("<li>n个小li</li>")
});
$("ul").delegate("li","click",function(){
console.log($(this).html());
});
节点
添加
// 新建节点
var $li = $("<li></li>");
// 添加节点到最后
// $("ul").append($li);
// $("ul").prepend($li);
// 添加节点到最前面
// $li.appendTo($("ul"));
// $li.prependTo($("ul"));
// 添加节点到指定元素的后面
// $("ul").after($li);
// $li.insertAfter($("ul"));
// 添加节点到指定元素的前面
// $("ul").before($li);
// $li.insertBefore($("ul"));
删除
// 删除指定元素
// $("li").eq(0).remove();
// $("li").remove(".choice");
// $("li").eq(0).detach();
// $("li").eq(0).detach(".choice");
// 删除指定元素的内容和元素
// $("li").eq(0).empty();
替换
var $span=$("<span></span>")
// $("li").replaceWith($span);
// $span.replaceAll($("li"));
复制
var $span = $("<span></span>");
// 浅复制：只会复制元素，不会复制事件
var shallow = $("li:first").clone(false);
console.log(shallow);
// 深复制：复制元素，会复制事件
var deep = $("li:first").clone(true);
console.log(shallow);
280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
