jQuery选择器

引入方式

<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')    
})