jQuery使用手册

### jQuery使用手册知识点详解 #### 一、核心部分 **1. $(expr)** - **说明**: 通过CSS选择器、XPath或者HTML代码来匹配目标元素。这是jQuery的基础操作，几乎所有的jQuery操作都是从这里开始的。 - **参数**: `expr` —— 字符串类型，代表一个查询表达式或HTML字符串。 - **示例**: - **HTML结构**: ```html <p>one</p> <div> <p>two</p> </div> <p>three</p> <a href="#" id="test" onClick="jq()">jQuery</a> ``` - **jQuery代码**: ```javascript function jq() { alert($("div>p").html()); } ``` - **运行结果**: 当点击id为`test`的元素时，弹出对话框显示“two”，即`div`标签下的`p`元素的内容。 - **另一个示例**: ```javascript function jq() { $("<div><p>Hello</p></div>").appendTo("body"); } ``` - **运行结果**: 当点击id为`test`的元素时，在`body`中添加一个包含文本“Hello”的`div`元素。 **2. $(elem)** - **说明**: 限制jQuery仅作用于一个特定的DOM元素。此函数还支持XML文档和window对象。 - **参数**: `elem` —— 通过jQuery对象封装的DOM元素。 - **示例**: - **HTML结构**: ```html <p>one</p> <div> <p>two</p> </div> <p>three</p> <a href="#" id="test" onClick="jq()">jQuery</a> ``` - **jQuery代码**: ```javascript function jq() { alert($(document).find("div>p").html()); } ``` - **运行结果**: 当点击id为`test`的元素时，弹出对话框显示“two”，即`div`标签下的`p`元素的内容。 - **另一个示例**: ```javascript function jq() { $(document.body).css("background", "black"); } ``` - **运行结果**: 当点击id为`test`的元素时，页面背景色变为黑色。 **3. $(elems)** - **说明**: 限制jQuery作用于一组特定的DOM元素。 - **参数**: `elems` —— 一组通过jQuery对象封装的DOM元素。 - **示例**: - **HTML结构**: ```html <form id="form1"> <input type="text" name="textfield"> <input type="submit" name="Submit" value="提交"> </form> <a href="#" id="test" onClick="jq()">jQuery</a> ``` - **jQuery代码**: ```javascript function jq() { $(form1.elements).hide(); } ``` - **运行结果**: 当点击id为`test`的元素时，隐藏`form1`表单中的所有元素。 **4. $(fn)** - **说明**: `$(document).ready()`的一种快捷写法，用于文档完全加载后执行函数。可以定义多个这样的函数，当文档加载完成后将依次执行这些函数。 - **示例**: ```javascript $(function() { // 当文档加载完成时执行的代码 console.log('Document ready!'); }); ``` #### 二、DOM操作 **1. appendTo()** - **说明**: 将当前元素集合追加到指定元素内。 - **示例**: ```javascript $("<div><p>Hello</p></div>").appendTo("body"); ``` **2. hide()** - **说明**: 隐藏匹配到的所有元素。 - **示例**: ```javascript $(form1.elements).hide(); ``` #### 三、CSS操作 **1. css()** - **说明**: 获取或设置元素的样式属性。 - **示例**: ```javascript $(document.body).css("background", "black"); ``` #### 四、JavaScript处理 **1. click()** - **说明**: 为元素绑定点击事件处理函数。 - **示例**: ```javascript $("a").click(function() { alert("Hello world!"); }); ``` #### 五、动态效果 **1. fadeIn() / fadeOut() / slideDown() / slideUp()** - **说明**: 为元素添加渐显、渐隐、滑动展开、滑动隐藏等动态效果。 - **示例**: ```javascript $("#element").fadeIn(1000); // 渐显效果，耗时1秒 $("#element").fadeOut(1000); // 渐隐效果，耗时1秒 $("#element").slideDown(1000); // 滑动展开，耗时1秒 $("#element").slideUp(1000); // 滑动隐藏，耗时1秒 ``` #### 六、Event事件 **1. on()** - **说明**: 绑定事件处理器到被选元素。 - **示例**: ```javascript $("button").on("click", function() { console.log("Button clicked!"); }); ``` #### 七、Ajax支持 **1. $.ajax()** - **说明**: 发送异步HTTP请求。 - **示例**: ```javascript $.ajax({ url: 'https://api.example.com/data', type: 'GET', success: function(data) { console.log(data); }, error: function(xhr, status, error) { console.error(error); } }); ``` #### 八、插件程序 - **说明**: jQuery支持扩展功能，通过插件的形式可以为jQuery添加额外的功能。 - **示例**: 假设有一个名为`myPlugin`的插件，它可以添加额外的CSS类到元素上。 ```javascript // 定义插件 $.fn.myPlugin = function(options) { return this.each(function() { // 实现插件逻辑 $(this).addClass('my-class'); }); }; // 使用插件 $("#element").myPlugin(); ``` 通过以上知识点的学习，我们可以了解到jQuery不仅提供了一种简便的方式来操作DOM，还提供了丰富的功能来简化JavaScript编程，使得Web开发变得更加高效和有趣。