下面整理了下，自己在学习这些知识中遇到的一些比较常用的知识点，所以整理了一下，当然还有很多不足的，这只是部分的知识点，我会在遇到了新的时候，再继续进行更新。欢迎大家与我共同一起学习！
1：JS中的创建对象，有如下方式：
（1）：单体模式 ，，，比如：
var text1 = {
name : '小明',
age : 20,
showname : function () {
alert('我的名字' + this.name)
},
showage : function () {
alert('我的年龄' + this.age)
}
}
alert(text1.name);
text1.showage();
text1.showage()（2）：工厂模式
function Person(name , age) {
var people = new Object();
people.name = name;
people.age = age;
people.showname = function () {
alert('名字' + this.name)
};
people.showage = function () {
alert("年龄" + this.age)
}
}
var Tom = Person('tom' , 20);
Tom.showage();
Tom.showname();（3）：构造函数
function Person(name , age) {
this.name = name;
this.age = age;
this.showname = function () {
alert('名字' + this.name)
};
this.showage = function () {
alert("年龄" + this.age)
}
}
var Tom = new Person('tom' , 20);
Tom.showage();
Tom.showname();（4）原型模式
function Person(name , age) {
this.name = name;
this.age = age;
}
Person.propertype.showname = function () {
alert('我的名字' + this.name)
}
Person.propertype.showage = function () {
alert('我的名字' + this.name)
}
var Tom = new Person('tom' , 20);
Tom.showage();
Tom.showname();2：JS中的继承（开发中，感觉用的不是很多，除非公司里面有一套要自己进行开发的模块）
function fclass(name , age ) {
this.name = name;
this.age = age;
}
fclass.propertype.showname = function () {
alert('我的名字' + this.name)
}
fclass.propertype.showage = function () {
alert('我的名字' + this.name)
}
function sclass(name , age ,job) {
fclass.call(this , name , age);
this.job = job ;
}
sclass.propertype = new fclass();
sclass.propertype.showjob = function () {
alert('我的工作' + this.job)
}
var Tom = new sclass('tom' , 20 ,'工程师');
Tom.showage();
Tom.showname();
Tom.showjob();jQuery基础知识
（1）加载的方式（三种，掌握最简单的一种即可）
//JQ的加载比JS加载要快！(当整个dom树结构绘制完毕就会加载)
jQuery(document).ready(function(){
alert("李四");
});
//JQ不存在覆盖问题，加载的时候是顺序执行
$(document).ready(function(){
alert("王五");
});
//简写方式
$(function(){
alert("汾九");
});（2）JQ对象向DOM对象转换
//JQ对象向DOM对象转换方式一
$("#span1").get(0).innerHTML="美美哒！";
//JQ对象向DOM对象转换方式二
$("#span1")[0].innerHTML="棒棒哒！";
});
});
</script>
</head>
<body>
班长：<span id="span1">你好帅！</span>（3）DOM对象转为JQ对象（html还是用的上面的例子）
//将DOM对象转换成JQ对象
$(spanEle).html("思密达");（4）JQ的基本选择器使用
<script>
$(function(){
$("#btn1").click(function(){
$("#one").css("background-color","pink");
});
$("#btn2").click(function(){
$(".mini").css("background-color","pink");
});
$("#btn3").click(function(){
$("div").css("background-color","pink");
});
$("#btn4").click(function(){
$("*").css("background-color","pink");
});
$("#btn5").click(function(){
$("#two,.mini").css("background-color","pink");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择为one的元素"/>
<input type="button" id="btn2" value="选择样式为mini的元素"/>
<input type="button" id="btn3" value="选择所有的div元素"/>
<input type="button" id="btn4" value="选择所有元素"/>
<input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
（5）JQ层级选择器的使用
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("body div").css("background-color","gold");
});
$("#btn2").click(function(){
$("body>div").css("background-color","gold");
});
$("#btn3").click(function(){
$("#two+div").css("background-color","gold");
});
$("#btn4").click(function(){
$("#one~div").css("background-color","gold");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择body中的所有的div元素"/>
<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>1）标签之间没有符号，则是取到前者标签元素的儿子，孙子，重孙子的相对应的标签
2）标签之间>符号，则是取到前者符号对应的儿子标签
3）标签之间的+符号，则是取到前者标签的同桌标签
4）标签之间的~符号，则是取到前者的兄弟标签
（6）JQ的过滤选择器（HTML还是用的上面的内容）
<script>
$(function(){
$("#btn1").click(function(){
$("body div:first").css("background-color","red");
});
$("#btn2").click(function(){
$("body div:last").css("background-color","red");
});
$("#btn3").click(function(){
$("body div:odd").css("background-color","red");
});
$("#btn4").click(function(){
$("body div:even").css("background-color","red");
});
});
</script>
<script>
$(function(){
$("#btn1").click(function(){
$("div[id]").css("background-color","red");
});
$("#btn2").click(function(){
$("div[id='two']").css("background-color","red");
});
});
</script>
<form>
<input type="button" value="Input Button"/>
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>2）匹配所有的单行文本框 解析：$('：text')
3）匹配所有单选按钮 解析：$('：radio')
4）匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) 解析：$(' input：checked')
5）查找所有选中的选项元素 解析：$('select option ： select'ed)
（9）JQ实现全选/全不选
3：用jQuery实现选项卡（相比用原生的js来写方便很多），要记得引用jQuery的jar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选项卡</title>
</head>
<style type="text/css">
.div2 div{
text-align: center;
width: 500px;
height:500px;
display: none;
border: 1px solid red;
background-color: green;
line-height: 300px;
}
.div2 div.active{
display: block;
}
.div2{
width: 300px;
height:300px;
}
.div1 input{
width: 100px;
background-color:rosybrown;
}
.div1 input.selete{
background-color:red;
}
</style>
<script type="text/javascript" src="/static/MyDjango/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$('.div1 input').click(function () {
$(this).addClass('selete').siblings().removeClass('selete');
$('.div2 div').eq($(this).index()).addClass('active').siblings().removeClass('active');
});
})
</script>
<body>
<div class="div1">
<input type="button" value="选项一" class="selete">
<input type="button" value="选项二" >
<input type="button" value="选项三" >
</div>
<div class="div2">
<div class="active">我是内容一</div>
<div >我是内容二</div>
<div >我是内容三</div>
</div>
</body>
</html>（1）：获取标签中的HTML内容：比如
<div class="div1">我的html内容:哈哈哈</div>
alert($('.div1').html());还有就是 alert($('.div1').text()); 这只会获取标签中的文字内容与html（）方法的区别（2）：获取标签中的属性：比如
<div class="div1">我的html内容:哈哈哈</div>
alert($('.div1').attr('class'));（3）：获取标签设置的属性（如checkbox的checked），比如
<input type="checkbox" class="box" name="box" value="点我呀" checked>
$('.box').prop('checked')（4）：设置标签中的属性（其实就是类似操作CSS伪类一样，通过键值对的形式），比如
$('.div').html('<a>我是一个链接</a>>');$('.div').attr({title : '这是一个div哦'});$('.box').prop({checked:true});5：jQuery的特效
比如：：fadeout()淡出 ，，fadeToggle（）却换淡入淡出 ， hide（）隐藏元素，，show（）显示元素等等。。。还有挺多的
6：jQuery的动画
例如：$('.div1').animate({width:200 , height:200},1000，'swing' , function(){ }) //参数一是要进行的变化，参数二是变化的时间，参数三是中间快，开始和结束慢，还有就是靠阳用linear，就是所有都匀速。默认是swing。。参数四是回调函数，用来动画完了的操作
7：获取标签的绝对位置：var $position = $（'.div1'）.offset() ，，然后可以得到$position.left （左边的距离） ，$position.top（距离上边的距离）
8：（1）获取窗口可视区的高度：$(window).height()
（2）获取页面的高度：$(document).height()
（3）获取滚动左边距离：$(document).scrollLeft()
（4）获取滚动顶部距离：$(document).scrollTop()
（5）页面滚动事件：$(window).scroll(function(){ })
（6）添加计时器：setInterval（funciton（）｛｝ ， 1000） //第一个参数：是操作的内容，第二个参数：是执行的间隔时间
还有个方法就是setTimeout（），，功能类似
9：标签监听事件：
（1）鼠标移入（进入子元素也触发）：mouseover（）
（2）鼠标移出（移出子元素也触发）：mouseout（）
（3）鼠标移入（进入子元素不触发）：mouseenter（）
（4）鼠标移出（移出子元素不触发）：mouseleave（）
（5）点击事件：click（），同时双击还有个事件：dblclick（）
（6）消除由于多次事件发生产生的冒泡事件的处理：在调用事件前，先调用stop（）方法，即例如：
$('.div1')..mouseover(function(){
$（this）.stop().animate({left：50});
});
（7）元素失去焦点：blur（）
（8）元素获取到焦点时：focus（）
（9）表单元素中的值变化：change（）
（10）鼠标按下：mousedown（）
（11）鼠标松开：mouseup（）
（12）鼠标在元素内部移动：mousemove（）
（13）对应的就有键盘的按下和松开：keypress（）和keyup（）
（14）浏览器窗口大小发生变化：resize（），一般这个用于window对象中来进行
（15）用户选中文本框中的内容：select（）
（16）用户递交表单:：submit（）
（17）用户离开页面：unload（）
10：标签绑定事件的方法：
（1）用标签。事件名的一般写法
（2）将多个事件绑定到同一个标签上，这种方法适合多个事件同时绑定。例如：
$('.div1').bind('click mouseover' , function () {
alert("hello world")
})上面实现了，同时绑定点击和鼠标进入到一个div的事件。。 如果想要接触绑定事件，则可以：
$('.div1').bind('click mouseover' , function () {
alert("hello world")
$(this).unbind('mouseover')
})11：自定义标签事件：例子：
//绑定事件，自定义名字叫做myevent
$('.div1').bind('myevent', function () {
alert("自定义的事件")
})
//当点击其他的一个标签为div2时，则触发myevent事件,当然可以设置任何要进行触发自定义事件的标签和时机
$('.div2').click(function () {
$('.div1').trigger('myevent');
}) 12：事件冒泡（很重要），这个原理就是会将子元素的事件往父元素进行传递。
（1）阻止事件冒泡：
$('div1').click(function (event) {
event.stopPropagation();
})$('document').contextmenu(function (event) {
event.preventDefault();
})13：将消息打印到浏览器中进行查看：console..log（"加消息内容"）
14：事件委托（重要），就是将需要绑定事件的子元素，通过父元素来进行实现。比如：
//实现一个序表，将li中的点击事件通过ul来实现
//参数一：要进行委托事件的对象
//参数二：要进行委托的事件
//参数三：进行的操作
$('.current').delegate('li' , 'click' , function () {
alert($(this).html());
})
//html内容
<ul class="current">
<li><a href="#">苹果</a></li>
<li><a href="#">梨子</a></li>
<li><a href="#">葡萄</a></li>
<li><a href="#">火龙果</a></li>
</ul> //上面的等价于：$('.current li').click(funciton(){ 操作的内容 }) 效率没有上面的高（1）append（）：在当前元素内部从后面添加节点。例：$span = $('<span>我是span</span>'); $('.div1').append($span);
（2）appendTo（）：在当前元素内部从后面添加节点。例：$span.appendTo('.div1');
（3）prepend（）：在当前元素内部，从前面添加节点。
（4）prependTo（）：在当前元素内部，从前面添加节点。
（5）defore（）：插入到某元素外部前面。
（6）insertBefore（）：插入到某元素外部前面
（7）after（）：插入到某个元素的后面
（8）insertAfter（）：插入到某个元素的后面
（9）remove（）：删除元素。例：$('.div1').remove（）；
下面有个简单的例子可以帮助大家理解理解，这个在动态改变方面还是很有作用的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>规划自己的计划</title>
</head>
<style type="text/css">
.content{
width: 400px;
margin: 50px auto 0 ;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:30px;
line-height:30px;
border-bottom:1px solid #ccc;
}
.list li span {
margin-left: 0px;
}
.list li a{
float:right;
text-decoration: none;
margin: 0 10px;
}
.addtext{
width: 320px;
height: 20px;
}
</style>
<script type="text/javascript" src ="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function() {
var $btn = $('.addbtn');
//按钮的点击事件
$btn.click(function(){
//得到输入框的内容(下面这个方法只能读取，而不能进行设置值)
var contentinput = $('#addtext').val();
if(contentinput == ''){
alert('请输入内容！');
return;
}
//新增一个节点
var $sli = $('<li><span>'+contentinput+'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>')
//将节点添加到对应的父节点中
$sli.appendTo($('#list'));
//添加完之后再将输入框的内容清空，方便下次添加内容
document.getElementById('addtext').value = '';
});
//设置删除的点击事件(这样的话有个问题，就是新增的节点无法有这样的操作)
/*
$('.del').click(function() {
alert("111");
});
*/
//由于上面的原因，所以要采用事件委托的方式来进行
$('#list').delegate('a' , 'click' , function() {
var type = $(this).attr('class');
//判断当前要操作的类型
if(type == 'del'){ //删除操作
$(this).parent().remove();
}
else if(type == 'up'){ //上移操作
//判断是否在最上面
if($(this).parent().prev().length == 0){
alert("当前已经时最上面了，不能移动了哦");
return ;
}
$(this).parent().insertBefore($(this).parent().prev());
}
else if(type == 'down'){ //下移操作
if($(this).parent().next().length == 0){ //得到当前标签是否还有同级的标签，如果没有则就表示时最后一个了
alert("当前已经时最下面了，不能移动了哦");
return ;
}
$(this).parent().insertAfter($(this).parent().next());
}
})
})
</script>
<body>
<div class="content">
<h1>To do Plan</h1>
<input type="text" class="addtext" id="addtext">
<input type="button" value="增加" class="addbtn" id="addbtn">
<ul class="list" id="list">
<li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
</ul>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax学习</title>
</head>
<script type="text/javascript" src ="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//用ajax请求公开的接口数据
//该例子功能：通过360的一个搜索jsonp接口，然后当输入c的时候，获取360网页搜素框弹出来的内容
$.ajax({
url:'http://sug.so.360.cn/suggest?', //需要请求的url链接
type:'get', //请求的方式，还有post
dataType:'jsonp', //数据类型为jsonp，这里还可以为xml，html，json都可以
data:{word:'c'} //这是设置一下关键字
})
//当请求成功执行下面：
.done(function(data) {
//将请求到的数据显示出来,jQuery知识中的添加节点
for(var i =0 ; i <data.s.length ; i++){
var $li = $('<li>'+data.s[i]+'</li>');
$li.appendTo($('.list'));
}
})
//请求失败执行下面：
.fail(function() {
alert("fail");
})
</script>
<body>
<ul class="list" id="list">
</ul>
</body>
</html>17：针对上面的内容，我这里在写一个简单又经常碰到的例子，就是关键字搜索框（界面简单，自己可以进行修改，关键在于知识点）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax学习</title>
</head>
<script type="text/javascript" src ="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//实现一个简易版的搜索框事件
$(function () {
$('.inputkey').keyup(function() {
var values = $('.inputkey').val();
//用ajax请求公开的接口数据
//该例子功能：通过360的一个搜索jsonp接口，然后当输入c的时候，获取360网页搜素框弹出来的内容
$.ajax({
url:'http://sug.so.360.cn/suggest?',
type:'GET',
dataType:'jsonp',
data:{ word : values} //这是设置一下关键字
})
//当请求成功执行下面：
.done(function(data) {
$('.list').empty();
//将请求到的数据显示出来,jQuery知识中的添加节点
for(var i =0 ; i <data.s.length ; i++){
var $li = $('<li>'+data.s[i]+'</li>');
$li.appendTo($('.list'));
}
})
//请求失败执行下面：
.fail(function() {
alert("fail");
})
})
})
</script>
<body>
<input type="text" id ="inputkey" class="inputkey">
<ul class="list" id="list">
</ul>
</body>
</html>（1）定义正则表达式
//第一种方法：
var re = new RegExp('a' , 'ig'); //第一个参数：匹配的字符 参数二：匹配的要求
//第二种方法：
var re2 = /a/ig;
//功能：验证是否匹配，用到test（）函数
var str = 'abc';
alert(re2.test(str));（2）常用的转义字符匹配
\d：匹配一个数字，即0-9
\D：匹配一个非数字
\w：匹配一个单词
\w:匹配一个非单词
\s:匹配一个空白符
\S:匹配一个非空白符
\b:匹配单词边界
\B:匹配非单词边界
.:匹配任一字符
\1:重复子项
[abc1233]：匹配字符串中任意一个
[a-z0-9]：匹配其中的任意一个
{5，15}：表示为5到15位
（3）限制开头和结尾，即用^符号和$
（4）常用的函数
1：test（），，这是一种懒惰匹配
2：search（‘正则’），匹配成功，则返回正则匹配到的位置
3：match（‘正则’）：匹配成功，则返回匹配到的数组
4：replace（‘正则’ ，新的字符串）：匹配成功则进行替换，这一般可以用来过滤敏感词
19：jQuery自动生成表格中的序号（HTML+jQuery+Django）
我想这个功能应该看到过，就是当看到一个表格的时候，表格的第一列是序号，对应着就是数据的次序数了，从1---N不等，，开始碰到这个的时候，自己挺傻的，因为在查到数据后，由于数据段中是不含序号这个字段的，而且这些数据的条数都改变的，当然需要自动生成了，所以开始自己的做法是将得到的数据后，又封装到一个Bean层中，然后把Bean层的对象添加到变量再传到页面中，这样就能够在获取对象的时候用Bean中的序号字段了，这样当然就可以自动生成对应条数的数据所对应的序号了。。真是傻，后面突然就想到，怎么就不知道用jQuery来实现了，jQuery的强大就在于它能够动态控制页面中的内容啊（类似的还有aJax这个的强大用法，页面布局刷新），这不就一下就可以做到嘛，然后抱着试一下的态度，一改代码，一次性通过就达到了和之前的效果，真的绝望，后面想了想，还好至少自己知道了两种实现的方法，虽然这次是只要序号，如果以后还要加什么表格列对应要显示的内容的话，那么用Bean层封装数据再传也比较好，因为有时候这样封装对数据处理还是有很大的帮助的。下面就讲下jQuery的实现方法。（注意一下：我这后台是用python的Django框架写的，所以和JavaWeb中的JSP页面还是有区别的，如果是JSP那么直接用JSTL标签中的foreach标签就一下实现了，自带一个索引，所以注意一下）
（1）HTML代码（截取了自己页面中的部分，关键也在这里就够了）
<tbody class="assistantshow-table-tbody" id="assistantshow-table-tbody">
{% for everydata in dbinfoDatda %}
<tr>
<td></td>
<td>{{ everydata.assistant_number }}</td>
<td>{{ everydata.assistant_name }}</td>
<td>{{ everydata.class_number }}</td>
<td>
<a href="#" data-toggle="modal" data-target="#modal01"><span class="glyphicon glyphicon-trash"></span>删除</a>
<a href="#" data-toggle="modal" data-target="#modal02"><span class="glyphicon glyphicon-refresh"></span>更新</a>
</td>
</tr>{% endfor %}
</tbody>$(function() {
/**
* 自动生成显示助教信息表格中的编号（这种方法很好）
*/
var strlength = $('#assistantshow-table-tbody tr').length;
for(var i= 0 ; i < strlength ; i++){
$('#assistantshow-table-tbody tr:eq('+i+') td:first').text(i+1);
}
｝）http://www.cnblogs.com/picaso/archive/2012/10/08/2715564.html
20：原生JS实现全选/全不选
（1）HTML
<input type="checkbox" id="selectcontro" οnclick="seleteIsAll(this.checked)">全选/全不选
（2）JS代码
//全选和全不选的控制
function seleteIsAll(flag) {
var checkselecte = document.getElementsByName("addismessage");
for(var i = 0 ;i<checkselecte.length;i++){
checkselecte[i].checked = flag;
}
}方法二：通过JQ简单的实现
<script>
$(function(){
$("#select").click(function(){
//获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
//attr方法与JQ的版本有关，在1.8.3及以下有效。
//$("tbody input").attr("checked",this.checked); //注意点
$("tbody input").prop("checked",this.checked);
});
});
</script>
</head>
<body>
<table border="1" width="500" height="50" align="center" id="tbl" >
<thead>
<tr>
<td colspan="4">
<input type="button" value="添加" />
<input type="button" value="删除" />
</td>
</tr>
<tr>
<th><input type="checkbox" id="select"></th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr >
<td><input type="checkbox" class="selectOne"/></td>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
</tbody>
</table>
（1）jQuery代码
//点击按钮，增加添加助教信息的表格，方便一次添加多条信息
$('#addassistanttablenumber').click(function () {
var $str = $('<tr>');//添加一行
var $content = $('#tablecountid'); //得到目前table条目的个数
$number = parseInt($content.val()) + 1;
//拼接增加行的内容
var content = '<td><input type="checkbox" name="addismessage" value="'+$number+'"></td> ' +
'<td><input type="text" name="assistantNumber'+$number+'" id="assistantNumber'+$number+'"></td>' +
'<td><input type="text" name="assistantName'+$number+'" id="assistantName'+$number+'"></td>' +
'<td><input type="text" name="assistantClass'+$number+'" id="assistantClass'+$number+'"></td>' +
'<td> <a href="#" data-toggle="modal" data-target="#modal03"><span class="glyphicon glyphicon-ok"></span>添加</a> </td>';
var $std = $str.html(content);
$std.appendTo($('#assistantaddd-table-tbody'));
document.getElementById('tablecountid').value = $number;
alert("添加条目成功!");
}) <form action="" method="post" id="addtable-form" enctype="multipart/form-data">
<div class="table-responsive">
{% csrf_token %}
<input type="hidden" name="tablecount" value="1" id="tablecountid">
<input type="hidden" id="tableinfoindex" name="tableinfoindex">
<table class="table table-bordered assistantadd-table">
<thead>
<tr class="assistantadd-table-tr">
<th><input type="checkbox" id="selectcontro" οnclick="seleteIsAll(this.checked)">全选/全不选</th>
<th>助教学号</th>
<th>助教姓名</th>
<th>助教班级</th>
<th>操作</th>
</tr>
</thead>
<tbody class="assistantadd-table-tbody" id="assistantaddd-table-tbody">
<tr>
<td><input type="checkbox" name="addismessage" value="1"></td>
<td><input type="text" name="assistantNumber1" id="assistantNumber1"></td>
<td><input type="text" name="assistantName1" id="assistantName1"></td>
<td><input type="text" name="assistantClass1" id="assistantClass1"></td>
<td>
<a href="#" data-toggle="modal" data-target="#modal03"><span
class="glyphicon glyphicon-ok"></span>添加</a>
</td>
</tr>
</tbody>
</table>
</div>
</form>注解：这里我运用的只是一个小细节，就是在表单中用了一个隐藏的<input>，这个功能主要是用来标记有多少个表格行了，这样我才好对表格中的输入框的属性进行相应的设置，否则在表单提交过后，处理数据则不方便。当然还有其他的方法，这只是其中的一种。
22：JQ实现省市二级联动的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成省市二级联动</title>
<style type="text/css">
.top{
border: 1px solid red;
width: 32.9%;
height: 50px;
float: left;
}
#clear{
clear: both;
}
#menu{
border: 1px solid blue;
width: 99%;
height: 40px;
background-color: black;
}
#menu ul li{
display: inline;
color: white;
font-size: 19px;
}
#bottom{
text-align: center;
}
#contanier{
border: 1px solid red;
width: 99%;
height: 600px;
background: url(../img/regist_bg.jpg);
position: relative;
}
#content{
border: 5px solid gray;
width: 50%;
height: 60%;
position: absolute;
top: 100px;
left: 300px;
background-color: white;
padding-top: 50px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//2.创建二维数组用于存储省份和城市
var cities = new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
$("#province").change(function(){
//10.清除第二个下拉列表的内容
$("#city").empty();
//1.获取用户选择的省份
var val = this.value;
//alert(val);
//3.遍历二维数组中的省份
$.each(cities,function(i,n){
//alert(i+":"+n);
//4.判断用户选择的省份和遍历的省份
if(val==i){
//5.遍历该省份下的所有城市
$.each(cities[i], function(j,m) {
//alert(m);
//6.创建城市文本节点
var textNode = document.createTextNode(m);
//7.创建option元素节点
var opEle = document.createElement("option");
//8.将城市文本节点添加到option元素节点中去
$(opEle).append(textNode);
//9.将option元素节点追加到第二个下拉列表中去
$(opEle).appendTo($("#city"));
});
}
});
});
});
</script>
</head>
<body>
<!--3.中间注册表单部分div-->
<div id="contanier">
<div id="content">
<table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
<form method="get" action="#" οnsubmit="return checkForm()">
<tr>
<td colspan="2" align="center">
<font size="5">会员注册</font>
</td>
</tr>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="username" id="username" οnfοcus="showTips('username','必须以字母开头')" οnblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" id="password" οnfοcus="showTips('password','密码长度不能低于6位！')" οnblur="check('password','密码不能为空！')" /><span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" name="repassword" />
</td>
</tr>
<tr>
<td>email</td>
<td>
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<!--1.编写HTML文件部分的内容-->
<tr>
<td>籍贯</td>
<td>
<!--2.确定事件，通过函数传参的方式拿到改变后的城市-->
<select id="province">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
</select>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday" />
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="yanzhengma" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</form>
</table>
</div>
</div>
</div>
</body>
</html>
184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
