1.jquery到底是什么
jQuery的官网 http://jquery.com/
jQuery就是一个js库,使用jQuery的话,会比使用JavaScript更简单。
What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library.
It makes things like HTML document traversal and manipulation,
event handling, animation, and Ajax
much simpler with an easy-to-use API that works across a multitude of browsers.
With a combination of versatility and extensibility,
jQuery has changed the way that millions of people write JavaScript.
js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。
(animate.js、common.js)
我们知道了,jQuery其实就是一个js文件,里面封装了一大堆的方法方便我们的开发,
其实就是一个加强版的common.js,因此我们学习jQuery,其实就是学习jQuery这个js文件中封装的一大堆方法。
2.jquery的版本问题
官网下载地址:http://jquery.com/download/
jQuery版本有很多,分为1.x 2.x 3.x
1.x和2.x版本jquery都不再更新版本了,现在只更新3.x版本。
大版本分类:
- 1.x版本:能够兼容IE678浏览器
- 2.x版本:不能兼容IE678浏览器
- 3.x版本:不能兼容IE678浏览器,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678)
关于压缩版和未压缩版:
- query-1.12.4.min.js:压缩版本,适用于生产环境,因为文件比较小,去除了注释、换行、空格等东西,但是基本没有颗阅读性。
- jquery-1.12.4.js:未压缩版本,适用于学习与开发环境,源码清晰,易阅读
jquery的入口函数
使用jQuery的三个步骤:
- 引入jQuery文件
- 入口函数
- 功能实现
关于jQuery的入口函数:
//第一种写法
$(document).ready(function() {
});
//第二种写法
$(function() {
});
jQuery入口函数与js入口函数的对比:
- JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。
- jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。
3.jq对象和dom对象(重要)
- DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
- jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的 对象就是jQuery对象。
- jQuery对象其实就是DOM对象的包装集包装了DOM对象的集合(伪数组)
- DOM对象与jQuery对象的方法不能混用。
如下图这样用的话就会报错
$('div').style.display = 'none';
DOM对象转换成jQuery对象:【联想记忆:花钱】
- DOM对象转换成 JQuery对象
<body>
<video src="aa.mp4"></video>
</body>
<script>
//1. 我们可以直接获取视频得到的是 jQuery对象
// (1)直接获得
$('video');
// (2)使用原生js 获取DOM对象
var myvideo = document.querySelector('video');
$(myvideo);
$(myvideo).play(); //这个会报错的,因为jquery里面没有play这个方法
// 2.转为原生的对象
myvideo.play(); //这个可以原生的比较麻烦
// 两种方式
$('video')[0].paly(); //只有一个视频文件所有用0就可以了
$('video').get(0).play();
</script>
为什么要将jquery的转换为原生的呢?
因为有的方法是原生的有的而jquery
没有的,如上面的代码中play()
。但是由于原生的获取元素比较麻烦,而用封装之后的jquery
就比较方便。‘
4.jquery选择器
4.1.什么是jQuery选择器
- jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。
注意:jQuery选择器返回的是jQuery对象。 - jQuery选择器有很多,基本兼容了CSS1到CSS3所有的选择器,并且jQuery还添加了很多扩展性的选择器。
需要的时候可以查看文档 - jQuery选择器虽然很多,但是选择器之间可以相互替代,就是说获取一个元素,你会有很多种方法获取到。
所以我们平时真正能用到的只是少数的最常用的选择器。
4.2 基本选择器和层级选择器
隐式迭代(重要)
简单的理解,隐式迭代就是给所有匹配到的元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用
4.3 筛选选择器(方法)
更多的筛选方式如下
还是觉得上面代码写的那些方式比较好
4.4下拉菜单案例(以后再写)
jquery里面的排他思想
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.js"></script>
</head>
<body>
<button>你好啊</button>
<button>你好啊</button>
<button>你好啊</button>
<button>你好啊</button>
<button>你好啊</button>
</body>
<script>
$(function(){
// 1.隐式迭代 给所有的按钮都绑定了点击事件
$('button').click(function(){
//2.前的元素变化背景颜色
$(this).css("background","red");
//3.其余的兄弟去掉背景颜色
$(this).siblings("button").css("background","");
})
})
</script>
</html>
4.5 淘宝服饰精品案例(以后再写)
4.6 链式编程
5.元素设置
5.1 类名设置
/*1.添加一个类*/
$('li').addClass('now');
/*2.删除一个类*/
$('li').removeClass('now');
/*3.切换一个类 有就删除没有就添加*/
$('li').toggleClass('now');
/*4.匹配一个类 判断是否包含某个类 如果包含返回true否知返回false*/
$('li').hasClass('now');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式操作</title>
<script src="js/jquery-3.6.0.js"></script>
<style>
div{
width: 100px;
height: 200px;
background-color: red;
margin: 100px auto;
transition: all 0.5s;
}
.current{
background-color: yellow;
}
</style>
</head>
<body>
<div class="cont"></div>
</body>
<script>
// 操作样式的css方法
$(function(){
/* //1.添加类 addClass
$('div').click(function(){
// $(this).addClass('current');
});
//2.删除类 removeClass
$('div').click(function(){
$(this).removeClass('cont');
}) */
//3.切换类 toggleClass()
$("div").click(function(){
$(this).toggleClass("current");
})
})
</script>
</html>
下面应该是一个动图的
5.2 显示与隐藏效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script src="js/jquery-3.6.0.js"></script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div class="one"></div>
<script>
// 1.语法部分
// // 显示语法规范
// show([speed],[easing],[fn]);
// // fn为完成的时候执行的函数
// 2.案例部分
// 显示于隐藏的案例
$(function(){
$("button").eq(1).click(function(){
$("div").hide("fast");
$("div").hide(1000,function(){
alert("隐藏完毕");
})
})
$("button").eq(0).click(function(){
$("div").show("fast");
})
$("button").eq(2).click(function(){
$("div").toggle("fast");
})
})
// 一般的情况下我们都是不会写比如hide()里面的参数,因为它的参数已经很好了
</script>
</body>
</html>
5.3上拉和下拉效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 100px;
background-color: red;
display: none;
}
</style>
<script src="js/jquery-3.6.0.js"></script>
</head>
<body>
<button style="width: 100px;">下拉</button>
<button style="width: 100px;">上拉</button>
<button style="width: 100px;">切换</button>
<div class="one"></div>
<script>
$(function(){
$("button").eq(0).click(function(){
$("div").slideDown(); //下拉
})
$("button").eq(1).click(function(){
$("div").slideUp("fast");
})
$("button").eq(2).click(function(){
$("div").slideToggle();
})
})
// 一般的情况下我们都是不会写比如hide()里面的参数,因为它的参数已经很好了
</script>
</body>
</html>
运行结果
6.动画(先跳过)
7.属性操作
7.1设置或获取元素的固有属性的值
所谓的固有属性也就是元素本身自带的属性,比如元素里面的href,比如元素里的type
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script src="js/jquery-3.6.0.js"></script>
</head>
<body>
<a href="http://www.baidu.com" title="哈哈"></a>
<input index="1" type="checkbox" name="" id="" checked>
<span>dasfa</span>
<script>
$(function(){
//element.prop("属性名") prop获得元素的固有属性
console.log($("a").prop("href"));
// 设置属性值
$("a").prop("title","我们不一样");
$("input").change(function(){ //change方法也太好用了吧
console.log($(this).prop("checked")); //
})
// 2.元素的自定义属性通过attr()
$("input").attr("index",4);
// 3.数据缓存 data() 这个数据是存放在元素的内存里面的
$("span").data("uname","andy"); //这个方法的数据我们是看不到的
console.log($("span").data("uname"));
})
</script>
</body>
</html>
7.2 jquery的元素操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script src="js/jquery-3.6.0.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function(){
// 对于一以前的方式$("div").css("color","red");这个是隐式迭代的方式,不是很方便
// 接下来要谈到的是each()方法 方法遍历元素
var arr = ["red","green","blue"];
var sum = 0;
$("div").each(function(index,domEle){ //第一个参数是索引号,会自动变成 //第二个是dom对象
// dom对象没有css方法
$(domEle).css("color",arr[index]); //三个都是不一样的颜色
sum+=parseInt($(domEle).text());
})
console.log(sum);
})
</script>
</body>
</html>
7.3 jquery遍历数据$.each
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
<script src="js/jquery-3.6.0.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function(){
// 对于一以前的方式$("div").css("color","red");这个是隐式迭代的方式,不是很方便
// 接下来要谈到的是each()方法 方法遍历元素
var arr = ["red","green","blue"];
var sum = 0;
$("div").each(function(index,domEle){ //第一个参数是索引号,会自动变成 //第二个是dom对象
// dom对象没有css方法
$(domEle).css("color",arr[index]); //三个都是不一样的颜色
sum+=parseInt($(domEle).text());
})
console.log(sum);
// 2.$.each() 方法遍历元素 主要用于遍历数据 处理数据
// $.each($("div"),function(i,ele){
// console.log(i);
// console.log(ele);
// })
// 下面的这个更好
$.each(arr,function(i,ele){
console.log(i);
console.log();
})
$.each({
name:"andy",
age:18
},function(i,ele){
console.log(i); //输出的是name age
console.log(ele); //输出的是andy和age属性值
})
</script>
</body>
</html>
8 jquery事件导读
8.1事件注册
on
的事件实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件导读</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<ul>
<li>我们都是坏孩子</li>
<li>我们都是坏孩子</li>
<li>我们都是坏孩子</li>
<li>我们都是坏孩子</li>
<li>我们都是坏孩子</li>
</ul>
<ol>
</ol>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
//1.注册事件
/* $("div").click(function(){
$(this).css("background","purple");
})
$("div").mouseover(function(){
$(this).css("background","black"); //经过的时候触发
}) */
// 由于上面方式要分开写,比较麻烦,下面的就比较好
//2.事件的处理on
$("div").on({
mouseover:function(){
$(this).css("background","blue");
},
click:function(){
$(this).css("background","purple");
},
});
// (2)on可以实现事件委托(委派)
// 定义:也就是把原来加给子元素的事件绑定在父元素的身上,就是把事件委派给父元素
// $("ul li").click;
$("ul").on("click","li",function(){ //事件绑定在父元素的身上,但是触发的对象是li事件
alert("你好啊");
});
// (3)on可以动态创建元素绑定事件(用原来的方式的话就不可动态的创建了)
$("ol").on("click","li",function(){
alert(li);
})
for(let i = 0;i<10;i++){
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
}
})
</script>
</body>
</html>
运行结果
8.2 微博的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>微博案例</title>
<script src="js/jquery-3.6.0.js"></script>
<style>
</style>
</head>
<body>
<div class="box" id="weibo">
<span>微博发布</span>
<textarea name="" id="" cols="30" class="txt" rows="10"></textarea>
<button class="btn" style="width: 100px;color:pink;">发布</button>
<ul>
</ul>
</div>
<script>
$(function(){
$(".btn").on("click",function(){
var li = $("<li></li>");
li.html($(".txt").val()+"<a href='javascript:;'>删除</a>");
$("ul").prepend(li);
li.slideDown();
$(".txt").val("");
})
// 点击删除按钮可以删除当前的微博留言
/* $("ul a").click(function(){ //此时的click不能给动态创建的a添加事件
alert(11);
}) */
$("ul").on("click","a",function(){
$(this).parent().remove();
})
})
</script>
</body>
</html>
运行结果
8.3事件处理off()解绑事件
off()可以移除通过on()方法添加的事件处理程序
8.4 jquery自动触发事件tigger()
有些事件它比较希望自动触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>微博案例</title>
<script src="js/jquery-3.6.0.js"></script>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<input type="text">
<script>
$(function(){
$("div").on("click",function(){
alert(11);
})
// 自动触发事件
// 1.元素.事件()
// $("div").click(); //自动调用
// 2.方式2
// $("div").trigger("click");
//3. 方式3 就是不会触发元素的默认行为(比如下面的例子中光标不会闪烁(默认行为))
// $("div").triggerHandler("click");
$("input").on("focus",function(){
$(this).val("你好吗,你在干什么");
})
// $("input").triggerHandler("focus"); //不会有光标的闪烁
$("input").trigger("focus"); //会有光标闪烁
})
</script>
</body>
</html>
8.5 事件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>微博案例</title>
<script src="js/jquery-3.6.0.js"></script>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script>
$(function(){
$(document).on("click",function(){
console.log("点击了document");
})
$("div").on("click",function(event){
// console.log(event);
console.log("点击了div");
event.stopPropagation(); //阻止事件冒泡
})
})
</script>
</body>
</html>
9.jquery的其它知识
拷贝事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拷贝事件</title>
<script src="js/jquery-3.6.0.js"></script>
<style>
</style>
</head>
<body>
<script>
$(function(){
var targetObj = {};
var obj = {
id:1,
name:"andy",
}
// $.extend(target,obj); //语法
$.extend(targetObj,obj);
console.log(targetObj);
})
// 如果原来和现在的重复的话就会覆盖之前的
</script>
</body>
</html>
jquery多库共存
方式一:别人用了就用
方式二:自己定义一个
var wei = $.noConflick(); 将它的释放出来。
jquery插件
jquery插件库 http://www.jq22.com
jquery之家 http://www.htmleaf.com
更推荐
图片懒加载技术
本内容通过对于https://blog.csdn.net/wuyxinu/article/details/103669718下进行的
参考的视频:https://www.bilibili.com/video/BV1Sy4y1C7ha?spm_id_from=333.337.search-card.all.click里面的jquery
花时间:快速了解jquery的内容