2024年【jQuery超快速入门教程】上篇_jquery快速教程(2)，2024年最新看完不会的来打我

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

1️⃣二、jQuery的基础语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

1️⃣三、jQuery基本选择器

2️⃣3.1、id选择器

选择id="d1"的标签

$("#d1")

2️⃣3.2、标签选择器

选择文档中所有的p标签

$("P")

2️⃣3.3、class选择器

$(".className")

2️⃣3.4、配合使用

选择class="d1"的div标签

${"div.d1")

2️⃣3.5、组合选择器

$("#id, .className, tagName")

2️⃣3.6、所有元素选择器

$("*")

2️⃣3.7、层级选择器

$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

2️⃣3.8、属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]")         选取所有带有 href 属性的元素。

$("[href='#']")     选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']")    选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

2️⃣3.9、CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

$("p").css("background-color","red");

1️⃣四、jQuery筛选器

2️⃣4.1、基本筛选器

$(“:has(元素选择器)”) | 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

举几个栗子：

1、找到后代中含有h1标签的div标签
>>>$("div:has(h1)")
2、找到所有后代中不含a标签的div标签
>>>$("div:not(:has(a))")

2️⃣4.2、表单筛选器

·

当我们要取到checkbox类型的input标签：

我们可以用上面学过的方法：

$(“input[type=‘checkbox’]”)

但是这种方法还是书写比较麻烦，不太符合jQuery的“Write less, do more.“

所以可以简化成如下代码：

$(“:checkbox”)

常用的表单筛选器还有如下：

:button 匹配所有按钮。例如：$(“:button”)

·:checkbox 匹配所有复选框。例如：$(“:checkbox”)

·:file 匹配所有文件域。例如：$(“:File”)

·:hidden 匹配所有不可见元素，或者type为hidden的元素。例如：$(“input:hidden”)

·:image 匹配所有图像域。例如：$(“:image”)

·:input 匹配所有 input, textarea, select 和 button 元素。例如：$(“:input”)

·:password 匹配所有密码框。例如：$(“:password”)

·:radio 匹配所有单选按钮。例如：$(“:radio”)

·:reset 匹配所有重置按钮。例如：$(“:reset”)

·:submit 匹配所有提交按钮。例如：$(“:submit”)

·:text 匹配所有的单行文本框。例如：$(“:text”)

·:header 匹配如 h1, h2, h3之类的标题元素。例如：$(“:header”).css(“background”, “#EEE”);

常见的表单对象属性还有：

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

-1715578780266)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！