JQuery 常用方法和属性

给jq 的$符号引用改为 $j 以便不与其他$符号冲突 var $j = jQuery.noConflict();

查找 ID 为"myDiv"的元素。$("#myDiv");

查找一个 DIV 元素。$("div");

查找含有特殊字符的元素 <span id="foo:bar"></span> ---> ${"#foo\\:bar"}

<span id="foo[bar]"></span> ---> ${"#foo\\[bar\\]"}

<span id="foo.bar"></span> ---> ${"foo\\.bar"}

查找所有类是 "myClass" 的元素. $(".myClass");

查找所有 name 属性是 newsletter 的 input 元素 $("input[name='newsletter']").attr("checked", true);

找到匹配任意一个类的元素。 $("div,span,p.myClass")

找到表单中所有的 input 元素 $("form input")

匹配表单中所有的子级input元素。$("form > input")

查找表格的1、3、5...行（即索引值0、2、4...） $("tr:even")

查找表格的2、4、6行（即索引值1、3、5...） $("tr:odd")

给页面内所有标题加上背景色 $(":header").css("background", "#EEE");

只有对不在执行动画效果的元素执行一个动画特效 $("#run").click(function(){

$("div:not(:animated)").animate({ left: "+=20" }, 1000);});

查找所有包含 "John" 的 div 元素 $("div:contains('John')")

查找所有含有 id 属性的 div 元素 $("div[id]")

找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的 $("input[id][name$='man']")

查找所有密码框 $(":password")

匹配type为hidden的元素 $("input:hidden")

查找所有选中的复选框元素 $("input:checked")

查找所有未选中的 input 元素 $("input:not(:checked)")

查找所有选中的选项元素 $("select option:selected")

返回文档中第一个图像的src属性值。<img src="test.jpg"/> ---> $("img").attr("src");

为所有图像设置src和alt属性。 $("img").attr({ src: "test.jpg", alt: "Test Image" });

为所有图像设置src属性。 $("img").attr("src","test.jpg");

将文档中图像的src属性删除 $("img").removeAttr("src");

为匹配的元素加上 selected highlight 类 <p class="selected highlight">Hello</p> ---> $("p").addClass("selected highlight");

从匹配的元素中删除 'selected' 类 $("p").removeClass("selected");

删除匹配元素的所有类 $("p").removeClass();

取得第一个匹配元素的html内容 $("div").html();

设置每一个匹配元素的html内容 $("div").html("<p>Hello Again</p>");

取得所有匹配元素的内容 $("p").text();

获取文本框中的值 $("input").val();

设置每一个匹配元素的值$("input").val("hello world!");

由于input元素的父元素是一个表单元素，所以返回true。 $("input[type='checkbox']").parent().is("form")

查找DIV中的每个子元素。 $("div").children()

在每个div中查找 .selected 的类。 $("div").children(".selected")

取得第一个段落的color样式属性的值。 $("p").css("color");

如果属性名包含 "-"的话，必须使用引号: $("p").css({ "margin-left": "10px", "background-color": "blue" });

将所有段落字体设为红色 $("p").css("color","red");

获取文档的高 $(document).height();

把所有段落的高设为 20: $("p").height(20);

获取当前窗口的宽 $(window).width();

将所有段落的宽设为 20: $("p").width(20);

在DOM加载完成时运行的代码，可以这样写：$(document).ready(function(){// 在这里写你的代码...});

使用 $(document).ready() 的简写 jQuery(function($) {// 你可以在这里继续使用$作为别名...});

简写 $(function(){// 文档就绪});

当每个段落被点击的时候，弹出其文本。 $("p").bind("click", function(){ alert( $(this).text() );});

将页面内所有段落点击后隐藏。$("p").click( function () { $(this).hide(); });

鼠标悬停的表格加上特定的类 $("td").hover(

function () {$(this).addClass("hover");}, //over (Function) : 鼠标移到元素上要触发的函数

function () {$(this).removeClass("hover");} //out (Function) : 鼠标移出元素要触发的函数

);

在每一个匹配元素的blur事件中绑定的处理函数。$("p").blur( function () { alert("Hello World!"); } );

给所有的文本框增加输入验证 $("input[type='text']").change( function() {// 这里可以写些验证代码});

当页面加载后将 id 为 'login' 的元素设置焦点: $(document).ready(function(){$("#login").focus();});

使人无法使用文本框: $("input[type=text]").focus(function(){ this.blur();});

当页面滚动条变化时，执行的函数: $(window).scroll( function() { } );

提交本页的第一个表单: $("form:first").submit();

如果你要阻止表单提交: $("form").submit( function () {return false;} );

迭代两个图像，并设置它们的 src 属性。 $("img").each(function(i){this.src = "test" + i + ".jpg";});

注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。

如果你想得到 jQuery对象，可以使用 $(this) 函数。$("img").each(function(){$(this).toggleClass("example");});

你可以使用 return false; 来提前跳出 each() 循环。

计算文档中所有图片数量 $("img").size(); 等同于 $("img").length;

<!-- -->