JQ的基础语法

JQ的加载方式有两种：
一种是引用外部链接的方式
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
一种是引用本地文件载入的方式。
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

JQ需要设置页面加载完成后进行加载，加载方式是
$(function(){jq的执行语句})

JQ获取元素的方法很简单
$('p')是以标签名方式获取，$('.class')是以CLASS类名方式获取，$('#id')是以ID名方式获取
$(':first') 第一个元素
$(':last')  最后一个元素
比较(x的顺序是从0开始)
$(':gt(num)')表示大于值num的元素
$(':lt(num)')表示小于值num的元素
$(':eq(num)')表示等于值num的元素
$(':odd')奇数顺序span
$(':even')偶数顺序
$(':not(selector)')匹配不是selector的所有元素
$('span:first').css('color','red')
$('span:last').css('color','blue')
$('span:gt(1)').css('font-size','30px')
$('span:lt(2)').css('color','red')
$('span:eq(1)').css('color','red')
$('span:odd').css('background','#ccc')
$('span:even').css('background','pink')
$('span:not(#box)').css('background','red')
JQ获取改变css样式
单个样式
$('选择的元素').css('属性名','属性值');
多个样式
$('选择的元素').css({'属性名':'属性值','属性名':'属性值'});

JQ改变标签内的内容，区别是html可以添加标签
$('选择的元素').text('内容');
$('选择的元素').html('内容');

JQ鼠标事件
   mouseover()  当鼠标指针位于元素上方时会发生mouseover事件
  mouseenter() 当鼠标指针穿过元素时会发生mouseenter事件
  mousemove()  当鼠标指针在指定的元素中移动时，就会发生该事件
  mouseleave() 当鼠标指针离开元素时
  mouseout()   当鼠标指针从元素上移开时
  mousedown()  当鼠标指针移动到元素上方并按下鼠标按键时
  mouseup()    当在元素上松开鼠标按键时
  resize()     当调整当前浏览器窗口大小时
  pageX()      属性是鼠标指针的位置，相对于文档的左边缘 event.pageX  event：必需 参数来自事件绑定函数。
    pageY()      属性是鼠标指针的位置，相对于文档的上边缘 event.pageY  event：必需 参数来自事件绑定函数。
JQ 点击事件click，隐藏事件.hide ，显示隐藏.show，fadeIn淡入，fadeOut淡出，fadeToggle切换，fadeTo控制淡入淡出并且带透明度
.slideDown向下滑动事件，.slideUp向上滑动事件，.slideToggle通过高度的变化来切换元素的可见性

JQ的语法和书写效率要大于原生js，不过有些时候也要配合js原生语法使用，所以js还是不能完全放弃。