使用jquery的方法和技巧
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的方法和技巧的更多相关文章
- 使用jquery的方法和技巧2，点击多选框的jquery响应
使用jquery来控制多选框的变化 功能描述: 1.第一层 当选中后台应用(App1)时,所有多选框都被选择. 当取消选中后台应用(App1)时,所有多选框都被取消选择. 第一层的逻辑如下: 2.第二 ...
- 20个热门jQuery的提示和技巧
以下是一些非常有用的jQuery提示和所有jQuery的开发技巧. 1.优化性能复杂的选择 查询DOM中的一个子集,使用复杂的选择时,大幅提高了性能: var subset = $("&qu ...
- 几个 jQuery 小提示和技巧
几个 jQuery 小提示和技巧 今天,我们将分享一些很有用的技巧和窍门给 jQuery 开发人员.jQuery 是最好的 JavaScript 库之一,用于简化动画,事件处理,支持 Ajax 和 H ...
- jquery的方法总结
1.1.概述随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的J ...
- 深度解析JQuery Dom元素操作技巧
深度解析JQuery Dom元素操作技巧 DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了JQuery dom元素操作方法,写的十分的全面细 ...
- Django配合使用Jquery post方法
Django使用jQuery的post方法需要解决两个问题: 1.Django中为了防止跨站请求,在post提交时都会带上csrf_token,利用Jquery进行post请求也需要:否则就会出现40 ...
- jQuery on()方法
jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法 ...
- jquery ajax 方法及各参数详解
1.$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息. 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type ...
- jquery.extend方法
jquery.extend()用来扩展jquery中方法,实现插件. 1.jQuery.extend函数详细用法! 扩展jQuery静态方法. 1$.extend({ 2test:function() ...
随机推荐
- Java基础语法(一)---关键字、常量、变量、运算符
一.关键字 定义:被Java赋予了特殊含义的单词. 特点:体现上都是英文小写. 1. 用于定义数据类型的关键字 基本数据类型: 整数类型:byte short int long 浮点类型:f ...
- AndroidTv Home界面实现原理（二）——Leanback 库的主页卡位缩放动画源码解析
先看个效果图: 上一篇中,我们留了问题,在 Tv Home 界面这种很常见聚焦卡位放大动画效果,我们这一篇就来看看 Leanback 库是怎么实现的. 如果要我们自己实现的话,思路应该不难,就是写个放 ...
- [2012-04-25]shell大括号参数扩展（Parameter Expansion）
参考了shell十三问 以及http://hi.baidu.com/leejun_2005/blog/item/ebfee11a4177ddc1ac6e751d.html 提炼下记忆方式: {% ca ...
- 浅析SQL Server在可序列化隔离级别下，防止幻读的范围锁的锁定问题
本文出处:http://www.cnblogs.com/wy123/p/7501261.html (保留出处并非什么原创作品权利,本人拙作还远远达不到,仅仅是为了链接到原文,因为后续对可能存在的一些错 ...
- 九度OJ 1013 开门人和关门人
#include <iostream> #include <string.h> #include <sstream> #include <math.h> ...
- 201521123017 《Java程序设计》第7周学习总结
1. 本周学习总结 2. 书面作业 Q1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 1.2 解释E remove(int index)源代码 1.3 结合1. ...
- 201521123113《Java程序设计》第7周学习总结
1. 本周学习总结 2. 书面作业 Q1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 contains源代码: public boolean contains( ...
- 学号：201521123116 《java程序设计》第四周学习总结
1. 本周学习总结 2. 书面作业 Q1. 注释的应用使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图)答:注释的插入:注释以/开始,以/结束类注释/**.... ...
- 201521123064 《Java程序设计》第2周学习总结
1. 本章学习总结 1.学会使用码云管理代码,包括将本地的代码上传至码云,和将码云上的项目保存至本地. 2.将码云上项目保存至本地的过程中,若eclipse窗口中已有同名项目,则导入的过程中可能会出错 ...
- 201521123095 《Java程序设计》第1周学习总结
1. 本周学习总结 开始了对JAVA的初步了解和学习,了解了如何编写简单的JAVA程序. 了解了Java的诞生及发展以及如何运用JVN JRE JDK JVM让JAVA可以 ...