jquery
编程界小明哥
CSDN博客专家,从事软件开发多年,精通Java、JavaScript,博主也是从零开始一步步把学习成长、深知学习和积累的重要性,欢迎您关注,期待与您一起学习、成长、起飞!
展开
-
模仿jQuery的slideDown、slideUp上下滑动,舒服!
效果图:全部代码如下:<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> </head> <body> <div id="div" style="width:300px;height:50px;backg原创 2020-12-09 14:07:17 · 353 阅读 · 0 评论 -
模仿jquery写了隐藏显示函数show、hide,好用
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> </head> <body> <div onclick="do_fadeOut()" id="div" style="width:70px;height:50px;..原创 2020-12-09 13:51:34 · 306 阅读 · 0 评论 -
模仿jquery的fadeIn、fadeOut、fadeToogle、fadeTo函数,淡入淡出效果挺不错!
需要用到自己之前写的animate函数<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> </head> <body> <div id="div" style="width:70px;height:50px;ba原创 2020-12-08 22:48:03 · 403 阅读 · 0 评论 -
看了jquery的animate动画函数,自己也用js写了一个,感觉还不错!
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> </head> <body> <div id="div" style="width:70px;height:50px;background:black;lef...原创 2020-12-08 22:09:04 · 433 阅读 · 4 评论 -
jquery经典实例之放大镜
<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>放大镜</title> <style> *{ margin: 0; padding: .原创 2020-12-07 17:14:47 · 252 阅读 · 0 评论 -
jquery经典实例之拖动面板
<!DOCTYPE html><html><head lang="en"> <meta charset="GBK"> <title></title></head><body> <div style="position: absolute;border: 1px solid yellow;width: 500px;"> <div id="title.原创 2020-12-07 16:20:25 · 230 阅读 · 0 评论 -
jquery经典实例之图片轮播
<!DOCTYPE html><html lang="en"><head> <meta charset="GBK"> <title>Title</title> <style> .top{ border: 1px solid ; width: 600px; height: 450px; .原创 2020-12-07 15:23:19 · 314 阅读 · 0 评论 -
jquery经典实例之显示隐藏
<!DOCTYPE html><html lang="en"><head> <meta charset="gbk"> <title>显示隐藏</title> <style> #show,#content,#hide,#toggle{ padding: 2px; text-align: center; back.原创 2020-12-07 14:00:10 · 290 阅读 · 0 评论 -
jquery经典实例之选项卡
效果图:<!DOCTYPE html><html lang="en"><head> <meta charset="GBK"> <title>Title</title> <style> *{ margin: 0px; padding: 0px; } #outer { wi原创 2020-12-07 13:58:33 · 307 阅读 · 0 评论 -
jquery经典实例之左侧菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="GBK"> <title>Title</title> <style> .menu_2 { margin-left:1px; display:none; } li { list-style:none; } .menu_2 li,.menu_1 {.原创 2020-12-07 13:55:08 · 691 阅读 · 0 评论 -
jquery经典实例之可拖拽的弹出层
<!DOCTYPE html><html><head><meta charset="gbk"><title>可以拖拽的弹出层</title><style type="text/css">#show{ width:100px; height:30px; line-height:30px; margin:0px auto; background-color:yellow;}#show_dia.原创 2020-12-07 10:57:26 · 414 阅读 · 0 评论 -
jquery经典实例之回到顶部
<!DOCTYPE html><html lang="en"><head> <meta charset="GBK"> <title>回到顶部</title> <style> .divA { height: 1500px; } .divB { width: 50px; heigh.原创 2020-12-07 10:36:35 · 324 阅读 · 0 评论 -
jquery实现全选、反选、取消全部等操作(复选框checkbox)
<!DOCTYPE html><html><head><meta charset="gbk"><title>复选框的使用</title><style type="text/css"></style><script src="jquery-1.5.1.js"></script><script type="text/javascript">$(document).原创 2020-12-07 10:13:56 · 915 阅读 · 0 评论 -
jQuery中 $.get $.post $.getJSON的使用
jQuery $.get() 方法$.get() 方法通过 HTTP GET 请求从服务器上请求数据。语法:$.get(URL,callback);实例:<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> </head> <b原创 2020-12-06 22:11:46 · 631 阅读 · 3 评论 -
使用jQuery中ajax实例
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> </head> <body> <button onclick="do_ajax()">获取数据</button> <p i..原创 2020-12-06 21:42:55 · 502 阅读 · 0 评论