<!DOCTYPE html>
<html>
<head>
<style>
div { color:red; text-align:center; cursor:pointer;
font-weight:bolder; width:300px; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div>Click here</div>
<div>to iterate through</div>
<div>these divs.</div>
<script>
$(document.body).click(function () {
$("div").each(function (i) {
if (this.style.color != "blue") {
this.style.color = "blue";
} else {
this.style.color = "";
}
});
});</script>
</body>
</html>
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
<script>
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
});
});
</script>
分享到：
相关推荐
4. **检测浏览器**：在早期版本的JQuery中，可以使用`$.browser`来检测浏览器类型和版本，但自1.4版本起，推荐使用`$.support`来检测浏览器特性。 ```javascript $(document).ready(function() { // 注意：$....
$("#exampleId").css("color", "red"); ``` 2. **层次选择器** - **空格**：表示后代选择器，如`$("div p")`选择所有`<p>`元素，这些`<p>`元素是`<div>`元素的后代。 ```javascript $("div p").hide(); ``` ...
### jQuery 常用 DOM 操作详解 #### 属性（Attribute） 在 jQuery 中，属性操作主要包括获取、设置或修改元素的属性值。 1. **添加类（`addClass()`）** - **语法**：`$(...1. **创建元素并追加到 body（`$...
$(this).toggleClass("example"); }); }); ``` ```javascript $("button").click(function(){ $("div").each(function(index, domEle){ // domEle == this $(domEle).css("backgroundColor", "yellow"); ...
- 示例 1：`$("span").click(function(){ $("li").each(function(){ $(this).toggleClass("example"); }); });` - 示例 2：`$("button").click(function(){ $("div").each(function(index, domEle){ $(domEle).css...
- 示例1：`$("span").click(function() { $("li").each(function() { $(this).toggleClass("example"); }); });` - 示例2：`$("button").click(function() { $("div").each(function(index, domEle) { // domEle =...
$(this).toggleClass("example"); }); }); ``` 8. **事件绑定**: - 当文档加载完毕后执行函数: ```javascript $(document).ready(function() { // 在这里放置需要执行的代码 }); ``` - 为元素绑定点击...
`$("img").attr("src", function(){ return this.src; })`，动态设置图片的`src`属性值。 3. **`html()`** - **用途**：获取或设置被选元素的内容（包括HTML）。 - **语法**：`$("selector").html()` 或 `$(...
$(this).toggleClass("example"); }); }); ``` - **事件绑定** - **`.ready(fn)`**：当DOM完全加载并可操作时，执行回调函数。 ```javascript jQuery(document).ready(function(){ // 页面加载完成后执行的...
$(this).toggleClass("example"); }); -------------------------------------------------------------------------------- 你可以使用 'return' 来提前跳出 each() 循环。 HTML 代码: <button>Change colors...
### JQUERY 常用方法大全 ...4. **`$.extend()`** - **用途**：扩展jQuery对象的方法。 - **示例**： ```javascript $.extend({ min: function(a, b) { return a ; }, max: function(a, b) { return a > b ? a ...
$(this).toggleClass("example"); }); ``` - 解释：遍历所有`<li>`元素，并为每个元素切换“example”类。 #### 四、事件处理 - **`jQueryEvent: ready(fn)`** - 功能：当DOM加载完成后执行一个函数。 - ...
1. **元素动态切换类**: `$(“span”).click(function(){ $("li").each(function(){ $(this).toggleClass("example"); }); });`，当点击`span`元素时，遍历所有`li`元素，并根据当前状态切换`example`类。 2. **按钮...
fallbackOnBody: false, // Appends the cloned DOM Element into the Document's Body fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag. scroll:...