jQuery 入门
学习黑马程序员Pink老师的jQuery课程做的笔记,老师讲解很透彻。
这篇博客基本把讲到的知识点都记录下来了,对一些知识点做了汇总。
希望对你的学习有帮助。
欢迎点赞哦~
文章目录
开始
什么是jQuery
- 是JavaScript 的一个库
- 比原生js操作简洁
jQuery的使用
-
官网下载jQuery文件
- 版本的区别
- 带min的文件为压缩后的(production,不能看源码)
- 未压缩的不带min(development,可以看源码)
- 版本的区别
-
引入jQuery
<script scr="js/jquery-1.12.4.min.js"></script>
jQuery的加载
- Js入口函数会在DOM元素加载完毕并且图片也加载完毕之后再执行
- jQuery入口函数会等到DOM元素加载完毕,但不会等到图片加载完毕再执行。
jQuery的四种入口函数
等待DOM结构渲染完毕后执行内部代码,不必等到所有外部资源加载完成
$(document).ready(function (){
alert("hello jquery");
})
jQuery(document).ready(function () {
alert("hello");
})
//推荐,写的最少
$(function () {
alert("hi");
})
jQuery(function () {
alert("hi");
})
jQuery的对象
使用$
-
是jQuery的别称
-
是顶级对象,类似js中的
window
,可以调用各个方法 -
冲突——多库共存
原因:多个js文件都对dollar符
$
有定义。解决方法:
-
释放使用权
jQuery.noConflict(); //1.释放操作在其他函数之前 //2.释放后不能用dollar符
-
修改访问符号
var sym = jQuery.noConflict(); //此时sym为新的访问符号
-
DOM对象和jQeury对象
- 定义
使用原生方法获得的对象就是DOM对象。
使用jQuery获得的是jQuery对象。本质是通过顶级对象把DOM元素进行了封装,封装成数组了。
两者的区别是jQuery对象只能使用jq的方法,相反也一样。
-
如何转换?
-
DOM->jQuery
$(DOM对象)
-
jQuery->DOM
$('div')[index]; $('div').get(index);
-
jQuery对象拷贝
$.extend([deep],target, obj, [obj_n]);
// target 拷贝的目标对象
// obj 待拷贝对象
// deep = ture/false深浅拷贝
浅拷贝是把被拷贝对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象。
深拷贝时完全克隆拷贝对象而非地址,修改目标对象不会影响被拷贝对象。
jQuery选择器
基础
- 基本选择器,格式同CSS
$('选择器')
-
层级选择器
$('ul>li') // 子代选择器,只获取ul下第一层的li元素 $('ul li') // 后代选择器,获取ul下的所有li元素,包括嵌套的孙子
-
筛选选择器
:first //第一个元素
:last //最后一个元素
:eq(index) // 索引(从0开始)为index的元素
$('ul:first')//第一个ul元素
- 筛选方法
parent();
parents();// 返回祖先元素
children(selector);//子代选择器
find(selector);//相当于后代选择器
siblings(selector);//兄弟节点
nextAll();
- 排他思想
$(function() {
$("button").click(function(){
$(this).css();//对自己设置变化
$(this).siblings("button").css();//给其他兄弟去掉变化
})
})
- 链式编程
$(function() {
$("button").click(function(){
$(this).css().siblings("button").css();//对自己设置变化,给其他兄弟去掉变化
})
})
隐式迭代
jQuery会遍历匹配的所有内部DOM元素,执行相应的方法。
$('ul li').css('background', 'red');//把ul下的所有li元素背景设为红色
jQuery样式操作
操作css方法
-
修改一个
$(this).css("属性","值")
-
修改多个
$(this).css({
width:400,//属性为数可不加引号
backgroundColor:"red"//复合属性改为驼峰命名
})
设置样式类
$(this).addClass("current");//添加类
$(this).removeClass("current");//删除类
$(this).toggleClass("current");//切换类,有类则移除,无类则加上
与原生js区别
// one : .one
// js
var one = document.querySelector(".one");
one.className = "two";// one : .two
// jQuery
$(".one").addClass("two");// one: .one .two
jQuery效果
可以在这里查询。
基本
show([speed, [easing], [fn]]);
hide();
toggle();
滑动
slideDown();
slideUp();
slideToggle();
淡化
fadeIn();
fadeOut();
fadeToggle();
fadeTo(透明度);//修改不透明度
自定义动画
animate(params,[speed],[easing],[fn]);
其中,params为一组包含作为动画属性和终值的样式属性和及其值的集合(用对象实现)
动画队列
动画或效果触发后会一定会执行完毕,多次出发后会导致动画队列中显示效果延迟。可以使用stop()
函数终止上一个动画:
$("a").stop().slideToggle();
jQuery属性操作
设置固有属性
prop();
设置自定义属性值
attr("属性");// 类似原生getAttribute()
attr("属性","属性值");// 类似原生setAttribute()
数据缓存
data();// 存放在内存里
jQuery内容操作
设置元素内容
html("值");//包含标签,无参返回,有参数就修改
获得元素文本内容
text();//不包含标签
表单值
val();
jQuery元素操作
遍历元素
隐式迭代:对同一类元素做相同操作。如果做不同操作,需要使用遍历:
$("div").each(function (index, domEle) {xxx;})
// 也可以写成
$.each($("div").each(function (index, domEle) {xxx;}))
// 主要用于处理数据
其中:
第一个参数为索引号,名字可以自己定义;
第二个回调参数为dom元素对象
创建元素
let li = $("<li>i'm li</li>");
添加元素
- 内部添加
$("ul").append(li);//放到最后面
- 外部添加
after();
before();
删除元素
remove();// 删除匹配节点
empty();// 删除匹配节点的子节点
html("");
jQuery 尺寸方法
尺寸
width()/height();// 只算width/height
innerWidth()/innerHeight();// 包括padding
outerWidth()/outerHeight();// 包括padding和border
outerWidth(true)/outerHeight(true);// 包括padding、border和margin
位置
offset();// 设置(传递对象)或返回元素相对于文档的便宜所标,和父级没有关系
// offset有top left属性
position();// 根据父级位置获取距离,不能设置哦
scrollTop();//获取元素被卷去的头部和左侧
jQuery事件
jQuery事件注册
element.事件(function);
只触发一次事件?
可以用
one(事件,function);
自动触发事件
//元素.事件()
$("div").click();
// 元素.trigger("事件")
$("div").trigger("click");
// 元素.triggerHandler("事件"),不会触发元素默认行为
$("div").triggerHandler("click");
jQuery事件处理
签名
element.on(events, [selector], fn);
// events:多个事件类型,用空格隔开
// selector: 子元素选择器
// fn:回调侦听函数
常规操作
// 同一对象不同操作不同回调
$("div").on({
mouseenter:function() {
$(this).css("color", "red");
},
mouseleave:function() {
$(this).css("color", "black");
}
})
// 同一对象不同操作相同回调
$("div").on("mouseenter mouseleave", function(){
$(this).toggleClass("current");
})
事件委托
原理可以看这篇文章。简单来说,就是把原来加给子元素身上的事件绑定在父元素上,就是吧事件为拍给父元素。
$("ul").on("click", "li", function(){
alert("clicked li");
});
给动态创建的元素绑定事件
$("ol li").click(function(){
alert("click");
});
$("ol").on("li", "click", function(){
alert("on");
});
let li = $("<li>li create in future</li>");
$("ol").append(li);
// alert("on")可用
jQuery事件解绑
off(); // 解除所有事件
off("click"); // 只解除点击事件
off("click", "li");// 解除事件委托
jQuery事件对象
事件被触发就会有事件对象产生。
在on
函数中,回调函数的参数就是事件对象。
element.on(events, [selector], funtion(event){});
事件对象有这些操作:
event.preventDefault();// 阻止默认行为
evemt.stopPropagation();// 阻止冒泡