jQuery是一个javascript类库，通过进一步封装，不但简化了DOM操作，还处理了不同浏览器的兼容，其口号是Write Less Do More!
jQuery是轻量级的框架,大小不到30kb,它有强大的选择器,出色的DOM操作的封装,有可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠)
完善的ajax(它的ajax封装的非常好,不需要考虑复制浏览器的兼容性和XMLHttpRequest对象的创建和使用问题)出色的浏览器兼容性,而且支持链式操作,隐式迭代,行为层和结构层的分离,还支持丰富的插件,jQuery的文档也非常的丰富
1).轻量级
2).强大的选择器
3).出色的DOM操作封装
4).可靠的事件处理机制
5).出色的浏览器兼容性
6).完善的Ajax支持
7).出色的浏览器兼容性等
8).jQuery理念：写的少，做的多
1) jQuery引入
本地引入, 在http://jquery.com/download/中下载jQuery
<script src="jquery/3.4.1/jquery.min.js"></script>
在bootCDN(https://www.bootcdn.cn/)中加载
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
2) 选择器
$(‘.box‘) #根据类选择器获取
$(‘#box‘) #根据ID选择器获取
$(‘p‘) #根据标签选择器获取
$(‘input[type="text"]‘) #根据属性选择器获取
$(‘.box p‘) #根据后代选择器获取
3)对象方法
操作css
$(‘.box‘).css(‘color‘,‘red‘); 设置一个CSS属性值 $(‘.box‘).css(‘color‘); 获取一个CSS属性值 $(‘.box‘).css({‘color‘:‘red‘,‘fontSize‘:‘20px‘}); 设置多个CSS属性值
操作文本内容
$(‘p‘).text() 获取文本内容 $(‘p‘).text(‘文本内容‘) 设置文本内容 $(‘p‘).html() 获取文本内容(会解析html标签) $(‘p‘).html(‘文本内容‘) 获取文本内容
操作属性
$(‘img‘).attr(‘src‘,‘./image/01.jpg‘) 修改img的src属性 $(‘img‘).attr(‘src‘) 获取img的src属性
事件处理
$(‘button‘).on(‘click‘,function(){ 鼠标点击事件 $(‘.box‘).css(‘color‘,‘red‘); })
$b.on(‘mouseover‘, function(){ 鼠标移入事件
$b.css(‘backgroundColor‘,‘green‘);
});
$b.on(‘mouseout‘,function(){ 鼠标移除事件
$b.css(‘backgroundColor‘,‘blue‘);
});
注: 通过以上代码推出其他事件用法
链式操作
$(‘.box‘).find(‘p‘).text();
相当于每个封装的方法最后都将对象返回出来,所以可以继续点其他的方法
对象转换
通过jQuery对象的索引0可以得到原生DOM对象 $(‘.box‘)[0].style.color = ‘red‘;
通过将原生DOM对象转换成jQuery对象
var a = document.querySelector(‘.box‘);
$(a).css(‘backgroundColor‘,‘blue‘);
创建div标签对象添加到某个标签
$(‘<div />‘).css(‘color‘,‘blue‘).text(‘阿萨‘).appendTo(‘button‘);
动画
$(‘.box‘).hide(3000); 均匀缩小消失 $(‘.box‘).show(3000); 均匀变大出现 $(‘.box‘).fadeOut(3000); 慢慢淡出 $(‘.box‘).fadeIn(3000); 慢慢谈入 $(‘.box‘).fadeToggle(3000); 存在则消失不存在则出现 $(‘.box‘).slideDown(3000); 高度慢慢缩小消失 $(‘.box‘).slideUp(3000); 高度慢慢变高出现 $(‘.box‘).slideToggle(3000); 存在则消失不存在则出现
$(‘.box‘).delay(3000); sleep几秒
$(‘.box‘).animate({‘color‘:‘blue‘}); 设置css属性
筛选
first 符合条件的第一个元素
last 符合条件的最后一个元素
filter 过滤符合条件的元素
not 排除符合条件的元素
children 查找子元素
文档处理(DOM节点的增删改)
prepend 在当前元素的开头插入
prependTo 在被选中的元素的开头插入
after 在当前元素之后插入
before 在当前元素之前插入
insertAfter 在选中的元素之后插入
insertBefore 在选中的元素之前插入
empty 清空当前元素
remove 删除该对象节点
clone 复制一份该对象,复制的对象为新的对象
操作类名
addClass 添加类
removeClass 删除类
toggleClass 类存在则删除,不存在则添加
hasClass 判断类是否存在
原文：https://www.cnblogs.com/yuyafeng/p/10975957.html