因为项目需要和李哲兄最近在做这个专题,最近在学习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]')