JavaScript+jQuery学习的的干货(一)
来源：互联网 发布：蓝狐网络培训 编辑：程序博客网 时间：2024/06/06 02:49
下面整理了下，自己在学习这些知识中遇到的一些比较常用的知识点，所以整理了一下，当然还有很多不足的，这只是部分的知识点，我会在遇到了新的时候，再继续进行更新。欢迎大家与我共同一起学习！
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>（7）属性选择器（HTML还是用的上面的）<script>$(function(){$("#btn1").click(function(){$("div[id]").css("background-color","red");});$("#btn2").click(function(){$("div[id='two']").css("background-color","red");});});</script>（8） 表单选择器<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>要求1）查找所有的input元素 ：解析：$('：input')
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>4:操作标签的属性（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(); })（2）阻止页面的右键功能$('document').contextmenu(function (event) { event.preventDefault(); })（3）其实，上面的两个可以合起来写，更方便，直接在里面返回 return false ;这样就可以了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(){ 操作的内容 }) 效率没有上面的高15：jQuery元素节点的操作（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>16：通过ajax来获取公开的jsonp接口的数据。例如：（请先掌握json格式数据和jsonp的区别）<!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', //请求的方式，还有postdataType:'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>当使用ajax的时候，要记住引用jQuery的js文件，因为jQuery里面已经封装好了。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>18：正则表达式的相关内容(用于表单验证和url匹配中相对较多)（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> （2）jQuery代码$(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); }｝）（3）OK，这样就可以实现了，因为这个是动态生成的表格的数目，所以肯定序号也是动态的啦。。想想是不是很简单呢？当然，我这也只是一种方法，相信其他的大神还有更好的办法，我是个菜鸟，在学习阶段，多多包涵。后面找到有个博客写得也类似，而且贴了图，大家有需要的可以看看。http://www.cnblogs.com/picaso/archive/2012/10/08/2715564.html
20：原生JS实现全选/全不选
（1）HTML
<input type="checkbox" id="selectcontro" onclick="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; } } 注解：其中addismessage是checkbox多选框，通过名字拿的话就可以把具有相同name属性的引用都拿到，这样就方便进行处理了，记住一点，要实现全选/全不选，那么一定要满足要实现选择的内容具有相同的name属性。。否则难以实现。方法二：通过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>21：点击按钮实现添加表格的行数（jQuery实现）（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("添加条目成功!"); }) （2）HTML代码（因为后面要实现表格内容的提交，所以需要用到form标签，如果只是单纯的增加内容，则在添加的时候不需要这样麻烦） <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" onclick="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="#" onsubmit="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" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span></td></tr><tr><td>密码</td><td><input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位！')" onblur="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>内容会持续更新的哦，欢迎大家共同学习交流！！！！！！！！！！阅读全文
2 0
- JavaScript+jQuery学习的的干货(一)
- 学习方面的干货
- jQuery学习笔记一：你必须知道的JavaScript知识
- JavaScript和jQuery的学习
- javascript以及jquery的学习
- jQuery学习笔记一——jQuery中与JavaScript的语法区别
- 学习编程的干货网站
- 学习WEB的干货资料
- jquery的学习（一）
- 锋利的JQuery----JavaScript基础知识（一）
- JavaScript--&&--JQuery功能的代码对比(一)
- JavaScript的学习（一）
- JS与jQuery插件运用和EasyUI框架的学习干货（三）
- 学习J2EE路途中一些有用的知识点(一)真正的干货
- 学习笔记： JavaScript/JQuery 的cookie操作
- 学习Jquery之前需要了解的Javascript
- jQuery及Javascript，Bootstrap的学习笔记
- 学习笔记： JavaScript/JQuery 的cookie操作
- thinkphp 之memcache
- HDU 2821 Pusher
- 冒泡排序的原理与实现
- MD5加密
- POJ 3060 Make it Manhattan 笔记
- JavaScript+jQuery学习的的干货(一)
- 中国Win10市场份额全面超越XP_仅次于Win7
- 跨界面跳转，并清除之前的界面
- html_day04_video&audio
- Linux中关于文件操作与管道的命令小结
- 安装Python插件autopep8
- POJ
- 详解linux中nginx启动 重启 关闭命令
- Android代码片段整理（一）
