1:选择器
1.1:基本选择器
1.1.1 id选择器-》$("#one").css("background","#bbffaa");
1.1.2 class选择器-》$(".mini").css("background","#bbffaa");
1.1.3 标签选择器-》$("div").css("background","#bbffaa");
1.1.4 通配符选择器-》$("*").css("background","#bbffaa");
1.1.5组合选择器-》$("div,span").css("background","#bbffaa");
1.1.6 --->$("span,#two').css("background","#bbffaa"); span中id为two的
1.2 :层次选择器
1.2.1 后代选择器-》$('body div') .css("background","#bbffaa"); body中所有的div
1.2.2 子选择器-》$('div>span') .css("background","#bbffaa");div中的span(是子,不是所有的)
1.2.3下一个选择器-》$('div +span').css("background","#bbffaa"); div中下一个span(只是第一个)
1.2.4 后面所有选择器-》$('#two ~div').css("background","#bbffaa"); id为two元素后面的所有div
1.3 过滤选择器
1.3.1 :first $('div:first').css("background","#bbffaa");所有div中第一个div
1.3.2 :last $('div:last').css("background","#bbffaa");所有div中最后一个div
1.3.3 :not(a) $('input:not(.myclass)').css("background","#bbffaa"); 选取class不是myclass的所有input元素
1.3.4 :even $('input:even').css("background","#bbffaa"); 索引为偶数的input元素
1.3.5 :odd $('input:odd').css("background","#bbffaa"); 索引为奇数的input元素
1.3.6 :eq(index) $('input:eq(1)').css("background","#bbffaa"); 索引为1的input元素
1.3.7 :gt(index) $('input:gt(1)').css("background","#bbffaa"); 索引大于1的input元素(不包括1)
1.3.8 :lt(index) $('input:lt(1)').css("background","#bbffaa"); 索引小于1的input元素(不包括1)
1.3.9 :header $(':header ').css("background","#bbffaa"); 所有header元素
1.3.10 :animated $('div:animated ').css("background","#bbffaa"); 正在执行动画的div
1.4 内容过滤选择器
1.4.1 :contains(text) $('div:contains(di) ').css("background","#bbffaa"); 文本中包含di的所有div
1.4.2 :empty $('div:empty').css("background","#bbffaa");没包含任何元素的div
1.4.3 :has(.class) $("div:has(.mini)").css("background","#bbffaa"); class为mini的div元素
1.4.4 :parent $("div:parent").css("background","#bbffaa"); 有子元素的div ,包括含有文本
1.5 可见过滤选择器
1.5.1 :hidden 选择所有不可见的元素,包括 type=hidden,style="visibility:hidden",style="display:none"
如果只想选择input标签 可以,$("input:hidden")
1.5.2 :visible $("div:visible")..css("background","#bbffaa");所有可见元素
1.6 属性过滤选择器
1.6.1 [a] $("div[title]") .css("background","#bbffaa"); 改变含有title的div
1.6.2 $("div[title=text]") .css("background","#bbffaa"); 改变含有title=test的div
1.6.3 $("div[title!=text]") .css("background","#bbffaa"); 改变含有title!=test的div
1.6.4 $("div[title^=text]") .css("background","#bbffaa"); 改变含有title以text开始的div
1.6.5 $("div[title$=text]") .css("background","#bbffaa"); 改变含有title以text结束的div
1.6.6$("div[title*=text]") .css("background","#bbffaa"); 改变含有title中包含text的div
1.6.7$("div[id] [title*=text]") .css("background","#bbffaa"); 改变含有属性id,并且title中包含text的div
1.7 表单选择器
:input
:test
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
1.8 子元素过滤器
1.8.1 $('div.one :nth-child(2)').css("background","#bbffaa"); 修改每个class为one的div父元素下第二个元素
1.8.2 $('div.one :first-child').css("background","#bbffaa");修改每个class为one的div父元素下第一个元素
1.8.3 $('div.one :last-child').css("background","#bbffaa");修改每个class为one的div父元素下最后一个元素
1.8.4 $('div.one :only-child').css("background","#bbffaa");修改每个class为one的div父元素下只有一个子元素
相关推荐
**jQuery 总结** 在实际开发中,jQuery 可以极大地提高工作效率,减少代码量,使得动态交互和界面美化变得更加简单。然而,随着 ES6 和现代前端框架的崛起,如 React 和 Vue,jQuery 在某些场景下可能不再是首选。...
6. **总结** jQuery降低了JavaScript开发的复杂度,提高了开发效率,尤其在DOM操作、事件处理和Ajax交互方面表现突出。无论是初学者还是经验丰富的开发者,jQuery都能作为一个强大的工具,提升开发体验和项目质量。...
**jQuery 全集:深入理解与实践** jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了 JavaScript 的 DOM 操作、事件处理、动画制作以及 AJAX 交互。本资料旨在全面覆盖 jQuery 的核心概念和实用技巧,通过...
JQuery总结.docx - 快捷方式.lnk
**jQuery入门与总结** jQuery是一个深受开发者喜爱的JavaScript库,它的出现极大地方便了JavaScript的编程,使得HTML元素的选择、操作和隐藏等任务变得更加简单。jQuery的核心理念是"write less, do more",即用更...
目录: 1.选择网页元素 2.改变结果集 3.链式操作 4.元素的操作:取值和赋值 5.元素的操作:移动 6.元素的操作:复制、删除和创建 7.工具方法 8.事件操作 9.特殊效果
**jQuery 知识总结** jQuery 是一个高效、简洁且功能丰富的 JavaScript 库,它极大地简化了 JavaScript 的DOM操作、事件处理、动画制作以及Ajax交互。jQuery 的核心特性可以概括为:选择器、DOM操作、事件处理、...
**jQuery 全集与总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画以及Ajax交互等任务。自2006年发布以来,jQuery 已经成为了前端开发中不可或缺的一部分,因其简洁的API和...
jQuery是对JavaScript的封装,使用jQuery可以简化很多之前的JavaScript代码,简化开发 本人学习jQuery是通过xmind这款软件来记载的 现在把资源贡献给大家,希望给更多的人更深入的了解jQuery 也可以查询我的博客看...
总结来说,jQuery通过其高效、易用的特性,改变了JavaScript开发的格局,成为Web开发领域不可或缺的一部分。通过深入学习和实践,开发者可以更好地利用jQuery提升工作效率,构建出更富交互性的Web应用程序。
**jQuery 技巧总结** jQuery 是一款非常流行的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画制作和Ajax交互等任务。自2006年发布以来,jQuery 已经成为 web 开发不可或缺的一部分。这篇总结将探讨一些...
**jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...
本文将深入探讨2022年jQuery的总结,包括其概念、优点、基本使用方法以及与DOM对象的区别。 首先,jQuery是由John Resig于2006年创立的,它是最受欢迎的JavaScript库之一。jQuery的设计理念是"write less, Do more...
jQuery 入门总结 本章节主要介绍了 jQuery 的概述、基本使用、优点、入口函数、DOM 对象和 jQuery 对象的区别等知识点。 1. jQuery 概述 jQuery 是一个 JavaScript 库,由 John Resig 于 2006 年创建,是目前最...
本总结将深入探讨jQuery的核心知识点,包括选择器、DOM操作、事件处理和Ajax应用。** ### 一、jQuery选择器 jQuery 的选择器基于CSS,允许开发者通过简单的语法选取DOM中的特定元素。常见的选择器有: 1. **基本...
**jQuery 概述** jQuery 是一个轻量级的 JavaScript 库,它极大地简化了 JavaScript 的使用,特别是对于网页上的交互和动画效果。由于其简洁的语法和强大的功能,jQuery 成为了许多前端开发者首选的工具,尤其适合...