使用jquery的方法和技巧

最新推荐文章于 2024-11-07 22:43:35 发布

weixin_30826761

最新推荐文章于 2024-11-07 22:43:35 发布

阅读量47

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/andy9468/p/4278126.html

版权

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                 });