web开发之路——jQuery（下）
一、小例子——tab菜单
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>title>
<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'>菜单1a>
<a dy='c2' onclick="ChangeTab(this);">菜单2a>
<a dy='c3' onclick="ChangeTab(this);">菜单2a>
div>
<div class='box-body'>
<div id='c1'>内容1div>
<div id='c2' class='hide'>内容2div>
<div id='c3' class='hide'>内容3div>
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阿萨德爱仕达实打实爱仕达收到'
$('#nid').html('xxoo')
设置nid标签中的内容——<div id='nid'>xxoodiv>
$('#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、小例子
全选、取消、反选
<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>123td>
<td>123td>
tr>
<tr>
<td><input type="checkbox">td>
<td>123td>
<td>123td>
tr>
<tr>
<td><input type="checkbox">td>
<td>123td>
<td>123td>
tr>
<tr>
<td><input type="checkbox">td>
<td>123td>
<td>123td>
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就是value
var userList = [11,22,33,44];
$.each(userList, function(i,j){
console.log(i,j)
});
}
script>
body>
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;">
<p>asdp>
<p>asdp>
<p>asdp>
<p>asdp>
<p>asdp>
<p>asdp>
<p>asdp>
<p>asdp>
<p>asdp>
<p>asdp>
<p>asdp>
<p>asdp>
<p>asdp>
<p>asdp>
<p>asdp>
<p>asdp>
<p>asdp>
<p>asdp>
<p>asdp>
<p>asdp>
<p>asdp>
<p>asdp>
<p>asdp>
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>滚动菜单
<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详细方法
四、事件
为所有的内容绑定事件
<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>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
<li>6li>
<li>7li>
<li>8li>
ul>
div>
<script src='jQuery3.js'>script>
<script>
//jquery的绑定方式(如果绑定事件已经事先计划好的，适合这种方法)
function tian_jia(){
$('ul').append('8 ')
/*$('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>拖动面板
<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，没有的话就用event
var 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初探
<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>