jquery选择器

115 阅读1分钟

a.jpg

$("p[class]").css ( "border" , "solid 1px #f00");// p含有class属性加边框
$("p[class=pd]" ).css( "color" , "#0ef" );//p调用了pd类的,字为蓝色,兼容方式不一样,含有pd
$("p[class^=p]").css( "background","#f0f" );//调用内容是以class以p开始$( "p[class*=pd" ).css( "font-weight","bold" );/l含有pd属性,pd可以不是完整的类名
$("p[class][id]" ).css( "font-size","30px");//既有class属性也有id属性

b.jpg

$( "h2+div" ).css ( "border" ,"solid 1px #f00");//h2后的第一个div兄弟
$("h2~div" ).css( "font-size" , " 30px" ) ; //h2后面所有的div

c.jpg

d.jpg

:input:代表所有的输入元素
        $( "form :input").css( "border" , "solid 1px #f00" ) ;
	$("form :input").css( "width" , "100px" );//所有的可以输入的元素(表单所有项都输入功能)
	$( "input:text" ).css( "border" , "solid 1px #f00"); //type=text
	$("input:password" ).css(" border" , "solid 1px #Ofo" ); //type="password"
	$( "input: radio" ).css({"width" : "20px" , "height" : " 20px"}); //type=radio
	$( "input:checkbox" ).css( {"width" : "20px" , "height" : "20px"}); //type=checkbox
	$( " form:submit").css( "border" , "solid 2px #00f"); //type=submit(包含button,和input标记)
	$( "form :button" ).css( "border" , "solid 2px #ff0"); //type=button也包含button标记
	$( "form:reset").css ( "border" , "solid 2px #f0f");//type=reset
        $( "input:disabled" ).css("font-weight" , "bold");//不可用的粗体显示
	$( "input:checked" ).css({ "width": "20px" , "height " : "20p×"]);//checkbox和redio选中