1.什么是jq，
jq是在js有了一大堆问题的时候，被用来擦屁股的包，可以特别便利的使用各种API，集合了解决js问题的组合，并且又自带的动画效果模块，因此更适合使用jq。
2，为什么使用jq。
js的缺点主要在兼容性差和动态效果较复杂，因此产生了大量的代码冗余，所以使用jq在一定程度上能够避免次情况。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style type="text/css"> ???????.box{ ???????????width: 100px; ???????????height: 100px; ???????????background-color: red; ????????} ???</style> ???<script type="text/javascript" src="jquery-3.3.1.js"></script> ???<script type="text/javascript"> ???????$(function(){ ???????????$(‘button‘).click(function(){ ???????????????$(‘.box‘).hide(); ???????????}) ???????}) ????????// $(ducoment).ready(function() ???</script></head><body> ???<button>隐藏</button> ???<div class="box"></div></body></html>一般有两种表示方式：
1，$(ducoment).ready(function(){}）
2，$(function(){})
jq最重要的符号就是$，这个符号代表着jq的使用
jq和js在获取节点元素上的区别：
js：var box = ddoument.getElementById("box");jq:$(#box)设置css的样式：js：box.style.width = "10px"jq:$(‘#box‘).css({ ??‘width‘:‘10px‘,})相互转化方式： ???1，js-jq： $(js对象名) ???2，jq-js：jq对象[index]；$(‘div‘)[1].style.backgroundColor = "red";可直接转化引用jq对象.get（index）；实例：隔行换色：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="jquery-3.3.1.js"></script><script type="text/javascript">$(function() {var New = $(‘dd‘);for(i=0;i<=New.length;i++){if (i % 2 == 0){New[i].style.backgroundColor = "pink";}else{New[i].style.backgroundColor = ‘green‘;}// new[]括号中的寻找的是按照顺序的第几个该数值}})</script></head><body> <dr><dd>第几</dd><dd>第几</dd><dd>第几</dd><dd>第几</dd><dd>第几</dd></ur></body></html>3。关于jq的选择器：
1，基础选择器：
1，id选择器：$(#id名)
2，类选择器:$(‘.类名‘)
3，标签选择器：$(‘标签名‘)
4，通配符选择器：$(‘*‘)选取所有。
2，层级选择器：
1，后代选择器：选择器所有后代元素
$(父类名 后代名)
2，子代选择器器： 值选取所有子代，亲儿子选择
$(父类名>子代名)
3，基本过滤选择器：
1，按照序号选取元素：
$(‘li:eq(1)‘) 从0开始选取
2，选择序号大于index的所有元素：
$(‘li:gt(1)‘)
3，选择序号小于index的所有元素：
$(‘li:It(1)‘)
4，选择所有序号为奇数行的元素
$(‘li:odd‘)
5，选择所有序号为偶数的元素
$(‘li:even‘)
6,,7,选择第一项和最后一项：
$(‘li:first‘)$(‘li:last‘)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="jquery-3.3.1.js"></script><script type="text/javascript">$(function() {$("dd:odd").css("background","red");$("dd:even").css("background","green")$("dd:first").css("background","pink")$("dd:last").css("background","blue")$("dd:eq(1)").css("background","orange")})</script></head><body> <dr><dd>第几</dd><dd>第几</dd><dd>第几</dd><dd>第几</dd><dd>第几</dd></ur></body></html>4，属性选择器：
5，筛选选择器：
1，直到指定的元素：
$(‘#box‘).find（selector） 查找指定元素的所有后代元素，所有后代！
2，查找指定元素的所有子元素，
$(‘#box‘).children（）
3,查看所有兄弟元素
siblings()
4，查看所有父级元素
parent（）
5，eq（index）
查找指定元素的第几个元素，index是索引值
莫名其妙之 jQuery！
原文地址：https://www.cnblogs.com/wpcbk/p/9119571.html