优秀的程序员Web前端学习路线分享学习技巧，在Web前端学习是必不可少的内容，很多合作伙伴都在学习这个阶段遇到的问题，今天我们就来聊聊，一起来看看吧！
1. 对页面元素的引用
$引用的元素通过包括id、class、元素名、元素层次结构和DOM或XPath条件等方法，返回的对象是对象（集合对象），不能直接调用DOM定义的方法。
2. 将对象转换为 DOM 对象
只有对象可以使用定义的方法。注意 DOM 对象和对象是有区别的，调用方法时要注意操作是 DOM 对象还是对象。普通的 DOM 对象一般可以通过 $ 转换为对象。
例如：$（.（“ msg”）） 是方法可以使用的对象。
因为对象本身是一个集合。因此，如果要将对象转换为 DOM 对象，则必须取出其中一个项目，通常可以通过索引检索。例如： $（“#msg”）[0]， $（“div”）.eq（1）[0]，
$（“div”）.get[1]，
$（“td”）[5] 这些是 DOM 对象，可以在 DOM 中使用方法，但不能再使用。
以下拼写正确：
$（“#msg”）.html;
$（“#msg”）[0].;
$（“#msg”）.eq（0）[0].;
$（“#msg”）.get（0）.;
3. 如何获得收藏的某件物品
对于获取的元素集合，可以使用 EQ 或 get（n） 方法或索引号获取其中一个项目（由索引指定），请注意，eq 返回对象，而 get（n） 和索引返回 DOM 元素对象。对象只能使用方法，而 DOM 对象只能使用 DOM 方法，例如获取第三个
元素。
有两种方法：
$（“div”）.eq（2）.html;// 调用对象的方法
$（“div”）.get（2）.;/ / the DOM 方法属性
4. 同一个函数实现 set 和 get
许多方法都是如此，主要包括以下内容：
$（“#msg”） .html;// 返回 id 为 msg 的元素节点的 HTML 内容。
$（“#msg”）.html（“新”）;
· // 将 “new” 作为 html 字符串写入 id msg 的元素节点的内容中，页面显示粗体 new
$（“#msg”）.text;// 返回 id 为 msg 的元素节点的文本内容。
$（“#msg”）.text（“”）;
· // 将 “new” 作为普通文本字符串写入 id 为msg 的元素节点的内容中，页面显示新的
· $（“#msg”）.;/ / 返回 id 为 msg 的元素的高度
$（“#msg”）。（“300”）;// 将 id 为msg 的元素的高度设置为 300
$（“#msg”）.width;// 返回 id 为 msg 的元素的宽度
$（“#msg”）.width（“300”）;// 将 id 为 msg 的元素的宽度设置为 300
$（“input”）.val（“）;// 返回表单输入框的值值
$（”
input“）.val（”test“）;// 设置表单输入框的值以进行测试
$（“#msg”）.click;// 触发 id 为 msg 的元素的单击事件
$（“#msg”）.click（fn）;// 为id msg的元素单击事件添加函数
同样，模糊、焦点和事件可以有两种调用方法
5.设置处理功能
· $.({· min：（a， b）{ a < b？a：b; }，
· max：（a， b）{ a > b？a：b; }
· }）;//用于扩展最小值，最大值两种方法
使用扩展方法（通过“$.”调用）：
· alert（“a=10，b=20，max=”+$.max（10，20）+“，min=”+$.min（10，20））;
6.支持方法的连续编写
所谓连续写入，就是可以对一个对象连续调用各种不同的方法。
例如：
$（“p”）.click（{alert（$（this）.html）}）
.（{alert（' event'）}）.
each（（i）{this.style.color=['#f00'，'#0f0'，'#00f'][i ]}）;
7. 操纵元素的样式
它主要包括以下几种方式：
$（“#msg”）.css（“”）;// 返回元素的背景色
$（“#msg”）.css（“”，“#ccc”）// 将元素背景设置为灰色
$（“#msg”）。(300);$（“#msg”）.width（“200”）;设置宽度和高度
$（“#msg”）.css（{color： “red”， “blue” }）;// 名称-值对中的样式
$（“#msg”）。（“”）;// 将类名添加到元素中
$（“#msg”）。（“”）;//删除具有元素名称的类
$（“#msg”）。（“”）;//如果存在，请删除（添加）具有以下名称的类
8.完善的事件处理功能为我们
提供了多种事件处理方法，我们不需要直接在 html 元素上写事件，而是可以直接为通过传递获得的对象添加事件。
如：
$（“#msg”）.click（{alert（“good”）}）// 为元素添加了单击事件
$（“p”）.click（（i）{this.style.color=['#f00'，'#0f0'，'#00f'][i ]}）
设置不同
处理三个不同的 P 元素单击事件
中的几个自定义事件：
（1） hover（fn1，fn2）：一种模仿悬停事件（鼠标悬停在对象上和对象外）的方法。当鼠标移到匹配的元素上时，将触发指定的第一个函数。当鼠标移出此元素时，将触发指定的第二个函数。将
鼠标悬停在以下位置时将类设置为结束
离开时徘徊在外面。
$（“tr”）.hover（{
$（这个）。（“结束”）;
}，
{
$（这个）。（“出”）;
}）;
（2） ready（fn）：绑定一个函数，当 DOM 准备好被查询和操作时执行。
$（）.ready（{alert（“Load ”）}）
页面完成加载提示“加载”，这相当于一个事件。等效于 $（fn）。
（3）（，oddFn）：切换每次单击时要调用的函数。如果单击匹配的元素，则触发指定的第一个函数，当再次单击同一元素时，将触发指定的第二个函数。每次后续单击都会重复对这两个函数的轮次调用。
轮流添加和删除每次单击时命名的类。
$（“p”）。({
$（这个）。("");
}，{
$（这个）。("");
}）;
（4）（）：在每个匹配元素上触发某种类型的事件。
例如：
$（“p”）。（“click”）;// 为所有 p 元素触发 click 事件
（5） bind（，fn），（）：事件的绑定和反绑定
从（添加）每个匹配元素中删除绑定事件。
例如：$（“
p”）.bind（“click”，{alert（$（this）.text）; }）;为每个 p 元素添加一个点击事件
$（“p”）.;/ /删除所有 p 元素上的所有事件
$（“p”）。（“click”） // 删除所有 p 元素上的点击事件
9.几种实用的特效功能
中和方法提供状态切换功能。
例如，该方法包括隐藏和显示方法。方法
包括和方法。
10. 一些有用的方法
$..浏览器类型：检测浏览器类型。有效参数：、歌剧、毫秒、。如检测IE：$：iIe，IE浏览器是否返回true。
$.each（obj，fn）：一个通用迭代函数。可用于近似迭代对象和数组（而不是循环）。
如
$.each（[0，1，2]， （i， n）{ alert（ “Item #” + i + “： ” + n ）; }）;
相当于：
=[0，1，2];
for（vari=0; i
alert（“Item#”+i+“： ”+[ i ]）;
也可以处理JSON数据，例如
：$.each（{ name： “John”， lang： “JS” }， （i， n
）{ alert（“Name： ” + i + “， Value： ” + n ）; }）;
结果是：姓名：
姓名，值：约翰
名称：郎，值：JS
$.（，prop1，propN）：使用一个或多个其他对象扩展对象，返回扩展对象。这就是实现的继承方式。
如：
$.(,);合并总和，
并将合并结果返回给 in，相当于在 中继承和保存继承结果。
变量 =$。({}, , );合并
总和并将合并结果返回给，而不覆盖内容。
可以有多个参数（组合多个项目并返回）。
$.map（array，fn）：数组映射。将一个数组中的项（处理转换后）保存到另一个新数组，并返回生成的新数组。
如：
=$.map（ [0，1，2]， （i）{ i + 4; }）;
内容为：[4， 5， 6]。
=$.map（ [0，1，2]， （i）{ i > 0 ？ i + 1 ： null; }）;
内容为： [2，3]。
$.merge（arr1，arr2）：合并两个数组并从中删除重复的项目。
例如： $.merge（ [0，1，2]， [2，3，4
] ） // 返回 [0，1，2，3，4]。
$.trim（str）：删除字符串两端的空格字符。
例如：$.trim（“你好，你好吗？”）;返回“你好，你好吗？"
11. 解决与自定义方法或其他类库的冲突
很多时候我们定义自己的$（id）方法来获取一个元素，或者其他一些js类库也定义了$方法，如果把这些东西放在一起就会引起变量方法定义冲突，为这个特殊的方法解决了这个问题。
使用中的。;然后，该方法将变量 $ 的控制权让给实现它的第一个库或以前自定义的 $ 方法。以后在申请时，只需将所有 $ 替换为，例如将原来的引用对象方法 $（“#msg”） 更改为 （“#msg”）。
