jquery实战（1）

来源：互联网发布：深海逃生剧情知乎编辑：程序博客网时间：2024/05/01 07:59

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树。*/

0 0