jquery 小总结

因为项目需要和李哲兄最近在做这个专题,最近在学习jquery,总结一下基础东西

1.DOM方式

$('#lihan')
//返回id为lihan的TAG,类型:jQuery对象
$('#lihan p')
$('#lihan>p')
//返回id为lihan的TAG下所有的p
比如:$("#lihan").addClass("red")
//为id为lihan的tag加上css为red名字的属性
$('#lihan1 #lihan2 #lihan3') 和 $('#lihan1,#lihan2,#lihan3') 的区别

$('#lihan1 #lihan2 #lihan3')
//返回id为#lihan1下的#lihan2下的#lihan3的TAG

$('#lihan1,#lihan2,#lihan3')
//返回id为lihan1,lihan2,lihan3的TAG的群组

DOM对象与jquery对象转换也是很好的,如:
$("#lihan").html();
$("#lihan")[0].innerHTML;
$("#lihan").eq(0)[0].innerHTML;
$("#lihan").get(0).innerHTML;
上面的几种写法都是一样的

这是为表单提供的一些选择器:

:input 选择表单元素(input, select, textarea, button)
:text 选择所有文本域(type="text")
:password 选择所有密码域(type="password").
:radio 选择所有单选按钮(type="radio").
:checkbox 选择所有复选框(type="checkbox").
:submit 选择所有提交按钮(type="submit").
:image 选择所有图像域 (type="image").
:reset 选择所有清除域(type="reset").
:button 选择所有按钮(type="button").
同样也可以使用:hidden,详细说明上面已经介绍过。

$('#myForm :input')

如果你需要指定表单:

$('input:radio', myForm)

这将选择myForm表单中所有单选按钮。选择radio通常是用[@type=radio]


取得name值为lihan的输入字段的值:

$("input[@name=lihan]").val();

所有处于选中状态的单选r按钮:

$("input[@type=radio][@checked]")

2.CSS方式

$('.style')
//返回样式为style的TAG

$('div.style')
//返回样式为style的div

$('.style1,.style2,.style3')
//返回样式为style1,style2,style3的群组

一般为DOM对象添加css样式时候用addClass
比如:$("#lihan").addClass("red")

操作元素的css
主要包括以下几种方式:
$("#lihan").css("background"); //返回元素的背景颜色
$("#lihan").css("background","#ccc") //设定元素背景为灰色
$("#lihan").height(300); $("#msg").width("200"); //设定宽高
$("#lihan").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#lihan").addClass("select"); //为元素增加名称为select的class
$("#lihan").removeClass("select"); //删除元素名称为select的class
$("#lihan").toggleClass("select"); //如果存在(不存在)就删除(添加)名称为select的class

3.属性方式

$('[attribute]')
//返回所有拥有attribute属性的所有tag

$('[attribute=value]')//返回属性attribute值为value的所有tag
$('[attribute!=value]')//返回属性attribute值不为value的所有tag
$('[attribute^=value]')//返回属性attribute值以value开头的所有tag
$('[attribute$=value]')//返回属性attribute值以value结尾的所有tag
$('[attribute*=value]')//返回属性attribute值包含value的所有tag

还可有群组选择
$('[attribute1=value1],[attribute2=value2],[attribute3=value3]')

你可能感兴趣的:(jquery,css)