使用jquery的方法和技巧
1、下载一个jquery.js的文件
2、引入jquery.js文件
1 <script type="text/javascript" src="__PUBLIC__/js/jquery-1.7.2.min.js"></script> 2 <script type="text/javascript"> 3 $(function(){ 4 5 //这里面使用jquery的方法 6 7 8 }); 9 </script>
3、使用jquery提供的方法
学前，补习补习点jquery的方法。这里，我从实用的角度去补习，不从基础的角度去补习。因为基础在jquery学习手册上都有。
例子1.单击html元素的事件（利用属性level）
1 <input type="checkbox" name="access[]" id="app_1_1" value="1_1" level="1" />
jquery表达如下：
1 $('input[level=1]').click(function(){ 2 3 4 5 });
例子2.自主、任意地选择html中的标签
$('#id').siblings() 当前元素所有的兄弟节点
$('#id').prev() 当前元素前一个兄弟节点
$('#id').prevaAll() 当前元素之前所有的兄弟节点
$('#id').next() 当前元素之后第一个兄弟节点
$('#id').nextAll() 当前元素之后所有的兄弟节点
这三个方法都可以添加选择器，给出选择条件，就能找到你指定的兄弟节点了。
如：
1 var inputs_all=$(this).parents('div.app').find('input');
$(this)表示当前点击的对象；
.parents('div.app')表示对象的长辈中，<div class="app"></div>的那个html元素节点；
.find('input')表示找出对象下的所有html元素的<input />标签。
所以，inputs_all是所有找出的<input />标签的集合。
点击顶层input时，选上，则所有都选上，没选上，则所有都没选上。
1 $('input[level=1]').click(function(){ 2 var inputs_all=$(this).parents('div.app').find('input'); 3 if ($(this).attr('checked')=="checked") { 4 inputs_all.attr('checked','checked'); 5 }else{ 6 inputs_all.removeAttr('checked'); 7 } 8 });
$(this).attr('checked')表示当前点击对象的属性值；
inputs_all.attr('checked','checked')表示让inputs_all对象的所有<input />标签添加一个checked属性，并赋值为checked。即为<input checked="checked" />
inputs_all.removeAttr('checked')表示inputs_all对象的所有<input />标签移除一个checked属性。即为<input />
这个最好自己练练
1 var all_born_children=$(this).parents('dt').next('span.method').find('input'); 2 var born_parent=$(this).parents('span.action').prev().find('input'); 3 var born_brothers=$(this).parents('dl').siblings().children('dt').find('input');
4、jquery的简单调试方法
调试输出代码如下：将下列方法写的jquery的点击事件内
1 var tbody = "";//调试代码 2 $.each(born_brothers,function(n,value){ 3 alert(n+' '+value);//调试代码 4 var trs = "";//调试代码 5 trs += "<tr><td>" + value.checked +cunzai2+ "</td></tr>";//调试代码 6 tbody += trs;//调试代码 7 }); 8 $("#project").append(tbody);//调试代码 9 //body标签中写输出位置 10 //<div id="project">在这里输出</div>
还要在<body>标签中加
1 <div id="project">在这里输出</div>
jquery的全代码如下：要开启jquery调试，就把调试代码最前面的//去掉
1 $('input[level=2]').click(function(){ 2 var all_born_children=$(this).parents('dt').next('span.method').find('input'); 3 var born_parent=$(this).parents('span.action').prev().find('input'); 4 var born_brothers=$(this).parents('dl').siblings().children('dt').find('input'); 5 6 7 // var tbody = "";//调试代码 8 var cunzai2=0; 9 $.each(born_brothers,function(n,value){ 10 11 if(value.checked==true){ 12 cunzai2++; 13 } 14 //alert(n+' '+value);//调试代码 15 // var trs = "";//调试代码 16 // trs += "<tr><td>" + value.checked +cunzai2+ "</td></tr>";//调试代码 17 // tbody += trs;//调试代码 18 19 }); 20 // $("#project").append(tbody);//调试代码 21 22 23 if ($(this).attr('checked')=="checked") { 24 all_born_children.attr('checked','checked'); 25 born_parent.attr('checked','checked'); 26 }else{ 27 all_born_children.removeAttr('checked'); 28 if (cunzai2==0) { 29 born_parent.removeAttr('checked'); 30 }else{ 31 born_parent.attr('checked','checked'); 32 } 33 } 34 35 });
现在练练手看看。有疑问，请联系：QQ邮箱：1465567571@qq.com
