1 jQuery本质
jQuery不是一门独立的语言,它是JavaScript的一个类库或框架。jQuery的核心思想就是:选取元素,对其操作。很多时候写jQuery代码的关键就是怎样设计合适的选择器选中需要的元素。
jQuery主要分为以下几部分:
查找:
选择器
筛选
操作:
标签属性
CSS属性
文档
其它:
事件
Ajax
JSON
...
2 选择器
jQuery的选择器无比强大,这里主要总结一下常用的元素查找方法
//基本选择器: $("#myElement"); //选择id='myElement'的标签,在一个HTML文档中,id值不能重复(id值是唯一的) $("div"); //选择所有的div标签,返回div标签数组(参数为标签名) $(".myClass"); //选择CSS为class='myClass'类的所有标签 $(".myClass,a"); //联合选择(逗号的作用):选择class='myClass'标签和a标签 $("*"); //选择文档中所有的标签,也可以运用多种选择方式进行联合选择:例如$("#myElement,div,.myclass") //层叠选择器: $("#myElement p"); //组合选择(空格的作用):选择id='myElement'标签下的p标签 $("form input"); //选择所有的form表单中的input标签 $("#main > *"); //选择id值为main的所有的子标签(注意:只包括子标签,不包括孙子标签) $("label + input"); //匹配跟在label标签后面的所有input标签 $("#prev ~ div"); //同胞选择器,找到与id='prev'的标签同辈的div标签(兄弟标签) //基本过滤选择器: $("tr:first"); //选择所有tr标签中的第1个tr标签 $("tr:last"); //选择所有tr标签中的最后1个tr标签 $("input:not(:checked) + span"); //匹配跟在非checked属性的input标签后面的所有span标签 $("tr:even"); //选择所有tr标签中的第0,2,4...2n个标签,即选择第奇数个标签(注意序号是从0开始的,实际对应第1,3,5..标签) $("tr:odd"); //选择所有tr标签中的第1,3,5...2n+1个标签,即选择第偶数个标签(注意序号是从0开始的,实际对应第2,4,6..标签) $("td:eq(2)"); //选择所有td标签中序号为2的那个td标签(注意:这里从0开始计数) $("td:gt(4)"); //选择所有td标签中序号大于4的td标签(注意:这里从0开始计数) $("td:ll(4)"); //选择所有td元素中序号小于4的td标签,即选择序号为0 1 2 3的td标签 $(":header"); //选择所有的标题,即h1 h2 h3 h4 ...标题 $("div:animated"); //匹配所有正在执行动画效果的div标签 //内容过滤选择器: //可视化过滤选择器: //属性过滤选择器: |
3 筛选器
//过滤 eq(1); //获取匹配的第2个元素,序号从0算起 eq(-2); //倒数,获取匹配的第2个元素,序号从1算起 first(); //获取匹配的第1个元素 last(); //获取匹配的最后1个元素 hasClass("myClass"); //检查当前的元素是否含有样式类myClass,如果有则返回true filter(expr|obj|ele|fn); //筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式 map(callback); //将一组元素转换成其他数组(不论是否是元素数组),详细用法见实例 has(expr|ele); //保留包含特定后代的元素,去掉那些不含有指定后代的元素 not(expr|ele|fn); //删除与指定表达式匹配的元素 slice(start,[end]); //选取一个匹配的子集 //查找 //串联 |
jQuery选择器eq()方法与jQuery筛选器eq()方法的区别:
//例子1:可以直接传参数
innp = raw_input()
$('p').eq(innp) //例子2:不可以直接传参数,参数要拼接成字符串的形式
innp = raw_input()
content = "p:eq(" + innp + ")"
$("p:eq(content)") //注:jQuery的筛选器相当于对其选择器进行了封装。
eq()方法的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head> <body>
<table>
<thead></thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td onclick="GetPrev(this)">编辑</td>
</tr>
</tbody>
</table> <script src="../static/js/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
function get_prev(arg){
// 注意map函数,相当于循环每一个(映射)标签,同时都执行map中的函数
// 并获取返回值,把所有的返回值封装成一个数组(列表),并返回列表。
var list = $(arg).siblings().map(function(){
// this表示当前循环的标签
return $(this).text();
});
console.log(list[0],list[1],list[2]);
}
</script>
</body>
</html>
map()方法实例
4 属性
//属性
//属性 //CSS类 //HTML代码/文本/值 |
5 CSS
//CSS
//CSS //位置 //尺寸 |
6 文档处理
HTML文档的层次关系是树型的,每个标签可视为树的各个节点。若操作jQuery对象,使得HTML文档的结构发生了改变,就叫做文档处理。下面就是一些常用方法,格式为$(selector).方法,其中$(selector)即当前选定元素:
//文档处理就是在dom元素中添加html内容 //操作相同,把所有的p标签插入到id='foo'的标签之前 $("p").wrap("<div class='wrap'></div>"); //把所有的p标签用div标签包装起来 |
7 事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定的3种方法</title>
</head> <body>
<a onclick="func(this);">第1种绑定事件方法</a>
<p id="u">第2种绑定事件方法</p>
<h6 class="t">第3种绑定事件方法</h6> <script type="text/javascript" src="jQuery-1.11.3.js"></script>
<script type="text/javascript">
// 第1种方法中绑定的事件函数
function func(ths){
alert($(ths).text());
} $(function(){
// 第2种绑定事件方法
$('#u').click(function(){
alert($(this).text());
});
// 第3种绑定事件方法
$('.t').bind('click',function(){
alert($(this).text());
});
});
</script>
</body>
</html>
更多事件内容请参考http://www.php100.com/manual/jquery/
8 其它
(1)each(callback); //以每一个匹配的元素作为上下文来执行一个函数 (2)jQuery.each(object, [callback]); //通用遍历方法,可用于遍历对象和数组,通常写成$.each(object, [callback]) (3)jQuery.fn.extend(object); //扩展jQuery元素集来提供新的方法(通常用来制作插件) (4)jQuery.extend(object); //扩展jQuery对象本身 (5)jQuery.map(arr|obj,callback); //将一个数组中的元素转换到另一个数组中,通常写成$.map(arr|obj,callback) (6)ready(fn); //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数 $(document).ready(function(){ //这里写要执行的函数 }); 使用简写:$(function(){ //这里写要执行的函数,可以认为$是jQuery的别名 }); 注意$(function(){...})与window.load(function(){...})和body.onload()的区别,后面两者在一个页面中只能存在1个,否则后续的不执行 同时,$(function(){...})不能写在后面两者的后面,否则不执行 (7)$.ajax() //通过HTTP请求加载远程数据 |
注:each()函数中如果存在return语句时,那么return语句只会跳出each()函数本身
jQuery的扩展实例
<!--HTML文件,js文件为extend.js-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--jQuery的扩展,注意3个script的顺序-->
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="extend.js"></script>
<script type="text/javascript">
var t= $.ttt();
console.log(t); var tt=$.aaa();
console.log(tt);
</script>
</body>
</html>
//js文件
//jQuery的扩展:自执行函数
//注意arg.extend({...})中是字典形式,可以定义多个函数(多组键值对)
(function(arg){
arg.extend({
"ttt":function(){
return 123;
},
'aaa':function(){
return 456;
}
});
})(jQuery);
9 实例
实例1:左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.hide{
display: none;
} .content{
color: red;
}
</style>
</head> <!--基本版本-->
<body>
<div>
<div>
<div id="menu_1" onclick="change(1)">菜单一</div>
<div class="hide">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div> <div>
<div id="menu_2" onclick="change(2)">菜单二</div>
<div>
<div>11</div>
<div>22</div>
<div>33</div>
</div>
</div> <div>
<div id="menu_3" onclick="change(3)">菜单三</div>
<div>
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
</div> <script src="../static/js/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
function change(arg){
if(arg==1){
var menu=$("#menu_1");
}else if(arg==2){
var menu=$("#menu_2");
}else{
var menu=$("#menu_3");
}
console.log(menu.text());
}
</script>
</body>
</html>
基本代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.hide{
display: none;
} .content{
color: red;
}
</style>
</head> <body>
<div>
<div>
<div onclick="change(this);">菜单一</div>
<div class="content hide">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div> <div>
<div onclick="change(this);">菜单二</div>
<div class="content">
<div>11</div>
<div>22</div>
<div>33</div>
</div>
</div> <div>
<div onclick="change(this);">菜单三</div>
<div class="content">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
</div> <script src="../static/js/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
function change(arg){
// 显示当前点击的标签,$(arg)相当于把arg封装成了jQuery方法
// 找到当前标签紧邻的下一个兄弟标签,并移除它的hide属性
$(arg).next().removeClass('hide');
// 隐藏除当前标签的其它标签
// 找到当前标签的父标签的兄弟标签,并在这些标签下找class='content'的标签,并加上hide属性
$(arg).parent().siblings().find('.content').addClass('hide');
}
</script>
</body>
</html>
优化代码
实例2:表单+模态对话框(修改提交数据)
<script src="../static/js/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
function loop(arg){
// jQuery中数组的循环
// 在jQuery中$.each()是用来循环的,我们把数组a传进去,然后在括号内增加function,数组中的每个元素就会执行function
// 这里item就是索引
var a = [11,22,33,44];
$.each(a,function(item){
console.log(a[item]);
}); // jQuery中数组(字典)的循环
var d = {'k1':'v1','k2':'v2'};
$.each(d,function(key,value){
console.log(key,value);
});
jQuery中的each循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
<!--弹出框的CSS样式-->
.modal{
/*弹出框在屏幕中的位置是固定的*/
position:fixed;
/*左上顶点(left,top)在屏幕的正中间(各占50%,其实对话没在正中间)*/
left:50%;
top:50%;
/*对话框的宽和高*/
width:400px;
height:300px;
background-color:#ddd;
/*为了把对话框移动到正中间,设置左外边距和上外边距*/
margin-left:-200px;
margin-top:-150px;
}
/*隐藏属性*/
.hide{
display:none;
}
</style> </head> <body>
<table border="1">
<!--表格头部-->
<thead></thead>
<!--表格体-->
<tbody>
<!--tr表示每一行-->
<tr>
<!--td表示每一列-->
<td>1</td>
<td>2</td>
<td>3</td>
<!--添加编辑事件-->
<td onclick="GetPrev(this);">编辑</td>
</tr> <tr>
<td>11</td>
<td>22</td>
<td>33</td>
<td onclick="GetPrev(this);">编辑</td>
</tr> <tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td onclick="GetPrev(this);">编辑</td>
</tr>
</tbody>
</table> <!--对话框-->
<div id="dialog" class="modal hide">
<!--form表单-->
<form action="" method="get">
<p>主机名:<input type="text" id="hostname" value="value"/></p>
<p>IP:<input type="text" id="ip"/></p>
<p>端口:<input type="text" id="port"/></p>
<!--submit只能用于提交表单,submit默认就注册了提交的事件,在此处为了实现验证提交内容(检测是否为空)-->
<!--如果为空,则不能提交,为了实现此功能,在这里又注册了一个onclick事件,注意此处的return,容易忽视-->
<input type="submit" value="提交" onclick="return submitForm();"/>
<!--取消按钮-->
<input type="button" value="取消" onclick="cancel();"/>
</form>
</div> <script src="../static/js/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
function GetPrev(ths){
// $(ths).prevAll() 当前标签之前的所有兄弟标签
// 定义空数组
var list=[];
// 此处的循环使用:each的用法
$.each($(ths).prevAll(),function(i){
// 获取所有数据中的第i项
var item=$(ths).prevAll()[i];
// 获取元素的内容,注意$(item)的使用,不容易理解,这里加上$符号,相当于封装了jQuery方法
var text=$(item).text();
// 把文本值放入数组
list.push(text);
});
// 数组值翻转
var new_list=list.reverse();
// 在弹出框中设置值,注意下面的方法,如果val中不带参数,表示获取该标签的值
// 如果带参数,则表示设置新值
$('#hostname').val(new_list[0]);
$('#ip').val(new_list[1]);
$('#port').val(new_list[2]);
// 移除hide属性
$('#dialog').removeClass('hide');
} // 取消事件函数
function cancel(){
$('#dialog').addClass('hide');
} // 验证提交内容是否为空事件
function submitForm(){
// 获取Form表单中的input值
// 判断值是否为空
var ret = true;
// 遍历所有的input值,只要为空值,就将ret设置为false
// $('input[type="text"]'),与下面的表示等价
$(':text').each(function(){
// $(this)相当于每个要循环的元素
var value=$(this).val();
if(value.trim().length==0){
$(this).css('border-color','red');
ret=false;
}else{
$(this).css('border-color','green');
}
});
return ret;
}
</script>
</body>
</html>
模态对话框修改表单
注:在input标签中需要注册另外1个事件,如果事件绑定函数返回的是false,则submit注册的事件将不会被触发
实例3:全选/反选/取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head> <body>
<input type="button" onclick="CheckAll();" value="全选"/>
<input type="button" onclick="CheckReverse();" value="反选"/>
<input type="button" onclick="CheckCancel();" value="取消"/> <table border="1">
<thead></thead>
<tbody id="tb1">
<tr>
<td><input type="checkbox"/></td>
<td>11</td>
</tr> <tr>
<td><input type="checkbox"/></td>
<td>22</td>
</tr> <tr>
<td><input type="checkbox"/></td>
<td>33</td>
</tr>
</tbody>
</table> <script src="../static/js/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
// 全选绑定的事件函数
function CheckAll(){
// 第1种方法
// $('#tb1').find(':checkbox').attr('checked','checked');
// 第2种方法(推荐)
$('#tb1').find(':checkbox').prop('checked',true);
} // 反选绑定的事件函数
function CheckReverse(){
// each()循环函数
$('#tb1').find(':checkbox').each(function(){
// $(this)等价于每一个复选框
// $(this).prop如果选中true,否则false
// attr如果选中,即checked=checked,这里没法实现反选
if($(this).prop('checked')){
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
}
}); }
// 取消绑定的事件函数,也有两种方法
function CheckCancel(){
// $('#tb1').find(':checkbox').removeAttr('checked');
$('#tb1').find(':checkbox').prop('checked',false);
}
</script>
</body>
</html>
全选/反选/取消
实例4:滚动条实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" onclick="GoTop()" value="返回顶部" />
<!--overflow参数表示内容超过当前浏览器窗口大小时,自动出现滚动条-->
<!--这个是浏览器内部的滚动条-->
<div id="content" style="height: 300px;width: 500px; overflow: auto;">
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
<p>df</p>
</div> <script src="../static/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function GoTop(){
// 表示返回当前匹配标签(id='content')的顶部
$('#content').scrollTop(0);
// 表示返回当前浏览器窗口可见部分的顶部
$(window).scroll(0)
}
</script>
</body>
</html>
滚动条实例
实例5:章节滚动条实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动章节实例</title>
</head>
<body>
<div>
<!--右上角显示区域-->
<div id="currentPosition" style="position: fixed;top: 0px;right: 0px;"></div>
<div>
<div class="chapter" style="height: 500px;">
<h1>第1章</h1>
</div> <div class="chapter" style="height: 1500px;">
<h1>第2章</h1>
</div> <div class="chapter" style="height: 30px;">
<h1>第3章</h1>
</div>
</div>
</div> <script src="../static/js/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
// 获取标签离顶部的偏移
// var top1 = $('.chapter').offset().top;
// console.log(top1);
// $(function(){})等价于$(document).ready(function(){})
$(function(){
// 注册窗口滚动条事件
$(window).scroll(function(){
// scrollTop():设置或返回匹配元素相对滚动条顶部的偏移
// $(window).scrollTop()表示浏览器滚动条离HTML文档顶部的偏移
var scroll_top = $(window).scrollTop();
console.log(scroll_top);
var list = [];
// 循环每个class='chapter'的标签,执行function函数
$.each($('.chapter'), function(i){
// $($('.chapter')[i]).offset()计算当前标签相对HTML文档的位置,主要包括离左边,顶部的距离
// 获取当前标签相对HTML文档顶部的偏移
var current_height = $($('.chapter')[i]).offset().top;
// 把当前标签离顶部的偏移放入数组
list.push(current_height);
});
// 循环数组list,执行function函数
$.each(list,function(i){
// $(window).height()表示浏览器当前能看到部分的高度,这个跟显示器尺寸、页面放大缩小有关,这个高度是变化的
// $(document).height()表示当前HTML文档的高度,这个高度是一定的
// 如果条件满足,表示HTML文档到达了底部
if (scroll_top+$(window).height() == $(document).height()){
// 把最后1个标签的text设置到currentPosition位置
$('#currentPosition').text($('.chapter').last().text());
return;
}
// 如果滚动条离HTML文档顶部的偏移(scroll_top)大于当前标签相对HTML文档顶部的偏移(list[i]),那么
// 表示还是当前的标签
if (scroll_top>list[i]){
$('#currentPosition').text($($('.chapter')[i]).text());
return;
}
})
})
})
</script>
</body>
</html>
章节滚动条
实例6:文档处理及简单搜索框实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body> <div id="i1">
<a>文档处理测试</a>
</div> <div id="i2" style="background-color: red;"></div> <!--搜索框标签-->
<div id="search_conditions">
<div class="condition">
<!--符号"+",并且绑定事件,注意事件函数传递的参数,this表示当前标签,'#search_conditions'表示id-->
<a onclick="AddCondition(this, '#search_conditions')"> + </a>
<!--input输入框-->
<input/>
</div>
</div> <script type="text/javascript" src="jQuery-1.11.3.js"></script>
<script type="text/javascript">
//"+"绑定的事件函数
function AddCondition(ths, container){
//拷贝class='condition'的div标签,即当前标签的父标签
var cp = $(ths).parent().clone();
//再把拷贝的div标签追加到id='search_conditions'的标签下面
//$('#search_conditions').append(cp);
//然后把拷贝的a标签的文本内容设置成"-",同时设置属性值(绑定事件),这里利用Javascript的链式调用
cp.children(':first').text('-').attr('onclick', "RemoveCondition(this, '#search_conditions')");
//把改造后的a标签追加到id='search_conditions'的标签中
cp.appendTo('#search_conditions');
}
//移除标签的事件函数
function RemoveCondition(ths, container){
$(ths).parent().remove();
} //$('#i1').append('<div>aaaa</div>')
//$('#i1').prepend('<div>aaaa</div>')
//$('#i1').appendTo('#i2');
//$('#i1').before('<h1>alex</h1>')
</script>
</body>
</html>
文档处理及搜索框实例
实例7:ajax本地请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" onclick="AjaxRequest();"/> <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//ajax本地请求
function AjaxRequest(){
$.ajax({
//请求的url
url: '/home/test',
//请求类型
type: 'GET',
//数据类型
data: {'k1': 'v1', 'k2': 'v2'},
success: function(data){
//当请求成功,从远程获取返回值
console.log(data);
},
//当请求失败,返回失败信息
error: function(){
}
})
}
</script>
</body>
</html>
Ajax本地请求
实例8:ajax跨域请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" onclick="AjaxRequest()" value="跨域Ajax" />
<div id="container"></div> <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//Ajax跨域请求
function AjaxRequest() {
$.ajax({
//请求的地址
url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',
//请求类型
type: 'GET',
//请求的数据类型
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'list',
//成功时返回函数
success: function (data) {
$.each(data.data,function(i){
var item = data.data[i];
var str = "<p>"+ item.week +"</p>";
$('#container').append(str);
$.each(item.list,function(j){
var temp = "<a href='" + item.list[j].link +"'>" + item.list[j].name +" </a><br/>";
$('#container').append(temp);
});
$('#container').append("<hr/>");
}) }
});
}
</script>
</body>
</html>
Ajax跨域请求
实例9:登陆
实例10:注册
实例11:Form表单验证
参考资料:
http://www.php100.com/manual/jquery/
http://www.cnblogs.com/wupeiqi/articles/4457274.html