引入方式
<script src="jquery-3.4.1.js"></script>
<script>
jQuery代码
<script>
基本选择器
$('.d_1'); 类选择器 $('#d2'); id选择器 $('div'); 标签选择器
层级选择器
$('div p'); 选中div标签内的p标签
$('div .c1'); 选中div标签内的含有c1类的标签
基本筛选器
$('div:first'); 选中第一个div标签
$('div:last'); 选中最后一个div标签
$('div:eq(2)'); 选择索引为2的div标签
$('div:has(span)'); 选择后代中包含span标签的div标签
$('div:not(#d1)'); 选择id不为d1的div标签
$('div:even'); 选中索引为偶数的div标签 $('div:odd'); 选中索引为奇数的div标签
$('div:gt(2)'); 选中索引大于2的div标签
$('div:lt(2)'); 选中索引小于2的div标签
属性选择器
$('[title]');
$('[type=text]');
$('[type!=text]');
$('input[type=text]');
表单筛选器
$(':password');
$(':text')
表单属性
$(':disabled'); 不可用的
$(':checked'); 已选中的选择(单选/复选)框 $(':selected');已选中的下拉框 $(':enabled'); 可用的
筛选器方法
下方标签:同级
$('#d2').next(); 选中id为d2的标签下方的一个同级标签 $('#d2').nextAll(); 选中id为d2标签下方所有的同级标签 返回一个列表,正序 $('#d2').nextUntil('#d4'); 选中id为d2标签下方到id为d4标签中的所有标签且不包含d4 返回一个列表,正序
上方标签:同级
$('#d2').prev(); 选中的id为d2的标签上方的一个同级标签
$('#d2').prevAll(); 选中id为d2的标签上方的所有同级标签 返回一个列表,逆序
$('#d2').prevUntil('#d'); 选中id为d2的标签上方的,与id为d标签之间的所有标签且不含d 返回一个列表,逆序
向上查找:父级元素
$('#d1').parent() 选中一个id为d1的标签上一级的父级标签
$('#d1').parents() 选中所有id为d1的标签上一级的父级标签
$('#d1').parentsUntil('body') 选中id为d1的标签之上到body标签之中包含的所有标签
向下查找:子级标签
$('#d2').children(); 选中id为d2的标签下所有的标签
$('#d2').children('p'); 选中id为d2的标签下的p的标签
同级查找:同级标签
$('#d2').siblings(); 选择id为d2的标签同级的所有标签
$('#d2').siblings('#d1'); 选择id为d2的标签同级的id为d1的标签
find
$('.c1').find('p') 找到c1后代的p标签 类似于后代选择器 .c1 p
filter
$('.c1').filter('.c2') 从满足有c1类的标签中筛选出有c2类的标签 类似于组合选择器 .c1.c2
添加文本
d1.text('xxx'); 为id为d1的标签添加文本
d1[0].innerText='XXX'; 原生js添加文本
设置点击事件
$('.c1').click(function(){ $(this).css('background','red') })