JavaScript+jQuery学习的的干货(一)

最新推荐文章于 2023-04-03 22:23:36 发布

Alvin_扣扣953821815

最新推荐文章于 2023-04-03 22:23:36 发布

阅读量217

点赞数

分类专栏： JavaScript知识点

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/m0_37412958/article/details/78564046

版权

JavaScript知识点专栏收录该内容

14 篇文章 0 订阅

订阅专栏

下面整理了下，自己在学习这些知识中遇到的一些比较常用的知识点，所以整理了一下，当然还有很多不足的，这只是部分的知识点，我会在遇到了新的时候，再继续进行更新。欢迎大家与我共同一起学习！

1：JS中的创建对象，有如下方式：

（1）：单体模式，，，比如：

[javascript] view plain copy

var text1 = {
name : '小明',
age : 20,
showname : function () {
alert('我的名字' + this.name)
},
showage : function () {
alert('我的年龄' + this.age)
}
}
alert(text1.name);
text1.showage();
text1.showage()

（2）：工厂模式

[javascript] view plain copy

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）：构造函数

[javascript] view plain copy

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）原型模式

[javascript] view plain copy

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中的继承（开发中，感觉用的不是很多，除非公司里面有一套要自己进行开发的模块）

[javascript] view plain copy

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）加载的方式（三种，掌握最简单的一种即可）

[html] view plain copy

//JQ的加载比JS加载要快！(当整个dom树结构绘制完毕就会加载)
jQuery(document).ready(function(){
alert("李四");
});
//JQ不存在覆盖问题，加载的时候是顺序执行
$(document).ready(function(){
alert("王五");
});
//简写方式
$(function(){
alert("汾九");
});

（2）JQ对象向DOM对象转换

[html] view plain copy

<span style="white-space:pre"> </span>//JQ对象向DOM对象转换方式一
$("#span1").get(0).innerHTML="美美哒！";
//JQ对象向DOM对象转换方式二
$("#span1")[0].innerHTML="棒棒哒！";
});
});
</script>
</head>
<body>
班长：<span id="span1">你好帅！</span>

（3）DOM对象转为JQ对象（html还是用的上面的例子）

[html] view plain copy

//将DOM对象转换成JQ对象
$(spanEle).html("思密达");

（4）JQ的基本选择器使用

[html] view plain copy

（5）JQ层级选择器的使用

[html] view plain copy

对于层级选择器总结下面的结果：

1）标签之间没有符号，则是取到前者标签元素的儿子，孙子，重孙子的相对应的标签

2）标签之间>符号，则是取到前者符号对应的儿子标签

3）标签之间的+符号，则是取到前者标签的同桌标签

4）标签之间的~符号，则是取到前者的兄弟标签

（6）JQ的过滤选择器（HTML还是用的上面的内容）

[html] view plain copy

<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还是用的上面的）

[html] view plain copy

<script>
$(function(){
$("#btn1").click(function(){
$("div[id]").css("background-color","red");
});
$("#btn2").click(function(){
$("div[id='two']").css("background-color","red");
});
});
</script>

（8）表单选择器

[html] view plain copy

<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

[html] view plain copy

4:操作标签的属性

（1）：获取标签中的HTML内容：比如

[html] view plain copy

<div class="div1">我的html内容:哈哈哈</div>
alert($('.div1').html());

[html] view plain copy

还有就是 alert($('.div1').text()); 这只会获取标签中的文字内容与html（）方法的区别

（2）：获取标签中的属性：比如

[html] view plain copy

<div class="div1">我的html内容:哈哈哈</div>
alert($('.div1').attr('class'));

（3）：获取标签设置的属性（如checkbox的checked），比如

[html] view plain copy

<input type="checkbox" class="box" name="box" value="点我呀" checked>
$('.box').prop('checked')

（4）：设置标签中的属性（其实就是类似操作CSS伪类一样，通过键值对的形式），比如

[html] view plain copy

$('.div').html('<a>我是一个链接</a>>');

[html] view plain copy

$('.div').attr({title : '这是一个div哦'});

[html] view plain copy

$('.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）将多个事件绑定到同一个标签上，这种方法适合多个事件同时绑定。例如：

[javascript] view plain copy

$('.div1').bind('click mouseover' , function () {
alert("hello world")
})

上面实现了，同时绑定点击和鼠标进入到一个div的事件。。如果想要接触绑定事件，则可以：

[javascript] view plain copy

$('.div1').bind('click mouseover' , function () {
alert("hello world")
$(this).unbind('mouseover')
})

11：自定义标签事件：例子：

[javascript] view plain copy

//绑定事件，自定义名字叫做myevent
$('.div1').bind('myevent', function () {
alert("自定义的事件")
})
//当点击其他的一个标签为div2时，则触发myevent事件,当然可以设置任何要进行触发自定义事件的标签和时机
$('.div2').click(function () {
$('.div1').trigger('myevent');
})

12：事件冒泡（很重要），这个原理就是会将子元素的事件往父元素进行传递。

（1）阻止事件冒泡：

[javascript] view plain copy

$('div1').click(function (event) {
event.stopPropagation();
})

（2）阻止页面的右键功能

[javascript] view plain copy

$('document').contextmenu(function (event) {
event.preventDefault();
})

（3）其实，上面的两个可以合起来写，更方便，直接在里面返回 return false ;这样就可以了

13：将消息打印到浏览器中进行查看：console..log（"加消息内容"）

14：事件委托（重要），就是将需要绑定事件的子元素，通过父元素来进行实现。比如：

[javascript] view plain copy

//实现一个序表，将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>

[javascript] view plain copy

//上面的等价于：$('.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（）；

下面有个简单的例子可以帮助大家理解理解，这个在动态改变方面还是很有作用的。

[javascript] view plain copy

<!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的区别）

[javascript] view plain copy

<!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',<span style="white-space:pre"> </span> //数据类型为jsonp，这里还可以为xml，html，json都可以<span style="white-space:pre"> </span>
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：针对上面的内容，我这里在写一个简单又经常碰到的例子，就是关键字搜索框（界面简单，自己可以进行修改，关键在于知识点）

[javascript] view plain copy

<!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）定义正则表达式

[javascript] view plain copy

//第一种方法：
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代码（截取了自己页面中的部分，关键也在这里就够了）

[html] view plain copy

<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代码

[html] view plain copy

$(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" οnclick="seleteIsAll(this.checked)">全选/全不选

（2）JS代码

[html] view plain copy

//全选和全不选的控制
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简单的实现

[html] view plain copy

21：点击按钮实现添加表格的行数（jQuery实现）

（1）jQuery代码

[html] view plain copy

//点击按钮，增加添加助教信息的表格，方便一次添加多条信息
$('#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标签，如果只是单纯的增加内容，则在添加的时候不需要这样麻烦）

[html] view plain copy

<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实现省市二级联动的效果

[html] view plain copy

[html] view plain copy

onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位！')"

[html] view plain copy

内容会持续更新的哦，欢迎大家共同学习交流！！！！！！！！！！

[html] view plain copy

<p></p><pre code_snippet_id="2490820" snippet_file_name="blog_20170730_39_8057850" name="code" class="html"><pre code_snippet_id="2490820" snippet_file_name="blog_20170730_39_8057850" name="code" class="html"></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
</pre>

Alvin_扣扣953821815

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。