查找：
选择器
筛选器
操作:
CSS
属性
文本
事件：
优化
扩展：
Form表单验证
Ajax:
偷偷发请求
www.php100.com/manual/jquery
http://blog.jquery.com/category/jquery/
利用JQuery实现左侧菜单的隐藏与显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .menu{ height: 600px; width: 200px; line-height: normal; border: 1px solid darkgray; overflow: auto; } .menu .item .title{ height: 40px; line-height: 40px; background-color: #2459a2; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="title" onclick="ShowMenu(this);">标题一</div> <div class="body"> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> </div> </div> <div class="item"> <div class="title" onclick="ShowMenu(this);">标题二</div> <div class="body hide"> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> </div> </div> <div class="item"> <div class="title" onclick="ShowMenu(this);">标题三</div> <div class="body hide"> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> //$(ths) DOM转化为JQuery //$(ths)[0] JQuery转化为DOM function ShowMenu(ths){ $(ths).next().removeClass("hide"); $(ths).parent().siblings().find('.body').addClass("hide"); } </script> </body> </html>
JQuery实现多选框的多选和反选
<script src="jquery-1.12.4.js"></script> <script> function CheckALL(){ $('#tb input[type="checkbox"]').prop('checked',true); } function CancelALL(){ $('#tb input[type="checkbox"]').prop('checked',false); } function ReverseALL(){ $('#tb input[type="checkbox"]').each(function(i){ if($(this).prop("checked")){ $(this).prop("checked",false); }else{ $(this).prop("checked",true); } }) </script>
JQuery实现复制删除标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <p> <a onclick="Add(this)"> + </a> <input type="text" /> </p> </div> <script src="jquery-1.12.4.js"></script> <script> function Add(ths){ var p = $(ths).parent().clone(); p.find('a').text('-') p.find('a').attr('onclick','Remove(this)'); $(ths).parent().parent().append(p); } function Remove(ths){ $(ths).parent().remove(); } </script> </body> </html>
JQuery实现的菜单展开与收起
$('.item .title').bind('click',function(){
$(this).next().removeClass("hide");
$(this).parent().siblings().find('.body').addClass("hide");
})
$('.item .title').click(function(){
$(this).next().removeClass("hide");
$(this).parent().siblings().find('.body').addClass("hide");
})
当文档树已经加载完毕了，但是加载的图片还没有出现的时候，后面的代码可以执行，写法如下：
$(function(){
.......
});
JQuery延迟绑定，delegate，什么时候用的时候绑定。
<body> <input type="button" onclick="Add()"/> <ul> <li>第一课</li> <li>第二课</li> <li>第三课</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $(function(){ $("ul").delegate("li","click", function (){ alert($(this).text()); }) }) function Add(){ var tag = document.createElement('li'); tag.innerText = '666'; $('ul').append(tag); } </script> </body>
JQuery之表单验证：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .item{ width: 200px; /*background-color: #2459a2;*/ height: 60px; /*color: white;*/ position: relative; } .item input{ width: 196px; } .item span{ /* 202px;*/ /*color: red;*/ position: absolute; background-color: red; color: white; /*display: inline-block;*/ top: 20px; left: 0; width: 200px; height: 22px; } </style> </head> <body> <div> <form> <div class="item"> <input class="c1" type="text" name="username" label="用户名"/> <!--<span>不能为空</span>--> </div> <div class="item"> <input class="c1" type="password" name="pwd" label="密码"/> <!--<span>不能为空</span>--> </div> <input type="submit" value="提交" onclick="return CheckValid()"/> </form> </div> <script src="jquery-1.12.4.js"></script> <script> function CheckValid(){ // $('form .c1') // $('form input[type="text"],form input[type="password"]')
$('form .item span').remove(); //如果第一次没有输入，那么下面会显示错误信息，第二次输入后，错误信息应该被清除，所以在添加span之前，首先把所有的span标签清除
var flag = true; $('form .c1').each(function(){ var val = $(this).val(); if (val.length <=0){ var label = $(this).attr('label'); var tag = document.createElement('span'); tag.innerText = label + '不能为空'; $(this).after(tag); flag = false;
return false; } }) return flag; } </script> </body> </html>
利用JQuery来实现绑定：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .item{ width: 200px; /*background-color: #2459a2;*/ height: 60px; /*color: white;*/ position: relative; } .item input{ width: 196px; } .item span{ /* 202px;*/ /*color: red;*/ position: absolute; background-color: red; color: white; /*display: inline-block;*/ top: 20px; left: 0; width: 200px; height: 22px; } </style> </head> <body> <div> <form> <div class="item"> <input class="c1" type="text" name="username" label="用户名"/> <!--<span>不能为空</span>--> </div> <div class="item"> <input class="c1" type="password" name="pwd" label="密码"/> <!--<span>不能为空</span>--> </div> <input type="submit" value="提交" /> </form> </div> <script src="jquery-1.12.4.js"></script> <script> $(function(){ BindCheckValue(); }) function BindCheckValue(){ $('form input[type="submit"]').click(function() { var flag = true; $('form .item span').remove(); $('form .c1').each(function () { var val = $(this).val(); if (val.length <= 0) { var label = $(this).attr('label'); var tag = document.createElement('span'); tag.innerText = label + '不能为空'; $(this).after(tag); flag = false; } }) return flag; }) } // function CheckValid(){ //// $('form .c1') //// $('form input[type="text"],form input[type="password"]') // $('form .item span').remove(); // var flag = true; // $('form .c1').each(function(){ // var val = $(this).val(); // if (val.length <=0){ // var label = $(this).attr('label'); // var tag = document.createElement('span'); // tag.innerText = label + '不能为空'; // $(this).after(tag); // flag = false; // } // }) // return flag; // } </script> </body> </html>
JQuery之each
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src="jquery-1.12.4.js"></script> <script> function Test(){ $.each([11,22,33,44],function(k,v){ console.log(k,v) if (v == 22){ return; //continue } if (v == 33){ return false; //break } }); } Test() </script> </body> </html>
执行结果：
0 11
1 22
2 33
JQuery之扩展方法:
假设需要导入extend1.js和extend2.js,由于同时具有两个f1()函数，因此需要使用函数的闭包来处理。
//extend1.js
$.extend({
'dalong1':function(arg){
console.log(arg);
}
});
function f1(){
}
===========================================
//extend2.js
$.extend({
'dalong2':function(arg){
console.log(arg);
}
});
function f1(){
}
那么经过修改之后的函数为：
//extend1.js
a = function(){
$.extend({
'dalong1':function(arg){
console.log(arg);
}
});
function f1(){
}
};
==================================
//extend2.js
b = function(){
$.extend({
'dalong2':function(arg){
console.log(arg);
}
});
function f1(){
}
};
像上面那么书写了以后，函数只是被定义了但是不会执行，执行的时候报错：
Uncaught TypeError: $.dalong1 is not a function
因为函数默认不会执行，只能在后面添加a();和b(); ,既然如此，就可以写成自执行函数的方式：
extend1.js
(function(){
$.extend({
'dalong1':function(arg){
console.log(arg);
}
});
function f1(){
}
})();
===============================
extend2.js
(function(){
$.extend({
'dalong2':function(arg){
console.log(arg);
}
});
function f1(){
}
})();
在导入的JS里面，使用到了$，那么如果我们需要将JQuery以参数的形式传递到JS里面，代码可以做如下的修改：
//extend1.js
(function(jq){
jq.extend({
'dalong1':function(arg){
console.log(arg);
}
});
function f1(){
}
})($);
================================
//extend2.js
(function(jq){
jq.extend({
'dalong2':function(arg){
console.log(arg);
}
});
function f1(){
}
})(jQuery);