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)


相关文章
N..
|
7月前
|
JavaScript 前端开发 开发者
jQuery选择器
jQuery选择器
N..
48 1
|
2月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
31 2
|
3月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
41 5
|
2月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器用于操作 HTML 元素,支持基于 id、类、类型、属性等条件选择元素。它扩展了 CSS 选择器的功能,并使用 $() 符号。例如,$(&quot;p&quot;) 选取所有段落元素,而 $(&quot;button&quot;).click(function(){ $(&quot;p&quot;).hide(); }) 实现点击按钮后隐藏所有段落。
|
6月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
36 0
|
6月前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
|
3月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
3月前
|
JavaScript
jQuery 选择器
jQuery 选择器
26 3
|
3月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
31 1
|
4月前
|
JavaScript 索引
jQuery的选择器有几种?
jQuery的选择器有几种?
36 1