Jquery的选择器

ready:

$(document).ready(function(){

  // 在这里写你的代码...一开始就执行的方法

});

可以简写为:

$(function($) {

  // 你可以在这里继续使用$作为别名...

});

 

$("#id"):相当于document.getElementById(),

$("#p1").show();展现

$("#p1").hide();隐藏

$("#p1").addClass("CSS样式")给id为P1添加css样式

css({"属性1":"属性值1","属性2":"属性值2"...}) ;同时设置多个CSS属性

 

将jQuery对象转化为DOM对象

var $txtName =$("#txtName");

相反

var txtName =$txtName.get(0);   

 

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

 

设定文本框的值:$("input").val("hello world!");

 

返回p元素的文本内容:$('p').text();

 

设置所有 p 元素的文本内容:$("p").text("Hello world!");

 

由于input元素的父元素是一个表单元素，所以返回true ;

$("input[type='checkbox']").parent().is("form")

 

返回文档中所有图像的src属性值:$("img").attr("src");

 

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

 

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

 

触发页面内所有段落的点击事件:$("p").click();

 

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

 

找到每个段落的后面紧邻的同辈元素。:$("p").next();

 

找到每个段落的后面紧邻的同辈元素中类名为selected的元素:$("p").next(".selected");

 

找到每个div的所有同辈元素。$("div").siblings()

 

找到每个div的所有同辈元素中带有类名为selected的元素。$("div").siblings(".selected")

 

获取匹配的第二个元素: $("p").eq(1)  0为第一个

 

从所有的段落开始，进一步搜索下面的span元素:。与$("p span")相同。 $("p").find("span")

 

jQruey的基本选择器:

标签选择器:根据给定的标签名匹配元素 $("h2"),选取所有标签为h2的元素

类选择器:根据给定class匹配元素   $(".class名字"),选取所有class名的元素

id选择器:根据给定id匹配元素 $("#id名称"),选取所有id名的元素

并集选择器:将每一个选择器匹配的元素合并后一起返回 $("div,p,.title")选取所有div,p和拥有class为title的元素

全局选择器:匹配所有元素 $("*")选取所有元素

 

层次选择器:$("#menu span")选取#menu下的<span>元素

子选择器:$("#menu>span" )选取#menu下的<span>元素

相邻元素选择器:$(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl>

同辈元素选择器:$(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl>

选取给定属性是以某些特定值开始的元素:$(" [href^='en']" )选取href属性值以en开头的元素

选取给定属性是以某些特定值结尾的元素:$(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素

选取给定属性是以包含某些值的元素:$(" [href* ='txt']" )选取href属性值中含有txt的元素

 

基本过滤选择器:

:eq(index)  选取索引等于index的元素（index从0开始） $("li:eq(1)" )选取索引等于1的<li>元素

:gt(index) 选取索引大于index的元素（index从0开始） $(" li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1）

:lt(index) 选取索引小于index的元素（index从0开始） $(“li:lt(1)” )选取索引小于1的<li>元素（注：小于1，不包括1）

:header 选取所有标题元素，如h1~h6 $(":header" )选取网页中所有标题元素

:focus 选取当前获取焦点的元素 $(":focus" )选取当前获取焦点的元素

:blur 当元素失去焦点时触发 blur 事件。$("p").blur();

:animated 选择所有动画 $(":animated" )选取当前所有动画元素

 

可见性过滤选择器:

:visible  选取所有可见的元素  $(":visible" )选取所有可见的元素

:hidden 选取所有隐藏的元素  $(":hidden")选取所有隐藏的元素

 

选择器中的空格

var $t_a = $(".test  :hidden"); //带空格的jQuery选择器  :

选取class为"test" 的元素内部的隐藏元素

 

var $t_b=$(".test:hidden");不带空格的jQuery选择器  :

选取class为"test" 的隐藏元素

 

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

 

获取匹配的第一个元素  $('li:first');