1、属性
$("p").addClass(css中定义的样式类型); 给某个元素添加样式
常用于表格鼠标移动效果
$(document).ready(function(){
//"tr:ge(0)"tr标签索引大于零的就执行
$("tr:gt(0)").hover(function(){
$(this).addClass("moveover");
},function(){
$(this).removeClass("moveover");
});
});
$("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值,参数是map
$("img").attr("src","test.jpg"); 给某个元素添加属性/值
$("img").attr("title", function() { return this.src }); 给某个元素添加属性/值
$("元素名称").html(); 获得该元素内的内容(元素,文本等)
$("元素名称").html("<b>new stuff</b>"); 给某元素设置内容
$("元素名称").removeAttr("属性名称") 给某元素删除指定的属性以及该属性的值
$("元素名称").removeClass("class") 给某元素删除指定的样式
$("元素名称").text(); 获得该元素的文本
$("元素名称").text(value); 设置该元素的文本值为value
$("元素名称").toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式
$("input元素名称").val(); 获取input元素的值
$("input元素名称").val(value); 设置input元素的值为value
2、操作元素
$("元素名称").after(content); 在匹配元素后面添加内容
$("元素名称").append(content); 将content作为元素的内容插入到该元素的后面
$("元素名称").appendTo(content); 在content后接元素
$("元素名称").before(content); 与after方法相反
$("元素名称").clone(布尔表达式) 当布尔表达式为真时,克隆元素(无参时,当作true处理)
$("元素名称").empty() 将该元素的内容设置为空
$("元素名称").insertAfter(content); 将该元素插入到content之后
$("元素名称").insertBefore(content); 将该元素插入到content之前
$("元素").prepend(content);
将content作为该元素的一部分,放到该元素的最前面
$("元素").prependTo(content); 将该元素作为content的一部分,放content的最前面
$("元素").remove(); 删除所有的指定元素
$("元素").remove("exp"); 删除所有含有exp的元素
$("元素").wrap("html"); 用html来包围该元素
$("元素").wrap(element); 用element来包围该元素
3、属性过滤选择器
$("div[id]") 匹配所有具有指定属性的元素
$("input[name='newsletter']") 匹配所有具有指定属性值的元素
$("input[name!='newsletter']") 匹配所有不具有指定属性值的元素
$("input[name^='news']") 匹配所有指定属性值以value开头的元素
$("input[name$='letter']") 匹配所有指定属性值以value结尾的元素
$("input[name*='man']") 匹配所有指定属性值含有value字符的元素
$("input[id][name$='man']") 匹配同时符合多个选择器的所有元素
4、子元素过滤选择器
$("ul li:nth-child(2)"),
$("ul li:nth-child(odd)"), 匹配父元素的第n个子元素
$("ul li:nth-child(3n + 1)")
$("div span:first-child") 匹配父元素的第1个子元素
$("div span:last-child") 匹配父元素的最后1个子元素
$("div button:only-child") 匹配父元素的唯一1个子元素
5、表单元素选择器
$(":input") 匹配所有的表单输入元素,包括所有类型的input, textarea, select 和 button
$(":text") 匹配所有类型为text的input元素
$(":password") 匹配所有类型为password的input元素
$(":radio") 匹配所有类型为radio的input元素
$(":checkbox") 匹配所有类型为checkbox的input元素
$(":submit") 匹配所有类型为submit的input元素
$(":image") 匹配所有类型为image的input元素
$(":reset") 匹配所有类型为reset的input元素
$(":button") 匹配所有类型为button的input元素
$(":file") 匹配所有类型为file的input$(":hidden") 匹配所有类型为hidden的input元素或表单的隐藏域
$(document).ready(function(){
//标签选择器
$("button").click(function(){
alert("标签选择器_按钮");
});
//id选择器
$("#b1").click(function(){
alert("id选择器_按钮");
});
//类选择器
$(".class2").click(function(){
alert("类选择器_按钮");
});
//包含选择器
$("#b1,.class2").click(function(){
alert("包含选择器_按钮:格式=$(#b1,class2)");
});
6、表单元素过滤选择器
$(":enabled") 匹配所有可操作的表单元素
$(":disabled") 匹配所有不可操作的表单元素
$(":checked") 匹配所有已点选的元素
function batchDelManager(isFormal){//拿到选中的复选框的value
var checkCom = $("input[name=checkCom]:checked");
var optCom = "";
for(var i = 0; i < checkCom.size(); i++){
optCom += checkCom[i].value + ":";
}
$("input[name$='checkCom']").each(function () { this.checked = true; });//name名字为checkCom的复选框全部选中
$(":checkbox").val(["cc3","cc2","cc4"]);//设置复选框中value值为多少的选中,
$("select option:selected") 匹配所有已选择的元素
$("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
$("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
$("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
7、其他
$(document).ready(function(){
//toggle开关的方法
$("input").toggle(function(){
$("div").show(5000);//全部显示的时间长度为5秒,不带参数则没有延时效果
},function(){
$("div").hide(5000);//全部隐藏的时间长度为5秒
});
});
$("#元素id").html("指定位置要添加的HTMLTest");
$("<option value='"1"'>"+IT部+"</option>").appendTo($("#元素id"));//指定在那个下拉列表添加一个下拉选项
$(":checkbox:checked").each(function(){
alert($(this).val());//遍历所有复选框
}