jQuery学习笔记·jQuery基础
jQuery学习笔记·jQuery基础
jQuery目录
- jQuery学习笔记·jQuery基础
-
- jQuery资源
- jQuery和Js入口函数的区别
- jQuery入口函数的四种写法
- jQuery的冲突问题
- jQuery静态方法和实例方法
-
-
- 静态方法创建和调用
- 实例方法创建和调用
-
- 静态方法each方法
-
-
- js原生函数forEach遍历数组
- jQuery的each静态方法遍历数组
-
- 静态方法map方法
-
-
- 利用原生JS的map方法遍历
- 利用jQuery的map方法遍历
- jQuery中的each静态方法和map静态方法的区别
-
- jQuery的其他静态方法
-
-
- $.trim()
- $.iswindow()
- $.isArray()
- $.isFunction()
- holdReady方法
-
- jQuery的内容选择器
-
-
- empty
- parent
- contains(text)
- has(selector)
- jQuery代码
-
- jQuery属性和属性节点
-
-
- 名词解释
- 代码示例
-
- jQuery的attr方法
-
-
- attr
- removeAttr(name)
- 代码示例
-
- jQuery的prop方法
-
-
- attr方法与prop方法的区别
- attr方法与prop方法练习
-
- jQuery操作类的相关的方法
-
-
- 方法介绍
- 代码示例
-
- jQuery文本值相关的方法
-
-
- 相关方法
- 代码示例
-
- jQuery操作CSS样式的方法
- jQuery位置和尺寸操作的方法
- jQuery的scrollTop
- jQuery事件
-
-
- 事件绑定
- 事件移除(off方法)
- jQuery事件冒泡和默认行为
- jQuery事件自动触发
- 自定义事件
- 事件命名空间
- 命名空间面试题
- 事件委托
-
jQuery资源
jQuery三个版本的导入文件
jQuery和Js入口函数的区别
- 原生的JS和jQuery入口函数的加载模式不同
- 原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行
- jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行
- 原生的JS函数如果编写了多个入口函数，后面编写的回覆盖前面编写的
- jQuery中如果编写了多个入口函数，后面的不会覆盖前面的
jQuery入口函数的四种写法
//1.第一种写法
$(document).ready(function () {
})
//2.第二种写法
jQuery(document).ready(function () {
})
//3.第三种写法
$(function () {
})
//4.第四种写法
jQuery(function () {
})
jQuery的冲突问题
//1.释放$的使用权
//注意点：释放操作必须在编写其他jQuery代码之前编写
// 释放之后就不能再使用$,改为使用jQuery
//jQuery.noConflict();
//2.自定义访问符号
var nj = jQuery.noConflict();
nj(function () {
alert("hello world")
})
jQuery静态方法和实例方法
静态方法创建和调用
//1.定义一个类
function AClass() {
}
//2.给这个类添加一个静态方法
//直接添加给类就是静态方法
AClass.staticMethod = function () {
alert("staticMethod");
}
//静态方法通过类名调用
AClass.staticMethod()
//3.给这个类添加一个实例方法
AClass.prototype.instanceMethod = function () {
alert("instanceMethod");
}
实例方法创建和调用
//实例方法通过类的实例调用
//创建一个实例
var a = new AClass();
//通过实例调用实例方法
a.instanceMethod();
静态方法each方法
js原生函数forEach遍历数组
- 第一个参数：遍历到的元素
- 第二个参数：当前遍历到的索引
- 注意点： 原生的forEach方法只能遍历数组，不能遍历伪数组
var arr = [1, 3, 5, 7, 9];
var obj = {
0:1, 1:3, 2:5, 3:7, 4:9, length:5};
arr.forEach(function (value, index) {
console.log(value, index);
});
jQuery的each静态方法遍历数组
- 第一个参数：当前遍历到的索引
- 第二个参数：遍历到的元素
- 注意点： jQuery的each方法是可以遍历伪数组的
var arr = [1, 3, 5, 7, 9];
var obj = {
0:1, 1:3, 2:5, 3:7, 4:9, length:5};
$.each(arr, function (index,value) {
console.log(value, index);
})
$.each(obj, function (index,value) {
console.log(value, index);
})
静态方法map方法
利用原生JS的map方法遍历
- 第一个参数：当前遍历到的元素
- 第二个参数：当前被遍历到的索引
- 第三个参数：当前被遍历的数组
- 注意点： 和原生forEach一样，不能遍历的伪数组
var arr = [1, 3, 5, 7, 9];
var obj = {
0:1, 1:3, 2:5, 3:7, 4:9, length:5};
arr.map(function (value, index, array) {
console.log(value, index, array);
});
利用jQuery的map方法遍历
- 第一个参数：要遍历的数组
- 第二个参数：每遍历一个元素后执行的回调函数
- 回调函数的第一个参数：要遍历的元素
- 回调函数的第二个参数：遍历到的索引
- 注意点： 和jQuery的静态方法一样，map方法也可以遍历伪数组
var arr = [1, 3, 5, 7, 9];
var obj = {
0:1, 1:3, 2:5, 3:7, 4:9, length:5};
$.map(arr, function (value, index) {
console.log(index, value);
});
jQuery中的each静态方法和map静态方法的区别
- each静态方法默认返回值就是，遍历谁就返回谁
- map静态方法默认的返回值就是一个空数组
- each静态方法不支持在回调函数中对遍历的数组进行处理
- map静态方法可以在回调函数中通过return对遍历的数组尽心处理，然后生成一个新的数组返回
var res1 = $.map(obj, function (value, index) {
// console.log(index, value);
return value+index;
});
var res2 = $.each(obj, function (index,value) {
// console.log(value, index);
return value+index;
});
console.log(res1);
console.log(res2);
jQuery的其他静态方法
$.trim()
- 作用：去除字符串两端的空格
- 参数：需要去除空格的字符串
- 返回值：去除空格之后的字符串
var str = " lnj ";
var res = $.trim(str);
console.log("---"+str+"---");
console.log("---"+res+"---");
$.iswindow()
- 作用：判断传入的对象是否是window对象
- 返回值：true/false
//数组
var arr = [1, 3, 5, 7, 9];
//伪数组
var arrlike = {
0:1, 1:3, 2:5, 3:7, 4:9, length:5};
//对象
var obj = {
"name":"lnj", age:"33"};
//函数
var fn = function () {
}
//window对象
var w = window;
var res = $.isWindow(w);
console.log(res);
$.isArray()
- 作用：判断传入的对象是否是数组对象
- 返回值：true/false
$.isFunction()
- 作用：判断传入的对象是否是函数对象
- 返回值：true/false
- 注意点：jQuery本质是函数
var res = $.isFunction(jQuery);
console.log(res);
holdReady方法
- 作用：暂停ready执行
$.holdReady(true);
$(function () {
alert("ready");
});
<button>
点击按钮
button>
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
$.holdReady(false);
}
jQuery的内容选择器
HTML页面
<style>
div{
width: 50px;height: 100px;background: #ff0000;margin-bottom: 50px;}
style>
<div>div>
<div>我是divdiv>
<div>他们我是div123div>
<div><span>span>div>
<div><p>p>div>
empty
- 作用：找到既没有内容也没有子元素的指定元素
parent
- 作用：找到既有内容或有子元素的指定元素
contains(text)
- 作用：找到包含指定文本内容的指定元素
has(selector)
- 作用：找到包含指定子元素的指定元素
jQuery代码
// var $div = $("div:empty");
// var $div = $("div:parent");
// var $div = $("div:contains('我是div')");
var $div = $("div:has('span')");
console.log($div);
jQuery属性和属性节点
名词解释
1.什么是属性？
- 对象保存的变量就是属性
2.如何操作属性？
- 对象.属性名称 = 值;
- 对象.属性名称;
- 对象[“属性名称”]=值;
- 对象[“属性名称”];
3.什么是属性节点？
- 在编写HTML代码时，在HTML标签中添加的属性就是属性节点
- 在浏览器找到span这个DOM元素后，展开之后全是属性
- 在attribute属性中保持的所有内容都是属性节点
4.如何操作属性节点？
- DOM元素.setAttribute(“属性名称”, “值”);
- DOM元素.getAttribute(“属性名称”);
5.属性和属性节点有什么区别？
- 任何对象都有属性，但是只有DOM对象才有属性节点
代码示例
// function Person() {
//
// }
// var p = new Person();
// p.name = "lnj";
// console.log(p.name);
var span = document.getElementsByTagName('span')[0];
span.setAttribute("name", "lnj");
console.log(span.getAttribute("name"));
<span name="it555">span>
jQuery的attr方法
attr
- 作用：获取和设置属性节点的值
- 参数：可以传递一个参数，也可以传递两个参数
如果传递一个参数，代表获取属性节点的值
如果传递两个参数，代表设置属性节点的值 - 注意点：无论找到多少个元素，都只会返回第一个元素指定的属性节点的值
- 如果是设置：找到多少个元素就会设置多少个元素，如果设置的属性节点不存在，那么系统会自动新增
removeAttr(name)
- 作用：删除属性节点
- 参数：删除对应属性节点的名字
- 注意点：会删除所有找到元素指定的属性节点
代码示例
$(function () {
console.log($("span").attr("class"));
$("span").attr("class", "box");
$("span").attr("abc", "123");
$("span").removeAttr("class name");
});
<body>
<span class="span1" name="it666">span>
<span class="span2" name="lnj">span>
body>
jQuery的prop方法
用法与attr方法类似
attr方法与prop方法的区别
在操作具有true和false两个属性的属性节点，如checked，selected或者disabled使用prop(),其他使用attr()
console.log($("input").prop("checked"));// true/false
console.log($("input").attr("checked"));// checked/undefined
<input type="checkbox"/>
attr方法与prop方法练习
$(function () {
//1.给按钮添加点击事件
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
//2.获取输入框输入的内容
var input = document.getElementsByTagName("input")[0];
var text = input.value;
console.log(text);
//3.修改img的src属性节点的值
$("img").attr("src", text);
// $("img").prop("src", text);
}
})
<input type="text"/>
<button>切换图片button>
<br>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
jQuery操作类的相关的方法
方法介绍
1.addClass(class|fn)
- 作用：添加一个类
- 如果要添加多个，多个类名之间用空格隔开即可
2.removeClass([class|fn])
- 作用：删除一个类
- 如果要删除多个，多个类名用空格隔开即可
3.toggleClass(class|fn[,sw])
- 作用：切换类
- 有就删除，没有就添加
代码示例
<style>
*{
margin: 0;
padding: 0;
}
.class1{
width: 100px;
height: 100px;
background: red;
}
.class2{
border: 10px solid #000;
}
style>
<button>添加类button>
<button>删除类button>
<button>切换类button>
<div>div>
var btns = document.getElementsByTagName("button");
btns[0].onclick = function () {
$("div").addClass("class1");
$("div").addClass("class1 class2");
}
btns[1].onclick = function () {
$("div").removeClass("class1");
}
btns[2].onclick = function () {
$("div").toggleClass("class2");
}
jQuery文本值相关的方法
相关方法
1.html([val|fn])
2.text([val|fn])
3.val([val|fn|arr])
代码示例
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
style>
<button>设置HTMLbutton>
<button>获取HTMLbutton>
<button>设置textbutton>
<button>获取textbutton>
<button>设置valuebutton>
<button>获取valuebutton>
<div>div>
<input type="text"/>
var btns = document.getElementsByTagName("button");
btns[0].onclick = function () {
$("div").html("我是段落我是span
");
}
btns[1].onclick = function () {
console.log($("div").html());
}
btns[2].onclick = function () {
$("div").text("我是段落我是span
");
}
btns[3].onclick = function () {
console.log($("div").text());
}
btns[4].onclick = function () {
$("input").val("请输入内容");
}
btns[5].onclick = function () {
console.log($("input").val());
}
jQuery操作CSS样式的方法
1.逐个设置CSS样式
$("div").css("width", "100px");
$("div").css("height", "100px");
$("div").css("background", "red");
2.链式设置
- 注意点：链式操作如果大于三步，建议分开
$("div").css("width", "100px").css("height", "100px").css("background", "blue");
3.批量设置（常用）
$("div").css({
"width": "100px",
"height": "100px",
"background": "red"
});
4.获取css样式值
console.log($("div").css("background"));
jQuery位置和尺寸操作的方法
前台代码
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
border: 50px solid #000;
margin-left: 50px;
position: relative;
}
.son{
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 50px;
top: 50px;
}
style>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
border: 50px solid #000;
margin-left: 50px;
position: relative;
}
.son{
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 50px;
top: 50px;
}
style>
<div class="father">
<div class="son">div>
div>
<button>获取button>
<button>设置button>
1.获取元素的宽度
console.log($(".father").width());
2.获取元素距离窗口的偏移位
console.log($(".son").offset().left);
3.获取元素距离定位元素的偏移位
console.log($(".son").position().left);
4.设置元素属性
$(".father").width("500px");
$(".son").offset({
left: 10
});
// $(".son").position({
// left: 10
// });
$(".son").css({
left: "10px"
})
jQuery的scrollTop
<style>
*{
margin: 0;
padding: 0;
}
.scorll{
width: 100px;
height: 200px;
border: 1px solid #000;
overflow: auto;
}
style>
<div class="scorll">
我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div
div>
<button>获取button>
<button>设置button>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br><br><br><br>
<br>
<br>
<br>
<br>
<br>
<br><br>
<br>
<br><br><br><br>
1.获取滚动的偏移位
console.log($(".scorll").scrollTop());
2.获取网页滚动的偏移位
注意：为了保证浏览器的兼容，获取网页滚动的偏移位需要按照如下写法
console.log($("html").scrollTop()+$("body").scrollTop());
3.设置滚动的偏移位
$(".scorll").scrollTop(300);
4.设置网页滚动的偏移位
同时保证兼容性
$("html,body").scrollTop(300);
jQuery事件
事件绑定
jQuery中有两种绑定事件方式
1.eventName(fn);
编码效率略高/部分事件jQuery没有实现，所以不能添加
2.on(evenName,fn);
编码效率略低/所有js事件都可以添加
注意点：可以添加多个相同或者不同类型的事件，不会覆盖
代码示例
// $("button").click(function () {
// alert("hello lnj");
// });
// $("button").click(function () {
// alert("hello lnj2");
// });
// $("button").mouseleave(function () {
// alert("hello mouseleave");
// });
// $("button").mouseenter(function () {
// alert("hello mouseenter");
// });
$("button").on("click", function () {
alert("hello on lnj1")
})
$("button").on("click", function () {
alert("hello on lnj2")
})
<button>我是按钮button>
事件移除(off方法)
- 如果不传递参数，会移除所有的事件
- 如果传递一个参数，会移除所有指定类型的事件
- 如果传递2个参数，会移除所有指定类型的指定事件
代码示例
function test1() {
alert("hello test1");
}
function test2() {
alert("hello test2");
}
$("button").click(test1);
$("button").click(test2);
$("button").mouseleave(function () {
alert("hello mouseleave");
});
$("button").mouseenter(function () {
alert("hello mouseenter");
});
//off方法如果不传递参数，会移除所有的事件
$("button").off();
//off方法如果传递一个参数，会移除所有指定类型的事件
$("button").off("click");
//off方法如果传递2个参数，会移除所有指定类型的指定事件
$("button").off("click");
<button>我是按钮button>
jQuery事件冒泡和默认行为
前台代码
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: blue;
}
style>
<div class="father">
<div class="son">
div>
div>
<a href="www.baodu.com">我是百度a>
<form action="www.taobao.com">
<input type="text">
<input type="submit">
form>
1.什么是时间冒泡？
事件发生后，浏览器通常首先触发事件发生元素上的事件处理程序，然后是它的父元素，父元素的父元素……依此类推， 直到文档的根元素为止。
2.什么是默认行为？
DOM元素本身具有一定的行为方式，比如form表单就有提交方式。
3.如何阻止事件冒泡？
使用stopPropagation()或者return false
$(".son").click(function (event) {
alert("son");
// return false;
event.stopPropagation();
});
$(".father").click(function () {
alert("father");
});
4.如何阻止默认行为？
使用preventDefault()或者return false
$("a").click(function (event) {
alert("弹出注册框");
return false;
event.preventDefault();
});
jQuery事件自动触发
前台代码
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: blue;
}
style>
<div class="father">
<div class="son">
div>
div>
<a href="http://www.baidu.com"><span>我是百度span>a>
<form action="http://www.taobao.com">
<input type="text">
<input type="submit">
form>
1.trigger
- 如果利用trigger自动触发事件，会触发事件冒泡。
- 如果利用trigger自动触发事件，会触发默认行为。
2.triggerHandler - 如果利用triggerHandler自动触发事件，不会触发事件冒泡。
- 如果利用triggerHandler自动触发事件，不会触发默认行为。
面试问题：a标签无法直接触发默认行为，需要使用span标签
$(".son").click(function (event) {
alert("son");
});
$(".father").click(function () {
alert("father");
});
// $(".son").trigger("click");
// $(".son").triggerHandler("click"); //$("input[type='submit']").trigger("click");
// $("a").click(function () {
// alert("a");
// });
// $("a").trigger("click");
$("span").click(function () {
alert("a");
});
$("span").trigger("click");
自定义事件
前台代码
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: blue;
}
style>
<div class="father">
<div class="son">
div>
div>
想要自定义事件，必须满足两个条件
- 事件必须是通过on绑定的
- 事件必须是通过trigger来触发
$(function () {
$(".son").on("myClick", function () {
alert("son");
});
$(".son").trigger("myClick");
})
事件命名空间
想要事件的命名空间有效，必须满足两个条件
- 事件必须是通过on绑定的
- 必须是通过trigger来触发
$(function () {
$(".son").on("click.zs", function () {
alert("son1");
});
$(".son").on("click.ls", function () {
alert("son2");
});
$(".son").trigger("click.zs ");
})
命名空间面试题
1.利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会被触发，而父元素没有命名空间的事件不会被触发。
2.利用trigger触发子元素不带命名空间的事件，那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发。
$(".father").on("click.ls", function () {
alert("father click1");
});
$(".father").on("click", function () {
alert("father click2");
});
$(".son").on("click.ls", function () {
alert("son click1");
});
// $(".son").trigger("click.ls");
$(".son").trigger("click.");
事件委托
前台代码
<ul>
<li>我是第一个lili>
<li>我是第二个lili>
<li>我是第三个lili>
ul>
<button>新增一个libutton>
1.什么是事件委托？
请别人帮忙做事情，然后将结果反馈给我们。
2.在jQuery中，如果通过核心函数找到的元素不止一个，那么在添加事件的时候。
3.jQuery会遍历所有找到的元素，给所有找到的元素添加事件。
$("button").click(function () {
$("ul").append("我是新增的li ")
});
$("ul").delegate("li", "click", function () {
console.log($(this).html())
})
