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 ...
随机推荐
- 阻止长按复制页面中的内容；zepto中touch中的应用必须先加载event模块之后；
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Light Bulb（三分）
ZOJ Problem Set - 3203 Light Bulb Time Limit: 1 Second Memory Limit: 32768 KB Compared to wildl ...
- 关于css的默认宽度
<div class="boxa"> <div class="boxb">我是div</div> </div> ...
- ThinkPHP第十五天(setField、setInc、setDec、关联模型)
1.ThinkPHP中的比较特殊连贯操作 如果要更新某个字段可以用setField方法,比如M('user')->where('id=1')->setField('username','T ...
- 【转】IOS 输入框被键盘遮盖的解决方法
做IOS开发时,难免会遇到输入框被键盘遮掩的问题.上网上搜索了很多相关的解决方案,看了很多,但是由衷的觉得太麻烦了. 有的解决方案是将视图上的所有的东西都添加到一个滚动视图对象( UIScrollVi ...
- FPGA知识大梳理（四）FPGA中的复位系统大汇总
本文整合特权(吴厚航)和coyoo(王敏志)两位大神的博文.我也很推崇这两位大神的书籍,特权的书籍要偏基础一下,大家不要一听我这么说就想买coyoo的.我还是那一句话,做技术就要step by ste ...
- 网上下载的“上下3D”和“左右3D”影片该如何播放？
我们平常买的红蓝3D眼镜智能播放红蓝3D片源.网上找3D电影的时候,虽试图去找红蓝3D格式电影,但总会找到不少“左右格式”或者"上下格式"影片.正常播放后发现有两重画面.这种3D电 ...
- 帝国cms7.0调用出栏目下的东西
打开帝国后台,新建一个栏目,简历一个封面模板为 abc,套用一个封面栏目. [e:loop={"select * from {$dbtbpre}enewsclass where classi ...
- 64位linux下安装oracle10 64位 遇到 ：ins_ctx.mk ；ins_emdb.mk
http://blog.csdn.net/bamuta/article/details/10523835 http://www.cnblogs.com/kerrycode/p/3519446.html ...
- Struts2 中action之间的跳转(分享)
例如从你的login.action到register.action 有两种实现方式 1. 设置type="redirect" <package name="st ...