1、下载一个jquery.js的文件

2、引入jquery.js文件

 <script type="text/javascript" src="__PUBLIC__/js/jquery-1.7.2.min.js"></script>

 <script type="text/javascript">

 $(function(){

 //这里面使用jquery的方法

 });

 </script>

3、使用jquery提供的方法

学前，补习补习点jquery的方法。这里，我从实用的角度去补习，不从基础的角度去补习。因为基础在jquery学习手册上都有。

例子1.单击html元素的事件（利用属性level）

 <input type="checkbox" name="access[]" id="app_1_1" value="1_1" level="1" />

jquery表达如下：

 $('input[level=1]').click(function(){

 });

例子2.自主、任意地选择html中的标签

$('#id').siblings() 当前元素所有的兄弟节点
$('#id').prev() 当前元素前一个兄弟节点
$('#id').prevaAll() 当前元素之前所有的兄弟节点
$('#id').next() 当前元素之后第一个兄弟节点
$('#id').nextAll() 当前元素之后所有的兄弟节点
这三个方法都可以添加选择器，给出选择条件，就能找到你指定的兄弟节点了。

如：

 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时，选上，则所有都选上，没选上，则所有都没选上。

 $('input[level=1]').click(function(){

     var inputs_all=$(this).parents('div.app').find('input');

     if ($(this).attr('checked')=="checked") {

         inputs_all.attr('checked','checked');

     }else{

         inputs_all.removeAttr('checked');

     }

 });

$(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  />

这个最好自己练练

 var all_born_children=$(this).parents('dt').next('span.method').find('input');

 var born_parent=$(this).parents('span.action').prev().find('input');

 var born_brothers=$(this).parents('dl').siblings().children('dt').find('input');

4、jquery的简单调试方法

调试输出代码如下：将下列方法写的jquery的点击事件内

 var tbody = "";//调试代码

     $.each(born_brothers,function(n,value){

         alert(n+' '+value);//调试代码

         var trs = "";//调试代码

         trs += "<tr><td>" + value.checked +cunzai2+ "</td></tr>";//调试代码

         tbody += trs;//调试代码

     });

 $("#project").append(tbody);//调试代码

 //body标签中写输出位置

 //<div id="project">在这里输出</div>

还要在<body>标签中加

<div id="project">在这里输出</div>

jquery的全代码如下：要开启jquery调试，就把调试代码最前面的//去掉

                 $('input[level=2]').click(function(){

                     var all_born_children=$(this).parents('dt').next('span.method').find('input');

                     var born_parent=$(this).parents('span.action').prev().find('input');

                     var born_brothers=$(this).parents('dl').siblings().children('dt').find('input');

 //                    var tbody = "";//调试代码

                     var cunzai2=0;

                         $.each(born_brothers,function(n,value){

                             if(value.checked==true){

                                 cunzai2++;

                             }

                             //alert(n+' '+value);//调试代码

 //                            var trs = "";//调试代码

 //                            trs += "<tr><td>" + value.checked +cunzai2+ "</td></tr>";//调试代码

 //                            tbody += trs;//调试代码

                         });

 //                            $("#project").append(tbody);//调试代码

                     if ($(this).attr('checked')=="checked") {

                         all_born_children.attr('checked','checked');

                         born_parent.attr('checked','checked');

                     }else{

                         all_born_children.removeAttr('checked');

                         if (cunzai2==0) {

                             born_parent.removeAttr('checked');

                         }else{

                             born_parent.attr('checked','checked');

                         }

                     }

                 });

现在练练手看看。有疑问，请联系：QQ邮箱：1465567571@qq.com

使用jquery的方法和技巧的更多相关文章

  1. 使用jquery的方法和技巧2，点击多选框的jquery响应

    使用jquery来控制多选框的变化 功能描述: 1.第一层 当选中后台应用(App1)时,所有多选框都被选择. 当取消选中后台应用(App1)时,所有多选框都被取消选择. 第一层的逻辑如下: 2.第二 ...

  2. 20个热门jQuery的提示和技巧

    以下是一些非常有用的jQuery提示和所有jQuery的开发技巧. 1.优化性能复杂的选择 查询DOM中的一个子集,使用复杂的选择时,大幅提高了性能: var subset = $("&qu ...

  3. 几个 jQuery 小提示和技巧

    几个 jQuery 小提示和技巧 今天,我们将分享一些很有用的技巧和窍门给 jQuery 开发人员.jQuery 是最好的 JavaScript 库之一,用于简化动画,事件处理,支持 Ajax 和 H ...

  4. jquery的方法总结

    1.1.概述随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的J ...

  5. 深度解析JQuery Dom元素操作技巧

    深度解析JQuery Dom元素操作技巧 DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了JQuery dom元素操作方法,写的十分的全面细 ...

  6. Django配合使用Jquery post方法

    Django使用jQuery的post方法需要解决两个问题: 1.Django中为了防止跨站请求,在post提交时都会带上csrf_token,利用Jquery进行post请求也需要:否则就会出现40 ...

  7. jQuery on()方法

    jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法 ...

  8. jquery ajax 方法及各参数详解

    1.$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息. 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type ...

  9. jquery.extend方法

    jquery.extend()用来扩展jquery中方法,实现插件. 1.jQuery.extend函数详细用法! 扩展jQuery静态方法. 1$.extend({ 2test:function() ...

随机推荐

  1. 再起航，我的学习笔记之JavaScript设计模式16(享元模式)

    ### 享元模式 **享元模式(Flyweight):** 运用共享技术有效地支持大量的细粒度的对象,避免对象间拥有相同内容造成多余的开销. 上回我们在组合模式中创建了文章列表类,这次我们要向不同的文 ...

  2. 利用jmeter+JAVA对RPC的单接口（dubbo接口等）进行性能测试

    建立JAVA项目 建立maven项目,加入Jmeter所需要的JAR包依赖. POM.xml  加入如下: <dependency> <groupId>org.apache.j ...

  3. postman 第3节 API请求和查看响应结果(转)

    请求 postman支持很多请求类型,界面左侧可以看到请求类型:get.post.put.patch等,右侧是发送和保存按钮,下方是请求支持的认证方式.信息头.信息体.私有脚本和测试结果.下面我们介绍 ...

  4. jmeter-fileupload操作使用说明

    前言:在http请求过程中上传附件(图片.安装包.视频文件等)虽然基本上Content-Type为:multipart/form-data,但Content-Type也有不一样的,如:图片Conten ...

  5. JS嵌套循环的典型练习题

    1.斐波那契数列 ①分数 <script type="text/javascript">    var a = 1   var b = 1   var c    for ...

  6. JSON与String之间互转

    一,String转json 这个JSON.parse()与eval()都可以实现,但是它们是有区别的, JSON.parse对json字符串要求比eval()更为严格,key名称(例如name)全部必 ...

  7. MySQL（一） -- MySQL学习路线、数据库的基础、关系型数据库、关键字说明、SQL、MySQL数据库、MySQL服务器对象、SQL的基本操作、库操作、表操作、数据操作、中文数据问题、 校对集问题、web乱码问题

    1 MySQL学习路线 基础阶段:MySQL数据库的基本操作(增删改查),以及一些高级操作(视图.触发器.函数.存储过程等). 优化阶段:如何提高数据库的效率,如索引,分表等. 部署阶段:如何搭建真实 ...

  8. 201521123083《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 上周这张图没理解完,继续 2. 书面作业 本次PTA作业题集多线程 1互斥访问与同步访问完成题集4-4(互斥访问) ...

  9. 201521123091 《Java程序设计》第5周学习总结

    Java 第五周总结 第五周的作业. 目录 1.本章学习总结 2.Java Q&A 3.使用码云管理Java代码 4.PTA实验 1.本章学习总结 1.1 尝试使用思维导图总结有关多态与接口的 ...

  10. Java学习5——标识符和关键字

    标识符: 1.Java对各种变量.方法和类等要素命名时使用的字符串序列称为标识符.凡是自己可以起名字的地方都叫标识符,都要遵守标识符的规则. 2.Java标识符命名规则: 标识符由字母.下划线&quo ...