1.1 获取元素的个数
$(“img”).size()
Demo1
1.2 提取元素
$(“img[title]”)[1] 获取所有设置了title属性的img标记中的第二个元素。
等效于：$(“img[title]”).eq(1)
以上用eq即可s
|
1 2 |
var iNum=$(“li”).index($(“li[title=isaac]”)[0]) 获取<li title=”isaac”>标记在整个列表中所处的位置，并返回给iNum. |
1.3 添加、删除、过滤元素
|
1 2 3 4 |
$(“img[alt], img[title]”).addClass(“myClass”) 所有设置了alt属性的img标记和所有设置了title属性的img标记添加样式。 $(“li[title]”).not(“[title*=isaac]”) 所有设置了title属性的li标记，但不包括title值中任意匹配字符串isaac的那些。 |
注意：not()方法所接受的参数不能包含特定的元素，只能是通用的表达式。
|
1 2 |
错误：$(“li[title]”).not(“img[title*=isaac]”) 正确： $(“li[title]”).not(“[title*=isaac]”) |
筛选：filter方法
|
1 2 3 |
$(“li”).filter(“[title*=isaac]” ) 等同于 $(“li[title*=isaac]”) Demo5 |
注意：filter中的参数，不能直接是等于匹配，只能是前匹配^=,后匹配&=,任意匹配*=。
filter（函数） 函数要求返回布尔值，对于返回值为true的元素保留，否则去除。
Demo6
|
1 |
$(“p”).find(“span”) 在所有p标记元素中搜索span标记，获取一个新的元素集合。 |
|
1 2 |
Demo7 var bHasImge=$(“div”).is(“img”) 页面中的div块中是否包含img标记。 |
1.4 jQuery链
|
1 2 3 |
jQuery语句链接在一起 如下： $(“div”).addClass(“myClass1”).filter(function(index){return index==1||$(this).attr(“id”)==”fourth”}).addClass(“myClass2”); |
整体div加myClass1,然后进行筛选，筛选出的元素再加myClass2
后面的操作都已以前面的操作结果为对象的，如果操作对象为上一步对象，则用end方法
如下：
|
1 2 3 |
$(“p”).find(“span”).addClass(“myClass1”).end().addClass(“myClass2”) Demo8 $(“div”).find(“p”).addClass(“myBackground”). andSelf().addClass(“myBorder”) div中找p，给p加myBackground,然后把div，p合并，添加myBorder，对div和p都有效，如果不加只对p有效 |
Demo9
2、 标记的属性
2.1 each（）遍历元素
|
1 2 3 4 5 |
$(function(){ $(“img”).each(function(index){ var i = index + 1; $(this).attr("title", "我是第" + i+ "个div");}); }); |
Demo10
2.2 获取属性的值
* 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。
|
1 2 3 4 5 |
var sTitle=$(“em:eq(1)”).attr(“title”); 获取第二个em的title属性 $(“a[href^=http://]”).attr(“target”,”_blank”); 设置属性值 $(“img”).attr({src:”06.jpg”,title:”公寓”,alt:”国家”}); 设置多个属性值 $(“button”).removeAttr(“disabled”); 删除属性值 Demo11 |
3.1 设置元素样式
添加、删除CSS类别
|
1 2 |
$(“div”).addClass(“myClass1 myClass2”); $(“div”).removeClass(“myClass1”); |
3.2 类别间动态切换
|
1 2 3 4 5 6 7 |
$(function(){ $(“p”).click(function({ $(this).toggleClass(“highlight”);//点击时不断切换 });); }); Demo1 说明：toggleClass只能设置一种Class不能设置多个。 |
3.3 直接获取、设置样式
|
1 2 3 4 5 6 |
$(“p”).mouseover(function(){ $(this).css(“color”,”red”); }); $(“p”).mouseout(function(){ $(this).css(“color”,”black”); }); |
3.4 某个元素中是否含有某个css类别，返回为布尔型
$(“li:last”).hasClass(“myClass”);
