JS-jQuery 基础以及常用实例
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。
- 选择器和筛选
- 属性
- css
- 文档处理
- 事件
- 扩展
- ajax
ps：链式编程
更多见：http://www.php100.com/manual/jquery/
一、选择器
#id id选择
用法：$('#t1')
.class 类选择
用法：$('.t2')
element 元素选择
用法：$('p')
组合选择
用法：$('#t1 p') 选择id为t1下面子标签为p的
$('.t2,a') 选择class为t2,和标签为a的
attribute 属性 （tab菜单用）
用法：$('div[id]') 查找div标签中含有id属性的
$("input[name='inp1']") 查找input标签中属性name='inp1'的
nth-child 子元素
用法：$('ul li:nth-child(2)') 查找ul下第2个li标签
:text input标签
:password input标签
用法：$(':text,:password') 查找input type=text 和 type=password的标签
:checked 表单对象属性
用法：$('input:checked') 查找input标签中默认被选中的标签
二、筛选
first,last 第一个，最后一个 $('li').first()
eq 根据下标查找 $('p').eq(0)
hasClass 判断是否有这个class，返回true或者false
map 每个标签循环时，会执行map内部函数并获取返回值,将所有返回值封装到一个数组(列表)中
children/parent/siblings/prev/next/nextall 子标签/父级标签/兄弟标签/邻居标签/下一个标签/下一个所有
find 查找class标签
三、属性
addClass/removeClass 添加/删除class
toggleClass 切换/添加or删除class
text 查看标签内容，只显示内容 ， text()取值 text('hello')赋值
html 和text的区别是，会把内容中包含的标签显示出来
val 获取input标签的value值 val()取值 val('hello')赋值
attr 根据属性名称，返回属性值
用法：$('#n1').attr('name')获取
$('img').attr('src','logo.png')赋值
removeAttr 删除一个属性
prop 更改属性值的true或者flase，只用于checkbox
用法： $('#tb1').find(':checkbox').prop('checked',true)
.trim(str) 字符串操作,去除空格
.length 获取长度
四、CSS
.css 直接修改css属性 .css('border-color','red')
.css({'border-color':'red','color':'green'})
heigh/innerHeight/outerHight 获取高度/+内边距后的高度/+外边距的高度
width/innerWidth/outerWidth 获取宽度
offset 距离整个页面的高度
position 父标签
循环：
//数组循环
var a = [11,22,33];
$.each(a,function(item){
console.log(a[item]);
});
//字典循环
var b = {'k1':'v1','k2':'v2'};
$.each(b,function(key,value){
console.log(key,value);
});
通过jQuery来获取、修改标签
<head>
<meta charset="UTF-8">
<title></title>
<style>
.color1{
background-color: red;
}
</style>
</head>
<body>
<div id="i1">aaa</div>
<div class="c1">11</div>
<div class="c1">22</div>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script> <!--导入jQuery-->
<script type="text/javascript">
//当页面框架加载完成之后
$(function () {
$('#i1').text('bbb') ; //找到id为i1的标签，修改内容
$('.c1').addClass('color1'); //找到类为c1的标签，添加样式color1
});
</script>
</body>
滚动条写法一、（jQuery+Dom）
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style>
.returnTop{
position: fixed;
width:70px;
height: 20px;
right: 20px;
bottom: 20px;
background-color: green;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div id="return_top" class="returnTop hide" onclick="Go();">返回顶部</div>
<div style="height: 1000px;">111111111111111</div>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script> <!--导入jQuery-->
<script type="text/javascript">
$(window).scroll(function(){ //滚动条
var height=$(window).scrollTop(); //获取滚动条高度
if(height>0){
//显示返回顶部
$('#return_top').removeClass('hide');
}else{
//隐藏返回顶部
$('#return_top').addClass('hide');
}
});
function Go(){
$(window).scrollTop(0); //当点击时，高度变为1，即可返回顶部
}
</script>
滚动条写法二、（jQuery）
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style>
.returnTop{
position: fixed;
width:70px;
height: 20px;
right: 20px;
bottom: 20px;
background-color: green;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div id="return_top" class="returnTop hide">返回顶部</div>
<div style="height: 1000px;">111111111111111</div>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script> <!--导入jQuery-->
<script type="text/javascript">
$(function(){
//页面框架加载完之后，默认执行
$('#return_top').click(function(){
$(window).scrollTop(0) //单击return_top标签，就会把滚动条高度0
})
})
$(window).scroll(function(){ //滚动条
var height=$(window).scrollTop(); //获取滚动条高度
if(height>0){
//显示返回顶部
$('#return_top').removeClass('hide');
}else{
//隐藏返回顶部
$('#return_top').addClass('hide');
}
});
</script>
</body>
左侧菜单
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<div onclick="Chan(this)">菜单一</div>
<div class="content">
<div>111111111</div>
<div>111111111</div>
<div>111111111</div>
</div>
</div>
<div>
<div onclick="Chan(this)">菜单二</div>
<div class="content hide">
<div>111111111</div>
<div>111111111</div>
<div>111111111</div>
</div>
</div>
<div>
<div onclick="Chan(this)">菜单三</div>
<div class="content hide">
<div>111111111</div>
<div>111111111</div>
<div>111111111</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script> <!--导入jQuery-->
<script type="text/javascript">
function Chan(arg){
$(arg).next().removeClass('hide'); //next()下一个标签
$(arg).parent().siblings().find('.content').addClass('hide'); //parent()父级标签,siblings()兄弟标签
}
</script>
</body>
</html>
复选框 实现 全选，反选，取消功能
<body>
<input type="button" value="全选" onclick="check_all()">
<input type="button" value="反选" onclick="check_reverse()">
<input type="button" value="取消" onclick="check_clear()">
<table>
<tbody id="tb1">
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>333</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
function check_all(){
//$('#tb1').find(':checkbox').attr('checked','checked'); 推荐用下面方法
$('#tb1').find(':checkbox').prop('checked',true);
};
function check_reverse(){
$('#tb1').find(':checkbox').each(function(){
if($(this).prop('checked')){ //$(this)每一个复选框
$(this).prop('checked',false);
}else{
$(this).prop('checked',true);
};
});
};
function check_clear(){
//$('#tb1').find(':checkbox').removeAttr('checked');
$('#tb1').find(':checkbox').prop('checked',false);
};
</script>
</body>
编辑页面
<head>
<meta charset="UTF-8">
<title></title>
<style>
.edit{
position: fixed;
left: 50%;
top: 30%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
background-color: #888888;
}
.hide{
display: none;
}
</style>
</head>
<body>
<table border="1">
<thead></thead>
<tbody>
<tr>
<td>rc01</td>
<td>10.10.0.1</td>
<td>22</td>
<td onclick="get_prev(this)">编辑</td>
</tr>
<tr>
<td>rc02</td>
<td>10.10.0.2</td>
<td>22</td>
<td onclick="get_prev(this)">编辑</td>
</tr>
<tr>
<td>rc03</td>
<td>10.10.0.3</td>
<td>22</td>
<td onclick="get_prev(this)">编辑</td>
</tr>
</tbody>
</table>
<div class="edit hide">
<form action="" method="get">
<p>主机名：<input type="text" id="hostname" value="123123" /></p>
<p>IP：<input type="text" id="ip" /></p>
<p>端口：<input type="text" id="port" /></p>
<input type="submit" value="提交" onclick="return send()"/> <!--return如果获取的是flase,则from不会执行-->
<input type="button" value="取消" onclick="cancle()" />
</form>
</div>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
function get_prev(arg){
var list = [];
$.each($(arg).prevAll(),function(i){ //循所有td标签
var item = $(arg).prevAll()[i]; //获取当前点击编辑旁边的所有标签
var text = $(item).text(); //获取标签中的内容
// console.log(text);
list.push(text); //以此把hostname,ip,port值加入到列表中
});
var new_list = list.reverse(); //把列中前后顺序对换
$('#hostname').val(new_list[0]); //把list中hostname值写入value
$('#ip').val(new_list[1]);
$('#port').val(new_list[2]);
$('.edit').removeClass('hide'); //去除hide，让编辑框显示
};
function cancle(){
$('.edit').addClass('hide'); //隐藏编辑框
};
function send(){
var ret = true;
// $('input[type="text"]') //等同于:text
$(':text').each(function(){ //循环前面获取的列表
var value = $(this).val(); //每次循环分别获取到相应input标签的value值
if (value.trim().length==0){ //trim()去除空格，长度等于0代表value值为空
$(this).css('border-color','red'); //如果该input value值为空，则把边框变为红色
ret = false; //如果有一个value值为空，就把ret设置为false阻止提交
}else{
$(this).css('border-color','green');
};
});
return ret
};
</script>
</body>
滚动章节页面
<body>
<div>
<div id="currentPosition" style="position:fixed;top:0px;right:0px;"></div>
<div>
<div class="chapter" style="height:500px;">
<h1>第一章</h1>
</div>
<div class="chapter" style="height:1500px;">
<h1>第二章</h1>
</div>
<div class="chapter" style="height:100px;">
<h1>第三章</h1>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){ //当滚动条滚动执行
var scroll_top=$(window).scrollTop(); //获取滚动条离顶部的高度
var list=[];
$.each($('.chapter'),function(i){ //循环执行3个chapter,i为每个chapter下标
var current_height=$($('.chapter')[i]).offset().top; //该chapter离整个页面的高度
list.push(current_height);
});
$.each(list,function(i){
if(scroll_top>list[i]){ //如果滚动条高度大于改chapter离整个页面的高度
$('#currentPosition').text($($('.chapter')[i]).text());
return;
};
if(scroll_top+$(window).height()==$(document).height()){ //针对第三章
$('#currentPosition').text($('.chapter').last().text());
return;
};
});
});
});
</script>
</body>