将如下html中的li标签实现隔行换色效果
<div> <ul> <li class="city">北京</li> <li class="city"><a href="">上海</a></li> <li class="city">天津</li> </ul> </div>用JavaScript实
var objs = document.getElementsByClassName('city') for(var i=0;i< objs.length;i++){ if(i%2==0){ objs[i].style.backgroundColor = 'lightblue' }else{ objs[i].style.backgroundColor = 'lightyellow' } }用jQuery实现：
$('li:odd').css('background-color','lightblue') $('li:even').css('background-color','lightyellow')jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。
js库是把我们常用的复杂功能封装到简单的方法中，我们用的时候，将库直接引入然后调用方法即可。
初期，主要学习如何使用jQuery操作DOM，其实就是学习jQuery封装好的那些功能API。
这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。
jQuery 有三个大版本：
1.x版本：最新版为 v1.11.3。2.x版本：最新版为 v2.1.4（不再支持IE6、7、8）。3.x版本。下载 ：jQuery有两个文件，一个是jquery-3.4.1.js(未压缩版)，一个是jquery-3.4.1.min.js(压缩版,推荐项目上线时使用)
关于jQuery的相关资料：
官网：http://jquery.com/ 官网API文档：http://api.jquery.com/ 汉化API文档：http://www.css88.com/jqapi-1.9/ jquery 在线手册 ：http://hemin.cn/jq/**注意：导包的代码一定要放在js代码的最上面
jQuery对标签的查找完全可以复用选择器规则
通过jQuery对象转换dom对象：jq_obj[index]
$('li')[0] # 所查到的对象为dom对象jQuery中支持选择器语法查找
标签选择器
$('p') # 标签选择器 $('.para1') # 类选择器 $('#container') # ID选择器 $('*') # 通用选择器 $('p.para1') # 交集选择器 $('div,p') # 并集选择器层级选择器
$('div p') # 后代选择器：在子孙中符合条件的 $('div>p') # 子代选择器：在子代中符合条件的 $('div+p') # 毗邻选择器：紧邻的下一个 $('div~p') # 弟弟选择器：找某个标签下所有的X标签筛选器
$(选择器:筛选器) # $(选择器：筛选器) # 根据索引筛选 $('p:first') $('p:last') $('p:even') $('p:eq(index)') $('p:gt(index)') $('p:lt(index)') # not 筛选不包含某选择器要求的xx $('p:not(.para3)') # has 通过子代找当前 $('li:has(a)') #表单筛选器，根据type进行筛选 $('input:type类型:选中的情况') $('input:test:disabled') $('input:radio:checked') $('input:password') $('input:date') # 此方法查找是无效的，因为input中没有date筛选器 $('option:selected')属性选择器
$('[属性名]') 如： $('[href]') $('[属性名="属性值"]') 如： $('[href="http://www.baidu.com"]') $('[属性名^="属性值"]') 如： $('[href^="https"]') $('[属性名*="属性值"]') 如： $('[href*="baidu"]') $('[属性名$="属性值"]') 如： $('[href$="com"]') $('[属性名!="属性值"]') 如： $('[href!="http://www.baidu.com"]')