1.jquery是相对于js的一个很简单的库,类似于python的模块,可以减少js寻找标签等的难易
可以提高效率。
2.找标签
<script src="jquery-3.3.1.js"></script>
<script>
$('div').css('color','red')
和js类似,只是现在使用$符号,简单许多
3.基本语法
$(selector).(action)
同样,是先找到标签,再对标签进行操作
4.jq中的选择器
基本选择器
$('div').css('color','red'); $('#div2').css('color','red'); $('.div1').css('color','red');
$(*)通配符,查找所有标签
层级选择器
$('.class p');后代选择器 $('.class>p');子代选择器 $('.class+p');紧挨着的兄弟选择器 $('.class~p')不要求紧挨着的兄弟选择器
基本筛选器
$('.div:first');数组的第一格 $('.div:last');数组的最后一个 $('.div:eq(0)');数组的第一个 $('.div:even');数组的奇数行 $('.div:odd');数组的偶数行 $('.div:gt(1)');数组大于1后面的所有,开区间 $('.div:lt(2)');数组小于2的所有
属性选择器
$('[alex]').css('color','red'); $('[alex=sb]').css('color','red'); $('[alex="sb"][id=dd]').css('color','red'); 属性值可以不加引号
查找筛选器
$('.div1').children('div').css('color','red');div1的子代 $('.div1').eq(0).next().css('color','red');div1的子代中第一个的紧挨的兄弟标签 $('.div1').eq(0).nextUntil('.div1').css('color','red');div1的紧挨着的兄弟标签知道div1
$('.div1').eq(0).prev().css('color','red')找之前的
$('.div1').parent().css('color','red')找父亲
$('.div1').siblings().css('color','red')从上到下兄弟查找器,不包括其中的后代