2015-10-07 jQuery2
jQuery （2）
四. 过滤选择器
1. $("input[type='button']").val(“中国”) //所有设置type=button的input，其value设为中国。
简写==>$(":button").val("中国")
列表：
| $(":button") | 所有按钮 |
| $(":checkbox") | 所有复选框,<==>$(“input[type=’checkbox’]”) |
| $("div:contains(foo)" | 所有div中包含了文本“foo”的元素 |
| $(“:disabled”) | 所有被禁用的元素<==>$("input[disabled=disabled]").attr("value", "aaa");） |
| $(“:enable”) | 所有没有被禁用的元素 |
| $(“:file”) | 所有上传文件 |
| $(“:input”) | 所有表单元素 |
| $(“:selected”) | 所有下拉菜单中被选中的项 |
| $(“:visible”) | 所有可见的元素 |
| $(“:submit”) | 所有提交按钮 |
五. 反向过滤
$("input:not(:text)").val("中国") // 表示所有input中不是文本框的，给它一个value值=”中国“。
<==>$("input").not(":text").val("中国")
注意： p :not(p:hidden) 错误
p:not(:hidden) 正确 //not后是针对前面的结果集，即not中不能有其它标签
六.管理选择结果
1.获取元素的个数
$("img").size() //获取所有页面中img的个数
2. 提取元素
$("img[title]")[1] 获取所有设置了title属性的img标记中的第二个元素。
<==>$("img[title]").eq(1)
3.获取索引
alert($("div").index($("div[title='你好']")).eq(1)); //设置了“title=你好”的第二个div，在整个div的索引
获取当前对象的索引-----$(this).index();
获取当前对象的内容-----$(this).text();
4. 添加、删除、过滤元素
$("img[alt], img[title]").addClass("myClass") //所有设置了alt属性的img标记和所有设置了title属性的img标记 添加样式。
$("img").eq(3).removeClass("myClass") //将第四个img移除myclass样式
$("li[title]").not("[title*=isaac]") 所有设置了title属性的li标记，但不包括title值中包含isaac的li。
注意：not()中只能是通用的表达式
错误：$("li[title]").not("img[title*=isaac]")
正确： $("li[title]").not("[title*=isaac]")
5.筛选元素
$("li").filter("[title*=isaac]" ) <=> $("li[title*=isaac]") //筛选出title属性中包含isaac的li标签
注意：filter中的参数，不能直接是等于匹配，只能是前匹配^=,后匹配&=,任意匹配*=。
filter（函数） 函数要求返回布尔值，对于返回值为true的元素保留，否则去除。
6.find查找搜索
$("p").find("span") //在所有的p标签中搜索span标签
7.is返回bool
var bHasImge=$("div").is("img") //页面中所有的div中是否包含img标签，是返回true，否返回false。
七. jQuery链
1.jQuery语句链接在一起
$("div").addClass("myClass1").filter(function(index){return index==1||$(this).attr("id")=="fourth"}).addClass("myClass2"); //attr：设置属性值
//给所有的div加myClass1样式,然筛选出index=1或当前对象的id=fourth的div添加myClass2样式。
2.end表示操作对象为当前对象的上一级
$("p").find("span").addClass("myClass1").end().addClass("myClass2") //给p标签里的span加上myClass1样式，给p标签加上myClass2样式
$("p").find("span").addClass("myClass1").addClass("myClass2") //给p标签里的span加上myClass1样式和myClass2样式
3.andSelf()表示操作对象为当前对象和其上一级
$("div").find("p").addClass("myClass1").andSelf().addClass("myClass2") //给div里面的p加上myClass1样式，给div和div里面的p加上myClass2样式
八. 标记的属性
1.each()遍历元素
$(function(){
$("div").each(function(index){
var i=index+1;
$(this).attr("title","我是第"+i+"个div")
});
});
2. 获取属性的值
var sTitle=$("em:eq(1)").attr("title"); //获取第二个em的title属性
$("a[href^=http://]").attr("target","_blank"); // 对于属性href以http://开头的a标签，设置属性值target:_blank
$("img").attr({src:"aaa.jpg",title:"阮某",alt:"无法显示"}); //设置多个属性值
$("div").eq(3).removeAttr(“disabled”); //对第四个div删除属性值disabled
注：<em>标签表示强调，对于浏览器，表示将这段文字以斜体来显示
另：
$("div").eq(3).css("color","red");
$("div").eq(3).addClass("d4");
#d4{
color:#fff;
} //结果显示第四个div的字体还是红色，因为设置的css相等于在html中设置了内敛样式，其优先级>id>class.
同时也可以设置多个css(加上中括号)： $("div").eq(0).css({"color":"black","font-size":"60px","height":"100px"});
