一、jQuery基础
1 初识jQuery
1.1 jQuery是什么
1.2 为什么要使用jQuery
1.3 如何使用jQuery
2 入口函数
2.1 jQuery入口函数的写法
-
方法一
$(document).ready(function () { }) -
方法二
jQuery(document).ready(function () { }) -
方法三
$(function () { }) -
方法四
jQuery(function () { })
2.2 jQuery和原生JS入口函数的区别
-
原生JS和jQuery入口函数的加载模式不同
- 原生JS会等到DOm元素加载完毕，并且图片也加载完毕后才会执行
- jQuery会等到DOM元素加载完毕，但是不会等到图片也加载完毕就会执行
-
原生JS如果编写了多个入口函数，后面编写的会覆盖前面编写的
jQuery中编写多个入口函数，后面的不会覆盖前面的
2.3 解决jQuery冲突问题
-
释放$的使用权
jQuery.noConflict()！！！释放操作必须在编写其它jQuery代码之前编写，释放之后不能再使用$，改为使用jQuery
-
自定义一个访问符号
var 访问符号 = jQuery.noConflict()
3 核心函数 $();
$();就代表调用jQuery的核心函数
3.1 传递函数
3.2 传递选择器
3.3 传递DOM对象
3.4 传递HTML
// 1、接收一个函数
$(function () {
// 2、接收一个选择器
// 返回一个jQuery对象，对象中包含了找到的DOM元素
var box1 = $(".box1")
var box2 = $("#box2")
// 3、接收一个HTML
// 返回一个jQuery对象，对象中保存了创建的DOM元素
var p = $("<p>我是段落</p>")
box1.append(p)
// 4、接收一个DOM元素
// 会被包装成一个jQuery对象返回给我们
var span = document.getElementsByTagName("span")[0]
var $span = $(span)
console.log($span)
})
4 静态方法
4.1 静态方法和实例方法
- 静态方法：直接添加给构造函数的是静态方法，通过构造函数调用
- 实例方法：添加到原型上的是实例方法，通过实例调用
4.2 $.each()
var arr = [1, 3, 5, 7, 9]
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}
/*
value:遍历到的元素
index:当前遍历的索引下标
array:当前数组
*/
// ！！！原生的forEach只能遍历数组，不能遍历伪数组
// forEach遍历数组
arr.forEach(function (value, index, array) {
})
// each遍历数组
$.each(arr, function (index, value) {
})
// each遍历伪数组
$.each(obj, function (index, value) {
})
4.3 $.map()
var arr = [1, 3, 5, 7, 9]
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}
// ！！！原生的map只能遍历数组，不能遍历伪数组
// 原生map遍历数组
arr.map(function (value, index, array) {
})
// map遍历数组
$.map(arr, function (value, index) {
})
// map遍历伪数组
$.map(obj, function (value, index) {
})
4.4 jQuery中each和map的区别
var arr = [1, 3, 5, 7, 9]
// each默认的是返回值就是遍历谁就返回谁
// each静态方法不支持在回调函数中对遍历的数组进行处理
$.each(arr, function (index, value) {
})
// map默认的返回值是一个空数组
// map静态方法可以在回调函数中通过return对遍历的数组进行处理，然后生成一个新的数组返回
$.map(arr, function (index, value) {
return index + value
})
4.5 $.trim()
- 去除字符串两端的空格
- 参数：需要去除空格的字符串
- 返回值：去除空格之后的字符串
4.6 $.isWindow()
- 判断传入的对象是否是window对象
- 返回值：true/false
4.7 $.isArray()
- 判断传入的对象是否是真数组
- 返回值：true/false
4.8 $.isFunction()
- 判断传入的对象是否是一个函数
- 返回值：true/false
- jQuery框架本质上是一个函数
4.9 $.holdReady(true/false)
- 暂停入口函数的执行
<script>
// $.holdReady(true); 作用: 暂停ready执行
$.holdReady(true);
$(document).ready(function () {
alert("ready");
});
</script>
<button>回复ready事件</button>
<script>
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
$.holdReady(false);
}
</script>
5 jQuery对象
5.1 选择器
5.1.1 基础选择器
5.1.2 层次选择器
5.1.3 属性选择器
5.1.4 内容过滤选择器
-
:empty
找到既没有文本内容也没有子元素的指定元素
-
:parent
找到有文本内容或有子元素的指定元素
-
:contains(text)
找到包含指定文本内容的指定元素
-
:has(selector)
找到包含指定子元素的指定元素
5.2 属性操作
5.2.1 属性和属性节点
-
什么是属性？
对象身上保存的变量就是属性
-
如何操作属性？
对象.属性名 = 值
对象.属性名
对象[“属性名”] = 值
对象[“属性名”]
-
什么是属性节点？
在编写HTML代码时，在HTML标签中添加的属性就是属性节点
在浏览器中找到span这个DOM元素之后，展开看到的就是属性
在attributes属性中保存的所有内容都是属性节点
-
如何操作属性节点？
DOM元素.setAttribute(“属性名”, 值)
DOM元素.getAttribute(“属性名”)
-
属性和属性节点有什么区别？
任何对象都有属性，但是只有DOM对象才有属性节点
-
jQuery的attr方法
$("选择器").attr("属性名")：获取属性节点的值。无论找到到少个元素，都只会返回第一个元素指定的属性节点的值。$("选择器").attr("属性名", 值)：设置属性节点的值。找到多少个元素就会设置多少个元素；如果设置的属性节点不存在，系统就会自动新增。$("选择器").removeAttr("属性名")：删除所有找到元素指定的属性节点。 -
jQuery的prop方法
$("选择器").prop("属性名")：获取属性或者属性节点的值。$("选择器").prop("属性名", 值)：设置属性或者属性节点的值。$("选择器").removeProp("属性名")：删除所有找到元素指定的属性或者属性节点。 -
attr和prop的区别
官方推荐在操作属性节点时，具有 true 和 false 两个属性的属性节点，如 checked， selected 或者 disabled 使用 prop()，其他的使用 attr()
console.log($("input").prop("checked")); // true / false console.log($("input").attr("checked")); // checked / undefined
5.2.2 class操作
-
addClass()
添加一个类，如果要添加多个，多个类名之间用空格隔开即可
-
removeClass()
删除一个类，如果要删除多个，多个类名之间用空格隔开即可
-
toggleClass()
切换类，有就删除，没有就添加
5.2.3 代码/文本/值操作
$("选择器").html([代码片段])$("选择器").text([文本内容])$("选择器").val([value值])
：有参数是设置，没有是读取
5.3 CSS相关
5.3.1 jQuery操作CSS样式的方法
-
逐个设置
$("div").css("width", "100px"); $("div").css("height", "100px"); $("div").css("background", "red"); -
链式设置
！链式操作如果大于3步，建议分开
$("div").css("width", "100px").css("height", "100px").css("background", "blue"); -
批量设置
$("div").css({ width: "100px", height: "100px", background: "red" }); -
获取css样式值
$("div").css("background")
5.3.2 jQuery位置和尺寸操作的方法
-
$("选择器").offset().left/top/right/bottom获取元素距离窗口的偏移位
// 设置元素的偏移位 $("选择器").offset({ left: 10 }) -
$("选择器").position().left/top/right/bottom获取元素距离定位元素的偏移位
position方法只能获取不能设置
5.3.3 jQuery的scrollTop方法
-
$("选择器").scrollTop([偏移的数值])：无参数代表获取滚动的偏移位，有参数代表设置// ！！为了保证浏览器的兼容，获取**网页滚动**的偏移位置需要按照以下写法 $('body').scrollTop() + $('html').scrollTop() // 设置**网页滚动**的偏移位置需要按照以下写法 $('body,html').scrollTop(300)
5.4 jQuery事件处理
5.4.1 事件绑定
$("选择器").事件名称(function(){})$("选择器").on("事件名称", function(){})
5.4.2 事件移除
$("选择器").off()
- 不传参数，移除所有事件
- 传递一个参数，移除指定类型的事件
- 传递两个参数，移除所有指定类型的指定事件
function test1() {
alert("hello lnj");
}
function test2() {
alert("hello 123");
}
$("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方法如果传递两个参数, 会移除所有指定类型的指定事件
$("button").off("click", test1);
5.4.3 事件冒泡和默认行为
$(".son").click(function (event) {
alert("son");
// return false; // 阻止事件冒泡
event.stopPropagation(); // 阻止事件冒泡
});
$(".father").click(function () {
alert("father");
});
$("a").click(function (event) {
alert("弹出注册框");
// return false; // 阻止默认行为
event.preventDefault(); // 阻止默认行为
});
5.4.4 事件自动触发
$("选择器").trigger("事件名称")：会触发事件冒泡和默认行为$("选择器").triggerHandler("事件名称")：不会触发事件冒泡和默认行为
5.4.5 自定义事件
- 想要自定义事件，必须满足两个条件
- 事件必须通过 on 绑定
- 事件必须通过 trigger/triggerHandler 触发
5.4.6 事件命名空间
$(".father").on("click.ls", function () {
alert("father click1");
});
$(".father").on("click", function () {
alert("father click2");
});
$(".son").on("click.ls", function () {
alert("son click1");
});
// 利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发
$(".son").trigger("click.ls");
// 利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发
$(".son").trigger("click");
5.4.7 事件委托
$(function () {
/*
1.什么是事件委托?
请别人帮忙做事情, 然后将做完的结果反馈给我们
*/
$("button").click(function () {
$("ul").append("<li>我是新增的li</li>");
})
/*
在jQuery中,如果通过核心函数找到的元素不止一个, 那么在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件
*/
// $("ul>li").click(function () {
// console.log($(this).html());
// });
/*
以下代码的含义, 让ul帮li监听click事件
之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件
之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul,ul响应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁
*/
$("ul").delegate("li", "click", function () {
console.log($(this).html());
});
});
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
<button>新增一个li</button>
5.4.8 移入移出事件
-
mouseover/mouseout事件：子元素被移入移出也会触发父元素的事件 -
mouseenter/mouseleave事件：子元素被移入移出不会触发父元素的事件 -
hover事件：子元素被移入移出不会触发父元素的事件// 两个参数 $("选择器").hover(function(){ console.log("移入了"); }, function(){ console.log("移出了"); }) // 一个参数 $("选择器").hover(function(){ console.log("移入移出了"); })
5.5 动画效果
5.6 文档处理
补充
1、什么是jQuery对象
- jQuery对象是一个伪数组
2、什么是伪数组
- 有 0 到 length - 1 的属性，并且有length属性
扫一扫
1503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
