第一天:东子破解 Jquery.("选择器") 或者是$("选择器")
我们在美化斑马表格的时候我们有javascript 我们要写很多代码
可是我们用jquery的时候我们只是用:
$("table tr:nth-child{even}").addClass("striped");
第一个例子:
<input type="button" id="testButton">Click me</input>
在body里面写了
<script type="text/jsvascript">
window.onload=function(){//作用是确定在操作按钮之前必须先确定按钮的元素的存在
document.getElementById("testButton").onClick=makeItRed;
}
function makeItRed(){
document.getElementById('xyz').style.color='red';
}
</script>
-----------------------------------------
现在我们开始讲Jquery的原理:就是为了分离。。。。。。呵呵
Jquery的包装器:
我们经常用到的基本选择器有一下几种:
.class选择器: 返回值:Array<Element>
一个用以搜索的类。一个元素可以有多个类,只要有一个符合就能被匹配到。
eg:
查找所有类是 "myClass" 的元素.
代码:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>jQuery 代码:
$(".myClass");结果:
[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]
#id选择器 : 返回值:Array<Element>
用于搜索的,通过元素的 id 属性中给定的值
eg:
查找 ID 为"myDiv"的元素。
代码:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>jQuery 代码:
$("#myDiv");结果:
[ <div id="myDiv">id="myDiv"</div> ]
查找含有特殊字符的元素
HTML 代码:
<span id="foo:bar"></span>
<span id="foo[bar]"></span>
<span id="foo.bar"></span>jQuery 代码:
#foo\\:bar
#foo\\[bar\\]
#foo\\.bar
element 返回值:Array<Element>
一个用于搜索的元素。指向 DOM 节点的标签名。
查找一个 DIV 元素。
EG:代码:
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>jQuery 代码:
$("div");结果:
[ <div>DIV1</div>, <div>DIV2</div> ]
* 返回值:Array<Element(s)>
找到每一个元素
eg:
代码:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>jQuery 代码:
$("*")结果:
[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]
selector1,selector2,selectorN 返回值:Array<Element(s)>
将每一个选择器匹配到的元素合并后一起返回。
你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。
代码:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>jQuery 代码:
$("div,span,p.myClass")结果:
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
-----------------------------------------------------------------------------------------
层级选择器:
ancestor descendant 返回值:Array<Element(s)>
在给定的祖先元素下匹配所有的后代元素
找到表单中所有的 input 元素
代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form input")结果:是获得的时 form 范围中的所有的input 元素的 也就是所有的后代
[ <input name="name" />, <input name="newsletter" /> ]
parent > child 返回值:Array<Element(s)>
匹配表单中所有的子级input元素。
代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />jQuery 代码:
$("form > input")结果:
[ <input name="name" /> ] 只是获得的时 form表单的儿子
prev + next 返回值:Array<Element(s)>
匹配所有跟在 label 后面的 input 元素
代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />jQuery 代码:
$("label + input")结果: 指定了 是那个元素 之后的所有的元素并且在 该父类元素的范围内 有效的控件 呵呵
[ <input name="name" />, <input name="newsletter" /> ]
prev ~ siblings 返回值:Array<Element(s)>
找到所有与表单同辈的 input 元素
代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$("form ~ input")结果:就是找出 form 表单的 兄弟 一个辈分的
[ <input name="none" /> ]
----------------------------------------------------
获取元素的 选择器 基本的选择器:
返回值:jQuery first()
获取匹配的第一个元素
代码:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>jQuery 代码:
$('li').first()结果:
[ <li>list item 1</li> ]
last() 返回值:jQuery
获取匹配的最后个元素
代码:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>jQuery 代码:
$('li').last()结果:
[ <li>list item 5</li> ]
返回值:Array<Element(s)> :not
查找所有未选中的 input 元素
HTML 代码:
<input name="apple" />
<input name="flower" checked="checked" />jQuery 代码:
$("input:not(:checked)")结果: 这个我们在树的时候我们可以用到 这个很好用
[ <input name="apple" /> ]
Array<Element(s)> :even
匹配所有索引值为偶数的元素,从 0 开始计数
查找表格的1、3、5...行(即索引值0、2、4...)
代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>jQuery 代码:
$("tr:even")结果: 这是我们 要返回的时 奇数行
[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]
返回值:Array<Element(s)> :odd
匹配所有索引值为奇数的元素,从 0 开始计数
查找表格的2、4、6行(即索引值1、3、5...)
代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>jQuery 代码:
$("tr:odd")结果: 这是我们 要返回的时 偶数行
[ <tr><td>Value 1</td></tr> ]
:eq 返回值:Array<Element>
查找第二行 0代表的时第一行
HTML 代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>jQuery 代码:
$("tr:eq(1)")结果: 返回的时第一行 以此类推
[ <tr><td>Value 1</td></tr> ]
返回值:Array<Element(s)> :gt
匹配所有大于给定索引值的元素
查找第二第三行,即索引值是1和2,也就是比0大
HTML 代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>jQuery 代码:
$("tr:gt(0)")结果: 这是当我 们要取数据时 我们可以给其来个 从 第一个 元素开始取值
[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]
返回值:Array<Element(s)> :lt
匹配所有小于给定索引值的元素
查找第一第二行,即索引值是0和1,也就是比2小
代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>jQuery 代码:
$("tr:lt(2)")结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]
:header 返回值:Array<Element(s)>
匹配如 h1, h2, h3之类的标题元素
给页面内所有标题加上背景色
HTML 代码:
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>jQuery 代码:
$(":header").css("background", "#EEE");结果:
[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]