6-2、选择器

最新推荐文章于 2024-01-15 15:37:29 发布

鸵鸟大师

最新推荐文章于 2024-01-15 15:37:29 发布

阅读量939

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/qq_30754745/article/details/108437598

版权

本文详细介绍了CSS选择器的使用，包括基本选择器、多项选择器、层级选择器和属性选择器，并探讨了jQuery中的过滤器功能，如child、type及参数过滤，以及表单元素的选择和表单状态的处理，还涉及到了查找和过滤元素的方法。

摘要由CSDN通过智能技术生成

//等效
  document.getElementById('head');		//js
  $('#head');							//jq

返回的对象是jQuery对象
类似数组，每个元素都是一个引用了DOM节点的对象。

不会返回 undefined 或者null，如果是空返回空数组
不必在下一行判断 if（div===nudefined）

在这里插入图片描述

基本选择器
多项选择器
层级选择器
属性选择器
过滤器
表单相关
查找和过滤

基本选择器：

id选择器：

根据给定的ID匹配一个元素

$('nav');		//返回一个包含id为nav的元素的数组
$('nav')[0];	//返回元素本身

element :

根据给定的元素标签名匹配所有元素

$('li');

.class ：

根据给定的css类名匹配相应元素

var a = $('.li1');

通配符选择器：

* 匹配所有元素

  $('*').css({
   
    'border': '1px solid red',
  });

多项选择器：

在这里插入图片描述

  var a = $('.li1,ul');

返回一个数组，所以可以分类获取然后一起使用。

祖先后代选择器：

在这里插入图片描述

直接后代选择器：

在这里插入图片描述

相邻选择器：

注意是紧跟：
在这里插入图片描述

  <ul>
    <p></p>
    <li class='li1'>1</li>
    <p></p>
    <li class='li1'>2</li>
    <p></p>
    <li class='li1'>3</li>
    <li class='li1'>4</li>
    <li class='li1'>5</li>
    <li class='li1'>6</li>
    <li class='li1'>7</li>
    <li class='li1'>8</li>
  </ul>
  
	$(document).ready(function