$ JQuery学习笔记
一、认识jquery
1.jquery中的顶级对象是 $ 或者 jQuery
用于
-
获取jquery对象
-
入口函数（页面加载事件）
-
高级功能
注意：jquery中的$和jQuery关键字本身为同一对象
$可以认为就是一个构造函数
-
可以使用 $(选择器) 的方式调用 $ ,得到一个对象，在对象上就可以调用$的实例方法
-
也可以使用 $.方法名 调用静态方法。 比如遍历数组对象的 $.each() 相当 for循环
-
2.jquery中页面加载事件 （好的习惯要写哟）
使用jquery的三个步骤：
-
引入jquery文件
-
入口函数（定义页面加载事件）
-
功能实现
关于jquery的入口函数：
//第一种写法 表示将整个文档准备好了然后在执行函数里面的内容 $(document).ready(function(){ }); //第二种写法 这是简化的版本 $().ready(function(){ }) //第三种写法 这个也是简化的版本，是最简的形式 $(function(){ })jquery入口函数与window.onload的对比
- JavaScript的入口函数要等到页面所有资源（包括图片，文件）加载完成才能开始执行
- jquery的入口函数只会等待文档树加载完全开始执行，并不会等到图片，文件的加载。
二、选择器
1、jquery的基本选择器
-
ID选择器 $(’#id’) 获取指定ID的元素
-
类选择器 $(’.class’) 获取同一类class的元素
-
标签选择器 $(‘div’) 获取同一类标签的的所有元素
-
并集选择器 $(‘div,p,li’) 使用逗号隔开，只要符合条条件之一就可
-
交集选择器 $(‘div.redclass’) 获取class为redclass的div元素
-
任意的选择器 $(’*’)
总结：跟css的选择器用法一模一样
2、jquery层级选择器
子代选择器 $(‘ul>li’) 使用大于号 > ，获取儿子层级的元素，注意并不会获取孙子层级的元素
后代选择器 $(‘ul li’) 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等等
其他的层级选择器：
prev+next 表示寻找前面一个元素加上后面一个元素
prev ~sibbling 表示找前一个元素的兄弟元素
总结：跟css的选择器一模一样
3、jquery过滤选择器
-
这类选择器都要带冒号 ：
名称 用法 描述 :eq $(‘li:eq(2)’).css(‘color’,‘red’) 获取到li元素中，选择索引号为2的元素，索引号index从0开始 :odd $(‘li:odd’).css(‘color’,‘red’) 获取到li元素中，选择索引号为奇数的元素 :even $(‘li:even’).css(‘color’,‘red’) 获取到li元素中，选择索引号为偶数的元素 其他带有冒号的过滤选择器：
:frist $(‘li:frist’) 找第一个
:last $(‘li:last’) 找最后一个
:not(selector) $(‘div:not(img)’) 找没有含有img标签的div
:gt(index) $(‘li:gt(2)’) 找下标大于2的li标签
:lt(index) $(‘li:lt(2)’) 找下标小于2的li标签
:header $(‘div:header’) 找div标签中的h1,h2,h3之类的标签
:animated 动画标签
:fous 焦点标签
4、jquery筛选方法
-
筛选选择器的功能与过滤器有点类似，但是用法不一样，筛选器选择器主要是方法
名称 用法 描述 children（selector) $(‘ul’).childern(‘li’) 相当于$(‘ul>li’)，子类选择器 find(selector) $(‘ul’).find(‘li’) 相当于$(‘ul li’)，后代选择器 sibling（selector) $(’#first’).sibling(‘li’) 查找兄弟节点，不包括自己本身 parent（） $(‘li’).parent() 查找父亲节点 eq(index) $(‘li’).eq(2) 查找下标为2的li元素 next() $(‘li’).next() 查找下一个兄弟 prev（） $(‘li’).prev() 查找上一个兄弟 closest $(‘li’).closet(‘div’) 找他最近的div祖先元素
5、jquery中根据内容查找标签
:contains(text) 根据text内容去找标签
:empty 找什么也没有的标签
:parent 找是父亲的元素标签
:has(selector) 找有对应选择器的标签的元素标签
6、jquery中根据可见性查找标签
:hidden 隐藏的标签
:visible 可见的标签
7、jquery中根据属性查找标签
attribute====>属性
[attribute] 根据属性查找
[attribute=value] 根据属性和属性值来寻找
[attribute!=value]
[attribute^=value] 属性值以这个开头
[attribute$=value] 属性值以这个结尾
[attribute*=value] 任意的
[attribute1] [attribute2] [attribute3] [attribute4] 表是多个属性，取并集
8、jquery查找子元素
:nth-child
:frist-child
:last-child
:only-child
9、jquery中查找表单元素
:input
:text
:password
:radio
…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="w">
<input name="in" id="q" value="" class="qq"/>
<input name="i" value="" class="qq" name="oo"/>
<input name="n" id="p" value="" />
</div>
</body>
<script src="./jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
console.log($('input'))
console.log($('input')[0])
console.log($('.qq'))
console.log($('input[name=oo]'))
console.log($('input#in'))
console.log($('.qq').parent())
</script>
</html>
三、jquery对象和dom对象的关系
1、相关代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jquery对象和DOM对象</title>
</head>
<script src="./jquery.js" type="text/javascript" charset="utf-8"></script>
<body>
<input type="button" id="btn" value="点我" />
</body>
<script type="text/javascript">
console.log($('#btn'));//返回的是jq对象
console.log($('#btn')[0]);//jq 对象包含了dom对象
console.log(document.getElementById('btn'))
//==============================
var box =document.getElementById('box');
box.innerHTML = 'hello'; // dom对象的方法
var $box = $('#box');
//--------------------------------
$box.text('hello') //jq对象的方法
$box.html('nhao')
//===============================
//区别： jq对象 调用jq对象的属性方法
// dom对象 调用dom都想的属性和方法
</script>
</html>
2、jq对象和dom对象的相互转换
- dom对象转换成jq对象
- 有一种方法是 $(dom对象)
- jq对象转换成dom对象
- 有两种方法
- 取下标 $(‘div’)[0]
- 调用get方法传下标 $(‘div’).get(0)
- 有两种方法
四、简单事件绑定
1、jquery中的简单事件的绑定 $(’#btn’).click(function(){})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
简单事件绑定
</title>
</head>
<body>
<input type="button" name="" id="btn" value="点我呀" />
<input type="text" name=" " id=" text" />
</body>
<script src="./jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//给input绑定事件 -----原生写法
document.getElementById('btn').onclick = function(){
// alert('你好呀');
}
//引入jquery的写法 不需要写on 直接调用click函数传递一个函数作为参数
$('#btn').click(function(){
alert('你好');
})
//失去焦点
$('#text').blur(function(){
console.log("我失去焦点了^~^");
})
//得到焦点
$('#text').focus(function(){
console.log("我失去焦点了^~^");
})
//*****给所有input标签绑定mouseover函数，不用循环
$('input').mouseover(function(){
console.log("你好呀");
})
</script>
</html>
注意：引入jquery的写法 不需要写on 直接调用click函数传递一个函数作为参数
五、jQuery操作属性
1、val() / text() / html() 与 this
$obj.val() //获取或者设置表单元元素的value属性值
$obj.html() //对应dom对象中的 innerHTML ==>这会编译这个里面的HTML代码
$obj.text() //对应dom对象中的 innerText ==>这个会将得到的数据作为字符串输出
*******注意上面三个不传参，表示获取值；
*******传递参数表示给标签设置值
console.log($('#text').blur(function(){
console.log($(this).val()) //this表示当前的标签#text this一个dom对象
}))
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
简单事件绑定
</title>
</head>
<body>
<input type="text" id="btn">
<span id="span"></span>
<input type="button" name="" id="add" value="+" />
<input type="text" name="" id="text" value="0" />
<input type="button" name="" id="sub" value="-" />
</body>
<script src="./jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#btn').blur(function(){
var phonenum = $(this).val();
console.log(phonenum);
if(phonenum == /^1[3-9]\d{9}$/ ){ //正则表达式
$('#span').text('正确').css('color','green');
}else if(phonenum == ''){
$('#span').text('号码不能为空').css('color','red')
}
else{
$('#span').text('号码格式不正确').css('color','red')
}
})
$('#add').click(function(){
//获取输入框中的值
var number = parseInt($('#text').val())+1;
$('#text').val(number);
})
$('#sub').click(function(){
//获取输入框中的值
var number = parseInt($('#text').val())-1;
if(number<=0){
number=0;
}
$('#text').val(number);
});
</script>
</html>
注意学习一下正则表达式
补充：要显示小数部分的保留位数 number.tofixed(2) ===>两位小数 （在谷歌浏览器，对于极少数部分数字，有bug
2、CheckBox的全选按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
简单事件绑定
</title>
</head>
<body>
<div>
<input type="checkbox" id="cbox1" />篮球
<input type="checkbox" id="cbox2" />网球
<input type="checkbox" id="cbox3" />排球
<input type="checkbox" id="cbox4" />足球
</div>
<input type="checkbox" id="all" />全选
</body>
<script src="./jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//全选影响所有的checkbox
$('#all').change(function(){
//获取全选的CheckBox的属性
// console.log(this.checked)
// var status = this.checked;
var status = $(this).prop('checked')//prop方法 传一个属性名称，表示获取值，传一个名称和一个值，表示设置
$('#cbox1').parent().find('input').prop('checked',status) ;
})
//每一行影响全选
$('#cbox1').parent().children('input').change(function(){
//判断所有的行数和选中的行数是否相等
var totall = $('#cbox1').parent().children('input').length;
//选中行数
var checkednum = $('#cbox1').parent().children('input:checked').length
var status = checkednum == total;
$('#all').prop('checked',status)
})
</script>
</html>
注意：prop方法 传一个属性名称，表示获取值，传一个名称和一个值，表示设置
3、attr添加和设置属性操作
-
设置单个属性
//第一个参数：需要设置属性名 //第二个参数：对应属性值 //$obj.attr(name,value) $('img').attr('title','哎哟不错哟') $('div').atrr('class','hhh'); -
设置多个属性
//参数是一个对象，包含了需要设置的属性名和属性值 //$obj.attr(obj) $('div').attr({ class:'hhh', id:'eee', style:'color:red'// ****注意这个是改变它原有的值为当前字符串的值，所以要保留之前属性保留然后通过字符拼接的形式在给 // style赋值 })
4、removeAttr 移除属性
$('div').removeAttr('data')
5、prop操作 （属性值为boolean）
- 在jQuery1.6之后支持，对于 checked，selected(下拉列表)，disabled 这类Boolean类型的属性来说，不能用attr方法，只能用prop方法
//设置属性
$(':checked').prop('checked',true)
//获取属性
$(':checked').prop('checked')
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jtJntVrc-1624101582029)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210617222455130.png)]](https://i-blog.csdnimg.cn/blog_migrate/8706e2de0d9ad77fd0d6247ad2ef122d.png)
6、class操作 addClass (添加) removeClass(移除) hasClass(是否存在) toggleClass(替换)
- 添加样式 $obj.addClass(name)
//name:需要添加的样式类名，注意参数不要带点
//$obj.addClass(name);
//列子，给所有的input添加one的样式
$('input').addClass('one');
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6jkG6iTo-1624101582032)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210617223651169.png)]](https://i-blog.csdnimg.cn/blog_migrate/30d0fc01d1ecc76f67baae990810c6d7.png)
- 移除样式 $obj.removeClass(name);
//name:移除的样式类名，注意参数不要带点
//$obj.addClass(name);
//列子，给所有的input移除one的样式
$('input').removeClass('one');
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ywljWzn-1624101582034)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210617224235337.png)]](https://i-blog.csdnimg.cn/blog_migrate/686b4c576422befa067d7ae7c43c5e16.png)
-
判断是否有该样式 $obj.hasClass(‘one’) ===>得到一个Boolean值
//name:判断的样式类名，注意参数不要带点，如果有就返回一个true //$obj.hasClass(name); //列子，给所有的input移除one的样式 $('input').hasClass('one'); -
切换样式 $obj.toggleClass(‘one’)
//name:需要切换的样式类名，注意参数不要带点，如果有就，删除该样式，如果没有，添加样式 //$obj.toggleClass(name); //列子，给所有的input移除one的样式 $('input').toggleClass('one');
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-35By6Dux-1624101582036)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210617230313402.png)]](https://i-blog.csdnimg.cn/blog_migrate/624c27fecc87771ae8b299e9b7bc7818.png)
7、隐式迭代(批量操作自动遍历)
- 1、设置操作的时候（事件绑定），如果是多个元素，那么所有的元素设置相同值
- 2、获取操作的时候，如果是多个元素，那么只会返回第一个元素的值
六、jQuery操作样式
1、css操作
-
功能：设置或者修改样式，操作的是style属性
-
操作单个样式
//name：需要的样式名称 //value：对应的样式值 ///$obj.css(name，value); //使用案列 $('#one').css('background','red')//将背景颜色改成红色 //原生就是用 标签.style ='font-size:30px;width:200px' -
设置多个样式
注意：key可以用引号引起也可以不用引号引起，但是value必须要用引号引起
//参数是一个对象，对象中包含需要设置的样式和样式值 //$obj.css(obj) //使用案例 $('#one').css({ //key可以用引号引起也可以不用引号引起，但是value必须要用引号引起 'backgrond':'gray', height:'400px', 'width':'200px' }) -
获取样式
//name：需要的样式名称 ///$obj.css(name); //使用案列 $('#one').css('background')//获取背景的样式 //注意获取样式操作只会返回一个元素的样式值注意：获取样式操作只会返回一个元素的样式值
2、jQuery尺寸和位置操作
2.1width方法与height方法
设置或者获取高度，不包括内边距，边框和外边距
//带参数表示设置高度
$('img').height(200);
//不到参数获取高度
$('img').height()
获取网页的可视区宽高
//获取可视区宽度
$(window).width();
//获取可视区的高度
$(window).heigth();
2.2、innerWidth / innerHeight / outerWidth / outerHeigth()
innerWidth() /innerHeight() 方法返回元素的宽度和高度(包括内边距)
outerWidth() / outerHeight() 方法返回元素的宽度和高度（包括内边距和边框)
outerWidth(true) / outerHeight(true) 方法返回元素的宽高度（包括内边距边框和外边距）
2.3、srcollTop与srcollLeft
设置或者获取滚动条的位置
//获取页面被卷曲的高度
$(window).srcollTop();
//获取页面被卷曲的宽度
$(window).srcollLeft();
2.4、offset方法和position方法
offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素（offsetParent)的位置
//获取元素距离document的位置，返回值为对象：{left:100,top:100}
$(selector).offset();
//获取相对于器最近的有地位的父元素的位置
$(selector).position();
七、each方法遍历
1、jQuery的隐式迭代会对所有的Dom对象设置相同的值，但是如果我们需要给每个对象设置不同的值的时候，就需要自己进行迭代了
作用：遍历jQuery中的对象集合，为每一个匹配元素执行一个函数
//参数一表示当前元素所有匹配元素中的索引号
//参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){ //是动态表的方法
})
$.each($('div'),function(index,v){}) //是静态的方法
2、购物车中的计算总价案例：
计算总价封装成一个函数
1.首先分析步骤
2.根据步骤填写代码
function change_total() {
//选出中的行
//遍历，根据每一个选中的checkedbox，获取当前
var total_price = 0;
var total_num = 0;
$('.row_checked:checked').each(function(index,v){
//获取当前行中的商品数量
var num = parseInt($(v).closet('ul').find('.current_number').val());
//获取单当前行中的单价
var price = parseFloat($(v).closet('ul').find('.sum').html()).toFixed(2);
//累加小计金额
total_price += num*price;
total_num += num;
})
八、JQuery事件绑定机制
- javaScript中已经学习过了事件的绑定，jQuery对角JavaScript事件绑定进行的了封装，增加了并扩展了时间处理机制，jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。
1、jQuery事件发展历程
- 简单的事件绑定 -bind事件 - delegate事件 -on事件绑定
1.1、简单事件绑定
click(hander) //单击事件
mouseenter(hander) //鼠标进入事件
mouseave(hander) //鼠标离开事件
1.2、bind方式注册事件（不用）
//第一个参数：事件的类型
//第二个参数：事件处理程序
$('p').bind('click',function(){}) //可以一次绑定多个事件用空格隔开
1.3、delegate方法绑定事件（不用）
//第一个参数：selector，要绑定事件的元素
//第二个参数：事件的类型
//第三个参数：事件处理函数
$('.parentbox').delegate('p','click',function(){
//注意.parentbox 为p标签前的父级元素，表示为.parentbox下的所有p标签绑定事件
})
1.4、on方法绑定事件（重点)
-
on注册简单事件
//表示给 $(selector)绑定事件，并且由自己触发，不支持动态绑定 $(selector).on('click',functon(){}) -
on注册事件委托
//表示给$(selector)绑定代理事件，当必须是他的内部原元素才能触发这个事假，支持动态绑定 $(selector).on('click','span',function(a){}); //这里的 a 形参是触发事件对象 通过 a.target 可以得到当前dom对象 //事件委托可以实现后添加的元素实现相同的事件绑定 -
on注册事件绑定的语法：
//第一个参数：events，绑定事件的名称可以是用隔空分隔的多个事件（标准事件或者自定义事件） //第二个参数：selector,执行事件的后代元素（可选），如果没有后代元素，那么事件将由自己执行 //第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用） //第四个参数：handler，事件处理的函数 $(selector).on(events[,selector][,data],handler);![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8GgqmdZ9-1624101582038)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210619083333617.png)]](https://i-blog.csdnimg.cn/blog_migrate/9decbf6d70e38bda2625fd6753a4fbd3.png)
1.5、克隆标签 （复制标签）
var input1 = $('.input')[0].cloneNode();
1.6、添加子标签
$("#btn")[0].appendChild(selector)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AypKbTKu-1624101582039)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210619085813863.png)]](https://i-blog.csdnimg.cn/blog_migrate/2b84fc9c0cc51f3a569601ec0880f28c.png)
2、事件解绑
2.1、unbind方式（不用）
$(selector).unbind();//解除所有的绑定
$(selector).unbind('click');//解除指定的绑定
2.2、undelegate方式(不用)
$(selector).undelegate();//解除所有的delegate事件
$(selector).undelegate('click');//解除指定的绑定
2.3 off方法（重点）
//解绑匹配元素的所有事件
$(selector).off();
//解绑匹配元素的所有click事件
$(selector).off('click');
3、触发事件
$(selector).click();
$(selector).trigger('click')
4、jQuery事件对象
jQuery事件对象其实就是js事件对象的一个封装，处理兼容性。
//screenX和screenY 对应屏幕是左上角的值
//clientX和clientY 距离页面左上角的位置（忽略滚动条）
//pageX和oageY 距离页面左上角的位置（要计算滚动条）
//event.keycode 按下的键盘代码
//event.data 存储绑定传过来的附加数据
//event.stopPropagation() 阻止事件冒泡
//event.preventDefault() 阻止浏览器的默认行为 ==>页面跳转之类的
//return false；阻止事件冒泡，又能浏览器的默认行为
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fuVmzjzu-1624101582040)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210619093914109.png)]](https://i-blog.csdnimg.cn/blog_migrate/84135b6bfe8432812c168efd755405e5.png)
九、动画效果
1、show() 显示，hide() 隐藏，toggle() 转换
第一个参数：time 表示时间，默认值为0 ，slow(200),normal(400),fast(600)
第二个参数：function 表示执行完成后的回调函数
$obj.show(time，function(){}) 将对象在time时间里逐渐显示出来
$obj.hide(time) 将对象在time时间里逐渐隐藏
$obj.toggle(time) 将对象在time时间里实现显示和隐藏之间转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本动画效果</title>
</head>
<body>
<div id="div1">
<input type="button" name="" id="show" value="点击" />
<input type="button" name="" id="hide" value="隐藏" />
<input type="button" name="" id="toggle" value="切换" />
</div>
<div id="div2">
<img src="../img/OIP%20(1).jpg" >
<img src="../img/OIP%20(2).jpg" >
<img src="../img/OIP.jpg" >
</div>
</body>
<script src="./jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#show').click(function(){
$('img').show(2000);
})
$('#hide').click(function(){
$('img').hide(2000);
})
$('#toggle').click(function(){
$('img').toggle(2000);
})
})
</script>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ttf8fgMi-1624101582040)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210619103709536.png)]](https://i-blog.csdnimg.cn/blog_migrate/53b88c6b01b7b20b9eda3b66e43ce0df.png)
2、slideUp () 滑入 、slideDown() 淡出、 slideToggle() 切换
第一个参数为time 默认为 normal slow fast
第二个参数为function 回调函数
改变的是图片的高度，在使用这几个函数要看到效果需要给图片或者组件设置高度和宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本动画效果</title>
<style type="text/css">
img{
width: 350px;
height: 400px;
}
</style>
</head>
<body>
<div id="div1">
<input type="button" name="" id="show" value="点击" />
<input type="button" name="" id="hide" value="隐藏" />
<input type="button" name="" id="toggle" value="切换" />
</div>
<div id="div2">
<img src="../img/OIP%20(1).jpg" >
<img src="../img/OIP%20(2).jpg" >
<img src="../img/OIP.jpg" >
</div>
</body>
<script src="./jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#show').click(function(){
$('img').slideUp(2000);
})
$('#hide').click(function(){
$('img').slideDown(2000);
})
$('#toggle').click(function(){
$('img').slideToggle(2000);
})
})
</script>
</html>
3、fadeIn() 淡入 fadeOut()淡出 fadeToggle()切换
fadeTo(time,opacity) //opacity表示透明度1~0，
4、自定义动画
4.1、animate：自定义动画
$(selector).animate({params},[speed],[easing],[callback]);
//{params} ：要执行动画的css属性，带数字（必填）
//speed：执行动画时长
//easing：执行效果，默认是swing(缓动)，可以是linear(匀速)
//callback：动画执行完后立即执行的回调函数（可选)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本动画效果</title>
<style type="text/css">
img{
width: 350px;
height: 400px;
}
</style>
</head>
<body>
<div id="div1">
<input type="button" name="" id="animate" value="自定义" />
</div>
<div id="div2">
<img src="../img/OIP%20(1).jpg" >
</div>
<input type="button" name="" id="" value="dddd" />
</body>
<script src="./jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#animate').click(function(){
$('img').animate(
{width:'100px',
height:'100px',
opacity:'0.5'
},2000,'linear',function(){
alert('成功了')
})
})
})
</script>
</html>
5.停止动画 stop()
$(‘img’).stop()
stop(clearQueue,jumpToEnd)
//第一个参数：是否清楚队列
//第二个参数：是否跳转都最终效果
6、延长动画 delay()
$(‘img’).delay()
$('img').hide(200).delay(200).show(200)
6.2、二级菜单的下拉
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 20px;
background-color: gray;
}
ul{
padding: 0;
margin: 0;
width: 200px;
}
li{
list-style: none;
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1" class="div">
顶级菜单1
</div>
<ul>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
<div id="div2" class="div">
顶级菜单2
</div>
<ul>
<li>21</li>
<li>22</li>
<li>23</li>
</ul>
</body>
<script src="./jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('.div').click(function(){ //给每一个顶级菜单绑定点击事件
var that = this;
//var index='';
//$('.div').each(function(i,v){ //获取点击当前的顶级菜单的下标
// if(that == v)
// {
// index = i;
// }
//})
//$($('ul')[index]).slideToggle(1000) //通过替换来实现菜单的下拉和消失
console.log(index)
$(this).next().slideToggle(1000) //通过替换来实现菜单的下拉和消失
})
</script>
</html>
十、jQuery节点操作
1、创建节点
document.createElement()
//$(htmlstr)
//htmlstr:html格式的节点
$('<p>你好</p>');
2、添加节点
append appendTo 在被选原始的结尾插入内容 父.append(子) 子.appendTo(父)
prepend prependTo 在被选的元素的开头插入 内容 父.prepend(子) 子.prependTo(父)
before insertBefore 在被选的元素之后插入内容 后.before(前) 前.insertBefore(后)
after insertAfter 在被选的元素之前插入 内容 前.after(后) 后.insertAfter(前)
这是两种写法，推荐记忆前面的那种
3、清空节点与删除节点
- empty:清空指定节点的所有元素，自身保留（推荐使用，会清除子元素上绑定的事件）
$('div').empty();
- remove:相比于empty，自身删除
$('div').remove();
4、克隆节点
- 作用：复制匹配的元素
//赋值$(selector)所有匹配到的元素（深度复制）
//cloneNode（true) //原生js cloneNode 不传参数 ，克隆标签本身，传参数true
/
pt">
$('.div').click(function(){ //给每一个顶级菜单绑定点击事件
var that = this;
//var index='';
//$('.div').each(function(i,v){ //获取点击当前的顶级菜单的下标
// if(that == v)
// {
// index = i;
// }
//})
//$($('ul')[index]).slideToggle(1000) //通过替换来实现菜单的下拉和消失
console.log(index)
$(this).next().slideToggle(1000) //通过替换来实现菜单的下拉和消失
})
</script>
</html>
十、增、删、改、查
1、增
//在js中增加标签
//第一种：字符串的形式 div.innerHtml = '这里是标签'；
//第二种：先创建一个标签 var p = document.createElement('p');
然后在添加到div中 div.appendChild(p);
//==================
//在jq中添加标签
//第一种： $('div').html('这里写标签')
//第二种：想创建标签 var p =$('<p>哈哈哈</p>')
然后添加到div中 $('div').append(p); //还可以使用prepend，after，before
2、改
//在js中修改标签 父元素.replaceChild(子元素，新元素)
先获取子元素，和父元素 var div = document.getElementById('div');
var p = document.getElementById('p')
在创建一个新的元素 var p1 = document.createElement('div')
然后就是 div.replaceChild(p,p1);
//在jq中修改标签 被替换的元素.replaceWith(新元素) ===> 注意这里的元素都是jq对象
3、删
//在js中 父元素.removeChild(子元素)
//在jq中 元素.remove(); 元素.empty()
4、层级关系获取节点
//原生js
//找父节点 子节点.parentNode 找孩子节点 父节点.childNodes
//firstElementChild lastElementChild
//nextELementSibling prevElementSibling
十一、jQuery节点操作
1、创建节点
document.createElement()
//$(htmlstr)
//htmlstr:html格式的节点
$('<p>你好</p>');
2、添加节点
append appendTo 在被选原始的结尾插入内容 父.append(子) 子.appendTo(父)
prepend prependTo 在被选的元素的开头插入 内容 父.prepend(子) 子.prependTo(父)
before insertBefore 在被选的元素之后插入内容 后.before(前) 前.insertBefore(后)
after insertAfter 在被选的元素之前插入 内容 前.after(后) 后.insertAfter(前)
这是两种写法，推荐记忆前面的那种
3、清空节点与删除节点
- empty:清空指定节点的所有元素，自身保留（推荐使用，会清除子元素上绑定的事件）
$('div').empty();
- remove:相比于empty，自身删除
$('div').remove();
4、克隆节点
- 作用：复制匹配的元素
//赋值$(selector)所有匹配到的元素（深度复制）
//cloneNode（true) //原生js cloneNode 不传参数 ，克隆标签本身，传参数true
/
十二、jQuery工具方法
1、数组和对象操作
1.1、$.inArray(value,array,[fromIndex])
确定第一个参数在数组中首次出现的位置，从0开始计数（如果没有找到这会返回-1）；
value:用于在数组中查找是否存在
array：待处理数组
fromIndex：用来搜索数组队列，默认值为0，从那个下标开始查找
$.inArray(1,[1,2,3,1]);//查找value在arr中的位置，返回第一次出现的下标，没有找到就返回-1；
$.inArray(1,[1,2,3,1],2);//从下标为2开始（包含下标2），查找value在arr中的位置，返回第一次出现的下标，没有找到就返回-1；
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vrzVegQL-1624122238038)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210620005540086.png)]](https://i-blog.csdnimg.cn/blog_migrate/b361243048aa80bc73d01ae4182675bc.png)
1.2、$(选择器).toArray(),把jQuery集合所有的Dom元素恢复成一个数组
将内数组装换成真的数组，去掉属性，只包含标签
$('div').toArray()
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tX1i70a7-1624170278227)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210620065341512.png)]](https://i-blog.csdnimg.cn/blog_migrate/e7b31e896643a1e0b120343ca728546b.png)
1.3、$.merge(first,second);合并数组；
$.merge([1,2,3,4],[5,6,7,8]);
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-plQFCWda-1624170278232)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210620065629850.png)]](https://i-blog.csdnimg.cn/blog_migrate/88b607609c519ab87b4395aa05ae0de4.png)
1.4、$.parseJson(str);解析JSON字符串为对象，等价于JSON.parse（str）；
1.4.1、JSON就是一种数据格式：以键值对方式描述格式
json使用：通常在不同的网站或者语言之间，交互数据的
//json对象格式
var obj = {
"age":30,
"sex":"男"
}
//JSON字符串格式
var str = '{
"age":30,
"sex":"男"
}'
$.parseJSON('{"name":"zhangshangfeng","age":"30"}');
1.5、json.stringify(obj)将对象转换成字符串（原生）
2、字符串操作
2.1、$.trim(str)去除字符串两边的空格，等待与str.trim()
$.trim(' 1111 2222 33333 ')；
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iMt2B7tU-1624170278234)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210620071616112.png)]](https://i-blog.csdnimg.cn/blog_migrate/0885285354f04d7d269d104e5abe79fb.png)
3、判断类型操作
$.type(obj) 判断数据类型 typeof
$.isArray(obj) 判断是否是数组 obj instanceof Array
$.isFunction(obj) 判断是否是函数 obj instanceof function
$.isEmptyObject(obj) 判断是否是空对象
$.isNumber(obj) 判断是否是数字（数字类型或字符串类型）
$.isPlainObject(obj) 判断是否纯对象（直面量语法{} 或实例化new 构造函数 定义的对象）
十三、插件
1、jQuery插件开发语法
1.1、给jQuery增加方法的两种方式
$.method = fn; 静态方法
$.fn.method = fn 实例方法 method 是自己写的名字
//实例方法 调用只能在jq对象上调用
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XqVQht1g-1624170278236)(C:\Users\cian\AppData\Roaming\Typora\typora-user-images\image-20210620074729444.png)]](https://i-blog.csdnimg.cn/blog_migrate/fd5394aae516d9224377fa7e6a2a1e40.png)
1.2、批量扩展 实例方法
// 批量扩展 实例方法
$.fn.extend({
f1:function(){
return 100;
},
f2:function(){
return 200;
}
})
注意：一般在自己写插件时，都是另开一个文件js文件的，命名为extend.js
2、常用的插件
2.1、弹出层的插件 layer
layer 弹出层组件 - jQuery 弹出层插件 (layui.com)
2.2、放大镜插件 jqzoom
地址：jQuery.zoom
2.3、轮播图插件
- http://sorgalla.com/jcarousel/
- https://github.com/OwlCarousel2/OwlCarousel2/
562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
