jQuery学习笔记之基础

(每一段jQuery对应一段html代码,以标记为准则,css为共用代码,每段代码需独立运行。html和css代码在文章尾部,如下例)

                 

 

/*jQuery支持的CSS3最基本的选择器
*
^
E
EF
E>F
E+F
E~F
E:has(F)
E.C
E#I
E[A]
E[A=V]
E[A^=V]
E[A$=V]
E[A*=V]
*/

属性选择器(j1)“[]”
例子1

$(document).ready(function () {
$("a[title]").addClass("myClass");
})

例子2 加属性值判断

$(document).ready(function () {
$("a[href=GuangDong.html]").addClass("myClass");
})

例子3 加属性模糊判断  $,^

$(document).ready(function () {
$("a[href$=html]").addClass("myClass");
})

例子4 加属性任意判断*

$(document).ready(function () {
$("a[href*=G]").addClass("myClass");
})

包含选择器

$(document).ready(function () {
$("ul li ul li:has(a)").addClass("myClass");
})

/*所有jQuery支持的CSS3位置选择器
:first
:last
:first-child
:last-child
:only-child
:nth-child(n)
:nth-child(odd||even)
:nth-child(nX+Y)
:odd或even
:eq(n)
:gt(n)
:lt(n)
*/
位置选择器(j2)
eg1:fist-child

$(document).ready(function () {
$("p:first-child").addClass("myClass");
})

eg2:nth-child(odd)根据各自父元素单独排序 nth-child是从1开始计数

$(document).ready(function () {
$("p:nth-child(odd)").addClass("myClass");
})

eg3:根据整个页面p:even

$(document).ready(function () {
$("p:even").addClass("myClass");
})

/*jQuery常用的过滤选择器
:animated
:button
:checkbox 等同于input[type=checkbox]
:contains(foo) 包含了文本“foo”的元素
:disabled
:enableed
:file 上传文件的元素,等同于input[type=file]
:header 标题元素 <h1>~<h6>
:hidden
:image 等同于input[type=image]
:input
:not(filter) 方向选择
:parent
:password
:radio
:reset 包括input[type=reset],button[type=reset]
:selected
:submit 提交按钮 包括input[type=submit] button[type=submit]
:text 文本输入框 等同于input[type=text]
:visable
*/
过滤选择器(j3)

$(document).ready(function () {
$('#btn').click(function () {
$("input[name=phone]:checked").addClass("myClass-j3");
});
});

管理选择结果

获取元素的个数(j4) size()

$(document).ready(function () {
var sum;
sum = $("div").size();
$("#btn").attr("value", "查看div个数").click(function () {
$("#showmessage").html(sum);
});
});

提取元素(j4)get(index) index指定位置 index(element) element元素所处位置 reverse() 数组反序

$(document).ready(function () {
var aDiv = $(".phone").get(); //转换为div对象数组
$("div[class=phone]").mouseover(function () {
var index = $("div[class=phone]").index(this);
$("#showmessage").html("你所经过div的序号为:" + index);
});
$("#btn").attr("value", "提取元素").click(function () {
show(aDiv.reverse());
});
});
function show(divs) {
for (var i = 0; i < divs.length; i++)
$("#showmessage").append("<p>"+divs[i].innerHTML+"</p>");
}

添加,删除,过滤元素(j5)$(selector).add(selector)组合在一起,等同于$(selector,selector)
                          not(selector)去除元素中的某些元素,参数不能包含特定元素,只能是通用的表达式
eg1

$(document).ready(function () {
$("div[class]").not(".Lumia900,.HTC").addClass("myClass1");
});

eg2:filter()与not()方法使用通配符

$(document).ready(function () {
$("div[class]").filter("[class*=i]").addClass("myClass1");
});

eg3:filter()另一种方法是参数为函数的

$(document).ready(function () {
$("div").addClass("myClass").filter(function (index) {
return index == 1 || $(this).attr("class") == "HTC";
}).addClass("myClass1");
});

查询过滤元素的集合(j6) find(selector)
eg1

$(document).ready(function () {
$("p").find("span").addClass("myClass"); //等同于$("span",$("p")).add("myClass");
});

eg2 is(selector)

采用jQuery链(j6)
eg1 end()

$(document).ready(function () {
$("p").find("span").addClass("myClass").end().addClass("myClass1");
});

eg2 andSelf()

$(document).ready(function () {
$("p").find("span").addClass("myClass").andSelf().addClass("myClass1");
});

html代码

    <%--j1--%>
<ul>
<li><a href="http://www.baidu.com">中国</a>
<ul>
<li><a href="GuangDong.html">GuangDong.html</a></li>
<li><a href="BeiJing.html" title="广东">BeiJing.html</a></li>
<li><a href="ShangHai.html">ShangHai.html</a></li>
</ul>
</li>

</ul>

<%--j2--%>
<div>
<p>WindowsPhone</p>
<p>IOS</p>
<p>antroid</p>
</div>
<div>
<p>Lumia900</p>
<p>iPhone4</p>
<p>Htc</p>
</div>

<%--j3--%>
<input type="checkbox" name="phone" id="iPhone" /><label for="iPhone">iPhone</label>
<input type="checkbox" name="phone" id="Lumia900" /><label for="Lumia900">Lumia900</label>
<input type="checkbox" name="phone" id="HTC" /><label for="HTC">HTC</label>
<input type="button" id="btn" value="查看" />

<%--j4--%>
<div class="phone">iPhone</div>
<div class="phone">Lumia900</div>
<div class="phone">HTC</div>
<input id="btn" type="button" />
<p id="showmessage"></p>

<%--j5--%>
<div class="iPhone" title="iPhone">iPhone</div>
<div class="Lumia900">Lumia900</div>
<div class="HTC">HTC</div>

<%--j6--%>
<p><span>iPhone</span>苹果</p>
<p>Windows<span>微软</span></p>
<span>乔布斯 盖茨</span>

css代码

body {
}
div
{ font-size:12px; border:1px solid #003a75; float:left; margin-right:10px; padding:5px 5px 5px 5px;}
p
{ margin:0px; padding:4px 10px 4px 10px;}
.myClass
{ color:#FF0000; font-weight:bold; background:#41e283;}

/*j3*/
.myClass-j3
{ color:#FF0000; font-weight:bold; background:#FF0000;}

/*j5*/
.myClass1
{ color:#6283e4; border:1px solid #6283e4; background:12e473;}



posted @ 2012-02-26 17:37  Ghost Soar  阅读(235)  评论(0编辑  收藏