1.行为和动作的分离，注意和JavaScript源生的区别
//行为和结构相分离被称为“不唐突的JavaScript”，而jquery的发明者哪里让该库能帮助作者易于在页面中实现这种分离。
//你会问但是没有onclick特性的话，该如何设置按钮的特性呢？
<button type="button" id="testButton" > Click Me </button>
/*
简单多了，但现在你却发现，按钮什么也干不了。
不是把按钮的行为嵌入到按钮的标记里，而是将它转移到页面<head>节的脚本快里，从而处于页面<body/>节的范围之外
*/
<script type="text/javascript">
window.onload = function(){
document.getElementById('testButton').onclick = makeItRed;
};
function makeItRed(){
document.getElementById('xyz').style.color = 'red';
}
</script>
/*
我们把脚本放在页面的onload处理程序中，给按钮元素的onclick特性指派makeItRed()函数。之所以将此脚本条件到onload处理程序中
是因为在试图操作按钮元素之前，必须先确认按钮元素的存在。
*/
2.$()对象
$()函数返回的JavaScript对象，它包含着与选择器相匹配的DOM元素的数组。该对象拥有大量预定义的有用方法
能够作用于该组元素。
//假定我们想让带有css类notLongForThisWord的所有<div>元素呈现淡出效果,同时返回相同的一组元素，提供下一个操作，还想添加css类removed到每个元素
$("div.notLongForThisWord").fadeOut().addClass("remoced");
这些jquery链可以无限延续。
即使选中对象组被发现为非常复杂的JavaScript对象。
$("#someElement").html("i have addes");
或者
$("#someElement")[0].innerHTML = " i have addes";3.选择器介绍
<ul class="myList">
<li><a href="http://jquery.com">jquery supports</a>
<ul>
<li><a href="css1">CSS1</a></li>
</ul>
</li>
</ul>
//父节点与直接子节点以右尖括号(>)隔开
p>a
//这个选择器值匹配作为<p>元素的子节点的链接。如果链接呗嵌套在更深一层，比如处在<p>之内的<span>之内，则不会链接被选中
实例的选择器
ul.myList > li > a
//在开始链接(<a>)href特性值时，字符串http://的存在使得指向外部网站的链接与众不同。
//可以利用这个选择器
a[href^=http://] //这个选择器匹配包含以http://开头的值的所有链接。
//^表示匹配出现在某个值的开头。大多数的正则表达式也采用这个。
//匹配拥有指定特性的元素，而不管特性的值是什么，可用：
form[method]
//这个选择器匹配拥有显示method特性的任何<from>元素。
//为了匹配具体的特性值，可使用如下语法形式:
input[type=text]
//这个选择器匹配type特性值为text的所有<input>元素。
div[title^=my]//以my开头的所有<div>元素。
a[htef$=.pdf]//以pdf文件为结束
//用来找到特性值的任何中包含某个字符串的元素：
a[href*=jquery.com]
//有时需要选择元素，当且权当这个元素包含某个其它元素时才选它。
li:has(a)//这个选择器匹配包含<a>元素的所有<li>元素。
//注意：jquery只支持一层嵌套
foo:not(bar:has(baz))
//比如：
foo:not(bar:has(baz:eq(2)))//不支持
//4.通过位置选择
//也许你想要选择页面上的第一个链接、奇数或偶数的段落。或者每个链表的最后一项。
a:first //此格式的选择器匹配页面上的第一个<a>元素。
p:odd//奇数
p:even//偶数
li:last-child//选择最后一个子节点
//举例
<table id="language">
<thead>
<tr>
<th>type</th>
....
//所在行的第一个单元格
table #language tbody td:first-child//
或者
table #language tbody td:nth-child(1)//
//许多自定义jquery选择器是和表单相关的，允许简明地指定具体的元素类型或状态。也可以组合。
//假定只想选择已启用的已选中复选框，可以使用
:checkbox:checked:enabled
//反转筛选选择器
//利用:not筛选器
input:not(:checkbox)
/*
筛选选择器，通过对元素应用更高的选择标准(就像前面的示列那样)，缩小正在匹配的元素的集合；
查找选择器，比如后代选择器(空格符)、子节点选择器(>)以及兄弟节点选择器(+),则查找与与选择元素具有某种关系的其他元素，而不是
通过把标准应用于匹配元素来限制匹配范围。
*/
//5.生成html
//$函数不仅能够选择现有页面元素，还能够生成html
$("<div>Hello</div>")
或者
$("<div>")//等于$("<div></div>")和$("<div/>")
$("<div class='foo'>i have fooI</div><div>i domot</div>").filter(".foo").click(function(){
alert("i am foo");
}).end().appendTo("#someParentDiv");
/*
首先创建了两个<div>元素，一个带有类foo而另一个没有。然后收窄选择范围，值选择带有类foo的<div>元素。
并给它绑定了事件处理程序。一旦点击，就会触发警告对话框。最后，使用end函数还原到包含两个<div>元素的完整的集合
并把两个元素追加到id为someParebtDiv元素之后，从而把它绑定到dom树。
*/
1439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
