版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章原始出版、作者信息和本声明。否则将追究法律责任。http://blog.csdn.net/mayongzhan - 马永占,myz,mayongzhan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="马永占(MyZ)" />
<meta name="Copyright" content="马永占(MyZ)" />
<meta name="description" content="" />
<meta name="keywords"content="" />
<link rel="icon" href="" type="image/x-icon" />
<link rel="shortcut icon" href="" type="image/x-icon" />
<link href="" rel="stylesheet" type="text/css" />
<title></title>
<style type="text/css">
<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
</style>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
</head>
<body>
<script type="text/javascript">
$("document").ready(function(){
////////////////////////////////////////////////////////////////////////////////////////
//Basics:
//#id Returns: Array<Element>
//Matches a single element with the given id attribute.
//$("#myID\\.entry\\[1\\]").css("border","3px solid red");
// element Returns: Array<Element(s)>
//Matches all elements with the given name.
//$("div").css("border","3px solid red");
// .class Returns: Array<Element(s)>
//Matches all elements with the given class.
//$(".myClass").css("border","3px solid red");
// * Returns: Array<Element(s)>
//Matches all elements.
//$("*", document.body).css("border","3px solid red");
// selector1, selector2, selectorN Returns: Array<Element(s)>
//Matches the combined results of all the specified selectors.
// if(!this.value) {
// alert("Please enter some text!");
// }
// var list = $("div,p,span").map(function () {
// return this.tagName;
// }).get().join(", ");
// $("b").append(document.createTextNode(list));
////////////////////////////////////////////////////////////////////////////////////////
//Hierarchy:
//ancestor descendant Returns: Array<Element(s)>
//Matches all descendant elements specified by "descendant" of elements specified by "ancestor".
//$("form input").css("border", "2px dotted blue");
//parent > child Returns: Array<Element(s)>
//Matches all child elements specified by "child" of elements specified by "parent".
//$("#main > *").css("border", "3px double red");
//prev + next Returns: Array<Element(s)>
//Matches all next elements specified by "next" that are next to elements specified by "prev".
//$("label + input").css("color", "blue").val("Labeled!")
//prev ~ siblings Returns: Array<Element(s)>
//Matches all sibling elements after the "prev" element that match the filtering "siblings" selector.
//$("#prev ~ div").css("border", "3px groove blue");
////////////////////////////////////////////////////////////////////////////////////////
//Basic Filters:
//:first Returns: Array<Element>
//Matches the first selected element.
//$("tr:first").css("font-style", "italic");
//:last Returns: Array<Element>
//Matches the last selected element.
//$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});
//:not(selector) Returns: Array<Element(s)>
//Filters out all elements matching the given selector.
// $("input:not(:checked) + span").css("background-color", "yellow");
// $("input").attr("disabled", "disabled");
//:even Returns: Array<Element(s)>
//Matches even elements, zero-indexed.
//$("tr:even").css("background-color", "#bbbbff");
//:odd Returns: Array<Element(s)>
//Matches odd elements, zero-indexed.
//$("tr:odd").css("background-color", "#bbbbff");
//:eq(index) Returns: Array<Element>
//Matches a single element by its index.
//$("td:eq(2)").css("color", "red");
//:gt(index) Returns: Array<Element(s)>
//Matches all elements with an index above the given one.
//$("td:gt(4)").css("text-decoration", "line-through");
//:lt(index) Returns: Array<Element(s)>
//Matches all elements with an index below the given one.
//$("td:lt(4)").css("color", "red");
//:header Returns: Array<Element(s)>
//Matches all elements that are headers, like h1, h2, h3 and so on.
//$(":header").css({ background:'#CCC', color:'blue' });
//:animated Returns: Array<Element(s)>
//Matches all elements that are currently being animated.
// $("#run").click(function(){
// $("div:animated").toggleClass("colored");
// });
// function animateIt() {
// $("#mover").slideToggle("slow", animateIt);
// }
// animateIt();
////////////////////////////////////////////////////////////////////////////////////////
//Content Filters:
//:contains(text) Returns: Array<Element(s)>
//Matches elements which contain the given text.
//$("div:contains('John')").css("text-decoration", "underline");
//:empty Returns: Array<Element(s)>
//Matches all elements that have no children (including text nodes).
//$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');
//:has(selector) Returns: Array<Element(s)>
//Matches elements which contain at least one element that matches the specified selector.
//$("div:has(p)").addClass("test");
//:parent Returns: Array<Element(s)>
//Matches all elements that are parents - they have child elements, including text.
//$("td:parent").fadeTo(1500, 0.3);
////////////////////////////////////////////////////////////////////////////////////////
//Visibility Filters:
//:hidden Returns: Array<Element(s)>
//Matches all elements that are hidden, or input elements of type "hidden".
// in some browsers :hidden includes head, title, script, etc... so limit to body
// $("span:first").text("Found " + $(":hidden", document.body).length +
// " hidden elements total.");
// $("div:hidden").show(3000);
// $("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");
//:visible Returns: Array<Element(s)>
//Matches all elements that are visible.
// $("div:visible").click(function () {
// $(this).css("background", "yellow");
// });
// $("button").click(function () {
// $("div:hidden").show("fast");
// });
////////////////////////////////////////////////////////////////////////////////////////
//Attribute Filters:
//[attribute] Returns: Array<Element(s)>
//Matches elements that have the specified attribute. Note the "@" before the attribute name was deprecated as of version 1.2.
// $("div[id]").one("click", function(){
// var idString = $(this).text() + " = " + $(this).attr("id");
// $(this).text(idString);
// });
//[attribute=value] Returns: Array<Element(s)>
//Matches elements that have the specified attribute with a certain value.
//$("input[name='newsletter']").next().text(" is newsletter");
//[attribute!=value] Returns: Array<Element(s)>
//Matches elements that either don't have the specified attribute or do have the specified attribute but not with a certain value.
//$("input[name!='newsletter']").next().text(" is not newsletter");
//[attribute^=value] Returns: Array<Element(s)>
//Matches elements that have the specified attribute and it starts with a certain value.
//$("input[name^='news']").val("news here!");
//[attribute$=value] Returns: Array<Element(s)>
//Matches elements that have the specified attribute and it ends with a certain value.
//$("input[name$='letter']").val("a letter");
//[attribute*=value] Returns: Array<Element(s)>
//Matches elements that have the specified attribute and it contains a certain value.
//$("input[name*='man']").val("has man in it!");
//[attributeFilter1][attributeFilter2][attributeFilterN] Returns: Array<Element(s)>
//Matches elements that match all of the specified attribute filters.
//$("input[id][name$='man']").val("only this one");
////////////////////////////////////////////////////////////////////////////////////////
//Child Filters:
//:nth-child(index/even/odd/equation) Returns: Array<Element(s)>
//Matches all elements that are the nth-child of their parent or that are the parent's even or odd children.
//$("ul li:nth-child(2)").append("<span> - 2nd!</span>");
//:first-child Returns: Array<Element(s)>
//Matches all elements that are the first child of their parent.
//$("div span:first-child")
// .css("text-decoration", "underline")
// .hover(function () {
// $(this).addClass("sogreen");
// }, function () {
// $(this).removeClass("sogreen");
// });
//:last-child Returns: Array<Element(s)>
//Matches all elements that are the last child of their parent.
//$("div span:last-child")
// .css({color:"red", fontSize:"80%"})
// .hover(function () {
// $(this).addClass("solast");
// }, function () {
// $(this).removeClass("solast");
// });
//:only-child Returns: Array<Element(s)>
//Matches all elements that are the only child of their parent.
//$("div button:only-child").text("Alone").css("border", "2px blue solid");
////////////////////////////////////////////////////////////////////////////////////////
//Forms:
//:input Returns: Array<Element(s)>
//Matches all input, textarea, select and button elements.
//var allInputs = $(":input");
// var formChildren = $("form > *");
// $("#messages").text("Found " + allInputs.length + " inputs and the form has " +
// formChildren.length + " children.");
//
// // so it won't submit
// $("form").submit(function () { return false; });
//:text Returns: Array<Element(s)>
//Matches all input elements of type text.
// var input = $(":text").css({background:"yellow", border:"3px red solid"});
// $("div").text("For this type jQuery found " + input.length + ".")
// .css("color", "red");
// $("form").submit(function () { return false; }); // so it won't submit
//:password Returns: Array<Element(s)>
//Matches all input elements of type password.
// var input = $(":password").css({background:"yellow", border:"3px red solid"});
// $("div").text("For this type jQuery found " + input.length + ".")
// .css("color", "red");
// $("form").submit(function () { return false; }); // so it won't submit
//:radio Returns: Array<Element(s)>
//Matches all input elements of type radio.
// var input = $(":radio").css({background:"yellow", border:"3px red solid"});
// $("div").text("For this type jQuery found " + input.length + ".")
// .css("color", "red");
// $("form").submit(function () { return false; }); // so it won't submit
//:checkbox Returns: Array<Element(s)>
//Matches all input elements of type checkbox.
// var input = $(":checkbox").css({background:"yellow", border:"3px red solid"});
// $("div").text("For this type jQuery found " + input.length + ".")
// .css("color", "red");
// $("form").submit(function () { return false; }); // so it won't submit
//:submit Returns: Array<Element(s)>
//Matches all input elements of type submit.
// var input = $(":submit").parent('td').css({background:"yellow", border:"3px red solid"});
//
// $('#result').text('jQuery matched ' + input.length + ' elements.');
//
// // so it won't submit
// $("form").submit(function () { return false; });
//
// // Extra JS to make the HTML easier to edit (None of this is relevant to the ':submit' selector
// $('#exampleTable').find('td').each(function(i, el) {
// var inputEl = $(el).children().get(0);
// $(el).before('<td>' + $(inputEl).attr('type') + '</td>');
// })
//:image Returns: Array<Element(s)>
//Matches all input elements of type image.
// var input = $(":image").css({background:"yellow", border:"3px red solid"});
// $("div").text("For this type jQuery found " + input.length + ".")
// .css("color", "red");
// $("form").submit(function () { return false; }); // so it won't submit
//:reset Returns: Array<Element(s)>
//Matches all input elements of type reset.
// var input = $(":reset").css({background:"yellow", border:"3px red solid"});
// $("div").text("For this type jQuery found " + input.length + ".")
// .css("color", "red");
// $("form").submit(function () { return false; }); // so it won't submit
//:button Returns: Array<Element(s)>
//Matches all button elements and input elements of type button.
// var input = $(":button").css({background:"yellow", border:"3px red solid"});
// $("div").text("For this type jQuery found " + input.length + ".")
// .css("color", "red");
// $("form").submit(function () { return false; }); // so it won't submit
//:file Returns: Array<Element(s)>
//Matches all input elements of type file.
// var input = $(":file").css({background:"yellow", border:"3px red solid"});
// $("div").text("For this type jQuery found " + input.length + ".")
// .css("color", "red");
// $("form").submit(function () { return false; }); // so it won't submit
//:hidden Returns: Array<Element(s)>
//Matches all elements that are hidden, or input elements of type "hidden".
// in some browsers :hidden includes head, title, script, etc... so limit to body
// $("span:first").text("Found " + $(":hidden", document.body).length +
// " hidden elements total.");
// $("div:hidden").show(3000);
// $("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");
////////////////////////////////////////////////////////////////////////////////////////
//Form Filters:
//:enabled Returns: Array<Element(s)>
//Matches all elements that are enabled.
//$("input:enabled").val("this is it");
//:disabled Returns: Array<Element(s)>
//Matches all elements that are disabled.
//$("input:disabled").val("this is it");
//:checked Returns: Array<Element(s)>
//Matches all elements that are checked.
// function countChecked() {
// var n = $("input:checked").length;
// $("div").text(n + (n == 1 ? " is" : " are") + " checked!");
// }
// countChecked();
// $(":checkbox").click(countChecked);
//:selected Returns: Array<Element(s)>
//Matches all elements that are selected.
// $("select").change(function () {
// var str = "";
// $("select option:selected").each(function () {
// str += $(this).text() + " ";
// });
// $("div").text(str);
// })
// .trigger('change');
////////////////////////////////////////////////////////////////////////////////////////
});
</script>
</body>
</html>
分享到：
相关推荐
1. **选择器（Selectors）**：jQuery的选择器基于CSS，允许开发者通过元素ID、类名、属性等快速选取DOM元素。例如，`$("#myID")`选取ID为"myID"的元素，`$(".myClass")`选取所有class为"myClass"的元素。 2. **DOM...
jQuery的核心在于选择器（Selectors）、链式操作（Chaining）和DOM操作（DOM Manipulation）。选择器使得我们能够高效地定位到HTML元素，链式操作则允许我们在一个语句中执行多个方法，而DOM操作则包括了对元素的...
**jQuery API 深度解析** jQuery 是一个广泛使用的 JavaScript 库，它简化了网页的DOM操作、事件处理、动画设计以及Ajax交互。这个“jquery_api.rar”压缩包包含了一份详细的jQuery API参考文档（jquery_api.chm）...
《jQuery API 1.4.4：深入理解与应用》 jQuery，作为一款广泛使用的JavaScript库，极大地简化了网页的DOM操作、事件处理、动画效果和Ajax交互。jQuery API 1.4.4版本是其历史上的一个重要里程碑，它包含了丰富的...
**jQuery 1.4 API 知识点详解** jQuery 是一个高效、易用且功能丰富的JavaScript库，极大地简化了HTML文档遍历、事件处理、动画设计以及Ajax交互。jQuery 1.4 API 提供了一系列的方法和函数，使得开发者能够更方便...
**jQuery API 概述** jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画设计和Ajax交互。由于其简洁易用的语法，jQuery 已经成为了网页开发中的一个基石。这个名为“jquery_api.rar...
1. **选择器（Selectors）**：jQuery的选择器基于CSS，允许开发者快速选取页面中的元素。例如，`$("#id")`选取ID为id的元素，`$(".class")`选取所有class为class的元素。 2. **DOM操作（DOM Manipulation）**：...
首先，jQuery的核心功能之一是选择器（Selectors）。它允许开发者通过CSS选择器来精准定位页面上的元素，例如`$("#myID")`用于选取ID为"myID"的元素，`$(".myClass")`则可以选取所有类名为"myClass"的元素。 其次，...
在Dw5这样的早期Web开发工具中，结合JQueryAPI文档的使用，可以更好地实现动态效果和交互性。 JQuery API（应用程序接口）文档详细介绍了JQuery的各种函数和方法，这些功能包括： 1. **选择器（Selectors）**：...
**jQuery 1.4 API 知识点详解** jQuery 是一个高效、易用且功能丰富的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。jQuery 1.4 API 虽然已经是一个较旧的版本，但其稳定性和广泛支持...
1. **选择器（Selectors）**：jQuery的核心在于其强大的选择器机制，它允许开发者用CSS样式的方式来选取DOM元素，如`$("#id")`选取ID为id的元素，`$(".class")`选取所有class为class的元素。 2. **链式操作...
**jQuery 1.4 API 手册：深入理解与应用** jQuery 是一个高效、简洁的JavaScript库，它极大地简化了JavaScript编程，特别是处理HTML文档、事件处理、动画以及Ajax交互。中文版的jQuery 1.4 API手册是开发者学习和...
1. **选择器（Selectors）**：jQuery的选择器基于CSS，允许开发者高效地选取DOM元素。例如，`$("#id")`选取ID为指定值的元素，`$(".class")`选取所有类名为指定值的元素，`$("tag")`选取所有指定类型的元素。 2. **...
1. **选择器（Selectors）**: jQuery的选择器功能强大，它基于CSS选择器，可以轻松选取DOM元素。例如，`$("#id")`选取ID为"id"的元素，`$(".class")`选取所有类名为"class"的元素。 2. **链式操作（Chaining）**: ...
《jQuery API 帮助文档》是一份详尽的指南，专门为那些想要深入理解和使用jQuery库的开发者设计。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务，使得JavaScript...
**jQuery API 概述** jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和Ajax交互。jQuery API 提供了一系列的函数和方法，使得前端开发更加高效和简洁。本手册将详细介绍 jQuery ...
**jQuery API - JavaScript与jQuery的世界** 在Web开发领域，JavaScript是一种不可或缺的脚本语言，而jQuery库则是JavaScript的一个强大工具，极大地简化了DOM操作、事件处理、动画制作和Ajax交互等任务。本教程将...
《jQuery API详解》 在Web开发领域，jQuery是一款广受欢迎的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。jQuery API（Application Programming Interface）是开发者与...
**jQuery_1.4_API详解** jQuery是一款广泛应用于前端开发的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。在jQuery 1.4版本中，API进行了诸多优化和增强，使得开发者能更高效...