理解jQuery基础：选择器与事件处理

"这篇资料主要介绍了Jquery的基础语法，包括选择器的使用和事件器的介绍，适合初学者学习理解JavaScript库Jquery的基本操作。" JQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。在JQuery中，基本的语法结构是`$(selector).action();`，这里的`$`是JQuery对象的别名，`selector`用于选择HTML元素，而`action()`则是执行的操作。 1. **选择器**：JQuery提供了多种选择器来方便地选取HTML元素。 - `$(this)`：指向当前上下文中的元素，通常在事件处理函数中使用，代表触发该事件的元素。 - `$("p")`：选择所有的`<p>`元素。 - `$(".test")`：选择所有class属性等于"test"的元素。 - `$("#test")`：根据ID选择唯一的元素，如ID为"test"的元素。 - `$(document).ready(function(){...})`：当文档加载完成后执行的函数，确保所有元素都可被操作。 2. **事件器**：JQuery中的事件处理也非常直观。 - `$("button").click(function(){...})`：为所有`<button>`元素添加点击事件处理函数。 在事件处理函数中，`$(this)`会指向触发事件的元素，例如在这个例子中，点击按钮时，`$("p").hide()`将隐藏所有`<p>`元素。 3. **更复杂的选择器**： - `$("input")`：选择所有`<input>`元素。 - `$(".intro")`：选择所有class为"intro"的元素。 - `$("ul>li")`：选择所有直接在`<ul>`下的`<li>`元素，即直接子元素。 - `$("ul li:first")`：选择每个`<ul>`的第一个`<li>`元素。 - `$("[href$='.jpg']")`：选择href属性以".jpg"结尾的所有元素。 - `"div#intro.head"`：选择id为"intro"且class包含"head"的`<div>`元素。 - `$("li").not("ul")`：选择不是在`<ul>`内的所有`<li>`元素。 - `$("span[@id]")`：选择所有具有id属性的`<span>`元素。 - `$("[@id=span1]")`：选择id为"span1"的任何元素。 - `$("li[a:contains('Register')]")`：选择`<a>`元素中包含"Register"文本的`<li>`元素。 - `$("input[@name=bar]")`：选择name属性为"bar"的`<input>`元素。 - `$("input[@type=radio][@checked]")`：选择type为"radio"且被选中的`<input>`元素。 这些选择器的使用使得在JQuery中定位和操作DOM元素变得简单而高效。通过结合选择器和事件处理器，开发者可以轻松实现丰富的交互效果和动态页面更新。学习并熟练掌握JQuery的基础语法，能够极大地提高前端开发的效率和代码质量。