JQUERY核心部分

### JQUERY核心部分详解 #### 一、$(expr) **说明**：`$(expr)`是jQuery的核心函数之一，它能够通过CSS选择器、XPath表达式或者HTML字符串来匹配页面中的目标元素。几乎所有jQuery的操作都是基于这个函数进行的。 **参数**： - `expr`: 一个查询表达式（如CSS选择器）或一段HTML字符串。 **示例**： 1. **通过CSS选择器匹配元素**： - 未执行jQuery前： ```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`的元素时，会弹出对话框显示`div`标签下的`p`元素内容`"two"`。 2. **插入HTML内容**： - 未执行jQuery前： ```html <p>one</p> <div> <p>two</p> </div> <p>three</p> <a href="#" id="test" onClick="jq()">jQuery</a> ``` - jQuery代码及功能： ```javascript function jq() { $("<div><p>Hello</p></div>").appendTo("body"); } ``` - 运行结果：点击id为`test`的元素时，会在`body`中添加`<div><p>Hello</p></div>`。 #### 二、$(elem) **说明**：该函数用于限制jQuery的作用范围到一个特定的DOM元素，也可以接受XML文档和window对象作为参数。 **参数**： - `elem`: 通过jQuery对象封装的DOM元素。 **示例**： 1. **查找特定元素**： - 未执行jQuery前： ```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`的元素时，弹出对话框显示`div`标签下的`p`元素内容`"two"`。 2. **改变背景色**： - 未执行jQuery前： ```html <p>one</p> <div> <p>two</p> </div> <p>three</p> <a href="#" id="test" onClick="jq()">jQuery</a> ``` - jQuery代码及功能： ```javascript function jq() { $(document.body).css("background", "black"); } ``` - 运行结果：点击id为`test`的元素时，整个页面背景变为黑色。 #### 三、$(elems) **说明**：该函数用于限制jQuery的作用范围到一组特定的DOM元素。 **参数**： - `elems`: 一组通过jQuery对象封装的DOM元素。 **示例**： 1. **隐藏表单元素**： - 未执行jQuery前： ```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 :input").hide(); } ``` - 运行结果：点击id为`test`的元素时，隐藏`form1`表单中的所有元素。 #### 四、$(fn) **说明**：这是一个简写形式的`$(document).ready()`函数，当文档完全加载后执行传入的函数。如果页面中有多个`$(fn)`，则所有这些函数都会在文档加载完成后依次执行。 **参数**： - `fn(Function)`: 当文档加载完成时需要执行的函数。 **示例**： - 未执行jQuery前： ```html <p>one</p> <div> <p>two</p> </div> <p>three</p> <a href="#" id="test" onClick="jq()">jQuery</a> ``` - jQuery代码及功能： ```javascript $(function() { $(document.body).css("background", "black"); }); ``` - 运行结果：当文档加载完成时，背景色变为黑色，相当于`onLoad`事件。 #### 五、$(obj) **说明**：该函数用于复制一个jQuery对象。 **参数**： - `obj(jQuery)`: 需要复制的jQuery对象。 **示例**： 1. **复制并查找元素**： - 未执行jQuery前： ```html <p>one</p> <div> <p>two</p> </div> <p>three</p> <a href="#" id="test" onClick="jq()">jQuery</a> ``` - jQuery代码及功能： ```javascript function jq() { var f = $("div"); alert($(f).find("p").html()); } ``` - 运行结果：点击id为`test`的元素时，弹出对话框显示`div`标签下的`p`元素内容`"two"`。 #### 六、each(fn) **说明**：该函数用于遍历所有匹配的DOM元素，并对每个元素执行指定的函数。 **参数**： - `fn(Function)`: 需要执行的函数。 **示例**： 1. **更改图片源**： - 未执行jQuery前： ```html <img src="1.jpg" /> <img src="1.jpg" /> <a href="#" id="test" onClick="jq()">jQuery</a> ``` - jQuery代码及功能： ```javascript function jq() { $("img").each(function() { this.src = "2.jpg"; }); } ``` - 运行结果：点击id为`test`的元素时，所有`img`标签的`src`属性变为`"2.jpg"`。 以上介绍了jQuery的一些核心函数及其用法。通过这些函数，我们可以方便地操作DOM元素，实现动态网页的效果。