最近写一个小的WEB项目，使用CI框架来速成，这才发现JQUERY已经忘得差多了，因此买书来速成一下。
CSS用来分离内容与样式，
Jquery用来分离内容与行为
基本的选择器：
元素，元素ID，元素的class
对应的3个选择器分别为： DIV
#DIVID
.DIVCSS 为表示区分，使用不用的前导符来区分。
同时同种类型的选择器之间可以组成组进行选择元素，使用逗号分隔，如DIV1，DIV2，DIV3
层次选择器：
看书理解这个时候，有点迷糊，自动动手写了一个程序就明白了。
为了便于理解，你要对你所要操作的整个文档有个文档树的概念，即DOM模型。
如：
-
<div id="two">
-
<h3> demo of siblings ~ </h3>
-
<ul>
-
-
<li id='l1'>li 1 </li>
-
<li id='l2'>li 2 </li>
-
<li id='l3'>li 3 </li>
-
<li id='l4'>li 3 </li>
-
</ul>
-
</div>
该文档对应的树如下：
DIV
-------------|-------------
| |
H3 UL
------------|-------------------------
| | | |
LI LI LI li
|
H3
解释这个的目的主要是为了说明两个层次选择的使用。
-
$("ancestor descendant");
-
$("parent > child");
注意后代前者的范围更大，后者范围小，
针对上图选择器的的结果如下：
$("ancestor descendant");
$("#two h3 ")的后代包含2个H3
$("parent > child");
$("#two >h3 ")的后代仅包含一个h3
$("#two #l2 + li ").css("color","blue"); id=l3 的li 等价于$("#two#l2).next('li)
$("#two #l2 ~ li ").css("color","red"); id=l3与id =l4的li 等价于$("#two #l2).nextall('li)
JQUERY本身还提供了一个更加强大的功能
$("#three #l2").sibilings('l2)" id=l2与id =l3的li id=l4
第三种为过滤选择器，
相对来说更简单，它的前导符为：针对特定的规则进行筛选如 first,last,元素索引的奇偶，大于小于，以及取反操作，或者针对某些特定的事件如focus。
还有就是内容过滤器以及可见性过滤器，实际中用的比较少，这里不做介绍。
本实验用到的测试用例如下：
-
<html>
-
<head> <title>>demo of jquery</title>
-
<script src="//localhost/public/jslib/jquery-2.1.1.min.js"></script>
-
<script type="text/javascript" >
-
$().ready(function(){
-
$("#one h3 ").css("color","red");
-
$("#two >h3 ").css("color","green");
-
$("#three #l2 + li ").css("color","blue");
-
$("#four #l2 ~ li ").css("color","red");
-
$("#five #l2").siblings("li").css("color","red");
-
$(".demclass :focus").css("background","#bbffaa").css("border","1px solid #f00");
-
});
-
</script>
-
-
</head>
-
<body>
-
<div id="one">
-
<h3> demo of descendant blank </h3>
-
<ul>
-
<li >li 1 </li>
-
<li>li 2 </li>
-
<li>li 3 <h3> this is h3 </h3> </li>
-
</ul>
-
</div>
-
<div id="two">
-
<h3> demo of child > </h3>
-
<ul>
-
-
<li>li 1 </li>
-
<li>li 2 </li>
-
<li>li 3 <h3> this is h3 </h3> </li>
-
</ul>
-
</div>
-
<div id="three">
-
<h3> demo of next + </h3>
-
<ul>
-
-
<li id='l1'>li 1 </li>
-
<li id='l2'>li 2 </li>
-
<li id='l3'>li 3 </li>
-
<li id='l4'>li 3 </li>
-
</ul>
-
</div>
-
<div id="four">
-
<h3> demo of siblings ~ </h3>
-
<ul>
-
-
<li id='l1'>li 1 </li>
-
<li id='l2'>li 2 </li>
-
<li id='l3'>li 3 </li>
-
<li id='l4'>li 3 </li>
-
</ul>
-
</div>
-
<div id="five">
-
<h3> demo of siblings sibilings function </h3>
-
<ul>
-
-
<li id='l1'>li 1 </li>
-
<li id='l2'>li 2 </li>
-
<li id='l3'>li 3 </li>
-
<li id='l4'>li 3 </li>
-
</ul>
-
</div>
-
<div id='six' >
-
<label> demo of focus </label>
-
-
<input name="demo" class="demclass" id='demoid'>
-
</div>
-
</body>
阅读(3736) | 评论(0) | 转发(0) |
