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 ...
随机推荐
- 灰度直方图及处理“cvQueryHistValue_1D”: 找不到标识符”的问题（上）
// HIstogram.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include "opencv2/opencv.hpp ...
- ANDROID自己定义视图——onLayout源代码 流程 思路具体解释
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 简单介绍: 在自己定义view的时候.事实上非常easy.仅仅须要知道3步骤: 1.測量- ...
- Mybatis上路_06-使用Java自动生成[转]
Mybatis上路_06-使用Java自动生成 11人收藏此文章, 我要收藏发表于1个月前(2013-04-24 23:05) , 已有151次阅读 ,共0个评论 目录:[ - ] 1．编写Gener ...
- Velocity入门系列
Velocity介绍 Velocity是一个java模板引擎,通过简洁的语法可以返回动态内容给浏览器使用,本系类是基于velocity官方文档(就是照着翻译,同时对不清楚的地方进行详细讲解),其实技术 ...
- 文件上传功能 -- jquery.form.js/springmvc
距离上一篇 文件上传下载样式 -- bootstrap(http://www.cnblogs.com/thomascui/p/5370947.html)已经三周时间了,期间一直考虑怎么样给大家提交一篇 ...
- ASP.NET之电子商务系统开发-4(二级分类)
一.前言 继上次的订单,这是第四篇.记录一下分类和筛选.这功能是最后做的,因为我完全不懂其原理.后来通过同学的指导(一位很有天赋的同学,比我牛逼一个层次,同样是高三.:D),终于也是完成了.在写这篇博 ...
- Mac搭建Java开发环境
参考博文: http://shupeng.org/2012/10/14/config-java-env-on-mac/ http://hdu104.com/23 注意事项: (Mac OS X - M ...
- hdu 2815 Mod Tree 高次方程，n不为素数
Accepted 406MS 8576K 2379 B C++/** 这里加了一点限制,,大体还是一样的,, **/ #include <iostream> #include <cs ...
- 8，SSO,，eager copy，COW
针对字符串不同的长度,“编译器”选择不同的优化策略:SSO, eager copy,COW,分别针对短字符串,中等长度字符串,长字符串.不过,现在(2016)的大多数编译器(gcc 4.9.1,vs2 ...
- npm常用命令详解
~~~https://www.npmjs.org/有比较全的api文档 NPM是一个Node包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准.有了NPM,可以很快的找到特定服务要使用的 ...