关于jQuery是前端方法库
特点：
1 优质的选择器和筛选方法
2 好用的饮食迭代
3 强大的链式编程
jQuery向外暴露两个变量：jQuery和$ (jQuery === $)
选择器
// jQuery选择器 $(选择器) 返回元素集合
// id选择器
console.log($('#li3')); // jQuery.fn.init(1)
// 类选择器
console.log($('.c1'));
// 标签选择器
console.log($('li'));
// 特殊选择器
// 第一个元素
console.log($('li:first'));
// 最后一个元素
console.log($('li:last'));
// 获取第4个元素(索引是3)
console.log($('li:eq(3)'));
// 索引奇数个
console.log($('li:odd'));筛选器
对选择器元素进行二次筛选
jQuery筛选器
// .first() 第一个
console.log($('li').first());
// .last() 最后一个
console.log($('li').last());
// eq(n) 选择第n个
console.log($('li').eq(3));
// next()
console.log($('#li3').next());
// prev()
console.log($('#li3').prev());
// prevALl() 上面所有
console.log($('#li3').prevAll());
// nextALl() 下面所有
console.log($('#li3').nextAll());
// parent()父元素
console.log($('#li3').parent());
// parents()上级所有元素
console.log($('#li3').parents());
// find('.c1') 在所有后代元素中查找类名未c1的元素
console.log($('ul').find('.c1'));
// siblings() 查找所有的兄弟元素
console.log($('.c1').siblings());
// index() 获取元素的索引
console.log($('.c1').index());属性操作
attr() 和 removeAttr() 可操作自定义和原生属性
// 1 获取 第4个li的id属性
console.log($('li').eq(3).attr('id')); // li3
console.log($('li').eq(3).attr('index')); // 3
// 2 设置 属性名和属性值
$('li').eq(1).attr('id','c1')
// 3 删除元素属性
$('li').eq(1).removeAttr('id')prop()和removeProp()
// 1 可获取原生属性，不可获取通过attr设置的属性，和自定义属性
console.log($('li').eq(3).prop('id')); // li3
console.log($('li').eq(3).prop('index')); // undefined
// 2 设置属性，可设置原生和自定义属性，自定义属性不在标签中展示，存储在对象属性中
$('li').eq(3).prop('id','2333') //element结构中可查看
$('li').eq(3).prop('data-id','2444') // 可获取
console.log($('li').eq(3).prop('data-id'));//2444 可获取
// 3 removeProp()不能删除原生属性和标签自带的属性，能删除props设置的属性
$('li').eq(3).removeProp('id') //原生id属性删除失败
$('li').eq(3).removeProp('index') //自带的index属性删除失败
$('li').eq(3).removeProp('data-id')
console.log($('li').eq(3).prop('data-id')) // undefined 删除prop成功类名操作
类名操作
// 1 添加类名 addClass(类名)
$('div').addClass('cls3')
// 2 判断类名是否存在
console.log($('div').hasClass('cls3')); // true
// 3 移除类名
$('div').removeClass('cls2')
// 4 类名切换，toggleClass() 类名存在则移除，不存在则添加
setInterval(function(){
$('div').toggleClass('cls2')
},1000)文本操作
// 元素文本操作
// 1 获取元素的`超文本内容`
console.log($('div').html()); // <p>我是p元素</p>
// 2 设置超文本内容
$('div').html('233')
$('div').html('<span>haha</span>')
// 3 设置获取元素文本内容 text()
console.log($('div').text()); // 我是p元素
$('div').text('我是text') //设置文本内容
// 4 获取表单标签的内容 val()
// console.log($('input').val()); //名字
$('input').val('年龄')元素样式操作
// 元素样式操作
// 1 获取元素样式
console.log($('div').css('background-color')); // rgb(255, 192, 203)
// 2 设置样式 css(样式名，样式值)
$('div').css('border','10px solid skyblue')
// 3 css(对象) 批量设置样式
$('div').css({
border:'5px dashed blue',
// 'border-radius':'50%', //或者下面这种写法
borderRadius:'50%'
})事件绑定
// 1 on(s事件类型，函数处理)
$('#box1').on('click',function(){
console.log('box1');
})
$('#box2').on('click',function(){
console.log('box2');
return false; // 目的是阻止事件冒泡
})
$('a').on('click',function(){
console.log('点击链接事件');
return false; //阻止链接默认转跳
})
// 2 on(事件类型，委托元素，处理函数)//从box2委托过来的click事件才能处理，直接点击box1不做处理
$('#box1').on('click','#box2',function(){
console.log('box2的点击事件委托给box1');
})
// 3 on(事件类型，数据，处理函数)
$('#box1').on('click',100,e => {
console.log(e.data);
})
// 4 one()事件绑定，传参和on()一样，只是one只触发一次
// 5 off(事件类型) 取消事件类型的所有处理函数
// off(事件类型，事件处理函数)
function f1(){
console.log('box1');
}
function f2(){
console.log('box2');
return false; // 目的是阻止事件冒泡
}
$('#box1').on('click',f1)
$('#box2').on('click',f2)
$('#box1').off('click')
// 6 trigger(事件类型) 自动触发事件
$('#box1').on('click', ()=>{
console.log('box1');
})
setInterval(() => {
$('#box1').trigger('click')
},2000)页面加载
// 1 页面加载事件,可绑定多次；页面加载完毕后就触发
$(window).ready(function(){
console.log('load');
})
// 页面加载事件简写
$(function(){
console.log(66);
})
// 2 特殊事件，hover(移入处理，移出处理)
$('div').hover(function(){
// 移入处理
console.log('移入');
},function(){
// 移出处理
console.log('移出');
})隐式迭代
获取到的元素集合，调用jQuery方法，默认遍历集合，给每一个元素都添加方法
// 隐式迭代:
// 获取所有div元素并绑定事件
$('div').on('click',function(){
console.log(this); //this是原生DOM对象（类似<div>haha</div>）
})绑定jq中的方法：原生DOM转为jq集合
$('div').on('click',function(){
console.log(this);
// this.css('border','10px solid green') // this.css is not a function因为只有jQ的集合才能调用jq方法其他不可
// 解决办法：原生DOM转为jq集合 ====> $(原生DOM对象)
$(this).css('border','10px solid green')
})jq对象转为原生DOM
// jq对象转为原生DOM
console.log($('div').eq(0)); // jq集合对象
console.log($('div').eq(0)[0]); // 原生DOM对象链式编程
只有前面的方法返回的是jq集合才可继续链式编程
// 链式编程
$('div').css('width','400px')
console.log($('div').css('width','400px'));//jq集合调用方法后返回的还是jq集合
// 链式编程:只有前面的方法返回的是jq集合才可继续链式编程
$('div').css('width','400px').click(()=>{
console.log('点击');
}).height(400)元素操作
创建元素
// 1 创建标签元素
let p = $('<p>我是p元素</p>')
console.log(p);1 添加元素（父子关系）
// jQuery元素操作
// （父子关系）
// 2 将元素B添加到元素A末尾
$('.d1').append(p)
// 3 将元素B添加到元素A最前面
$('.d1').prepend(p)
// 4 将元素A添加到元素B内部的最后面
p.appendTo($('.d1'))
// 4 将元素A添加到元素B内部的最后面
p.prependTo($('.d1'))2 添加元素（兄弟关系）
// (兄弟关系)
// 5 将元素B添加到元素A后面 A.after(B)
$('.d1').after(p)
// 6 将元素B添加到元素A前面 A.before(B)
$('.d1').before(p)
// 7 将元素B添加到元素A后面 B.insertAfter(A)
p.insertAfter($('.d1'))
// 8 将元素B添加到元素A前面 B.insertBefore(A)
p.insertBefore($('.d1'))3 替换
// (替换)
// A.replaceWith(B) 元素B将元素A替换
$('span').replaceWith(p)
p.replaceAll($('span'))4 删除
// 删除元素
// 1 A.empty() 将元素A中所有后代子节点清除
$('.d1').empty()
// 2 A.empty() 将元素自己移除
$('span').remove()5 克隆
// 克隆元素 A.clone() 返回克隆的元素A
// 参数1：是否克隆元素A的事件，默认false，不克隆
// 参数2：子元素是否克隆自身事件，默认跟随参数1
$('.d1').click(function(){
$(this).css('background-color','pink')
})
let d2 = $('.d1').clone() //d2没有继承事件
let d2 = $('.d1').clone(true) //d2继承事件
$('body').append(d2)元素尺寸
// 元素的尺寸
// 1 获取元素宽高width() 和 height() 是内容宽高，不包括padding和border、margin
console.log($('div').width()); // 200
console.log($('div').height());
// $('div').height(400) // 设置
// 2 innerWidth() 和 innerHeight() 获取元素内容宽高+padding，不包括border和margin
console.log($('div').innerWidth()); // 220
console.log($('div').innerHeight()); // 220
// $('div').innerHeight(300)
// 3 outerWidth() 和 outerHeight() //获取元素宽高
// 参数为false或者不传，（内容+padding+border）
// 参数为true，（内容+padding+border+margin）
console.log($('div').outerWidth()); // 230
console.log($('div').outerHeight()); // 230
console.log($('div').outerWidth(true)); // 270
console.log($('div').outerHeight(true)); // 250
// $('div').outerWidth(600) // 设置元素的位置
// 元素的位置
// 1 offset() 获取元素相对于页面的定位
console.log($('.d1').offset()); // {top: 20, left: 48}
console.log($('.d2').offset()); // {top: 40, left: 50}
// offset({}) 设置元素位置,相对页面
$('.d2').offset({
top:10,
left:10
})
// 2 相对于父元素的定位
console.log($('.d2').position()); // {top: 20, left: 10}jq中的动画
1 基本动画
// 1 基本动画，显示、隐藏
// show()
// 参数1：时间 非必填
// 参数2：运动曲线 swing linear 非必填
// 参数3：动画结束后执行的函数、 非必填
$('button').click(()=>{
$('div').show(1000,'linear',function(){ // 显示div
console.log(this);
})
})
// hide() 隐藏
$('button').click(()=>{
$('div').hide(1000,'linear',() => {
console.log(this);
})
})
// toggle() 元素显示隐藏的切换 参数和show一样
$('button').click(() => {
$('div').toggle(1000) // 显示和隐藏的切换
})2 折叠动画
// 2 折叠动画 （下拉显示 收起隐藏）
// slideDown() 效果：显示下拉动画 参数和show方法一样,
$('button').click(()=>{
$('div').slideDown(1000,()=>{
console.log(123);
})
})
// slideUp() 效果：收起隐藏 参数和show方法一样
$('button').click(()=>{
$('div').slideUp(1000)
})
// slideToggle() 效果：点击button，切换div显示和隐藏状态，
$('button').click(()=>{
$('div').slideToggle(1000)
})3 淡入淡出的动画
// 3 淡入淡出的效果
// fadeIn() 淡入 （透明度从0-1） 参数和show一样
$('button').click(()=>{
$('div').fadeIn()
})
// fadeOut() 淡出 （透明度从1-0） 参数和show一样
$('button').click(()=>{
$('div').fadeOut()
})
// fadeTo() 参数1:时间； 参数2：指定透明度； 参数3：swing或者linear；参数4：结束后处理函数
$('button').click(()=>{
$('div').fadeTo(1000,0.3)
})
// fadeToggle() 效果：淡入淡出的切换效果，参数和show一样
$('button').click(()=>{
$('div').fadeToggle(1000)
})自定义动画
// jq自定义动画
// animate(运动目标效果对象{样式}，时间，运动曲线，运动结束后的执行函数)
// 不可改变颜色
$('.start').click(() => {
$('div').animate({
top:100,
left:200,
width:200,
height:200,
borderRadius:'50%',
backgroundColor:'pink' //没有效果
},500,'linear',function(){
console.log(this);
})
})
// stop() 暂停动画
// finished() 停止动画,直接到目标效果
$('.stop').click(function(){
$('div').stop()
})jq-ajax-get-post请求
// jq中ajax请求-post-get
// $.get(agr) $.post(agr)
// 参数1:请求地址 必填
// 参数2:需要携带的数据,对象或查询字符串 选填
// 参数3:回调函数 选填
// 参数4:返回的数据格式,取值json xml text 默认是text 选填
$('button').click(function(){
$.get('http://localhost:8888/test/first',function(res){
console.log(res);
})
})
$('button').click(function(){
$.get('http://localhost:8888/test/third',{name:'kelly',age:18},function(res){
console.log(res);
},'json')
})
// post请求
$('button').click(function(){
$.post('http://localhost:8888/test/fourth',{name:'kelly',age:18},function(res){
console.log(res);
},'json')
})jQuery的综合ajax请求
// jQuery的综合ajax请求
// 语法:$.ajax(参数)
// 参数是一个对象,对象中的数据都是此次请求的配置
// url
// data 查询字符串或对象
// type 请求方式 默认get
// dataType 期望返回的数据格式
// async 默认true
// error 请求失败的回调
// success 请求成功的回调
// timeout 请求超时设置的时间
// context 设置回调函数中this指向 默认this指向ajax
// status {} 状态回调码
$('button').click(function(){
$.ajax({
url:'http://localhost:8888/test/fourth',
type:'post',
data:'name=kelly&age=18',
// timeout:1,//模拟请求超时 请求需要在1毫秒内完成,否则报错
success(res){
// console.log(res);
// console.log(this); // 未设置context时,this指向ajax对象;否则指向context对象
},
error(xhr,error){
console.log('请求失败');
console.log(xhr);
console.log(error);
},
// context:{name:'kelly',age:18}
})
})多库共存
// 多库共存
// 引入的jqJS文件,有两个变量暴露在外面,分别是$ 和 jQuery
// 若引入的js文件,除了jQuery外,还有别的方法库也暴露了$ 和 jQuery的话,会产生变量冲突
// jQuery可将$符的控制权交出
console.log($); // ƒ ( selector, context )
jQuery.noConflict();
console.log($); // undefined
// jQuery可将jQuery符的控制权交出
console.log(jQuery); // ƒ ( selector, context ) {
jQuery.noConflict(true)
console.log(jQuery); //undefined
// jQuery和$的控制权交给jq
let jq = jQuery.noConflict(true)
console.log(jQuery); //undefined
console.log($); //undefined
console.log(jq); // ƒ ( selector, context ) {插件扩展
// 插件扩展
// jq中有一些方法是没有的
// 比如
let max = Math.max(1,5,9);
console.log(max); //9
// 通过$.extend(参数) 给$和jQuery添加方法
// 参数就是一个对象,对象中的方法就是扩展 给$和jQuery使用的函数
// 将getMax方法扩展给$
$.extend({
getMax(...arg){
return Math.max(...arg)
}
})
console.log($.getMax(1,2,8,4,5,6)); // 8
// 给$的元素集合添加方法 $.fn.extend(参数)
// 参数也是对象,对象中的方法就是元素集合的对象
// 给jq的元素集合(input)添加一个全选方法
// 如果想调用完自定义的扩展方法后可以继续进行链式编程,需要在自定义的方法中返回jq元素集合
$.fn.extend({
fx(){
// console.log(this);
return this.each((i,value) => {
if($(value).prop('checked')){
$(value).prop('checked',false)
}else{
$(value).prop('checked',true)
}
})
}
})
$('button').click(function(){
$('input').fx().css({width:20,height:20})
})
// each() 遍历jq的元素集合
$('input').each((index,item) => {
console.log(index,item);
})
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
