![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
jquery
ikun不解释
前端开发
展开
-
jquery封装ajax请求
$.ajax({ url:"http://mengxuegu.com:7300/mock/5d96f526993a01623de5b6ca/supplier/list/search/{page}/{size}", type:"post", data:{}, async:true, dataType:"json", // 以下...原创 2019-10-16 17:06:41 · 110 阅读 · 0 评论 -
each()修改透明度
each()修改透明度这个例子主要是练习jquery中的each()方法,明确each()中的函数有两个参数:index和element。index表示获取所有元素的索引值element表示获取的所有元素效果如下:head部分<style> ul { list-style: none; } ul li { float: left; height: 2...原创 2019-08-16 21:19:16 · 194 阅读 · 0 评论 -
按键变色
按键变色这个例子主要是如何合理的封装函数功能是当用户点击见键盘上的按键的时候,对应的div背景色发生改变。如:p(pink)效果如下:head部分 <script src="lib/jquery/jquery-3.4.1.min.js"></script> <link rel="stylesheet" href="lib/bootstrap/css/bo...原创 2019-08-16 19:27:26 · 465 阅读 · 0 评论 -
Input标签实现回车换行
input标签实现回车换行效果如下:head部分<script src="lib/jquery/jquery-3.4.1.min.js"></script> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> <style> .wrap { padding: ...原创 2019-08-16 16:39:33 · 13404 阅读 · 0 评论 -
attr()和prop()的区别
attr()和prop()的区别首先看一下这两个方法的官方定义attr() 方法设置或返回被选元素的属性和值。prop() 方法设置或返回被选元素的属性和值。好像并没有什么区别,但是在使用的时候还是有界限的对于prop()来说:它更多的是用来检索属性值,返回true或者false,也可以通过设置返回值设置这一元素的属性值。例如:$(“input:checkbox”).prop(“...原创 2019-08-16 11:16:32 · 206 阅读 · 0 评论 -
prop()方法的应用
prop() 方法设置或返回被选元素的属性和值prop(参数1,参数2):参数1用于设置属性参数2设置属性值下面一个简单的案例来应用一下这个方法:head部分<script src="lib/jquery/jquery-3.4.1.min.js"></script> <link rel="stylesheet" href="lib/bootstra...原创 2019-08-16 10:48:43 · 11654 阅读 · 1 评论 -
appendTo的应用
选择标签一个比较简单的案例,主要是为了理解jquery中的append()添加节点的方法效果如下:代码如下:CSS部分<style> select { height: 150px; width: 150px; background: #06f; font: 400 16px/30px "microsoft yehei"; color: #f...原创 2019-08-16 10:05:08 · 231 阅读 · 0 评论 -
jquery做一个简单的选项卡
选项卡效果如下:css部分<style> ul { list-style: none; padding: 0px; margin: 0px; } .wrap { width: 606px; height: 402px; margin: 50px auto; overflow: hidden; cursor: pointer; ...原创 2019-08-15 14:57:35 · 423 阅读 · 0 评论 -
jquery实现突出显示
jquery实现突出显示效果如下:CSS部分<style> ul { list-style: none; padding: 0px; margin: 0px; } .wrap { width: 630px; padding: 5px; height: 420px; border: 1px solid #eee; cur...原创 2019-08-15 11:02:11 · 551 阅读 · 0 评论 -
jquery写一个简单的手风琴
jquery写一个简单的手风琴效果如下:css部分<style> body, ul { padding: 0px; margin: 0px; } ul { list-style: none; width: 300px; } .group { width: 300px; text-align: center; cursor: pointer;...原创 2019-08-15 10:39:36 · 244 阅读 · 0 评论 -
用Jquery写一个简单的下拉菜单
效果如下:css部分<style>body,ul { padding: 0px; margin: 0px;}ul { list-style: none;}.wrap { list-style: none; width: 306px; margin: 50px auto; cursor: pointer;}.menu { float: left;}...原创 2019-08-15 10:15:45 · 1348 阅读 · 0 评论 -
jquery隔行变色
隔行变色效果如下:CSS部分<style> ul { list-style: none; color: #fff; } ul li { margin: 5px; } </style>body部分<script src="lib/jquery/jquery-3.4.1.min.js"></script>...原创 2019-08-15 09:31:20 · 508 阅读 · 0 评论 -
拖拽元素(双向拖拽)
拖拽元素效果如下:做这个案例遇到的最大的问题是:当把元素从左盒子移动到右盒子的时候,再从右盒子移动元素时报错了。原因是:在移动元素之前,右边的盒子是空的,虽然说拖拽的时候给第二个盒子里添加了元素,但是代码结构并没有刷新,第二个盒子从代码结构上仍然是空的,因而就对其添加事件是无效的。- 怎么解决这个问题呢?首先从百度了一下怎么动态获取添加的元素,从下面这位博主的博客里面找到了思路(十...原创 2019-08-19 21:15:00 · 381 阅读 · 0 评论 -
自制视频播放器
自制是视频播放器现在HTML5新增了很多视频制作方面的属性,比如控制音量(volume)的,视频进度(duration)的还有全屏(webkitRequestFullScreen)的,等等,很多很多,这就使得当对默认的视频播放器样式 不满意时,自己也可以做一个替换默认样式。自制播放器样式效果如下:录的比较仓促,媒体文件就一个视频,可以自己选择引用的外部文件主要有一些字体文件,jquer...原创 2019-08-19 17:38:45 · 2228 阅读 · 1 评论