使用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

posted @ 2015-02-06 22:19  安迪9468  阅读(208)  评论(0编辑  收藏  举报