jquery的一些入门实例
来源：互联网 发布：mysql创建学生信息表 编辑：程序博客网 时间：2024/06/06 18:29
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(//类似于windows.onload,在DOM结构绘制完毕后就执行
function(){
$("p").click(function(){//添加点击函数
$(this).hide();
});
});
$(document).ready(//ready函数为document函数添加时间处理函数
function(){
$('ul').css('color','red');
});
$(
function(){
alert("welcom to jquery");
});
$(document).ready(function(){
//如果鼠标移到class为stripe的表格的tr上时，执行函数
$(".stripe tr").mouseover(function(){
$(this).addClass("over");} ).mouseout(function(){$(this).removeClass("over");
});
//给class为stripe的表格的偶数行添加class值为alt
$(".stripe tr:even").addClass("alt");
});
//$(function(){$("#selectID").css("background-color","#ccc");});//id=selectID
$(function(){$(".selectClass").css("background-color","yellow");});//class=selectClass
//$(function(){$("div").css("background-color","blue");});//类型
$(document).ready(function(){
$("#tabTest tr:even").addClass("tabEven");//给id=tabTest的表格tr偶数添加样式
$("#tabTest tr:odd").addClass("tabOdd");//奇数
});
</script>
<style>
th {
background:#0066FF;
color:#FFFFFF;
line-height:20px;
height:30px;
}
td {
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
td * {
padding:6px 11px;
}
tr.alt td {
background:#ecf6fc; /*这行将给所有的tr加上背景色*/
}
tr.over td {
background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/
}
.tabEven{
background:#ff0000;
}
.tabOdd{
background:#00ff00;
}
</style>
<script type="text/javascript">
$(documnet).ready(function(){ load();});
function load(){
var controlShow = function(){
if($("#cbType1").atrr("checked")==true){
$("#cbType1Asc").css("display","inline-block");
$("#labTye1Asc").css("display","inline-block");
}else{
$("#cbType1Asc").css("display","none");
$("#labTye1Asc").css("display","none");
}
if($("#cbType2").atrr("checked")==true){
$("#cbType2Asc").css("display","inline-block");
$("#labTye2Asc").css("display","inline-block");
}else{
$("#cbType2Asc").css("display","none");
$("#labTye2Asc").css("display","none");
}
if($("#cbType3").atrr("checked")==true){
$("#cbType3Asc").css("display","inline-block");
$("#labTye3Asc").css("display","inline-block");
}else{
$("#cbType3Asc").css("display","none");
$("#labTye3Asc").css("display","none");
}
}
//绑定函数的两种形式
$("#cbType1").click(function(){controlShow();});
//$("#cbType1").bind('click',function(){controlShow();});
//$("#cbType1").bind('click');//解除了id=cbType1的click事件
$("#cbType2").click(function(){controlShow();});
$("#cbType2").click(function(){controlShow();});
}
</script>
</head>
<body>
<p>如果您点击我，我会消失。</p>
<p id="p1">点击我，我会消失。</p>
<p class="p2">也要点击我哦。</p>
<ul>
<li>jquery</li>
<li>jquery</li>
<li>jquery</li>
<li>jquery</li>
</ul>
<input value="1"/>+
<input value="2"/>
<input type="button" value="="/>
<label></label>
<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
<!--用class="stripe"来标识需要使用该效果的表格-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
<tr>
<td>邓国梁</td>
<td>23</td>
<td>31540205</td>
<td>gl.deng@gmail.com</td>
</tr>
</tbody>
</table>
<div id="selectID" class="selectClass" style="width:100px;height: 100px;background-color: #000"></div>
<form style="border: 1px solid #ccc;padding: 5px;">
<label>label--1</label>
<div>div--1</div>
<label>label--2</label>
<span><div>div--2</div></span>
<label>label--3</label>
</form>
<table id="tabTest">
<tbody>
<tr><td>*******************</td><td>-----------------</td></tr>
<tr><td>*******************</td><td>-----------------</td></tr>
<tr><td>*******************</td><td>-----------------</td></tr>
<tr><td>*******************</td><td>-----------------</td></tr>
<tr><td>*******************</td><td>-----------------</td></tr>
</tbody>
</table>
<p>排序方式</p>
<form>
方法一：<input type="checkbox" id="cbType1">A
<input type="checkbox" id="cbType1Asc">卖家信誉从高到低
<input type="checkbox" name="labType1Asc">食品价格从低到高
方法二：<input type="checkbox" id="cbType2">B
<input type="checkbox" id="cbType2Asc">卖家信誉从高到低
<input type="checkbox" name="labType2Asc">食品价格从低到高
方法三: <input type="checkbox" id="cbType3">C
<input type="checkbox" id="cbType3Asc">卖家信誉从高到低
<input type="checkbox" name="labType3Asc">食品价格从低到高
</form>
</body>
</html>
- jquery的一些入门实例
- jquery的一些实例
- jquery的一些小小实例
- jQuery formValidator的一些验证实例
- cad二次开发的一些简单入门实例
- 一些jQuery 实例
- JQuery入门实例
- JQuery入门实例1
- jquery树入门实例
- Jquery Ztree3.5入门实例
- JavaScript和Jquery入门实例
- jquery + ajax + json入门实例
- JQuery入门指南(2):一些常用的特效
- JQuery入门常用的一些方法、表单操作、正则验证
- JQuery实战---初识JQuery+入门实例
- jQuery中文入门指南，翻译加实例，jQuery的起点教程(一)
- jQuery中文入门指南，翻译加实例，jQuery的起点教程
- jQuery中文入门指南，翻译加实例，jQuery的起点教程
- 伏特加看是否已开始妇姑荷箪食
- 第2章 循环结构程序设计 习题
- js实现局部打印及其打印预览
- Navicat 设置主键自增 自动增长 Navicat中怎么设置主键自增长？
- 开源网络库 GCDAsyncSocket
- jquery的一些入门实例
- Android四种操作模式
- TinyXml快速入门（二）
- 16、android开源框架之android-pullToRefresh详解
- Redhat linux 6 update 4上安装oracle 11g R2
- Linux GCC常用命令
- php图片压缩
- Java.lang.OutOfMemoryError是什么
- hdoj.1040 As Easy As A+B 20140722
