【知识储备】 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]')

转载自: http://blog.csdn.net/lihan6415151528/article/details/3889536(衷心感谢lihan6415151528 )