一、小例子——tab菜单
<!DOCTYPE html>
<html lang='en'>
<head><meta charset="UTF-8"><title></title><!-- line-height:33px; 让标题的内容居中显示 padding:5px; 边距--><style>.tab-box .box-menu{background-color:#dddddd;border:1px solid #000000;line-height:33px; padding:1px;}.box-menu a{border-right:1px solid #000000;} .tab-box .box-body{border:1px solid #dddddd;}.hide{display:none;}.zi_color{background-color:red;color:white;border-top:2px solid black;}</style>
</head><body><div class='tab-box'><dic class='box-menu'><!--所有的菜单--><a dy='c1' onclick="ChangeTab(this);" class='zi_color'>菜单1</a> <!--设置一个onclick属性，在点击链接的时候获取其属性‘c1’ 根据c1找到id是c1的内容，显示出来。根据c1找到c1的兄弟，让其隐藏 --> <a dy='c2' onclick="ChangeTab(this);">菜单2</a> <a dy='c3' onclick="ChangeTab(this);">菜单2</a> </div><div class='box-body'><!--所有的内容--> <div id='c1'>内容1</div> <div id='c2' class='hide'>内容2</div> <div id='c3' class='hide'>内容3</div> </div></div><script src='jQuery3.js'></script><script>function ChangeTab(ths){//获取当前点击的标签 $(ths)var contentId = $(ths).attr('dy');//$('#c1')var temp = "#" + contentId;$(temp).removeClass('hide').siblings().addClass('hide');$(ths).addClass('zi_color').siblings().removeClass('zi_color'); //获取当前标签的属性 dy对应的值//值 $('#XX') 显示 其他的兄弟 隐藏}
</script>
</body>
</html>二、属性
1、属性
设置自定义属性
$('#c1').attr('dy','xxxooo') 获取属性
var i = $('#c1').attr('dy')
undefined
i
"xxxooo"在jQuery2中，attr对所有标签都是用，除：checkbox和radio
针对checkbox和radio可以用prop
在jQuery3中已经试验过，attr对checkbox和radio也是适用的
prop
$('#a1').prop('checked',true) --->表示选中状态
$('#a1').prop('checked',false) ---> 表示为选中状态for循环
第一种
var userList = [11,22,33,44];
$.each(userList, function(i,j){console.log(i,j)
});第二种
$('table :checkbox').each(function(){var che_stat = $(this).prop('checked');if(che_stat){$(this).prop('checked',false);}else{$(this).prop('checked',true);}
});toggleClass
该属性有就去掉，没有就加上
<div id='nid'></div>
$('#nid').toggleClass('hide');
<div id='nid' class='hide'></div>
$('#nid').toggleClass('hide');
<div id='nid' class=''></div>2、内容操作
<div id='nid'>a阿萨德<a>爱仕达实打实</a>爱仕达收到</div>
$('#nid').html()
获取nid标签中的内容——'a阿萨德<a>爱仕达实打实</a>爱仕达收到'$('#nid').html('xxoo')
设置nid标签中的内容——<div id='nid'>xxoo</div>$('#nid').text()
只获取文本内容——"a阿萨德爱仕达实打实爱仕达收到"3、css
用来添加标签中style里的东西
$('#nid').css('color','red');scrollTop() 方法
定义和用法
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。offset() 方法
返回第一个匹配元素的偏移坐标。
该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。position() 方法
position() 方法返回匹配元素相对于父元素的位置（偏移）。
该方法返回的对象包含两个整型属性：top 和 left，以像素计。
此方法只对可见元素有效。width() 方法
width() 方法返回或设置匹配元素的宽度。
返回第一个匹配元素的宽度。
如果不为该方法设置参数，则返回以像素计的匹配元素的宽度。height() 方法
height() 方法返回或设置匹配元素的高度。
返回第一个匹配元素的高度。
如果不为该方法设置参数，则返回以像素计的匹配元素的高度
4、小例子
全选、取消、反选
<!DOCTYPE html>
<html lang='en'>
<head><meta charset="UTF-8"><title></title>
</head><body><input id='a1' type="checkbox"><input id='a2' type="checkbox" checked="checked"><div><input type="button" value="全选" onclick="quanXuan();"><input type='button' value="取消" onclick="quXiao();"><input type='button' value="反选" onclick="fanXuan();"></div><div><table border='1'><tr><td><input type="checkbox"></td><td>123</td><td>123</td></tr><tr><td><input type="checkbox"></td><td>123</td><td>123</td></tr><tr><td><input type="checkbox"></td><td>123</td><td>123</td></tr><tr><td><input type="checkbox"></td><td>123</td><td>123</td></tr></table></div><script src='jQuery3.js'></script>
<script>function quanXuan(){// table标签中的所有input//$("table input[type='checkbox']")//$('table :checkbox') 找到了所有的input，checkbox$('table :checkbox').prop('checked',true);}function quXiao(){$("table :checkbox").prop('checked',false);}function fanXuan(){var checkboxList = $('table :checkbox');/* 可以用另一种for循环 jQuery专用的 for(var i in checkboxList){var ele = checkboxList[i];//检查是否已经选中，如果已经选中 取消，如果已经取消，选中var che_stat = $(ele).prop('checked');if(che_stat){$(ele).prop('checked', false);}else{$(ele).prop('checked', true);}} *///jQuery特有的循环结构$('table :checkbox').each(function(){//每一个循环都执行这个方法//$(this) 表示当前循环的元素var che_stat = $(this).prop('checked');if(che_stat){$(this).prop('checked',false);}else{$(this).prop('checked',true);}});//jQuery中each的另一种用法，i代表索引，j代表值。如果userList是字典，i就是key，j就是valuevar userList = [11,22,33,44];$.each(userList, function(i,j){console.log(i,j)});}
</script>
</body>
</html>返回顶部
<!DOCTYPE html>
<html lang='en'>
<head><meta charset="UTF-8"><title></title><style>.go-top{position:fixed;right:0;bottom:0;width:100px;height:100px;}.hide{display:none;}</style>
</head><body><div style="height:2000px; background-color:#dddddd;">顶部<div id='dy1' style="height:0500px; background-color:red;overflow: auto;"><!--overflow: auto; 超出的部分会显示滚动条--><!-- $('#dy1').scrollTop(0) 可以用这种方式返回顶部 --><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p></div></div><div class="go-top hide"><a onclick="fan_hui_ding_bu();">返回顶部</a></div><script src='jQuery3.js'></script><script>//给整个窗体注册一个事件，每当滚动一次滑轮，就执行这个函数window.onscroll = function(){//获取当前scrollTop的值var now_top = $(window).scrollTop();if(now_top > 100){$('.go-top').removeClass('hide');}else{$('.go-top').addClass('hide');}};function fan_hui_ding_bu(){//返回顶部操作$(window).scrollTop(0);}</script>
</body>
</html>滚动菜单
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>body{margin: 0px;}img {border: 0;}ul{padding: 0;margin: 0;list-style: none;}.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.wrap{width: 980px;margin: 0 auto;}.pg-header{background-color: #303a40;-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);box-shadow: 0 2px 5px rgba(0,0,0,.2);}.pg-header .logo{float: left;padding:5px 10px 5px 0px;}.pg-header .logo img{vertical-align: middle;width: 110px;height: 40px;}.pg-header .nav{line-height: 50px;}.pg-header .nav ul li{float: left;}.pg-header .nav ul li a{display: block;color: #ccc;padding: 0 20px;text-decoration: none;font-size: 14px;}.pg-header .nav ul li a:hover{color: #fff;background-color: #425a66;}.pg-body{}.pg-body .catalog{position: absolute;top:60px;width: 200px;background-color: #fafafa;bottom: 0px;}.pg-body .catalog.fixed{position: fixed;top:10px;}.pg-body .catalog .catalog-item.active{color: #fff;background-color: #425a66;}.pg-body .content{position: absolute;top:60px;width: 700px;margin-left: 210px;background-color: #fafafa;overflow: auto;}.pg-body .content .section{height: 500px;}</style>
</head>
<body><div class="pg-header"><div class="wrap clearfix"><div class="logo"><a href="#"></a></div><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">功能一</a></li><li><a href="#">功能二</a></li></ul></div></div></div><div class="pg-body"><div class="wrap"><div class="catalog"><div class="catalog-item" auto-to="function1"><a>第1张</a></div><div class="catalog-item" auto-to="function2"><a>第2张</a></div><div class="catalog-item" auto-to="function3"><a>第3张</a></div></div><div class="content"><div menu="function1" class="section"><h1>第一章</h1></div><div menu="function2" class="section"><h1>第二章</h1></div><div menu="function3" class="section"><h1>第三章</h1></div></div></div></div><script type="text/javascript" src="jQuery3.js"></script><script type="text/javascript">window.onscroll = function(){var ws = $(window).scrollTop();if(ws > 50){$('.catalog').addClass('fixed');}else{$('.catalog').removeClass('fixed');}$('.content').children().each(function(){var offs = $(this).offset(); //离顶部是多少，离左边是多少var off_top = offs.top //离顶部的高度//当前标签离顶部高度 < 滚动条高度//当前标签离顶部高度+当前标签的高度 > 滚动条高度var total = off_top + $(this).height()if(ws>off_top && total>ws){ //如果拉动的距离大于标题到顶部的距离，就说明当前已经显示现在标题下的内容了//var tit = $(this).text()//console.log(tit)//如果滑轮滑到底部，最后一个标题增大//滑轮滚动的高度+window高度=整个网页的高度$(window).scrollTop() //滑轮的 高度$(window).height() //window的高度$(document).height() //整个网页的高度if($(window).scrollTop() + $(window).height() == $(document).height()){$('.catalog').children(':last').css('fontSize','48px').siblings().css('fontSize','12px');}else{var content_attr = $(this).attr('menu');var temp = 'div[auto-to="' + content_attr + '"]';$('.catalog').children(temp).css('fontSize','48px').siblings().css('fontSize','12px');return;}}});};/*$(function(){Init();});function Init(){$(window).scroll(function() {var scrollTop = $(window).scrollTop();if(scrollTop > 50){$('.catalog').addClass('fixed');}else{$('.catalog').removeClass('fixed');}$('.content').children().each(function(){var offSet = $(this).offset();var offTop = offSet.top - scrollTop;var height = $(this).height();if(offTop<=0 && offTop> -height){//去除其他//添加自己var docHeight = $(document).height();var winHeight = $(window).height();if(docHeight == winHeight+scrollTop){$('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active');}else{var target = $(this).attr('menu');$('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');}}});});}
*/</script>
</body>
</html>三、文档处理
内部插入
- append()
- appendTo()
- prepend()
- prependTo()
外部插入
- after()
- before()
- insertAfter()
- insertBefore()
删除
- empty()
- remove()
复制
- clone()
JQuery详细方法
四、事件
为所有的内容绑定事件
<!DOCTYPE html>
<html lang='en'>
<head><meta charset="UTF-8"><title></title>
</head><body><div onclick='func();'>点击</div><input type="button" value="添加" onclick="tian_jia();"><div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul></div><script src='jQuery3.js'></script><script>//jquery的绑定方式(如果绑定事件已经事先计划好的，适合这种方法)function tian_jia(){$('ul').append('<li>8</li>')/*$('li:last').click(function(){var temp = $(this).text();alert(temp);});*/}//这个方法和上面一样$('li').bind('click',function(){var temp = $(this).text();alert(temp);});//还有unbind undelegate等方法//另一种特殊的绑定方式(默认先不绑定，等到触发的时候在临时绑定，这样效率高)$('ul').delegate('li', 'click', function(){var temp = $(this).text();alert(temp); });//当前文档准备就绪，就执行方法//方法一$(document).ready(function(){//当前文档结构准备好了，但是文档的内容还没有准备好，就执行这里面的东西了});//方法二$(function(){//最基本的jQuery事件绑定//给多有的li绑定一个事件$('li').click(function(){var temp = $(this).text();alert(temp)});});</script>
</body>
</html>拖动面板
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title>
</head>
<body><div style="border: 1px solid #ddd;width: 600px;position: absolute;"><div id="title" style="background-color: black;height: 40px;">标题 </div><div style="height: 300px;">内容</div></div>
<script type="text/javascript" src="jQuery3.js"></script>
<script>//页面加载完成之后自动执行$(function(){$('#title').mouseover(function(){ //绑定了一个事件，在鼠标放在上面的时候触发$(this).css('cursor','move'); //执行的事件内容}).mousedown(function(e){ //e代表鼠标当前的位置，或是键盘按下的键，复制过程是jquery内部完成 键盘是keydown//console.log($(this).offset());var _event = e || window.event; //兼容性问题，有的浏览器没有e，没有的话就用eventvar ord_x = _event.clientX; //鼠标的原始位置var ord_y = _event.clientY;var parent_left = $(this).parent().offset().left;var parent_top = $(this).parent().offset().top;$(this).bind('mousemove', function(e){ //鼠标动的时候绑定事件var _new_event = e || window.event; //最新的XY轴var new_x = _new_event.clientX;var new_y = _new_event.clientY;var x = parent_left + (new_x - ord_x); //计算移动的位置var y = parent_top + (new_y - ord_y);$(this).parent().css('left',x+'px'); //this这里面是标题，为谁绑定事件，this就是谁$(this).parent().css('top',y+'px');})}).mouseup(function(){ //鼠标释放的时候解除事件$(this).unbind('mousemove');});})
</script>
</body>
</html>
五、AJAX初探
<!DOCTYPE html>
<html lang='en'>
<head><meta charset="UTF-8"><title></title>
</head><body><input id='n1' name="pp"><input type="button" value="提交" onclick="ti_jiao();"><form action="" method="post"><p><input type="text" name="user"></p><p><input type="password" name="pwd"></p><input type="submit" value="提交"></form><script src="jQuery3.js"></script><script>function ti_jiao(){//获取值var inp_val = $('#n1').val();var inp_name = $('#n1').attr('name');//ajax可以实现页面不刷新就实现数据的更新$.ajax({'url':"http://127.0.0.1:8000/index",data:{'kk':123},type:'POST',success:function(arg){ //后端的返回值，自动传给arg//当请求执行完之后，自动调用}，error:function(){//当请求失败之后，自动调用}})}</script>
</body>
</html>
