jQuery（二）
table 全选、反选、清除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select</title>
</head>
<body> <div>
<input type="button" value="全选" onclick="SelectAll();"/>
<input type="button" value="取消" onclick="ClearAll();"/>
<input type="button" value="反选" onclick="ReverseAll();"/>
</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="jquery-2.2.3.js"></script>
<script>
function SelectAll(){
// checked 设置默认是否选中
// 先找到所有table下的chekcbox,然后使用prop给checked设置ture 或者false
$('table :checkbox').prop('checked',true);
}
function ClearAll(){
$('table :checkbox').prop('checked',false);
}
function ReverseAll(){
// $table :checkbox 找到所有的checkbox,注意加空格.each循环后面的所有函数
$('table :checkbox').each(function(){ var isChecked = $(this).prop('checked');
if (isChecked){
$(this).prop('checked',false);
}else {
$(this).prop('checked',true);
}
})
}
</script>
</body>
</html>
选择li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="添加" onclick="AddContent();"/>
<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="jquery-2.2.3.js"></script>
<script>
function AddContent(){
$('ul').append('<li>9</li>')
}
//$(document).ready(function)(){代码区} 在DOM加载完成时运行的代码
//或者$(function($) {////});
// 你可以在这里继续使用$作为别名...
$(function(){
$('ul').delegate('li','click',function(){
var temp = $(this).text();
alert(temp);
})
})
</script>
</body>
</html>
修改css
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> body{
margin: 0;
}
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 0;
}
.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: 0;
}
.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="#">
<img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
</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 src="jquery-2.2.3.js"></script>
<script>
window.conscroll = function(){
var ws = $(window).scrollTop();
if (ws > 50){
$('.catalog').addClass('fixed');
}else {
$('.catalog').removeClass('fixed');
}
$('.content').children().each(function(){
var offs = $(this).offset();
var offTop = offs.top;
var total = offTop + $(this).height();
if (ws>offTop && total > ws){
if ($(window).scrollTop()+$(window).height()==$(document).height()){
$('.catalog').children(':last').css('fontSize','48px').siblings().css('fontSize','12px');
}else {
var t = $(this).attr('menu');
var target = 'div[auto-to="' + t + '"]';
$('.catalog').children(target).css('fontSize','48px').siblings().css('fontSize','12px');
return;
} }
});
}
</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;color: white;">
标题
</div>
<div style="height: 300px;">
内容
</div>
</div>
<script src="jquery-2.2.3.js"></script>
<script>
$(function(){
$('#title').mouseover(function(){
$(this).css('cursor' , 'move');
}).mousedown(function(e){
var _event = e || window.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;
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).parent().css('top' , y+'px'); })
}).mouseup(function(){
$(this).unbind('mousemove');
});
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
<style>
.tab-box .box-menu{
background-color: #9a9a9a;
border: 1px solid #5cb85c;
height: 30px;
}
.tab-box .box-body{
border: 1px solid #5cb85c;
height: 300px;
}
.hide{
display: none;
}
.current{
background-color: #18a689;
color: white;
}
</style>
</head>
<body>
<div class="tab-box">
<div class="box-menu">
<!--all menu-->
<a tx="c1" onclick="ChangeTab(this);">菜单一</a>
<a tx="c2" onclick="ChangeTab(this);">菜单二</a>
<a tx="c3" onclick="ChangeTab(this);">菜单三</a>
</div>
<div class="box-body">
<!--all content-->
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
<script src="jquery-2.2.3.js"></script>
<script>
function ChangeTab(ths){
// 当前标签增加current,其他移除
$(ths).addClass('current').siblings().removeClass('current');
// 获取当前标签的属性'tx',根据'tx'获取关联的id
var contentId = $(ths).attr('tx');
// 拼接获取的id
var temp = '#' + contentId;
// 给获取的id设置移除隐藏,其他增加隐藏
$(temp).removeClass('hide').siblings().addClass('hide');
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>top</title>
<style>
.go-top{
position: fixed;
width: 200px;
height: 200px;
right: 10px;
bottom: 10px; }
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height: 2048px">
<div style="background-color: #7cbe56;height: 500px">这里是顶部</div>
<div class="go-top hide"> <img src="top.jpg" alt="返回顶部" onclick="GoTop();"/>
</div>
</div>
<script src="jquery-2.2.3.js"></script>
<script>
window.onscroll = function(){
var currentTop = $(window).scrollTop();
if (currentTop>100){
$('.go-top').removeClass('hide');
}else {
$('.go-top').addClass('hide');
}
};
function GoTop(){
$(window).scrollTop(0);
} </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="获取节目" onclick="SubmitData();"/>
<div id="container"></div>
<script src="jquery-2.2.3.js"></script>
<script>
function SubmitData(){
$.ajax({
url:"http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403",
data:{},
type:'GET',
dataType:'jsonp',
jsonp:'callback',
jsonpCallback:'list',
success:function(arg){
console.log(arg);
var jsonArry = arg.data;
$.each(jsonArry,function(k,v){
var week = v.week;
var temp = '<h1>' + week + '</h1>';
$('#container').append(temp);
var listArray = v.list;
$.each(listArray,function(kk,vv){
var link = vv.link;
var name = vv.name; var tempNew = "<a href='" + link + "'>" + name + "</a><br/>";
$('#container').append(tempNew);
})
})
},
error:function(){}
})
}
</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="#">
<img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
</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="jquery-2.2.3.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 offTop = offs.top;
var total = offTop + $(this).height(); if(ws>offTop && total>ws){
if($(window).scrollTop()+$(window).height == $(document).height()){
$(".catalog").children(':last').css("fontSize",'48px').sibling().css("fontSize",'12px');
}else{
var t = $(this).attr('menu');
var target = 'div[auto-to="' + t +'"]';
$('.catalog').children(target).css("fontSize",'48px').siblings().css('fontSize','12px');
return;
} } }); }; </script>
</body>
</html>
jQuery（二）的更多相关文章
- 从零开始学习jQuery (二) 万能的选择器
本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...
- jquery二维码生成插件_二维码生成器
jquery二维码生成插件_二维码生成器 下载地址:jquery生成二维码.rar
- JQuery(二)——简单动画效果
上一篇博客总结了JQuery的一些基本知识,这篇博客重点从JQuery能够制造各种各样的网页效果方面来进行总结.总结一些常见的常用的基本效果的必备方法.从隐藏显示,淡入淡出,滑动,动画等几个方面来简单 ...
- jQuery(二) jQuery对Ajax的使用
学习使我快乐!嘿 --WH 一.jQuery使用Ajax 想要了解jQuery如何使用Ajax,并且体会到它所带来的方便性,那么就得了解原始的Ajax是如何编写的,是怎样的繁琐,然后和Jquery的代 ...
- 基于jquery二维码生成插件qrcode
1.首先在页面中加入jquery库文件和qrcode插件. ? 1 2 <script type="text/javascript" src="jquery.js& ...
- jQuery二维码
现在二维码很火,因为他可以很方便的贴到任何地方,只要扫一扫就可以看到二维码的内容 ok 废话少说,上代码 这个二维码基于jquery和jquery.qrcode插件 所以使用前先引入 <scri ...
- jquery二维码生成插件jquery.qrcode.js
插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 转载于:http://www.jq22.com ...
- jQuery二——属性操作、文档操作、位置属性
一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...
- JavaScript类库---JQuery(二)
接上: 6.Ajax: 一个基础底层函数:jQuery.ajax(); //高级工具函数都会调用此函数: 一个高级工具方法:load() ; 四个高级工具函数:jQuery.getScript ...
- 你不需要jQuery(二)
完全没有否定jQuery的意思,jQuery是一个神奇的.非常有用的工具,可以节省我们大量的时间. 但是,有些时候,我们只需要jQuery的一个小功能,来完成一个小任务,完全没有必要加载整个jQuer ...
随机推荐
- BASE64URL解析
BASE64URL是一种在BASE64的基础上编码形成新的加密方式,为了编码能在网络中安全顺畅传输,需要对BASE64进行的编码,特别是互联网中. BASE64URL编码的流程: .明文使用BASE6 ...
- 在 Visual C++ 中开发自定义的绘图控件
本文讨论的重点介于两者 之间 — 公共控件赋予您想要的大部分功能,但控件的外观并不是您想要的.例如,列表视图控件提供在许多视图风格中显示数据列表的方式 — 小图标.大图标.列表和详细列表(报告).然而 ...
- API各函数作用简介
API各函数作用简介 1.控件与消息函数 AdjustWindowRect 给定一种窗口样式,计算获得目标客户区矩形所需的窗口大小 AnyPopup 判断屏幕上是否存在任何弹出式窗口 ArrangeI ...
- BZOJ 1103 [POI2007]大都市meg（树状数组+dfs序）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1103 [题目大意] 给出一棵树,每条边的经过代价为1,现在告诉你有些路不需要代价了, ...
- SPOJ 220 Relevant Phrases of Annihilation（后缀数组+二分答案）
[题目链接] http://www.spoj.pl/problems/PHRASES/ [题目大意] 求在每个字符串中出现至少两次的最长的子串 [题解] 注意到这么几个关键点:最长,至少两次,每个字符 ...
- [置顶] 【cocos2d-x入门实战】微信飞机大战之四：飞机登场咯
转载请表明地址:http://blog.csdn.net/jackystudio/article/details/11757175 昨天收到了电子工业出版社寄过来的<cocos2d-x游戏开发之 ...
- HDU 4326Game(比较难理解的概率dp)
Game Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Subm ...
- xcode UIView常用方法属性动画
常见属性: @property(nonatomic,readonly) UIView *superview; 获得自己的父控件对象 @property(nonatomic,readonly,copy) ...
- window.showModalDialog刷新父窗口和本窗口的方法及注意
window.showModalDialog刷新父窗口和本窗口的方法及注意: 一.刷新父窗口的方法: A.使用window.returnValue给父窗口传值,然后根据值判断是否刷新. 在w ...
- SqlServer 2015修改表时出现“save changes is not permitted…”的解决方法
使用SqlServer 2015的过程中,会出现如下情况: 在修改完表字段名或是类型后点击保存时会弹出一个对话框,且无法保存已做的修改.对话框内容大致如下: Saving changes is not ...