jQuery笔记

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量102 收藏
点赞数
分类专栏： JavaScript 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_74155781/article/details/128841310
版权

jQuery笔记

一、jQuery的基础操作

1.1、什么是jQuery

  • jQuery是一个前端方法库
    • 插件 库 和 框架的区别
    • 插件：实现某一个单一类的功能
    • 库：封装了各种功能和你需要的工具
    • 框架：自己的完整的生态系统
  • 主要内容是封装了各种的dom操作
  • 优点:
    • 无所不能的选择器
    • 无处不在的链式编程
    • 无人可及的隐式迭代
  • 特点：
    • 号称全兼容
    • 2.0以前可以
    • 2.0以后逐步的不再兼容 IE
  • 当你引入一个 jquery.js或者jquery.min.js 以后
    • 会向全局暴露两个变量名
      1. jQuery
      2. $
  • 学习jQuery从$()开始

1.2、jQuery的选择器

  • 包含两个部分
    1. 选择器
      • 对元素的获取
      • 基本选择器
      • 特殊选择器
    2. 筛选器
      • 对已经获取到的元素集合进行二次筛选

1.2.1、基本选择器

  • 语法：$(选择器)
  • 返回值：满足条件的所有元素（id选择器除外）
    • 放在一个数组里面返回给你
    • 都是一个集合的形式
    • 我们管这个集合叫做jQuery元素集合
  • 你的css如何捕获标签，这里就可以怎么填写参数
<div id="box"></div>
<div class="box"></div>
<div>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
<div></div>
<div name="username"></div>
<script src="./jquery/jquery.min.js"></script>
<script>
	//基本选择器
	//css怎么写，这里就怎么写
	console.log($('div'))
	console.log($('#box'))
	console.log($('.box'))
	console.log($('div > ul > li:nth-child(1)'))
	console.log($('div[name=username]'))
</script>

1.2.2、特殊选择器

  • 语法：$(选择器)
    • 对你已经存在的选择器进行修饰
    1. :first=>拿到所有选择器的第一个
    2. :last=>拿到所有选择器的最后一个
    3. :eq(n)=>从零开始拿到索引的选择器
    4. :odd=>按照索引排列的奇数个
    5. :even=>按照索引排列的偶数个
<div id="box"></div>
<div class="box"></div>
<div>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
<div></div>
<div name="username"></div>
<script src="./jquery/jquery.min.js"></script>
<script>
	//特殊选择器
	console.log($('div:first'))
	console.log($('div:last'))
	console.log($('div:eq(0)'))
	console.log($('li:odd'))// js
	console.log($('li:nth-child(odd)'))//css
	console.log($('li:even'))// js
	console.log($('li:nth-child(even)'))//css

</script>

1.3、jQuery筛选器

  • 对jQuery的元素集合进行二次筛选
  • 直接进行链式编程
  • 注意：只有jQuery的元素集合才可以使用，原生 DOM对象不能使用
  1. first()
    • 元素集合里面的第一个
  2. last()
    • 元素集合里面的最后一个
  3. eq(索引)
    • 元素集合里面的指定一个
  4. next()
    • 当前元素的下一个
  5. nextAll()
    • 语法
      1. 元素集合.nextAll()
        获取到当前元素后面的所有兄弟元素
      2. 元素集合.nextAll(选择器)
        获取到当前元素后面所有元素中指定选择器的那一个
  6. nextUntil()
    • 语法
      1. 元素集合.nextUntil()
        获取到当前元素后面的所有兄弟元素
      2. 元素集合.nextUntil(选择器)
        获取到当前元素后面所有兄弟元素，直到选择器元素为止（不包含这个选择器）
  7. prev()
    • 当前元素的上一个
  8. prevAll()
    • 语法
      1. 元素集合.prevAll()
        获取到当前元素上面的所有兄弟元素
      2. 元素集合.prevAll(选择器)
        获取到当前元素上面的所有兄弟元素中指定选择器的那一个
  9. prevUntil()
    • 语法
      1. 元素集合prevUntil()
        获取到当前元素上面的所有兄弟元素
      2. 元素集合.prevUntil(选择器)
        获取到当前元素上面的所有兄弟元素,直到选择器元素为止（不包含这个选择器）
  10. parent()
    • 获取到当前元素的父元素
  11. parents()
    • 语法
      1. 元素集合.parents()
        拿到结构父级的所有父元素
      2. 元素集合.parents(选择器)
        拿到结构父级里面所有父元素中符合选择器的那一个元素
  12. children()
    • 语法
      1. 元素集合.children()
        拿到该元素的所有子元素
      2. 元素集合.children(选择器)
        拿到该元素的所有子元素中符合选择器的那一个元素
  13. sinblings()
    • 拿到该元素的所有兄弟元素，自己除外
  14. find()
    • 找到该元素中所有后代元素里面符合选择器条件的元素
  15. index()
    • 获取到的就是该元素在其父元素里面的索引位置
	<ul>
		<li class="first"></li>
		<li class="box"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<span></span>
		<li></li>
		<li class="box"></li>
		<li></li>
		<li></li>
	</ul>
</div>
<div></div>
<div name="username"></div>
<script src="./jquery/jquery.min.js"></script>
<script>
	//1.first
	console.log($('li').first())
	//2.last
	console.log($('li').last())
	//2.eq(索引)
	console.log($('li').eq(2))
	//4. next()
	console.log($('span ').next())
	//5. nextALL()
	console.log($( 'span ' ).nextAll())
	console.log($( 'span ' ).nextAll( '.box ' ))
	//5. nextNutil()
	console.log($( 'span ' ).nextAll())	
	// consoLe.Log($( 'span ' ).nextALL())
	consoLe.Log($( 'span ' ).nextALL( ' .box ' ))
	// 6. nextUntil()
	consoLe.Log($( 'span ' ).nextUntiL())
	consoLe.Log($( 'span ' ).nextUntil( '.box '))
	// 7. prev()
	console.log($( ' span ' ).prev())
	// 8. prevALL()
	console.log($( 'span ' ).prevAl1())
	console.log($( ' span ' ).prevAl1( '.box '))
	// 9. prevUntil()
	console.log($( ' span ').prevUntil())
	console.log($( 'span ' ).prevUnti1( '.box '))
	// 10. parent()
	console.log($( 'span ' ).parent())
	//11.parents()
	console.log($( 'span ' ).parents())
	console.log($( 'span ' ).parents( ' body ' ))
	// 12. children()
	console.log($('uL ' ).children())
	 console.log($( 'uL ' ).chiLdren( ' .box ' ))
	 //13.siblings()
	console.log($( 'span ' ).siblings())
	//14.find()
	console.log($( 'body ' ).find('span'))
	//15.index()
	console.log($('span').index())
	console.log($('.a').first().index())
	console.log($('.a').last().index())

1.4、jQuery操作文本内容

  • 操作元素内的文本和超文本
  • 注意：属于jQuery的方法中能jQuery元素集合使用，原生 DOM对象不能调用
  1. html()（等价于原生DOM的innerHTML）
    • 语法：
      1. 元素集合.heml()
        • 获取该元素的超文本内容,以字符串的形式返回
        • 获取的时候为了保证html结构只能获取第一个的元素的超文本内容
      2. 元素集合.heml('内容')
        • 设置元素集合内元素的超文本内容
        • 完全覆盖式的写入
        • 隐式迭代：元素集合内有多少元素，就写多少元素
  2. text()
    • 语法：
      1. 元素集合.text()
        • 获取该元素的文本内容,以字符串的形式返回
        • 因为是文本内容，不涉及html结构，所以拿到的是所有元素的文本内容
        • 以一个字符串的形式返回
      2. 元素集合.text('内容')
        • 设置元素集合内元素的文本内容
        • 完全覆盖式的写入
        • 隐式迭代：元素集合内有多少元素，就写多少元素
  3. val()
    • 语法：
      1. 元素集合.val()
        • 获取元素集合内元素的value值
      2. 元素集合.val('内容')
        • 设置元素集合内元素的value值
        • 完全覆盖式的写入
        • 隐式迭代：元素集合内有多少元素，就写多少元素

1.5、jQuery操作元素类名

  1. addClass()
    • 添加元素类名
  2. removeClass()
    • 删除元素类名
  3. hasClass()
    • 判断有没有此类名
  4. toggleClass()
    • 如果原先有就是删除
    • 如果原先没有就是添加

1.6、jQuery操作元素样式

  1. css()
    1. 语法：元素集合.css('css样式')
      + 获取元素的某一个值，不管是行内还是非行内都能获取到
    2. 语法：元素集合.css('样式名','样式值')
      + 设置元素的行内元素
      + 隐式迭代：元素集合内有多少元素，就设置多少元素
      + 设置的时候，如果你需要设置的单位是px可以省略
    3. 语法：元素集合.css({样式名1: 样式值1,样式名2: 样式值2,样式名3: 样式值3,...})
      + 批量给元素设置行内样式
      + 隐式迭代：元素集合内有多少元素，就设置多少元素
      + 设置的时候，如果你需要设置的单位是px可以省略

1.7、jQuery基础绑定事件

  • on()
    • 事件绑定，根据不同的参数做不同的事情
  1. 元素集合.on(事件类型，事件处理函数)
    • 隐式迭代：元素集合内有多少元素，就会给多少元素绑定事件
  2. 元素集合.on(事件类型,选择器,事件处理函数)
    • 事件委托的绑定
    • 把选择器委托给元素集合里面的元素
    • 注意：选择器元素要是 元素集合 内元素的后代
$('ul').on('click','li',function{
	console.log('我执行了')
})
  1. 元素集合.on(事件类型,复杂数据类型,事件处理函数)
    • 给元素集合内的所有元素绑定事件
    • 这个复杂数据类型是事件触发的时候，传递给事件里面的参数
    • 在事件对象里面有一个叫做data 的成员，就是你传递进来的参数
$('li').on{'click',{name:'jack'},function{
	console.log('我执行了')
	console.log(e)
}}
  1. 元素集合.on(事件类型,选择器,数据,事件处理函数)
    • 事件委托的形式，带上传递参数
    • 把选择器所属的事件，委托给了元素集合内的集合
    • 数据位置，就是在事件触发的时候传递给事件处理函数的参数
$('ul').on('click','li','hello world',function(e){
	console.log('我执行了')
	console.log(e)
})
  1. 元素集合.on({事件类型1:事件处理函数1,事件类型2,事件处理函数2})
    • 一次性给元素绑定多种事件
$('li').on({
click:function(){console.log('点击')}
mouseover:function(){console.log('移入')}
})

  • one()

    • 用来绑定事件的方法
    • 和on()方法的参数和使用形式一模一样
    • 只不过绑定的事件只能执行一次
    • 和on()的五种使用方法一摸一样

  • off()

    • 用来解除事件绑定的
    • 语法：
      1. 元素集合.off(事件类型)
        • 解除元素身上该事件类型的所有事件处理函数
      2. 元素集合.off(事件类型,事件处理函数)
        • 解除元素身上该事件类型的某一个事件处理函数

  • trigger()

    • 用js代码的方式来触发事件
    • 语法： 元素集合.trigger()

1.7.1、 jQuery选项卡

  • jQuery选项卡
<style>
*{
	margin=0;
	padding=0;
}
ul,li,ol{
	list-style: none;
	}
.box {
	width: 600px;
	height: 400px;
	border: 10px solid pink;
	margin: 5opx auto;
}
ul {
	width: 1oo%;
	height: 60px;
	overflow: hidden;
}
ul > li {
	width: 200px;
	height: 100%;
	text-align:center;
	line-height: 60px;
	font-size: 40px;
	color:#fff;
	background-color:skyblue;
	cursor: pointer;
}
ul>li.active {
	background-color: orange;
}
ol {
	width: 100%;
	height: 340px;
	position: relative;
	}
ol > li {
	width: 100%;
	height:100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color:purple;
	font-size: 100px;
	line-height: 340px;
	color:#fff;
	display:none;
	text-align = center;
}
ol>li.active{
	display:block
}
</style>
<div class="box">
	<ul>
		<li class="active"></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ol>
		<li class="active"></li>
		<li></li>
		<li></li>
		<li></li>
	</ol>
</div>
<script src="./jquery/jquery.min.js"></script>
<script>
	//1.给所有ul里面的li绑定事件
	//2.自己有类名，所有兄弟没有类名
	//3.所有的元素没有类名，指定索引
$('ul>li').on('click',function{
	//DOM元素如果想用Jquery的方式，使用$()包起来
	$(this).addClass('active').sibling().removeClass('active')
	//索引${this}.index()
	$('ol>li').removeClass('active')eq($(this).index()).addClass('active')
})
</script>

1.8、jQuery事件函数

  • jQuery给我们提供了一些简洁的绑定事件的方式
  • 把一些常用事件直接封装成了函数
    click()
    mouseover()
  • 这些方法可以直接使用,带有隐式迭代
    • 快捷绑定事件
    • 语法：
        1. 元素集合.事件类型(事件处理函数)
        2. 元素集合.事件类型(传入事件处理函数的参数,事件处理函数)
//绑定点击事件
$('div').on('click'，function(){console.log('点击事件')})
//使用事件函数
$( ' div ').click(function () { console.log( '点击事件')})
  • jQuery唯一的特殊事件
    • hover()
    • 一个结合了移入移出的事件
    • 语法：元素集合.hover(移入的事件处理函数，移出的事件处理函数)
      • 如果传入一个参数，那么移入移出都触发

1.9、jQuery的节点操作

  • 原生JS的节点操作
    • 创建节点，插入节点，删除节点，替换节点，克隆节点
  • jQuery的节点操作
    • 创建节点，插入节点，删除节点，替换节点，克隆节点
  1. 准备一个节点
const p = $('<p>我是创建的一个节点</p>')
  1. 创建节点
    • $(html结构字符串)
      • 当$()里面传递一个选择器的时候,就是获取元素
      • 当$()里面传递一个html结构字符串的时候，就是创建元素节点
      • 当$()里面传递一个DOM元素节点的时候，就是转换成jQuery元素结合
const div = $('<div>创建的div</div>')

  1. 插入节点

    • 内部插入（父子关系的插入）
      1. append()
        • 语法：父元素.append(子元素)
        • 把子元素插入到父元素内部,放在末尾的位置
      2. appendTo()
        • 语法：子元素.appendTo(父元素)
        • 把子元素插入到父元素内部,放在末尾的位置
      3. prepend()
        • 语法：父元素.prepend(子元素)
        • 把子元素插入到父元素内容,放在最前面的位置
      4. prependTo()
        • 语法：子元素.prepend(父元素)
        • 把子元素插入到父元素内容,放在最前面的位置
    • 外部插入(兄弟关系的插入)
      1. after()
        • 语法:存在元素.after(插入元素)
        • 把插入元素排在存在元素的后面,以兄弟关系出现
      2. insertAfter()
        • 语法:插入元素.insertAfter(存在元素)
        • 把插入元素排在存在元素的后面,以兄弟关系出现
      3. before()
        • 语法:存在元素.before(插入元素)
        • 把插入元素排在存在元素的前面,以兄弟次系出现
      4. insertBefore()
        • 语法:插入元素.insertBefore(存在元素)
        • 把插入元素排在存在元素的前面,以兄弟关系出现

  2. 删除节点

    1. remoe()
      • 语法：元素结合.remove()
      • 把自己从自己的父元素里面移出
    2. empty()
      • 语法：元素集合.empty()
      • 把自己变成空标签，把所有后代节点全部移除

  3. 替换节点

    1. replaceWith()
      • 语法：把下节点.replace(换上节点)
    2. replaceAll()
      • 语法：替换节点.replaceAll(被替换节点)

  4. 克隆节点

    • clone()
      • 语法：元素集合.clone()
      • 必然带所有节点过去
      • 第一个参数默认是false,表示是否克隆元素本身的事件，选填true
      • 第二个参数默认是跟随第一个，表示是否克隆元素后代节点的事件，选填
      • 注意：当一个参数是false第二个参数没有意义

1.10、jQuery操作元素属性

  • 属性操作：
    • 原生属性：id class src …
    • 自定义属性：getAttribute() …
    • H5 自定义属性：dataset data-xxx
  • jQuery有三种操作属性的方法
    • attr()和removeAttr()
    • prop()和removeProp()
    • data()和removeData()

  1. attr()和removeAttr()

    1. attr()
      • 语法:元素集合.attr(属性名)
        • 获取元素的该属性，主要用来获取标签属性，包括一些自定义属性
      • 语法:元素集合.attr(属性名，属性值)
        • 设置元素的标签属性，只是把属性设置在标签上，当作一个自定义属性使用
        • 对于原生属性有些有用,有些没有用
      • 注意:
        • 设置的时候,需要两个参数
        • 设置的不管是什么数据类型，都会变成字符串类型
        • 有的原生属性好使,有的不好使
    2. removeAttr()
      • 语法:元素集合.removeAttr(属性名)
        • 删除元素身上的自定义属性
        • id class等属性也可以删除
      • 注意:
        • 多用于删除 attr 方法设置的属性

  2. prop()和 removeProp()

    1. prop()

      • 语法:元素集合.prop(属性名)
        • 获取元素的原生属性,也可以获取元素的自定义属性
        • 但是attr 方法设置的自定义属性他获取不到
      • 语法:元素集合.prop(属性名，属性值)
        • 主要设置元素的原生属性，也可以设置自定义属性
        • 他设置的自定义属性不会显示在标签上，而是存储在元素身上
      • 注意:
        • 设置的自定义属性不会显示在标签上
        • 你设置的时候是什么数据类型，获取到的时候还是什么数据类型
        • attr设置的自定义属性他拿不到

    2. removeProp()

      • 语法：元素集合.removeProp(属性名)
        • 删除元素的属性,但是只能删除由prop设置的自定义属性
        • 原生属性 id class … 不能删除

  3. data()和removeData()

    1. data()
      • 语法:元素集合.data(属性名)
        • 获取使用data()方法存储的数据，获取元素身上 data-xxx的属性
      • 语法:元素集合.data(属性名，属性值)
        • 设置的时候,只是把数据存储在元素身上的某一个对象空间内
        • 但是不会出现在标签上,不会由 data-xxx的属性出现
      • 注意:
        • 可以获取元素标签上data-xxx的属性
        • 但是不能设置标签上 data-xxx的属性
    2. removeData()
      • 只能删除由data()方法设置的属性
      • 不能删除元素身上 data-xxx的属性

1.11、jQuery获取元素尺寸

  1. width()和height()
    • 语法:元素集合.width()或者元素集合.height()
    • 获取的是元素内容位置的尺寸
  2. innerWidth()和innerHeight()
    • 语法:元素集合.innerWidth()或者元素集合.innerHeight()
    • 获取的是元素内容 + padding 区域的尺寸
  3. outerWidth()和 outerHeight()
    • 语法:元素集合.outerWidth()或者元素集合.outerHeight()
    • 获取的是元素内容 + padding + border区域的尺寸
  4. outerWidth(true)和 outerHeight(true)
    • 语法:元素集合.outerWidth(true）或者元素集合.outerHeight(true)
    • 获取的是元素内容 + padding + border + margin 区域的尺寸
  • 这些方法不受display:none的影响

1.11、jQuery操作位置关系

  1. offset
    • 是一个读写的方法
    • 读取
      • 语法:元素集合.offset()
      • 返回值:一个对象，里面包含一个x信息一个y信息
      • 相对谁:相对页面左上角的绝对坐标
      • 注意:
        1. 读取出来是一个对象,你需要值得时候,要继续。
        2. 不能继续链式编程
    • 设置
      • 语法:元素集合.offset({ top: xxx,left: xxx})
      • 设置的:设置的是相对于页面左上角的绝对位置
      • 例子:$( 'div ').offset({ top: 30，left: 30 })
        • 一定会把这个div放在距离页面左上角 30 30的位置
      • 注意:
        1. 你设置的时候,如果父子元素都要动
        2. 考虑先后顺序
  2. position()
    • 是一个只读的方法
    • 读取:
      • 语法:元素集合.position()
      • 返回值:一个对象，里面包含一个x信息一个y信息
      • 就是元素的定位关系
      • 如果你定位的是 right和 bottom，那么会自动计算成left和 top

二、jQuery动画

2.1、jQuery的基础动画

  1. show()
    • 显示
  2. hide()
    • 隐藏
  3. toggle()
    • 切换,本身显示就隐藏，本身隐藏就显示
  • 上面三个方法操作的 display: none 和 block
  • 三个的语法是一样的
    • 方法名(运动时间,运动曲线，回调函数)
    • 运动时间:多长时间运动结束
    • 运动曲线:什么方式运动
    • 回调函数:运动结束后触发

2.2、jQuery的折叠动画

  1. slideDown
    • 下拉显示
  2. slideUp
    • 上拉隐藏
  3. slideToggle
    • 切换显示和隐藏

三个方法都是一样的参数

  • 方法名(时间,运动曲线,回调函数)
  • 运动时间:多长时间运动结束
  • 运动曲线:什么方式运动
  • 回调函数:运动结束后触发

2.3、jQuery的渐隐渐显动画

  • 通过操作元素的 opacity 达到效果
  1. faseIn()
    • opacity 0~1
  2. fadeout()
    • opacity 1~Q
  3. fadeToggle()
    • 切换

以上三个方法的语法是一样的

  • 方法名(时间,运动曲线,回调函数)
  1. fadeTo()
    • 运动到指定透明度
    • 语法：fadeTo(时间,指定透明度,运动曲线,回调函数)

2.4、jQuery的综合动画

  1. animate()
    • 语法：animate({},时间,运动曲线,回调函数)
    • {}：书写你要运动的属性
    • 注意：
      • 颜色相关的属性，运动不了
      • CSS3的2d和3d动画特效动，运动不了

2.5、jQuery的停止动画

jQuery 的停止动画

  • 因为当你给一个元素设置动画以后
  • 如果快速触发，会停不下来,直到你所有的触发都执行完毕为止
  • jquery 给我们提供两个临时停下动画的方法
  1. stop()
    • 语法:元素集合.stop()
    • 当代码执行到这句的时候，不管运动到什么程度，立刻停下来
    • 运动到什么位置就停止在什么位置
  2. finish()
    • 语法:元素集合.finish()
    • 当代码执行到这句的时候,不管运动到什么程度,直接去到运动结束位置
    • 直接完成本次动画

2.6、animatecss动画插件

使用方法：

  1. 将animate css 网站中的css代码复制
  2. 使用时加 link 引入
  3. 加上class类名是要加上前缀： animate__animatedanimate__

回到顶部案例

//css
*{
margin: 0;
padding: 0;
}
body {
height: 3000px;
}
.gotop{
width: 50px;
height: 50px;
background-color:skyblue;
position: fixed;
bottom:5opx;
right:5opx;
}
//html
<div class="go top"></div>
//script
/*
1。获取元素,绑定点击事件
	=>在点击事件里面使用动画让他上去
	=>页面回到顶部,一定要运动html元素
2.一旦走起来停不下来了?
	
*/
$('.gotop').click(() =>{
//让页面回到顶部
	$( ' htm1 ' ).animate({scrollTop:0}
	},1000)
})

滑动选项卡

//css
*{
margin: 0;
padding: 0;}
ul {
	width: 900px;
	height: 100px;
	margin:50px auto;
	boder-bottom :3px solid #333;
	position:relative ;
}
ul,li{
	list-style:none;
}
li {
	f1oat: left;
	width: 100px;
	text-align: center;
	line-height: 40px;
}
ul>span{
	width: 100px;
	height: 40px;
	background-color: skyblue;
	border-bottom :3px solid red;
	line-height: 40px;
	text-align: center;
	position: absolute;
	left: 0;
	bottom: -3;
	color:#fff;
	pointer-events:none;
}

}
//html
<ul>
	<li>选项菜单1</li>
	<li>选项菜单2</li>
	<li>选项菜单3</li>
	<li>选项菜单4</li>
	<li>选项菜单5</li>
	<li>选项菜单6</li>
	
	<span>选项菜单1</span>
</ul>
//script
/*
	滑动选项卡
	1。每一个li有一个鼠标移入事件
		=〉获取到移入的这个li的索引
		=> span的left就是索引* 100的位置
	2。一旦挨个触发动画，小横线跟不上了?
		=> stop()
	3。文字改变
		=>获取到当前li里面的文件设置上
	4。点击事件没有了
		=>因为span覆盖在了li身上，你点击到的都是span
		=>把li的事件委托给ul，并且设置span不作为事件目标
*/
$( 'li ').mouseover(function () {
	const index = $(this).index()
	$('span').stop().animate({
		left: index* 100
	},100).text($(this).text()
})
//	$('li').click(function () {
//		console.log(this)
//	})
$('ul').on('click','li',function(){
console.log(this)
})

树状菜单

//css
*{
	margin:0;
	padding:0;
}
ul, ol,li {
	list-style: none;
	}
ul {
width: 300px;
border: 3px solid pink;
margin: 30px auto;
padding: 30px;
}
ul>li>ol{
padding-left: 3opx;
display:none;
}
ul>li>ol>li{
	height:20px;
	line-height:20px;
}
ul>li:before{
	content:'+'
}
ul>li.active{
	content:'-'
}
//html
<ul>
<li>
	<span>弟一级菜单</span>
	<ol>
		<li>+ 第二级菜单</li>
		<li>+ 第二级菜单</li>
		<li>+ 第二级菜单</li>
	</ol>
</li>
<li>
	<span>弟一级菜单</span>
	<ol>
		<li>+ 第二级菜单</li>
		<li>+ 第二级菜单</li>
		<li>+ 第二级菜单</li>
	</ol>
</li>
<li>
	<span>弟一级菜单</span>
	<ol>
		<li>+ 第二级菜单</li>
		<li>+ 第二级菜单</li>
		<li>+ 第二级菜单</li>
	</ol>
</li>
</ul>
//script
/*
	1.给一级菜单的每一个li绑定事件
		=>ul>li
		=>自己添加active，所有兄弟没有active
		=>自己下面的ol展开
		=>自己所有兄弟元素下面的ol闭合
*/
$('ul>li').click(function(){
	$(this).toggleClass('active').siblings().removeClass('active')
		
	$(this).find('ol').slideToggle().parent().siblings().find('ol').slideUp()
})

手风琴

//css
*
{
	margin: 0;
	padding: 0;
}
ul, li {
	list-style: none;
}
/*
li520 40 40 40li 160 160 160160*/
ul {
	width: 640px;
	height: 280px;
	border: 10px solid pink;
	margin: 50px auto;
}
li{
	width: 160px;
	height: 100%;
	overflow: hidden;
	float: left;
}
li > img {
	width: 520Opx;
	height:100%;
	display: block;
}




//html
<ul>
	<li><img src="。/images/01.jpg" alt=""></li>
	<li><img src="./images/02.jpg" alt=""></li>
	<li><img src="./images/03.jpg" alt=""></li>
	<li><img src=" ./images/04.jpg" alt=""></li>
</ul>

//script
/*
1。给li绑定一个鼠标移入事件
=>自己变大，其他的变小
=>为什么会下来
	->布局是浮动布局
	->一行放不下就会下来
	->先让自己变大，让兄弟元素变小
	->运动的原理就是定时器，每次动一点点
	->在运动的时候,第一瞬间,先自己变大一点点
此时兄弟元素还没有变呢
->就在这一个瞬间,一行放不下了
=>怎么解决
	->先动兄弟元素,在动自己
	->在第一个瞬间，是在变小

最右边的问题
=>移出的时候,每一个 li还原到160
=>我自己目前是 520，其他的都是 40
=>隐式迭代也是从第一个li开始一个一个改变
=>前三个在第一瞬间变成了41，我自己还是160一行放不下
=>移出的是先让自己变小,让后再让兄弟元素改变


*/
let current = null
// 1。给Li绑定鼠标移入事件
$('li').mouseover(function {
//先动兄弟元素
$(this).siblings().stop().animate({ width: 40 })
//再动自己
$(this).stop().animate({ width:520 })
// $(this）就是当前的li
current = $(this)
})
// 2。给ul儿绑定移出事件
$('ul').mouseleave(function(){
console.log('移出')
// $( 'Li ').finish( ).animate({ width: 160 })
//current就是最后一个移入的Li
//让 current先变小，然后再让其他兄弟元素变大
current
.stop()
.animate({ width: 160 })
.siblings()
.stop()
.animate({ width: 160 })
})

鼠标跟随

//css
*{
margin: 0;
padding: 0;
I
}
ul,li {
	list-style: none;
	}
ul{
	width: 4eopx;
	height: 120px;
	border: 10px solid pink;
	margin: 5opx auto;
	overflow: hidden;
	padding-top: 20px;
}
li {
	width: 100px;
	height: 100px;
	float: left;
	margin-left:25px;
}
li > img {
	width: 100%;
	height: 100%;
	display: block;
}
/*
使用什么定位不定位行不行?
offset()
绝对设置你的位置关系
你没有定位的时候他会给你加上定位
如果你又定位他就修改left和 top
*/
div {
width: 288px;
height: 180px;
display:none
}
//html
<ul>
	<li><img src="./images/1.png" alt=""></li>
	<li><img src=" ./images/2.png" alt=""></li>
	<li><img src="./images/3.png" alt=""></li>
</ul>
<div>
<img src="./images/1.png" alt="">
</div>
//script
/*1。给每一个li绑定移入移出事件
=>移入的时候显示div
=>移出的时候隐藏div
=>移入的时候替换img标签的 src

2。给每一个li绑定移动事件
=>再移动事件里面获取坐标随时赋值
=>哪一组坐标?
->offset目标元素的左上角
->client可视窗口
-> page文档流
*/
$('li')
	.hover(
		function () {
			$( 'div').fadeIn(100)
			const src = $(this).find( 'img " ).prop('src')
			$('div').find('img').prop('src',src)
			},
			function ( {
				$( 'div ').fadeout(100)}
				)
.mousemove( function (e) {
//拿到坐标点
const x = e.pageX + 10
const y = e.pageY + 10
//随时给div赋值
	$( 'div ').offset({ left: x,top: y })
})

三、jQuery发送ajax

3.1、jQuery发送ajax请求

  1. $.get(地址，传递给后端的数据，回调函数，期望返回的数据类型)：专门用于发送get请求
    • 请求地址：可以自主拼接参数，但不推荐可以
    • 数据：给后端的数据，可以写成’key=value&key=value’,还可以写成{…}
    • 回调函数：请求成功的回调，请求成功后会处罚
    • 数据类型：是不是执行解析响应体的操作
      • ’string’：不解析
      • ’json’：执行一步JSON.parse()
$.get('...','a=100&b=200/{a:100,b:200}',function(res){console.log(res)},'json')
//res是后端返回的响应体，如果做后写了json,会自动返回JSON.parse()
  1. $.post(地址，传递给后端的数据，回调函数，期望返回的数据类型)：专门用于发送post请求
    • 四个参数意义和$.get()一模一样
  2. $.ajax(options)：综合方法，由自己配置决定发送什么请求
    • options就是本次请求的配置信息，是一个对象数据类型
    • 配置信息里面可以填写的内容
      • url:请求地址,必填
      • async:是否异步，默认异步，选填false
      • type/method:请求方式，默认是GET,大小写无所谓
      • data：传递给后端的参数，可以是查询字符串的形式，也可以是对象
      • dataType:期望后端返回的数据类型，是否进行JSON.parse()解析
      • success：接受一个函数数据类型，表示成功的回调
      • error：接受一个函数数据类型，表示成功的回调
        ​ 请求失败与解析失败都会走error的失败
      • timeout:设置一个超时时间
        从发送请求开始到达超时时间还没有接收到响应会直接取消本次请求，到达error函数
      • cache:是否缓存，对于ajax请求默认缓存，选填false
        但对于jsonp请求默认不缓存，选填true
      • context:指定回调函数的this指向，默认指向jQuery封装的axaj对象

​ 缓存原理：当两次发送同一个请求即两次请求地址一模一样，浏览器会缓存下来

如果不想进行缓存，就让每次请求地址不一样，那么在每次请求后面携带一个没有用的参数，值设置成时间戳

部分格式显示：
$.ajax({
url:'...',
async:true,
method:'POST',
dataType:'json',
success(res){
//res就是响应体，会根据dataType填写的内容解析
},
error(xhr,info,err){
console.log(xhr)
//xhr是jQuery分装的ajax对象
console.log(info)
//info是本次失败的信息
console.log(err)
//err是错误的详细内容，但有时候不详细
},
timeout：1000,
})

3.2、发送ajax的promise

jQuery对于ajax的封装，除了回调函数的形式接收结果，还封装了promise形式接收

$.ajax({
url:'',
data:{a:100,b:200},
type:'POST',
dataType:'json',
success(res){
console.log('success')
console.log(res)
}
}).then(res=>{
console.log('promise')
console.log(res)
})
//两种都使用的话，两个都会执行，不理解重看24集

3.3、ajax发送跨域请求

非同源地址请求

  1. jsonp
    • 前端利用script标签和src属性绕开同源策略
    • 和ajax没有关系，实际上不是在发送ajax请求
    • 实际在请求一个js文件
    • 使用一个叫$.ajax()的方法
      因为jQuery封装Ajax函数时做了一个判断
      if（dataType===‘jsonp’){
走一套动态创建script标签
动态添加src属性
动态插入到body
动态删除script
}else{
按照Ajax的一套流程封装}
      只要把dataType书写成’jsonp’就会发送jsonp请求
  2. 代理
    • 有一个同原策略的代理服务端转发请求
    • 对于前端依旧是正常发送请求
    • 只不过把地址书写成代理地址
    • 依旧是直接使用$.ajax()方法来发送
    • 只不过url位置书写代理标识符
  3. cors
    • 服务端允许指定客户端发送请求
    • 和前端没关系
    • 前端正常发送
    • 使用$.ajax()

3.4、ajax的全局钩子函数三种解决方法

钩子函数是在ajax某一个阶段自动执行的函数；

ajax的钩子函数是全局的ajax函数；

不是写在ajax内部，是挂在window身上去执行的；

分类：

  • ajaxStart（）：第一个ajax发送之前触发，执行函数
<script>
        $(window).ajaxStart(function(){
            console.log("第一个ajax发送前执行，有一个请求开始了")
        })
</script>
  • ajaxSend（）： 每一个ajax发送之前执行
<script>
        $(window).ajaxSend(function(){
            console.log("每一个ajax发送前执行")
        })
</script>
  • ajaxSuccess（）：每一个ajax成功会触发一次
<script>
        $(window).ajaxSuccess(function(){
            console.log("每一个ajax成功会触发一次")
        })
</script>
  • ajaxError（）：每一个ajax失败会触发一次
<script>
        $(window).ajaxError(function(){
            console.log("每一个ajax失败会触发一次")
        })
</script>
  • ajaxStop（）：最后一个ajax结束会触发
<script>
        $(window).ajaxStop(function(){
            console.log("最后一个ajax结束会触发一次")
        })
</script>

3.5、jQuery中的多库并存

  • 当需要引入一个别的插件或者库的时候，别人也向外暴露的是 $ 获取 jQuery
  • 那么，我们的 jQuery 就不能用了，jQuery 为我们提供了一个多库并存的方法
// 这个方法可以交还 jQuery 命名的控制权
jQuery.noConflict()

// 上面代码执行完毕以后 $ 这个变量就不能用了
// 但是 jQuery 可以使用
console.log($) // undefined
console.log(jQuery) // 可以使用

// 这个方法可以交并且传递一个 true 的时候，会完全交出控制权
jQuery.noConflict(true)

// 上面代码执行完毕以后 $ 这个变量就不能用了
// jQuery 这个变量也不能用了
console.log($) // undefined
console.log(jQuery) // undefined

// 可以用一个变量来接受返回值，这个变量就是新的控制权
var aa = jQuery.noConflict(true)

// 接下来就可以把 aa 当作 jQuery 向外暴露的接口使用了
aa('div').click(function () { console.log('我被点击了') })

3.6、jQuery的深浅拷贝

  • 浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存，因此如果修改其中一个对象，另一个也会跟着改变。
  • 深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会影响到原对象。

3.7、jQuery的extend()

  • 至少传递两个参数
    1. $.extend(对象1，对象2...)：浅拷贝
    2. $.extend(true,对象1，对象2...)：深拷贝

3.8、jQuery的插件扩展机制

  • 提供了两个方法
    1. 扩展给他自己本身
      • jQuery.extend方法
      • 扩展完后的内容只能用 $ 或者 jQuery 来调用
      // jQuery.extend 接受一个参数，是一个对象，对象里面是我们扩展的方法
jQuery.extend({
    max: function (...n) { return Math.max.apply(null, n) },
    min: function (...n) { return Math.min.apply(null, n) }
})

const max = $.max(4, 5, 3, 2, 6, 1)
console.log(max) // 6
const min = $.min(4, 5, 3, 2, 6, 1)
console.log(min)
    2. 扩展给元素集
      • jQuery.fn.extend() 方法扩展
      • 扩展完毕以后给元素的集合使用，事用 $(‘li’) 这样的选择器获取到的元素集合来使用
      // jQuery.fn.extend() 接受一个参数，是一个对象，对象里面是我们扩展的方法
jQuery.fn.extend({
    checked: function () {
        // return 关键字是为了保证链式编程
        // 后面的代码才是业务逻辑
        return this.each(function() { this.checked = true })
    }
})
// 靠元素集合来调用
$('input[type=checkbox]').checked()
// 执行完毕之后，所有的 复选框 就都是选中状态了

3.9、jQuery的入口函数

等 DOM 结构渲染完毕就可以执行的代码，不用等待图片，css等所有资源都加载完毕，相当于原生 JS 中的 DOMContentLoaded

  1. $( function( ) { XXXX })
  2. $( document ).ready( function( ) { XXXX })
Smulll_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery笔记
m0_45884629的博客
07-30 530
所有的代码都是基于引入jquery.js文件。
jQuery 3.7.0 发布，提升操作性能
lzhdim的专栏
05-12 935
jQuery 3.7.0 已正式发布。更新内容包括修复错误、引入新方法，以及提升性能。 其中值得关注的一项变化是放弃了长期使用的选择器引擎 Sizzle ——jQuery 不再依赖于作为单独项目的 Sizzle。开发者表示他已经将 Sizzle 移动至 jQuery 内部，将其代码直接放到 jQuery 核心。 据称这有助于为未来 jQuery 版本中选择器的重要变化做好准备。虽然现在意...
jQuery 下载与快速入门指南
一起coding，一起嗨。
05-27 623
jQuery 下载与快速入门指南
jQuery 下载安装及部署
Fucker_about的博客
09-04 487
jQuery下载 :[jQuery下载] (
3-7 jQuery选择器
siebo的博客
01-18 602
1.JQuery的使用 引入CSS文件 <link rel="stylesheet" type="text/css" href="../css/main.css" /> 引入jquery文件 <script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
JQuery笔记
01-09
**jQuery简介** jQuery是一款高效、简洁且功能丰富的JavaScript库，由John Resig在2006年创建。它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务，使得JavaScript编程更加简单和直观。jQuery的核心理念是...
jquery 笔记 事件
10-28
写js已经有很久了，但是对js的详细了解还是很肤浅的，这几天在看jquery，在其中有一些新的发现和体会，记录下来
【jQuery 】基本使用
weixin_45888283的博客
06-22 209
这里写目录标题一、选择器和jQuery对象1.1 选择器1.2 jQuery对象二、事件绑定和链式编程2.1 事件绑定2.2 链式编程三、jQuer常用API3.1 内容 - html()和text()3.2 样式 - css()3.3 属性 - attr()3.4 value - val()3.5 类名方法3.6 过滤方法3.7 查找方法四、注册事件和触发事件4.1 注册事件4.2 触发事件 jQuery 是一个着重简化 DOM 操作，AJAX 调用和事件 处理的 JavaScript 库； 使用jQu
jQuery入门、选择器、事件、静态方法、动画
qq_51066068的博客
04-20 2103
目录 第一章-jQuery基础知识 1.jQuery入门 1.1.jQuery介绍 1.2.jQuery安装 1.3.jQuery函数 1.4.jQuery对象 2.jQuery选择器 3.jQuery事件 3.1.事件的基本使用 3.2.事件代理 3.3.事件类型 4.jQueryDOM操作 5.jQuery静态方法 5.1.数组及对象操作 5.2.测试操作 5.3.字符串操作 6.jQuery动画 第一章-jQuery基础知识 第一天的授课重点在于梳理与对比..
jQuery为什么还在发布新版本？
xingyu_qie的专栏
05-15 2778
是的，你没有看错，jQuery发布了3.7.0，这个曾经告诉大家write less do more的JS库，这个已经被很多人遗忘的前端必备，曾经有本书叫《锋利的jQuery》。但现在谁还在每天做着jQuery的工作，谁还熟练jQuery的写法？他为什么仍然还在更新？
在Web应用程序中将jQuery版本从1.8升级到3.7
寒冰屋的专栏
07-01 155
最近，我的任务是将2013年最后一次维护的Web门户中的jQuery升级到最新版本的jQuery，即截至2024年3月的3.7版。快速检查发现代码中有超过2000+个地方引用了jQuery 1.8.3
jQuery 基础、选择器和筛选器
weixin_48183870的博客
02-24 1139
jQuery是一个流行的JavaScript库，旨在简化JavaScript编程和处理HTML文档的任务。它提供了一组易于使用的功能和方法，可以加快开发速度并提高跨浏览器兼容性。一款轻量级的JS框架。
jQuery
弗里曼的小伙伴
10-19 942
jQuery sf2gis@163.com 2015年6月12日 2015年7月29日添加数组处理 2015年8月5日添加插件 2015年9月1日添加动态加载 2015年10月14日添加效果 1 目标：提供JavaScript的封装，提供更为完善的简洁的SDK。 2 方法：jQuery封装JavaScript。 jQuery封装JavaScript，并提供了动画，特效，ajax等
jQuery学习记录
Pluto_ssy的博客
05-20 214
JavaScript库：即library，是一个封装好的特定的集合（函数和方法）常见的JavaScript库有：jQuery是一个快速、简洁的JavaScript库，倡导写更少的代码，做更多的事。jQuery是一个快速、简洁的JavaScript库，倡导写更少的代码，做更多的事。jQuery封装了JavaScript常用功能代码
jquery-3.2.1.min.js及bootstrap-3.3.7-dist下载（jquery所有版本）
热门推荐
越努力，越幸福！
09-05 2万+
bootstrap-3.3.7-dist文件 (包含jquery-3.2.1.min.js)： 链接：https://pan.baidu.com/s/1LVQHeyWD0Pux-ms1_o6CYA 提取码：y4ga jquery-3.2.1.min.js： 链接(包含所有版本)：http://www.jq22.com/jquery-info122 ...
jQuery3.7--input的change和propertychange事件
weixin_42139212的博客
12-11 735
在表单中通常需要实时监听输入 change事件是在失焦（鼠标点击别处）时触发 propertychange事件能实时监听输入内容的变化（不需失焦） 一般使用事件委派。 ...
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 649
JavaScript青少年简明教程：函数及其相关知识（下）
JQuery笔记：选择器、属性操作、事件处理和DOM操作详解
Jquery笔记 Jquery是JavaScript库，用于简化HTML、CSS和JavaScript之间的交互。下面是Jquery笔记的详细知识点。 一、选择器 * 并且选择器：使用逗号分隔多个选择器，选择所有匹配的元素。 * 父子选择器：使用大于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值