JQ
文章平均质量分 54
鱼儿跳
这个作者很懒,什么都没留下…
展开
-
JQ实现效果:鼠标滑过图片,图片变大
鼠标移动到图片上,得到该图片的大图显示效果应用知识:jq的DOM操作步骤:1、鼠标划入时mouseover1)创建,并设置title;删除元素本身的title2)将元素追加到文档3)为设置css,让他显示在鼠标位置的旁边2、鼠标划出时mouseout移除-->remove()3、也可以使用mousemove()-->设置图片跟随着鼠标移动图片提示原创 2017-07-12 22:05:33 · 3640 阅读 · 0 评论 -
JQ实现效果:点击(or鼠标滑过)连接时显示内容,再点击(鼠标滑出)连接时隐藏内容
1、采用事件绑定bind() Char 4.1.2 .content{ display: none;//给元素一开始设置为隐藏 } $(function(){ //1、找到标题所在的元素,绑定bind $("#titles h2.head1").bind("click",function() { //2.找到内容所在元素,设置为c原创 2017-07-13 10:54:38 · 991 阅读 · 0 评论 -
JQ实现效果:验证用户名是否为空
如上显示效果代码: Char 4.1.4 .leve1{ border:2px solid black; } #message{ color: red; font-size: 6px; } $(function(){ $("#yes").bind('click',function(event){ if($("#nam原创 2017-07-13 15:20:28 · 1324 阅读 · 0 评论 -
JQ实现效果:滑动隐藏&滑动显示
CHAR 4.2.2 .content{ display: none; } //滑动显示,滑动隐藏 $(function(){ $("#panel h3.head").click(function(){ $(this).next().slideToggle(300); }) }) head body is cont原创 2017-07-14 15:15:27 · 3215 阅读 · 0 评论 -
JQ实现效果:焦点选中样式
1、伪类:focus Char 5 input:focus{ border-color: red; } /*.focus{ border-color: red; }*/ // $(function(){ // $(":input").focus(function() { // $(this).addClass('focus');原创 2017-07-18 11:14:03 · 735 阅读 · 0 评论 -
JQ实现效果:用户名表单验证
步骤:1、判断当前失去焦点的元素是“用户名”还是“邮箱”2、“用户名”,看是否小于6位,如果小于,就设置红色提醒3、“邮箱”,用正则表达式判断是否符合邮箱格式,不符合就红色字提醒,符合就用绿色字提醒4、将文字信息追加到当前元素的父元素的最后。ps:注意移除前面已经出现的字。 Char 5.1.6 $(function(){ //给必须项目添加标志原创 2017-07-25 17:20:24 · 2887 阅读 · 0 评论 -
JQ实现效果:奇偶行颜色不同,单项选择和多项选择
1、表格变色 $('tbody>tr:odd').addClass('odd'); $('tbody>tr:even').addClass('even');2、单项选择列表radio$('tbody>tr').click(function() { $(this).addClass('selected').siblings().removeClass('sele原创 2017-07-25 18:20:34 · 1199 阅读 · 0 评论