Web前端最全jQuery-w3school（2024(1)，2024年最新啃完999页Web前端面试高频宝典

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素

使用 Microsoft 的 CDN：

（二）jQuery语法

1.通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。

2. jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(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()）。

结论

由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

·把所有 jQuery 代码置于事件处理函数中

·把所有事件处理函数置于文档就绪事件处理器中

·把 jQuery 代码置于单独的 .js 文件中

·如果存在名称冲突，则重命名 jQuery 库

总结

阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】