- 博客(34)
- 收藏
- 关注
RSS订阅原创 三级联动省市县下拉菜单实现效果
<!-- 省 --><div class="dropdown btn-group" id="province"> <button class="btn btn-default dropdown-toggle"> <span></span>  </button> <button class="btn btn-default dropdown-toggle" data-tog
2020-05-10 16:25:10
692
原创 bootstrap使用案例
bootstrap布局css.col-xs-2{ width: 20%; text-align: center; padding: 10px 0px;}<!-- container-fluid 100% 宽度 --><div class="container-fiuid"> <!-- 行（row） --> <div class="row"> <!-- col-xs-2 列 列宽是2个单元
2020-05-10 16:23:05
379
原创 JSONP
JSONP起始JSONP并不是通过AJAX实现，而是通过script标签的加入。我们知道通常在标签中src指向地址时，是可以直接通过的，而不需要考虑跨域1、jsonp是通过创建script标签并且放在页面中，然后给通信地址就可以完成通信var script=document.createElement("script");script.src="地址";document.body.appendChild(script);2、jsonp通过地址传参方式将数据发送给服务端3、jsonp在地址最后
2020-05-10 16:19:23
145
原创 jQuery中的AJAX
JQ中的AJAX基础层$.ajax();中间层$("div").load()$.get();$.post();最高层$.getJSON();// 加载json文件$.getScript();// 加载script文件ajax最高层// 加载json文件json文件{ "a":1, "b":2, "c":[1,2,3,4], "d":10}// 函数里面三个参数返回的值、请求状态、XMLHttpRequest对象$.getJSON("./
2020-05-10 16:15:17
97
原创 jQuery插件的封装
jQuery插件的封装$.fn上面添加一个方法当需要给jQuery对象 增加方法时，可以设置$.fn下面添加一个方法这样添加好以后，jQuery对象就有这个方法了div{ width: 50px; height: 50px; background-color: aqua; position: absolute; left: 300px; top: 200px;}<div></div><div id="divs"&
2020-05-10 16:14:40
171
原创 jQuery动画
hide和showjQuery 中显示方法为：.show()，隐藏方法为：.hide()。在无参数的时候，只是硬性的显示内容和隐藏内容注意：.hide()方法其实就是在行内设置 CSS 代码：display:none; 而.show()方法要根据原来元素是区块还是内联来决定，如果是区块，则设置 CSS 代码：display:block; 如果是内联， 则设置 CSS 代码：display:inline;$("div").click(function(){ $(this).hide(100
2020-05-10 16:13:09
103
原创 jQuery事件对象和抛发
事件数据的传输事件对象var Utils={ drag:function(elem){ elem.self=this; elem.addEventListener("mousedown",this.mouseHandler); }, mouseHandler:function(e){ if(e.type==="mousedown"){ document.addEventListener("mousemove"
2020-05-10 16:12:35
208
原创 jQuery的事件
jQuery事件<button>按钮</button>// 添加点击事件$("button").bind("click",function(){ console.log("aaa"); // 删除事件函数 $(this).unbind("click");})// on添加事件// off删除事件$("button").on("click",function(){ console.log("aaa"); $("button").
2020-05-10 16:11:54
87
原创 鼠标右键菜单实例
jQuery实现鼠标右键菜单功能：新建、复制、剪切、粘贴、删除css.div1{ background-color: skyblue;}.div2{ border: 1px solid #000000;}// 菜单选项var arr=["新建","复制","剪切","粘贴","删除"];var prev, clones;// 创建ul标签元素放在body中/...
2020-05-06 18:57:20
167
原创 jQueryDOM操作
jQuery DOM操作// 创建divvar div=$("<div></div>");var img=$("<img src='./img/2.jpg'>");console.log(img);// 在父容器中追加一个子元素// 给body里面追加一个"<div></div>"$("body").append("<...
2020-05-03 10:52:31
90
原创 jQuery遍历
jQuery遍历<div></div><div></div><div></div><div></div><div></div>// 遍历div列表，index是下标，item是元素$("div").each(function(index,item){ co...
2020-05-03 10:51:29
79
原创 jQuery宽width、高height
jQuery宽width、高height<div></div><div></div><div></div><div></div>// 设置jQuery对象列表中，每个元素宽高100像素$("div").width(100).height("100px");// 设置jQuery对象列表...
2020-05-03 10:50:32
142
原创 jQuery CSS样式和class
jQuery css样式和class<div class="divs"></div><div class="divs"></div><div class="divs"></div><div class="divs"></div>// 设置jQuery对象列表中div宽度50px$("div...
2020-05-02 20:45:01
113
原创 jQuery设置属性和数据
jQuery设置属性和数据attr、prop、data方法<div abc="1" id="div1" class="divs1"></div><div abc="2" id="div2" class="divs2"></div><div abc="3" id="div3" class="divs3"></div>&...
2020-05-02 20:43:27
376
原创 jQuery设置元素和内容
jQuery设置元素和内容<div class="div1"> <div><a href="#">超链接</a></div> <div><a href="#">超链接1</a></div> <div><a href="#">超链接2</...
2020-05-02 20:42:29
223
原创 jQuery遍历
jQuery遍历<div></div><div></div><div></div><div></div><div></div>// 遍历div列表，index是下标，item是元素$("div").each(function(index,item){ co...
2020-05-02 20:41:29
102
原创 jQuery过滤器
jQuery过滤器过滤器 基于选择器的基础上，进行精细的过滤<li>0</li><ul> <span>-1</span> <span>s <span>a</span> <span>a</span> <s...
2020-05-02 20:40:13
104
原创 jQuery属性选择器
jQuery属性选择器<form action=""> <input type="text"> <input type="password"> <input type="checkbox" name="hobby"><label>游泳</label> <input type="check...
2020-05-02 20:38:55
89
原创 jQuery选择器
jQuery选择器<div class="divs">1</div><div id="div1">2</div><div class="divs">3</div><div>4</div><button>按钮1</button><button>按钮2<...
2020-05-02 20:37:01
77
原创 jQuery简介
jQuery介绍jQuery是一个JavaScript库，它通过封闭原生JavaScript函数得到一整套定义好的方法jQuery已经集成了JavaScript、CSS、DOM、和Ajax于一体的强大功能jQuery的功能jQuery作为JavaScript封装的库，他的目的就是为了简化开发者使用JavaScript。主要功能有以下几点：1.像CSS那样访问和操作DOM2.修改CSS...
2020-05-02 20:34:54
114
原创 AJAX
AJAXAjax技术核心是XMLHttpRequest对象(简称XHR)IE7+、Firefox、Opera、Chrome和Safari都支持原生的XHR对象，在这些浏览器中创建XHR对象可以直接实例化XMLHttpRequest即可。var xhr = new XMLHttpRequest(); alert(xhr);与服务器通信的API就是XMLHttpRequest都需...
2020-05-02 20:19:44
113
原创 JavaScript、css/html实现代办事项列表
css样式html{ background-color: #CCCCCC;}body{ margin: 0px; padding: 0px;}.tops { width: 100%; height: 50px; background-color: rgba(47, 47, 47, 0.98);}label{ float: lef...
2020-05-02 01:19:09
1060
原创 PHP
PHPPHP 是 "PHP Hypertext Preprocessor" 的首字母缩略词PHP 是一种被广泛使用的开源脚本语言PHP 脚本在服务器上执行PHP 文件能够包含文本、HTML、CSS 以及 PHP 代码PHP 代码在服务器上执行，而结果以纯文本返回浏览器PHP 文件的后缀是 ".php"PHP 脚本以 <?php 开头，以结尾 ?>PHP 文件通常包含...
2020-04-25 11:45:04
98
原创 同步和异步
1、同步var a=3;var b=4;console.log(b);var c=a+b;console.log(c);for(var i=0;i<10000;i++){ c+=i;}console.log(c);// 同步function fn1(fn){ console.log("a"); fn();}function fn2(){ ...
2020-04-25 11:41:17
259
原创 网络(局域网和广域网、网址、协议、网络硬件)
网络(局域网和广域网、网址、协议、网络硬件)局域网和广域网1、局域网(Local Area Network)，简称LAN，是指在某一区域内由多台计算机互联成的计算机组。“某一区域”指的是同一办公室、同一建筑物、同一公司和同一学校等，一般是方圆几千米以内。局域网可以实现文件管理、应用软件共享、打印机共享、扫描仪共享、工作组内的日程安排、电子邮件和传真通信服务等功能。上网方式，因为局域网是封闭型的...
2020-04-25 11:32:29
2340
原创 购物车操作页面
购物车操作页面css样式文档main.csshtml { background-color: #eeeeee;}.goodsCon { width: 290px; height: 400px; background-color: white; float: left; margin-left: 10px; margin-bottom...
2020-04-19 12:38:08
823
原创 五星好评实现效果
五星好评实现效果jsexport default class Utils{ static ce(type,style){ let elem=document.createElement(type); Object.assign(elem.style,style); return elem; }}<!DOCTYPE ...
2020-04-19 12:29:11
552
原创 购物车商品数量选择框实现效果
商品数量选择框实现效果jsexport default class Utils{ static ce(type,style){ let elem=document.createElement(type); Object.assign(elem.style,style); return elem; }}import Uti...
2020-04-19 11:49:26
725
原创 JavaScript预加载
预加载// 一张图片的预加载var img=new Image();img.addEventListener("load",loadHandler);img.src="./img/3-.jpg";document.body.appendChild(img);// offsetWidth内容的宽度console.log(img.offsetWidth);function loadH...
2020-04-18 11:43:12
161
原创 ES6新增字符串方法
字符串方法includes 判断字符串中是否包含什么字符,返回布尔值var str="abcdef";console.log(str.includes("d"));// trueif(str.includes("d")){ console.log("有d");}starsWith()、endsWith()var str="abcdef";// 判断字符a是否在最前面co...
2020-04-18 11:38:23
142
原创 放大镜效果实现
放大镜效果Utils.js文档内容export default class Utils{ static ce(type,style){ let elem=document.createElement(type); Object.assign(elem.style,style); return elem; }}<!DOC...
2020-04-18 11:29:00
140
原创 JavaScript懒加载实现效果
懒加载<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documen...
2020-04-18 11:21:24
164
原创 JavaScript瀑布流布局效果
瀑布流根据可视窗口进行变化<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...
2020-04-18 11:15:52
126
原创 轮播图(点击切换和自动播放)
点击查看轮播图效果展示轮播图案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti...
2020-04-18 11:04:59
3844
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人