基础语法是：$(selector).action()
?美元符号定义 jQuery
?选择符（selector）“查询”和“查找” HTML 元素
?jQuery 的 action() 执行对元素的操作
3. jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。
4. 文档就绪函数
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){
--- jQuery functions go here ----
});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。
（三）jQuery选择器
1.选择器允许您对元素组或单个元素进行操作。
2. jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$(“p”) 选取 <p> 元素。
$(“p.intro”) 选取所有 class=“intro” 的 <p> 元素。
$(“p#demo”) 选取所有 id=“demo” 的 <p> 元素。
3. jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href=’#’]") 选取所有带有 href 值等于 “#” 的元素。
$("[href!=’#’]") 选取所有带有 href 值不等于 “#” 的元素。
( " [ h r e f ("[href ("[href/=’.jpg’]") 选取所有 href 值以 “.jpg” 结尾的元素。
4. jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
$("p").css("background-color","red");
5.选择器手册
| jQuery选择器 | 实例 | 选取 |
| — | — | — |
| [*](
) | $("*") | 所有元素 |
| [#id](
) | $("#lastname") | id=“lastname” 的元素 |
| [.class](
) | $(".intro") | 所有 class=“intro” 的元素 |
| [element](
) | $(“p”) | 所有
元素
|
| .class.class | $(".intro.demo") | 所有 class=“intro” 且 class=“demo” 的元素 |
| | | |
| [:first](
) | $(“p:first”) | 第一个
元素
|
| [:last](
) | $(“p:last”) | 最后一个
元素
|
| [:even](
) | $(“tr:even”) | 所有偶数 |
| [:odd](
) | $(“tr:odd”) | 所有奇数 |
| | | |
| [:eq(index)](
) | $(“ul li:eq(3)”) | 列表中的第四个元素（index 从 0 开始） |
| [:gt(no)](
) | $(“ul li:gt(3)”) | 列出 index 大于 3 的元素 |
| [:lt(no)](
) | $(“ul li:lt(3)”) | 列出 index 小于 3 的元素 |
| :not(selector) | $(“input:not(:empty)”) | 所有不为空的 input 元素 |
| | | |
| [:header](
) | $(":header") | 所有标题元素
–
==
|
| [:animated](
) | $(":animated") | 所有动画元素 |
| | | |
| [:contains(text)](
) | $(":contains(‘W3School’)") | 包含指定字符串的所有元素 |
| [:empty](
) | $(":empty") | 无子（元素）节点的所有元素 |
| :hidden | $(“p:hidden”) | 所有隐藏的
元素
|
| [:visible](
) | $(“table:visible”) | 所有可见的表格 |
| | | |
| s1,s2,s3 | $(“th,td,.intro”) | 所有带有匹配选择的元素 |
| | | |
| [[attribute]](
) | $("[href]") | 所有带有 href 属性的元素 |
| [[attribute/=value]](
) | $("[href=’#’]") | 所有 href 属性的值等于 “#” 的元素 |
| [[attribute!=value]](
) | $("[href!=’#’]") | 所有 href 属性的值不等于 “#” 的元素 |
| [[attribute$=value]](
) | ( " [ h r e f ("[href ("[href/=’.jpg’]") | 所有 href 属性的值包含以 “.jpg” 结尾的元素 |
| | | |
| [:input](
) | $(":input") | 所有 元素 |
| [:text](
) | $(":text") | 所有 type=“text” 的 元素 |
| [:password](
) | $(":password") | 所有 type=“password” 的 元素 |
| [:radio](
) | $(":radio") | 所有 type=“radio” 的 元素 |
| [:checkbox](
) | $(":checkbox") | 所有 type=“checkbox” 的 元素 |
| [:submit](
) | $(":submit") | 所有 type=“submit” 的 元素 |
| [:reset](
) | $(":reset") | 所有 type=“reset” 的 元素 |
| [:button](
) | $(":button") | 所有 type=“button” 的 元素 |
| [:image](
) | $(":image") | 所有 type=“image” 的 元素 |
| [:file](
) | $(":file") | 所有 type=“file” 的 元素 |
| | | |
| [:enabled](
) | $(":enabled") | 所有激活的 input 元素 |
| [:disabled](
) | $(":disabled") | 所有禁用的 input 元素 |
| [:selected](
) | $(":selected") | 所有被选取的 input 元素 |
| [:checked](
) | $(":checked") | 所有被选中的 input 元素 |
元素 元素
:checked
$(":checked") 所有被选中的 input 元素
（四）jQuery事件
1.jQuery 是为事件处理特别设计的。jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
通常会把 jQuery 代码放到 部分的事件处理方法中
2. 当按钮的点击事件被触发时会调用一个函数：
$("button").click(function() {..some code... } )
3.名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。或者默认的有jQuery就等价$（不需要.noConflict()）。
结论
最后
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/151028.html