jQuery基础选择器

简介: jQuery引入及其选择器jQuery是JS的一个库,它里面封装了一些我们开发中常用的一些功能;它提供了一些方便的选择器,可以让我们更方便的操作DOM。

jQuery引入及其选择器

jQuery是JS的一个库,它里面封装了一些我们开发中常用的一些功能;它提供了一些方便的选择器,可以让我们更方便的操作DOM。

在我们使用中,只需要引入jQuery的js文件,就可以使用jQuery的选择器了。

jQuery的使用

jQuery的使用分为三步:

  • 引入jQuery的js文件
  • 写入口函数
  • 写功能的实现代码(事件处理函数)
// 引入jQuery的js文件
    <script src="jquery-3.2.1.js"></script>
    // 写入口函数
     $(document).ready(function () {
        // 写功能的实现代码(事件处理函数)
            $('#show').click(function () {
                $('p').show();
            })
        });
复制代码

书写入口函数的集中写法

  1. $(document).ready(function () {});
    适用于文档加载完毕,图片还未加载的时候执行此函数
  2. $(function () {});
    适用于文档加载完毕,图片未加载的时候执行此函数
  3. $(window).ready(function(){});
    适用于文档加载完毕,图片也加载完毕的时候执行此函数

jQuery的选择器

  1. 基本选择器
符号 说明 用法
$('#demo') 选择id为demo的第一个元素 $('#test')
$('.demo') 选择所有类名为demo的元素 $('.test')
$('tagName') 选择所有对应标签名的元素怒 $('div')
$('*') 选择所有元素 $('*')
$('.demo,div') 选择多个指定元素,中间使用逗逗号间隔 $('.test,div')

其中ID选择器、类选择器、标签选择器比较重要。

  1. 层级选择器
符号 说明 用法
空格 后代选择器,选择所有的后代元素 $('div p')
> 自带选择器,选择所有的子代元素 $('div span')
+ 选择紧挨着的下一个元素 $('div+p')
~ 兄弟选择器,选择后面所有的兄弟元素 $('div~p')
  1. 过滤选择器
符号 说明 用法
:eq(index) 选择序号为index的元素,匹配第一个 $(li:eq(4))
:gt(index) 选择序号大于index的元素 $('li:gt:(3)')
:lt(index) 选择序号小于index的远元素 $('li:lt(2)')
:odd 选择序号为奇数的元素 $('ul:odd')
:even 选择序号为偶数的元素 $('ul:even')
:first 选择匹配的第一个元素 $('div:first')
:last 悬着匹配的最后一个元素 $('p:last')

上面表格中,所有的index都是大于或者等于0的整数,代表着索引号。

4.属性选择器

符号 说明 用法
$('标签[属性]') 选择所有包含此属性的标签 $('a[href]')
$('标签[属性 = "值"]') 选择所有包含此属性且属性值相匹配的标签 $('div[class = "box"]')
$('标签[属性 != "值"]') 选择所有包含该属性且属性值不相匹配的该标签 $(div[class != "box"])
$('标签[属性 ^= "value"]') 选择所有该属性值以value开头的对应标签 $('div[id ^= "vm"]')
(′标签[属性('标签[属性 ([= "value"]') 选择所有该属性值以value结尾的对应标签 (′p[class('p[class (p[class= "qw"]')
$('标签[属性 *= "value"]') 选择所有包含该属性且值包含value的对应标签 $('div [class *= 'o']')
  1. 筛选选择器
符号 说明 用法
find() 选择指定元素的所欲所有后代元素 $('ul').find('li') 选择ul所有的后代元素li
children('标签') 选择指定元素的子元素 $('ul').children('li')选择ul所有的子代元素
siblings() 查找所有的兄弟元素 $('ul').siblings()
parent() 查找亲父元素 $('ul').parent()
eq(index) 查找指定元素的第index+1个元素,index为所索引 $('ul').e(3)


相关文章
|
27天前
|
JavaScript
jquery的9大选择器
jquery的9大选择器
19 2
|
1月前
|
JavaScript
jQuery :nth-of-type(n)选择器的用法详解
jQuery中,:nth-of-type(n)选择器可以对selector选择器匹配选择到的所有HTML元素进行二次匹配选择,为了更好地阐述:nth-of-type(n)的语法,这里假设selector是一个元素p选择器,如此,:nth-of-type(n)可以用于匹配p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素,而且与p是否是该父元素的第n个子元素无关,比如
33 5
|
4月前
|
JavaScript 前端开发 索引
jQuery入门&以及选择器
jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
28 0
|
4月前
|
JavaScript 前端开发
Javascript知识【jQuery选择器】
Javascript知识【jQuery选择器】
|
4月前
|
JavaScript 前端开发 Java
jQuery入门&选择器
jQuery入门&选择器
|
4月前
|
存储 JavaScript 前端开发
jQuery 入门&选择器
jQuery 入门&选择器
32 0
|
4月前
|
JavaScript 前端开发
前端基础 -JQuery之 表单选择器
前端基础 -JQuery之 表单选择器
20 0
|
4月前
|
JavaScript 前端开发
前端基础 -JQuery之 可见性过滤选择器
前端基础 -JQuery之 可见性过滤选择器
21 0
|
4月前
|
JavaScript 前端开发
前端基础 -JQuery之 内容过滤选择器
前端基础 -JQuery之 内容过滤选择器
19 0
|
20天前
|
JavaScript 前端开发 数据格式
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
33 0