目录
本人也是一个小菜鸡，请多多交流~~！！感谢各位卷王！
一、jQuery 基本介绍
- 什么是 jQuery ？
- jQuery：JavaScript 和 查询 （Query），它就是辅助JavaScript 开发的 js 类库。 目前使用非常流行
- jQuery核心思想？
- 他的核心思想是 write less，do more （写的更少，做的更多。），所以它实现了很多浏览器的兼容问题。
- jQUery 的优点
- jQuery 是免费的、开源的，jQuery 的语法设计可以使开发更加便捷，例如：操作文档对象，选择DOM 元素，制作动画效果，事件处理，使用 Ajax 以及其他功能。
二、使用jQuery输出第一个 hello world
- 导入 jQuery 文件
- 将下载好的 jQuery 文件 放到项目中，引入 html 中
// src： 放入项目中的 jQuery 路径
<script src="../jQuery/jquery-3.6.0.js"></script><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="../jQuery/jquery-3.6.0.js"></script>
<script type="text/javascript">
/*使用 js 输出 hello */
// window.onload = function () {
// var btn = document.getElementById("btn");
// btn.onclick = function () {
// alert("say Hello")
// }
// }
$(function () { // $(): 相当于 onl oad 事件，页面加载之后。
var $btn = $("#btn"); //获取 btn 对象，相当于 document.getElementById("btn")。
$btn.click(function () { //为 btn 绑定单击事件
alert("hello world ！！")
});
});
</script>
<body>
<input type="button" id="btn" value="sayHello">
</body>
</html>为对象绑定单击事件： $对象名.click() ；
三、$() 是什么
- 那么 $ 这个符号到底是什么意思？
- $ 是 jQuery 的核心函数，能完成 jQuery 的很多功能，$() ; 就是调用这个函数
- 当 $() 括号里传入函数时
-
$(function(){ //相当于 window.onload ，在页面加载之后执行 });
-
- 当传入参数为 [ HTML字符串时 ]
- 会创建这个 html 对象
-
$(function () { $(" <div>" + " <span>hello world!</span>" + " </div>").appendTo("body"); });
- 当传入参数是 [ 选择器字符串 ] 时
- $("#ID属性") : ID 选择器，根据 ID 查询标签对象。
- $(".class属性") ：类选择器
- $(" 标签名 ") ：标签选择器
- 当传入参数时 DOM 对象时
- 会将DOM对象转换成 jQuery 对象
四、jQuery 和 DOM 对象的区别
- DOM 对象是：getElementByid() ,getElementByName()，getElementByTagName() ......这些方法创建出来的对象就是 DOM 对象
- 他的形式是：[object HTML标签名Element]
- jQuery 对象是：通过 jQuery 提供的 API，方法，以及参数是DOM 对象创建的
- 它的形式：[object Object]
-
jQUery 的本质是什么？
- 其实通过 deBug 可以看出来，其实 jQuery 是一个数组，加上一些扩展的方法。
-
那么既然是一个数组，我们遍历一下看看元素都是些什么
- jQuery 对象里面都是 DOM 对象，由此可见，其实 jQuery 就是一个封装了 DOM对象的数组 + 扩展的一些方法
- jQuery 对象的方法 DOM 对象不能用，DOM对象中的方法 jQuery 对象也不能用
-
那么jQuery 对象 和 DOM 对象怎么互相转换呢？
- DOM ---> jQuery
- 1、先获取到DOM 对象
- 2、通过 $() 函数，转换。
- DOM ---> jQuery
-
- jQuery ---> DOM
- 1、获取 jQuery 对象
- 2、通过数组下标的方法获取 DOM 对象
- jQuery ---> DOM
五、jQuery 选择器
5.1 基础选择器
- "#ID" id选择器
- ".class" 类选择器
- "标签名" 标签选择器
- "*" 选取所有元素
- "selector1，selector2" 组合选择器
- $("").css() ; 设置 jQuery对象的css 样式。
注意：搜索元素时一定要在页面加载完成之后，不然加载不到。
//第一种方法
$(function(){
//表示页面加载完成之后
});
//第二种方法
$(document).ready(function(){
});5.2 层级选择器
-
"ancestor descendant"
- ancestor : 选择有效选择器
- descendant ：ancestor 元素 的后代元素
- 简单来说就是：ancestor 这个元素包含 descendant 元素。
-
"parent > child" ：在给定的父元素下匹配所有的子元素
-
parent : 选择有效选择器【父元素】
-
child ：parent 元素的 子元素
-
-
"prev + next" ：匹配所有紧接在 prev 元素后的 next 元素
-
prev: 有效选择器
-
next ：跟在 prev 元素 后面的元素
-
-
prev ~ siblings
-
prev: 有效选择器
-
siblings ：找到与 prev元素 同级别的元素
-
5.3 基本过滤选择器
- :first 匹配找到的第一个元素
-
:last 匹配找到的最后一个元素
-
:not 去除所有与给定选择器匹配的元素
-
:even 匹配所有索引值为偶数的元素，从 0 开始计数
-
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
-
:eq(index) 匹配一个给定索引值的元素【index 从 0 开始】
-
:gt(index) 匹配所有大于给定索引值的元素
-
:lt(index) 匹配所有大于给定索引值的元素
-
:header 匹配如 h1, h2, h3之类的标题元素
-
:animated 匹配所有正在执行动画效果的元素
$(document).ready(function(){
//1.选择第一个 div 元素
$("#btn1").click(function(){
$("div:first").css("background", "#bbffaa");
});
//2.选择最后一个 div 元素
$("#btn2").click(function(){
$("div:last").css("background", "#bbffaa");
});
//3.选择class不为 one 的所有 div 元素
$("#btn3").click(function(){
$("div:not(.one)").css("background", "#bbffaa");
});
//4.选择索引值为偶数的 div 元素
/*第一个 div 索引就是1 ，第二个div 索引就是 2*/
/* 常用于表格变色 */
$("#btn4").click(function(){
$("div:even").css("background", "#bbffaa");
});
//5.选择索引值为奇数的 div 元素
$("#btn5").click(function(){
$("div:odd").css("background", "#bbffaa");
});
//6.选择索引值为大于 3 的 div 元素
$("#btn6").click(function(){
$("div:gt(3)").css("background", "#bbffaa");
});
//7.选择索引值为等于 3 的 div 元素
$("#btn7").click(function(){
$("div:eq(3)").css("background", "#bbffaa");
});
//8.选择索引值为小于 3 的 div 元素
$("#btn8").click(function(){
$("div:lt(3)").css("background", "#bbffaa");
});
//9.选择所有的标题元素
$("#btn9").click(function(){
$(":header").css("background", "#bbffaa");
});
//10.选择当前正在执行动画的所有元素
$("#btn10").click(function(){
$(":animated").css("background", "#bbffaa");
});
});
5.4 内容过滤选择器
- :contains(text) 匹配包含给定文本的元素
-
:empty 匹配所有不包含子元素或者文本的空元素【空元素】
-
:has(selector) 匹配含有选择器所匹配的元素的元素
-
:parent 匹配含有子元素或者文本的元素【非空】
$(document).ready(function(){
//1.选择 含有文本 'di' 的 div 元素
$("#btn1").click(function () {
$("div:contains(di)").css("background-color","#bbffaa")
});
//2.选择不包含子元素(或者文本元素) 的 div 空元素
$("#btn2").click(function(){
$("div:empty").css("background","#bbffaa")
});
//3.选择含有 class 为 mini 元素的 div 元素
$("#btn3").click(function(){
/*注意：最后所选的是 div 元素。不是 class 元素*/
$("div:has(.mini)").css("background", "#bbffaa");
});
//4.选择含有子元素(或者文本元素)的div元素
$("#btn4").click(function(){
$("div:parent").css("background", "#bbffaa");
});
});5.5 属性过滤选择器
- [attribute] 匹配包含给定属性的元素
-
[attribute=value] 匹配给定的属性是某个特定值的元素
-
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
-
[attribute^=value] 匹配给定的属性是以某些值开始的元素
-
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
-
[attribute*=value] 匹配给定的属性是以包含某些值的元素
-
[selector1][selector2][selectorN] 复合属性选择器，需要同时满足多个条件时使用。
$(function() {
//1.选取含有 属性title 的div元素
$("#btn1").click(function() {
$("div[title]").css("background", "#bbffaa");
});
//2.选取 属性title值等于'test'的div元素
$("#btn2").click(function() {
$("div[title='test']").css("background", "#bbffaa");
});
//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
$("#btn3").click(function() {
$("div[title!='test']").css("background", "#bbffaa");
});
//4.选取 属性title值 以'te'开始 的div元素
$("#btn4").click(function() {
$("div[title^='te']").css("background", "#bbffaa");
});
//5.选取 属性title值 以'est'结束 的div元素
$("#btn5").click(function() {
$("div[title$='est']").css("background", "#bbffaa");
});
//6.选取 属性title值 含有'es'的div元素
$("#btn6").click(function() {
$("div[title*='es']").css("background", "#bbffaa");
});
//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
$("#btn7").click(function() {
$("div[id][title*='es']").css("background", "#bbffaa");
});
//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
$("#btn8").click(function() {
$("div[title][title!='test']").css("background", "#bbffaa");
});
});5.6 表单过滤选择器
- :input 匹配所有 input, textarea, select 和 button 元素
- :text 匹配所有的单行文本框 【type 为 text 类型】
- :password 匹配所有密码框【type 为 password】
- :radio 匹配所有单选按钮【type 为 radio】
- :checkbox 匹配所有复选框【type 为 checkbox 】
- :submit 匹配所有提交按钮【type 为 submit 】
- :image 匹配所有图像域【type 为 image】
- :reset 匹配所有图像域【type 为 reset】
- :button 匹配所有按钮【type 为 button】
- :file 匹配所有文件域【type 为 file】
- :hidden 匹配所有不可见元素，或者type为hidden的元素
5.7 表单对象属性过滤选择器
- :enabled 匹配所有可用元素 【input 标签加上 disabled 就是不可用的。没有就是可用的】
-
:disabled 匹配所有不可用元素
-
:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
-
:selected 匹配所有选中的option元素【下拉列表被选中的元素】
//jQuery 中的 each 方法可以进行遍历 // this 代表循环到的当前对象 $("").each(function(){ alert(this); });事件中的 function 函数中的 this 对象：代表了当前正在响应该事件的dom 对象。
如上图， this 就代表了 id 为 checkedAllBox 的 标签。this.value 就是 这个标签的value。
5.8 元素的筛选
- 过滤
-
查找
- add(expr) 把 add 匹配的选择器的元素添加到当前 jquery 对象中
- children([expr]) 功能跟 parent>child 一样,返回匹配给定选择器的子元素
- find(expr) 功能跟 ancestor descendant 一样,返回匹配给定选择器的后代元素
- next([expr]) 功能跟 prev + next 功能一样,返回当前元素的下一个兄弟元素
- nextAll([expr]) 功能跟 prev ~ siblings 功能一样,返回当前元素后面所有的兄弟元素
- parent([expr]) 返回父元素
- prev([expr]) 返回当前元素的上一个兄弟元素
- prevAll([expr]) 返回当前元素前面所有的兄弟元素
- siblings([expr]) 返回所有兄弟元素
六、jQuery 属性操作
-
html() 他可以设置和获取起始标签和结束标签中的内容 如同 DOM 中的 innerHTML
- 括号里不写参数可以获取标签中内容。写参数可以设置标签中的内容
-
text() 他可以设置和获取起始标签和结束标签中的文本 如同DOM中的 innerText
- 括号里不写参数可以获取标签中内容。写参数可以设置标签中的内容
-
val() 他可以设置获取表单项【文本，多选，下拉，单选.....】的value属性值，如同DOM中的value
- 括号里不写参数可以获取文本框中的value，写参数可以设置value的值
-
attr() 可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等
- attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj
- prop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等
attr() 和 prop() 的区别：
如果某个元素没有获取的属性，attr() 会返回 undefined 【官方认为 undefined 就是错误，不利于用户辨认，所以出出现了 prop() 方法】， prop 会返回 false 。prop比较直观一些。
attr() 和 prop 都可设置属性值，或者修改属性值。
七、DOM 增删改
以上是内部插入，插入到某个标签内部。
b：可以是内容，可以是对象。
a.appendTo(b); 将 a 增加到 b 的后面去
a.append(b); 将 b 放到 a 的后面
a.prependTo(b) : 将 a 插入到 b 的前面
a.prepend(b) ： 将 b 插入到 a 的前面
外部插入是把 内容 插入到某个标签外部。
a.afert(b); 将 b 插入到 a 的后面
a.inertAfter(b); 将 a 插入到 b 的后面
a.before(b); 将 b 插入到 a 的前面
a.insertBefore(b) 将 a 插入到 b 的前面
这么多插入方法怎么区分呢？
一个简单的方法就是，方法短的【after，before，append，prepend】就操作 () 里面的内容 放到 前面的指定位置去。
a.replaceWith (b)： 用 b 替换掉所有的 a 【不管 a元素 有几个 都替换成一个 b】
a.replaceAll(b); a 替换所有的 b 【一个 b 元素 被替换一个 a ，俩个 b 元素 被替换俩个 a 】
a.empty() 删除 a 标签中的内容
a.remove() 删除 a 标签
八、CSS 样式操作
-
- addClass(class|fn) 增加样式
- removeClass([class|fn]) 删除样式
- toggleClass(class|fn[,sw]) 有就删除样式，没有就增加样式
- offset([coordinates]) 设置和获取元素的位置
<style type="text/css">
div{
width:100px;
height:260px;
}
div.whiteborder{
border: 2px white solid;
}
div.redDiv{
background-color: #96E555;
}
div.blueBorder{
border: 5px blue solid;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var $divEle = $("div:first");
$('#btn01').click(function(){
//addClass() - 向被选元素添加一个或多个类
// 一个或者多个样式 用 空格分开
$divEle.addClass("redDiv blueBorder");
});
$('#btn02').click(function(){
//removeClass() - 从被选元素删除一个或多个类
$divEle.remove();
});
$('#btn03').click(function(){
//toggleClass() - 对被选元素进行添加/删除类的切换操作
$divEle.toggleClass("redDiv blueBorder")
});
$('#btn04').click(function(){
//offset() - 返回第一个匹配元素相对于文档的位置。
var offset = $divEle.offset();
console.log(offset);
});
})
</script>
使用 offset 获取位置：top 表示距离浏览器顶部是多少 left 表示距离浏览器左边是多少
//设置位置 $divEle.offset({ top:100, left:200 });
九、jQuery 动画显示
-
基本
- show([speed,[easing],[fn]]) 将隐藏的元素显示
- hide([speed,[easing],[fn]]) 将可见的元素隐藏
- toggle([speed],[easing],[fn]) 可见就隐藏，不可见就显示
-
淡入淡出
- fadeIn([speed],[eas],[fn]) 淡入
- fadeOut([speed],[eas],[fn]) 淡出
- fadeTo([[spe],opa,[eas],[fn]]) 在指定时间内慢慢的将透明度修改到指定值【0-1】
- fadeToggle([speed,[eas],[fn]]) 淡入淡出切换
以上方法都可以增加参数：【fadeTo：可以增加三个参数：时间、透明度、函数】
第一个参数：动画的执行时长，单位毫秒
第二个参数：动画的回调函数，动画执行完执行的函数
$(function(){ //显示 show() $("#btn1").click(function(){ $("#div1").show(1000) }); //隐藏 hide() $("#btn2").click(function(){ $("#div1").hide(2000) }); //切换 toggle() $("#btn3").click(function(){ $("#div1").hide(2000,function () { alert("动画执行完") }) }); // 无限动画 // function a(){ // $("#div1").toggle(1000,a) // } // a(); //淡入 fadeIn() $("#btn4").click(function(){ $("#div1").fadeIn(2000) }); //淡出 fadeOut() $("#btn5").click(function(){ $("#div1").fadeOut(2000,function () { alert("淡出执行完") }); }); //淡化到 fadeTo() $("#btn6").click(function(){ $("#div1").fadeTo(2000,0.5) }); //淡化切换 fadeToggle() $("#btn7").click(function(){ $("#div1").fadeToggle(2000) }); // 无限动画 // function a(){ // $("#div1").fadeToggle(1000,a) // } // a(); });
十、jQuery 中的事件
- click() 它可以绑定单击事件，以及触发单击事件
- mouseover() 鼠标移入事件
- mouseout() 鼠标移出事件
- bind() 可以给元素一次性绑定一个或多个事件。【多个事件用空格分开】
- one() 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。
- unbind() 跟 bind 方法相反的操作，解除事件的绑定
- live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕 这个元素是后面动态创建出 来的也有效
$(function(){
// 1.通常绑定事件的方式
$("h5").click(function () {
console.log("click单击事件")
});
//2.jQuery提供的绑定方式：bind()函数
$("h5").bind("click",function () {
console.log("bind绑定的 click事件");
});
//3.合并“鼠标移入”和“鼠标移出”事件
$("h5").bind('mouseover mouseout',function () {
console.log("bind绑定的鼠标移入”和“鼠标移出”事件");
});
//4.合并单击事件
$("h5").bind('mouseover mouseout click',function () {
console.log("bind绑定的鼠标移入”和“鼠标移出”事件");
});
//5.切换元素可见状态
$("div div").toggle(2000);
//6.只绑定一次
$("h5").one('mouseover mouseout',function () {
console.log("bind绑定的鼠标移入”和“鼠标移出”事件");
});
// 7、使用 live 绑定事件， 所有符合匹配器的元素都会有这个事件。包括后创建的
/*这个新增加的 h5 是没有单击事件的，
但是如果用 live 给所有的 h5 绑定点击事件，那么这个新增加的 h5 也会有单击事件 */
$("\t<br><br><h5 class=\"head\">什么是jQuery?</h5>").appendTo($("h5"))
$("h5").live("click",function () {
alert("单击事件")
});
});事件的冒泡
-
什么是事件的冒泡？
- 事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应
-
那么如何阻止事件冒泡呢？
- 在子元素事件函数体内， return false; 可以阻止事件的的冒泡
举个简单的例子：当父元素和子元素都有单击事件，当点击子元素的时候，父元素的单击事件也会触发。
在 子元素的点击事件中 加个 return false ；就阻止了事件冒泡。