jQuery常用方法

jQuery 常见操作实现方式 $("标签名") //取html元素 document.getElementsByTagName("") $("#ID") //取单个控件document.getElementById("") $("div #ID") //取某个控件中 控件 $("#ID #ID") // 通过控件ID取其中的控件 $("标签.class样式名") //通过class来取控件 $("#ID").val(); //取value值 $("#ID").val(""); //赋值 $("#ID").hide(); //隐藏 $("#ID").show(); //显示 $("#ID").text(); //相当于取innerText $("#ID").html(); //相当于innerHTML="" $("#ID").css("属性","值") //添加CSS样式 $("form#表单id").find("#所找控件id").end() //遍历表单 $("#ID").load("*.html") //载入一个文件 ### jQuery常用方法详解 #### 一、选取HTML元素 在jQuery中，选择和操作DOM元素是其核心功能之一。下面是一些常用的选取方法： - **$("标签名")**：此方法用于选取页面中的所有指定标签名的元素。例如，`$("div")`将选取文档中的所有`<div>`元素。 - **$("#ID")**：选取具有特定ID的单个元素。如`$("#main")`选取ID为`main`的元素。 - **$("div #ID")**：选取位于某个特定`<div>`内部的指定ID的元素。 - **$("#ID #ID")**：选取嵌套在另一个具有特定ID的元素内的元素。 - **$("标签.class样式名")**：选取具有特定类名的所有指定标签元素，例如`$("span.myClass")`选取所有带有`myClass`类的`<span>`元素。 #### 二、操作属性和内容 - **$("#ID").val()**：获取具有指定ID的元素的值。常用于表单元素，例如输入框或下拉列表。 - **$("#ID").val("新值")**：设置具有指定ID的元素的值。 - **$("#ID").hide()**：隐藏具有指定ID的元素。 - **$("#ID").show()**：显示被隐藏的元素。 - **$("#ID").text()**：获取具有指定ID的元素的文本内容。 - **$("#ID").html()**：获取或设置具有指定ID的元素的HTML内容。 - **$("#ID").css("属性","值")**：为具有指定ID的元素添加CSS样式。例如，`$("#box").css("color", "red")`将改变元素的颜色为红色。 #### 三、遍历和查找元素 - **$("form#表单id").find("#所找控件id").end()**：遍历表单中的元素，并对每个元素执行操作。例如： ```javascript $("form#frmMain").find("#ne").css("border", "1px solid #0f0").end() .find("#chenes").css("border-top", "3px dotted #00f").end(); ``` #### 四、加载外部文件 - **$("#ID").load("*.html")**：将指定URL的HTML内容加载到具有指定ID的元素中。例如，`$("#content").load("page.html")`会将`page.html`的内容加载到`#content`元素中。 #### 五、AJAX请求 - **$.ajax({})**：用于发起异步HTTP（Ajax）请求，可以与服务器交换数据并更新部分网页而无需重新加载整个页面。示例代码如下： ```javascript $.ajax({ url: "Result.aspx", type: "get", dataType: "html", data: "chen=h", timeout: 3000, success: function(msg) { $("#stats").text(msg); }, error: function(msg) { $("#stats").text(msg); } }); ``` #### 六、事件处理 - **$(document).ready(function(){});**：确保文档已准备好后再执行函数中的代码。 - **$("#description").mouseover(function(){});**：当鼠标悬停在具有指定ID的元素上时触发事件。 - **$.get()**：发送GET请求到服务器，并根据返回的数据执行回调函数。 ```javascript $.get("Result.aspx", { chen: "", age: "25" }, function(data) { alert("DataLoaded: " + data); }); ``` #### 七、表单操作 - **$(#testSelect option:selected').text()**：获取选定选项的文本。 - **$("#testSelect").val()**：获取选中的值。 #### 八、动画效果 - **slide(), hide(), fadeIn(), fadeOut(), slideUp(), slideDown()**：这些方法用于控制元素的显示与隐藏，并带有一定的动画效果。 ```javascript $("#btnShow").bind("click", function() { // 在这里添加相应的动画效果代码 }); ``` 以上是对给定内容中的jQuery常用方法进行的详细解释，希望能帮助读者更好地理解和使用这些方法。