我要评论$(document).ready(funciton () {
// body
})
jQuery(docuement).ready(funciton () {
//body
})
$(funciton () {
// body
})
jQuery(funciton () {
// body
})
比如 jQuery 的
$符号与其他框架冲突了，此时可以释放$的使用权
// 1.释放$的使用权
// 注意点: 释放操作必须在编写其它jQuery代码之前编写
// 释放之后就不能再使用$,改为使用jQuery
// jQuery原理.noConflict();
// 2.自定义一个访问符号
var c = jQuery.noConflict();
c(function () {
alert("hello lnj");
});
$() :
什么是 jQuery 对象，它是一个伪数组，具有 length 属性
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<script>
$(function () {
var $div = $("div");
console.log($div);
var arr = [1, 3, 5];
console.log(arr);
});
</script>
</body>
定义一个类
funciton AClass() {
}
AClass.staticMethod = funciton () {
alert("111");
}
//调用
AClass.staticMethod();
AClass.prototype.instanceMethod = funciton () {
alert("222");
}
var a = new AClass();
a.instanceMethod();
原生的 forEach 方法：
第一个参数：遍历到的元素
第二个参数：当前遍历到的索引
注意：原生的 forEach 方法只能遍历数组 ，不能遍历伪数组
var arr = [1,2,3,4,5];
arr.forEach(funciton (value, index) {
console.log(index,value); // 分别打印出索引号 和 值
})
each 方法：
第一个参数： 索引号
第一个参数：遍历到的元素
注意：可以遍历伪数组
var arr = [1,2,3,4,5];
$.each(arr,funciton (index,value) {
console.log(inde,value);// 值与上面相同
})
原生的 map 方法：
第一个参数： 当前遍历到的元素
第二个参数： 索引号
第三个参数：当前被遍历的数组
注意: 和原生的 forEach 一样，不能遍历伪数组
var arr = [1,2,4,5];
arr.map(funciton (value, index, array) {
console.log(value, index);
console.log(array);
})
jQuery 中的 map 方法：
第一个参数：要遍历的数组
第二个参数：每遍历一个元素之后执行的回调函数的参数
var arr = [1, 3, 5, 7, 9];
var result = $.map(arr, function(value, index) {
return value + index;
})
each 和 map 的区别：
each 返回值就是：
map 返回值是：
去除两端的空格
注意： 只会除去两边的空格，中间空格不会
$.trim(" myname is ");//"myname is" 在控制台测试的
判断传入对象是否是 window 对象
$.isWindow(arr); // false
$.isWindow(window); // true
判断是不是真数组, 返回布尔值
arr = [1,3,4,5];
$.isArray(arr); // true
…
作用： 暂停 ready 执行
// $.holdReady(true); 作用: 暂停ready执行
$.holdReady(true);
$(document).ready(function () {
alert("ready");
});
| 参数 | 作用 |
|---|---|
| :empty | 找到既没有文本也没有子元素的指定元素 |
| :parent | 找到有文本内容或有子元素的指定元素 |
| :contains(text) | 找到指定文本内容的指定元素 |
| :has(selector) | 找到包含指定子元素的指定元素 |
什么是属性？
如何操作属性：
什么是属性节点？
如何操作属性节点？
属性和属性节点有什么区别？
<body>
<span name="aa"></span>
<script>
var span = document.getElementsByTagName("span")[0];
span.setAttribute("name", "bb");
console.log(span.getAttribute("name"));
</script>
</body>
<script>
$(function () {
/*
1.attr(): 设置或者获取元素的属性节点值
*/
// 传递一个参数, 返回第一个元素属性节点的值
// console.log($("span").attr("class"));
// 传递两个参数, 代表设置所有元素属性节点的值
// 并且返回值就是方法调用者
// console.log($("span").attr("class", "abc"));
// 传递一个对象, 代表批量设置所有元素属性节点的值
$("span").attr({
"class": "123",
"name": "888"
});
});
</script>
</head>
<body>
<span class="span1" name="it666"></span>
<span class="span2" name="it222"></span>
</body>
removeAttr(name)
<body>
<span class="span1" name="it666"></span>
<span class="span2" name="lnj"></span>
<script>
$("span").attr("class", "1");
$("span").attr("abc", "123");
$("span").removeAttr("class name");
</script>
</body>
prop 特点与 attr 一致
removeProp 特点与 removeProp 一致
注意：prop 方法不仅可以操作属性，还可以操作属性节点
官方推荐操作属性节点时，操作的属性是 布尔值 的时候，如：checked、selected、disabled… 使用 prop()，其它的使用 attr()
选中复选框为true，没选中为false:
<body>
<input type="checkbox">
<script>
console.log($("input").prop("checked")); // true / false
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr和prop 方法练习</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function() {
// 编写jQuery相关代码
// 1.给按钮添加点击事件
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function() {
// 2.获取输入框输入的内容
var input = document.getElementsByTagName("input")[0];
var text = input.value;
// 3.修改img的src属性节点的值
$("img").attr("src", text);
// $("images").prop("src", text);
}
});
</script>
</head>
<body>
<input type="text">
<button>切换图片</button><br>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
</body>
</html>
<script>
$(function () {
var btns = document.getElementsByTagName("button");
btns[0].onclick = function () {
// $("div").addClass("class1");
$("div").addClass("class1 class2");
}
btns[1].onclick = function () {
// $("div").removeClass("class2");
$("div").removeClass("class2 class1");
}
btns[2].onclick = function () {
$("div").toggleClass("class2 class1");
}
});
</script>
</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
select 和一个多选的 select 的值$().css(“属性”,“改变后的属性参数”)
<body>
<div></div>
<script>
$("div").css("width","100px");
$("div").css({
height: "100px";
background: "red";
})
</script>
</body>
获取匹配元素在当前可视窗口的相对偏移
返回的对象包含两个整型属性： top 和 left
<p>Hello</p>
$("p").offset({ top:10, left: 30 });// 获取第二段偏移
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
</script>
jQuery 中有两种绑定事件方式：
1.eventName( fn );
编码效率高，部分事件 jQuery 没有实现，所以不能添加
2.on(eventName,fn);
编码效率略低，所有js事件都可以添加
注意：
<body>
<button>我是按钮</button>
<script>
$(function() {
$("button").on("click", function() {
alert("hello click1");
});
$("button").on("click", function() {
alert("hello click2");
});
});
</script>
</body>
<body>
<button>我是按钮</button>
<script>
$(function() {
function test1() {
alert("hello lnj");
}
function test2() {
alert("hello 123");
}
// 编写jQuery相关代码
$("button").click(test1);
$("button").click(test2);
// off方法如果不传递参数, 会移除所有的事件
$("button").off();
// off方法如果传递一个参数, 会移除所有指定类型的事件
// $("button").off("click");
// off方法如果传递两个参数, 会移除所有指定类型的指定事件
// $("button").off("click", test1);
});
</script>
</body>
$(".son").myClick(function (event) {
alert("son");
});
$(".son").triggerHandler("myClick");
想要自定义事件，必须满足两个条件
$(function () {
/*
想要事件的命名空间有效,必须满足两个条件
1.事件是通过on来绑定的
2.通过trigger触发事件
*/
$(".son").on("click.zs", function () {
alert("click1");
});
$(".son").on("click.ls", function () {
alert("click2");
});
// $(".son").trigger("click.zs");
$(".son").trigger("click.ls");
});
想要事件的命名空间有效，必须满足两个条件
面试常问：利用 trigger 触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会被触发，而父元素没有命名空间的事件不会被触发，利用 trigger 触发子元素不带命名空间的事件，那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发
什么是事件委托？
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
<button>新增一个li</button>
<script>
$(function() {
$("button").click(function() {
$("ul").append("<li>我是新增的li</li>");
})
/*
以下代码的含义, 让ul帮li监听click事件之所以能够监听, 是因为入口函数执行的时候ul就已经存 在了, 所以能够添加事件之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒 泡传递给了ul,ul响应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁
*/
$("ul").delegate("li", "click", function() {
console.log($(this).html());
});
});
</script>
</body>
在 jQuery 中，如果通过核心函数找到的元素不止，那么在添加事件的时候， jQuery 会遍历所有找到的元素，给所有找到的元素添加事件
<body>
<div class="father"></div>
<script>
$(function() {
$(".father").mouseover(function() {
console.log("father被移入");
});
$(".father").mouseout(function() {
console.log("father被移出");
})
})
</script>
</body>
<body>
<button>展开</button>
<button>收起</button>
<button>切换</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
$("div").slideDown(1000, function() {
alert("展开完毕");
});
});
$("button").eq(1).click(function() {
$("div").slideUp(1000, function() {
alert("收起完毕");
});
});
$("button").eq(2).click(function() {
$("div").slideToggle(1000, function() {
alert("收起完毕");
});
});
});
</script>
</body>
true ，他们将被马上执行$("button").click(function () {
// 立即停止当前动画, 继续执行后续的动画
// $("div").stop();
// $("div").stop(false);
// $("div").stop(false, false);
// 立即停止当前和后续所有的动画
// $("div").stop(true);
// $("div").stop(true, false);
// 立即完成当前的, 继续执行后续动画
// $("div").stop(false, true);
// 立即完成当前的, 并且停止后续所有的
$("div").stop(true, true);
});
linear 和 swing。先快后慢 及 先慢后快<body>
<div>
<ul>
<li><img src="images/a.jpg" alt=""></li>
<li><img src="images/b.jpg" alt=""></li>
<li><img src="images/c.jpg" alt=""></li>
<li><img src="images/d.jpg" alt=""></li>
<li><img src="images/a.jpg" alt=""></li>
<li><img src="images/b.jpg" alt=""></li>
</ul>
</div>
<script>
$(function() {
// 0.定义变量保存偏移位
var offset = 0;
// 1.让图片滚动起来
var timer;
function autoPlay() {
timer = setInterval(function() {
offset += -10;
if (offset <= -1200) {
offset = 0;
}
$("ul").css("marginLeft", offset);
}, 50);
}
autoPlay();
// 2.监听li的移入和移出事件
$("li").hover(function() {
// 停止滚动
clearInterval(timer);
// 给非当前选中添加蒙版
$(this).siblings().fadeTo(100, 0.5);
// 去除当前选中的蒙版
$(this).fadeTo(100, 1);
}, function() {
// 继续滚动
autoPlay();
// 去除所有的蒙版
$("li").fadeTo(100, 1);
});
});
</script>
</body>
向元素后面插入一个节点
<body>
<button>调用append</button>
<p>我是段落</p>
<p>我是段落</p>
<div class="item">
<li>1我是第1个li</li>
<li>1我是第2个li</li>
<li>1我是第3个li</li>
</div>
<div class="item">
<li>1我是第1个li</li>
<li>1我是第2个li</li>
<li>1我是第3个li</li>
</div>
<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>
</body>
元素.appendTo.指定元素 ==> 将元素添加到指定元素内部的最后
特点 :
1.如果指定元素有多个,会将元素拷贝多份添加到指定元素中
2.给appendTo方法传递字符串, 会根据字符串找到所有对应元素后再添加
3.给appendTo方法传递jQuery对象,会将元素添加到jQuery对象保存的所有指定元素中
4.给appendTo方法传递DOM元素, 会将元素添加到所有指定DOM元素中
向元素前面插入一个节点
<body>
<button>调用prepend</button>
<p>我是段落</p>
<div class="item">
<li>1我是第1个li</li>
<li>1我是第2个li</li>
<li>1我是第3个li</li>
</div>
<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>
</body>
元素.prependTo.指定元素 ==> 将元素添加到指定元素内部的最前面
<p>I would like to say: </p><div id="foo"></div>
<script>
$("p").prependTo("#foo");//结果：<div id="foo"><p>I would like to say: </p></div>
</script>
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
<p>I would like to say: </p><div id="foo">Hello</div>
<script>
$("p").insertAfter("#foo");// 结果：<div id="foo">Hello</div><p>I would like to say: </p>
</script>
元素.insertBefore.指定元素 ==>将元素添加到指定元素外部的前面
<div id="foo">Hello</div><p>I would like to say: </p>
<script>
$("p").insertBefore("#foo");// <p>I would like to say: </p><div id="foo">Hello</div>
</script>
删除
<p>Hello</p> how are <p>you?</p>
<script>
$("p").remove();
</script>
// 结果 how are （p标签包括内容被删除）
匹配删除指定元素中所有的子节点
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
<script>
$("p").empty();
</script>
// p标签下的 所有子节点都被 删除
remove（）<body>
<button>替换节点</button>
<h1>我是标题1</h1>
<h1>我是标题1</h1>
<p>我是段落</p>
<script>
$(function() {
$("button").click(function() {
// 1.新建一个元素
var $h6 = $("<h6>我是标题6</h6>");
// 2.替换元素
// $("h1").replaceWith($h6);
$h6.replaceAll("h1");
});
});
</script>
</body>
<body>
<button>浅复制节点</button>
<button>深复制节点</button>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
<script>
$(function() {
$("button").eq(0).click(function() {
// 1.浅复制一个元素
var $li = $("li:first").clone(false);
// 2.将复制的元素添加到ul中
$("ul").append($li);
});
$("button").eq(1).click(function() {
// 1.深复制一个元素
var $li = $("li:first").clone(true);
// 2.将复制的元素添加到ul中
$("ul").append($li);
});
$("li").click(function() {
alert($(this).html());
});
});
</script>
</body>
i9 以下浏览器 undefined 可以被修改，为了保证内部使用的 undefined 不被修改，所以需要接受一个正确的 undefined(funciton test() {
console.log("text");
})();// 闭包；立即执行函数
var Pet = { // 示例1： call()
words : '...',
speak : function (say) {
console.log(say + ''+ this.words)
}
}
Pet.speak('Speak'); // 结果：Speak...
var Dog = {
words:'Wang'
}
//将this的指向改变成了Dog
Pet.speak.call(Dog, 'Speak'); //结果： SpeakWang
//例2 apply()
function Pet(words){
this.words = words;
this.speak = function () {
console.log( this.words)
}
}
function Dog(words){
//Pet.call(this, words); //结果： Wang
Pet.apply(this, arguments); //结果： Wang
}
var dog = new Dog('Wang');
dog.speak();
$.extend({
max:function(a, b){return a>b ? a:b;}
});
alert($.max(1,2)); // 2 扩展方法
等到 DOM 元素加载完毕，并且还会等到资源也加载完毕才会执行
window.onload = function (ev) {
// var res = document.querySelectorAll("div");
// console.log(res);
console.log("onload");
}
事件只会等到 DOM 元素加载完毕就会执行回调
document.addEventListener("DOMContentLoaded", function () {
// var res = document.querySelectorAll("div");
// console.log(res);
console.log("DOMContentLoaded...");
});
该属性描述了 document 的加载状态
值：一个文档的 readyState 可以是以下之一
loading 正在加载
uninitialized 还未开始加载
interactive 已加载，文档与用户可以交互
complete 载入完成
//语法
let string = document.readyState;
switch (document.readyState) {
case "loading":
// 表示文档还在加载中，即处于“正在加载”状态。
break;
case "interactive":
// 文档已经结束了“正在加载”状态，DOM元素可以被访问。
// 但是像图像，样式表和框架等资源依然还在加载。
var span = document.createElement("span");
span.textContent = "A <span> element.";
document.body.appendChild(span);
break;
case "complete":
// 页面所有内容都已被完全加载.
let CSS_rule = document.styleSheets[0].cssRules[0].cssText;
console.log(`The first CSS rule is: ${CSS_rule }`);
break;
}
当该属性值发生变化时，会在 document 对象上触发 readystatechange 事件。
jQuery 原型上的核心方法和属性：
jquery 获取版本号
selector 实例默认的选择器取值
length 实例默认的长度
push 给实例添加新元素
sort 对实例中的元素进行排序
splice 按照指定下标指定数量删除元素，也可以替换删除的元素
toArray把实例转换为数组返回
eq 获取指定下标的元素，获取的是jQuery类型的实例对象
first 获取实例中的第一个元素，是jQuery类型的实例对象
last 获取实例中的最后一个元素，是jQuery类型的实例对象
学习自 -> https://developer.mozilla.org/zh-CN/
还有 李南江 的 jQuery 从入门到知根知底学习视频
有的示例过长，可以到 MDN 上查。
二脸懵逼
转载附原文链接
本文地址：https://blog.csdn.net/weixin_46313446/article/details/107243244
如对本文有疑问， 点击进行留言回复！！
VScode中的react自动补全标签代码及黄色or红色警告
关于React处理input的方法和多个input共用一个方法（不用jQuery）
网友评论