分类：jquery

2020
10-08

jQuery 实现DOM元素拖拽交换位置的实例代码

实现步骤1.html+bootstrap布局画3个面板。注：面板样式position属性必须是绝对位置或者相对位置。2.监听面板的的mousedown事件。记录当前对应面板的位置target_index，设置面板透明拖动。3.监听当前被拖动的面板的mousemove事件。根据鼠标移动的位置和面板的相对位置计算出面板应该出现的新位置，就将面板位置设置为新位置。4.监听当前被拖动的面板的mouseup事件。当松开鼠标时，查看当前鼠标所在位置对应的面板的位置exchan... 继续阅读 >
2020
10-08

jQuery开发仿QQ版音乐播放器

本文通过Html+CSS+jQuery开发仿QQ版的音乐播放器，是前端技术的综合应用，所用素材来源于网络，仅供学习分享使用，如有不足之处，还请指正。涉及知识点在本例中用到的知识点如下，按jQuery和CSS进行区分：jQuery是一个JavaScript库，极大地简化了JavaScript编程，常见知识点如下：通过标签获取jQuery对象：var$audio=$("audio");通过选择符获取jQuery对象并设置文本内容：$(".music_progrss_time").text(timeStr);通... 继续阅读 >
2020
10-08

jQuery实现B2B网站后台管理系统侧导航

效果图1.html部分<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>index</title><linkrel="stylesheet"href="https://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css"rel="externalnofollow"><linkrel="stylesheet"href="css/style.css"rel="externalnofollow"></head><body><divclass="account-lfl"><aclass="list-title">账户概览</a><ulid="accordion"class="ac... 继续阅读 >
2020
10-08

jQuery使用jsonp实现百度搜索的示例代码

项目实现：还原百度搜索功能；项目原理：利用json回调页面传参;什么是jsonp：就是利用<script>标签的src地址，让目标页面回调本地页面，并且带入参数，也解决了跨域问题；代码如下：html（css代码不提供）<divclass="box"><inputtype="text"/><divclass="ssk"></div><button>×</button></div>jsvarscript,ids;$(".box>input").on("input",inputHandler)functioninputHandler(e){if(ids)return;... 继续阅读 >
2020
10-08

jQuery 实现扁平式小清新导航

效果图1.html部分<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>index</title><linkrel="stylesheet"href="css/style.css"rel="externalnofollow"></head><body><!--导航nav--><ulid="navigation"><liclass="home"><ahref=""><span>Home</span></a></li><liclass="about"><ahref=""><span>About</span></a></li><liclass="search"><ahref=""><span>Search</span></a></li><liclass="ph... 继续阅读 >
2020
10-08

jQuery实现简单飞机大战

本文实例为大家分享了jQuery实现飞机大战的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>飞机大战</title><style>*{margin:0px}.container{height:700px;width:500px;background-color:black;margin:5pxauto;/*上下外边距5px，左右自动*/position:relative;}.pl... 继续阅读 >
2020
10-08

jQuery实现飞机大战小游戏

jQuery实现飞机大战小游戏 本文实例为大家分享了jQuery实现飞机大战的具体代码，供大家参考，具体内容如下游戏规则：WSAD键控制大飞机移动方向，按下J键可发射子弹消灭敌机，每歼灭一架敌机可得10分；与敌机相撞或者有遗漏敌机没有歼灭，则游戏结束游戏显示如下图：css部分：<style>.container{width:800px;height:500px;margin:10vhauto;background:#000;position:relative;overflow:hidden;}.plane{color:#fff;wi... 继续阅读 >
2020
10-08

jquery实现上传图片功能

jquery实现上传图片功能 本文实例为大家分享了jquery实现上传图片功能的具体代码，供大家参考，具体内容如下代码：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>点击头像上传图片</title><style>*{margin:0;padding:0;}div,#avarimgs,#xdaTanFileImg{width:100px;height:100px;}div{margin:50pxauto;position:relative;}#xdaTanFileImg{position:absolute;top:0;left:0;opacity:0;}</style></head><body><div><input... 继续阅读 >
2020
10-08

如何解决jQuery 和其他JS库的冲突

在jQuery库中，几乎所有的插件都被限制在它的命名空间里。通常，全局对象都被很好地存储在jQuery命名空间里，因此当把jQuery和其他JavaScript库（例如Prototype、MooTools或YUI）一起使用时，不会引起冲突。注意：默认情况下，jQuery用$作为自身的快捷方式。1.jQuery库在其他库之后导入在其他库和jQuery库都被加载完毕后，可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript... 继续阅读 >
2020
10-08

jQuery 移除事件的方法

在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。假设网页上有一个<button>元素，使用以下代码为该元素绑定多个相同的事件。<scripttype="text/javascript">$(function(){$('#btn').bind("click",function(){$('#test').append("<p>我的绑定函数1</p>");}).bind("click",function(){$('#test').append("<p>我的绑定函数2</p>");}).bind("cl... 继续阅读 >
2020
10-08

Jquery ajax书写方法代码实例解析

Ajax在前端的应用极其广泛，因此，我们有必要对其进行总结，以方便后期的使用。AJAX优点：可以异步请求服务器的数据，实现页面数据的实时动态加载，在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。jquery在全局对象jquery（也就是$）绑定了ajax()函数，可以处理Ajax请求，ajax常用的配置选项有：async是否异步执行，默认为True,千万不要指定为Falsemethod发送的Method,缺省为“GET”,可指定为... 继续阅读 >
2020
10-07

基于ajax及jQuery实现局部刷新过程解析

基于ajax及jQuery实现局部刷新过程解析 1、jQurey使用时需导入jquery-1.4.2.js在web文件夹下并在写script时需像如下定义script标签：<scriptsrc="js/jquery-1.4.2.js"type="text/javascript"></script>2、jQurey的语法：通过$(要选取的元素)定义响应ajax的ServletStringbuttonName=request.getParameter("buttonName");JSONObjectjsObject=null;//定义一个要返回的的数据if(buttonName.equals("button_1")){jsObject=newJSONObject("{first:\"傻子\",sec... 继续阅读 >
2020
10-06

Jquery滑动门/tab切换实现方法完整示例

本文实例讲述了Jquery滑动门/tab切换实现方法。分享给大家供大家参考，具体如下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title></title><style>*{margin:0;padding:0;}body{font:12px/19pxArial,Helveti... 继续阅读 >
2020
10-04

JQuery实现折叠式菜单的详细代码

JQuery实现折叠式菜单的详细代码 两种风格：1：点菜单项，每个子菜单项都可显示<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>30秦甜甜_实训13-2_2_180701802230_18计算机2班</title></head><styletype="text/css">*{padding:0;margin:0;list-style:none;}.menu-list{width:300px;margin:60pxauto;border:2pxsolid#bbffff;}.menu-head{background-color:#aaaaff;text-align:center;height... 继续阅读 >