• 自学JavaScript第五天- JS 进阶：jQuery

    自学JavaScript第五天- JS 进阶：jQuery

    jQuery 手册

    jQuery 介绍

    jQuery 是非常流行的一个 js 的第三方库，它能够帮我们做这些事

    • 消除浏览器差异
      因为各浏览器 js 引擎不同，所支持的 js 代码、库和方法不同，所以需要写冗长的代码用来判断和兼容各浏览器。
    • 简洁的操作 DOM 的方法
      jQuery 提供非常简单的操作 DOM 的方法，以替代 js 原生方法
    • 轻松实现动画、CSS修改等操作

    jQuery 的目标就是“使用更少的代码做更多的事”。

    jQuery 的安装

    jQuery 其实只是一个 js 文件，下载后在 中引用即可使用。也可以在线引用 CDN 的 jQuery。

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">script>

    • 1

    jQuery 语法

    jQuery 是 js 的一个库，所以使用的是 js 语法，另外有些是 js 特有的语法

    $(selector).action()

    • $ 定义一个 jQuery 对象
    • selector 是 css 选择器，用来查询、获取目标 HTML 元素
    • action() 是 jQuery 对象的方法，用来执行对目标 HTML 元素的操作

    jQuery 选择器（获取DOM元素）

    jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

    基本选择器

    基于已经存在的 CSS 选择器

    // 元素选择器
$('*')		// 选择所有元素
$('p')		// 选择所有 p 标签
// id 选择器
$("#test")	// 选择 id 为 test 的标签
// class 选择器
$(".test")	// 选择 class 有 test 的标签
// 属性选择器
$('[type=password]')	// 需注意如果属性值包含空格等特殊字符，则需要用双引号括起来
$('[items="A B"]')
// 类选择器和属性选择器可以使用前缀查找或后缀查找
$('[name^=icon]') // 找出所有name属性值以icon开头的DOM
$('[class^="icon-"]') // 找出所有class包含至少一个以`icon-`开头的DOM
$('[name$=with]') // 找出所有name属性值以with结尾的DOM
// 组合查找
$('input[name=email]')	// 找到 name=email 的 input 标签
$('tr.red')		// 找到 class 有 red 的 tr 标签
// 多项选择器
$('p,div')		// 找到所有 p 标签和 div 标签
$('p.red,p.green')		// 找到 class=red 或 class=green 的 p 标签

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    除此之外，它还有一些自定义的选择器

    $(this)		// 获取当前 HTML 元素
// 选择器中使用 : 冒号进行过滤
$('p:first')	// 选择第一个 p 标签
$('ul li:first')	// 选择第一个 ul 标签的第一个 li 标签
$('ul li:first-child')		// 选择每个 ul 标签的第一个 li 标签
$('ul li:nth-child(2)')		// 选择 ul 标签下的第 2 个 li 标签 (从1开始)
$('tr:even')	// 选择偶数的 tr 标签
$('tr:odd')		// 选择奇数的 tr 标签

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    关联选择器

    除了基本的选择器外，jQuery的层级选择器更加灵活，也更强大。因为DOM的结构就是层级结构，所以我们经常要根据层级关系进行选择

    // 如果两个 DOM 元素有层级关系，可以使用层级选择器
$('ul.lang li.lang')		// 从class有lang的ul标签查找子节点中class有lang的li标签
// 父子选择器，可以选择有直接父子关系的 DOM 元素
$('ul.lang>li.lang')		// 效果同上，只是 ul 标签必须和 li 标签有直接父子关系
// 兄弟选择器，选取平级的 DOM 元素
$('div + p')	// 选择每个与 div 标签相邻的下一个 p 标签
$('div ~ p')	// 选择与 div 标签 同级的所有 p 标签

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    表单相关

    针对表单元素，jQuery还有一组特殊的选择器

    • :input ：可以选择 ，