前端学习——jquery操作例子
一、jquery和DOM函数的转换
、 jquery转换成dom
$('#i1') --------------> $('#i1')[]
、 dom转换成jquery
var i1=documen.getElementById('#i1')---------> $(i1)
二、写左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.header{
cursor: pointer;
background-color: #2459a2;
width:300px;
color: white;
}
.hide{
display: none;
}
</style>
</head>
<body> <div>
<div class="header">菜单一</div>
<div class="content">
<div>内容一</div>
<div>内容一</div>
</div> <div class="header">菜单二</div>
<div class="content hide">
<div>内容二</div>
<div>内容二</div>
</div> <div class="header">菜单三</div>
<div class="content hide">
<div>内容三</div>
<div>内容三</div>
</div>
</div> <script src="jquery.js"></script>
<script> $('.header').click(function(){
// jQuery链式编程
$(this).siblings('.content').toggleClass('hide');
// $(this).next().removeClass('hide');
}); </script>
</body>
</html>
addClass(“className”)方法是用来给指定元素增加类名，也就是说给指定的元素追加样式；
.removeClass(“className”)方法是用来给指定的元素移除类名，也就是说给指定元素移除样式；
.toggleClass(“className”)方法是用来给脂定的元素增加或移除类名（如果元素的类名存在就移除，如果不存在就增加），也就是说用来给指定的元素进行样式切换（如果元素存在样式则去掉，如果不存在则加上样式）
三、jquery实现模态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fluid{
position: absolute;
top:;
left:;
right:;
bottom:;
background-color: black;
opacity: 0.5;
}
.modal{
position: absolute;
top:%;
left:%;
background-color: white;
width:300px;
height:200px;
}
.hide{
display: none;
}
</style>
</head>
<body> <input type="button" value="添加" /> <table border="1px">
<tr>
<th>IP</th>
<th>端口</th>
<th>操作</th>
</tr>
<tr>
<td>1.1.1.1</td>
<td></td>
<td>
<input type="button" value="编辑" class="edit"> </td>
</tr>
<tr>
<td>2.2.2.2</td>
<td></td>
<td><input type="button" value="编辑" class="edit"></td>
</tr>
<tr>
<td>3.3.3.3</td>
<td></td>
<td><input type="button" value="编辑" class="edit"></td>
</tr>
</table> <!--遮罩层-->
<div class="fluid hide"> </div> <div class="modal hide">
<p>
IP: <input type="text" name="ip" id="ip">
</p>
<p>
端口: <input type="text" name="port" id="port">
</p>
<p><input type="button" value="ok"><input type="button" value="cancel" id="cancel"></p>
</div> <script src="jquery.js"></script> <script>
$('.edit').click(function(){
$(".fluid").removeClass('hide');
$(".modal").removeClass('hide'); var tds = $(this).parent().prevAll();
// console.log(tds[0].innerText);
$("#port").val(tds[].innerText);
$("#ip").val(tds[].innerText); }); $("#cancel").click(function(){
$(".fluid").addClass('hide');
$(".modal").addClass('hide');
}); </script> </body>
</html>
四、互相选择框，单选及多选到目的框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div{
float: left;
margin-left: 20px;
}
select{
width:200px;
}
</style>
</head>
<body> <div>
<select name="fruit" id="fruit" multiple>
<option value="">香蕉</option>
<option value="">苹果</option>
<option value="">橘子</option>
<option value="">菠萝</option>
</select>
</div> <div>
<input type="button" value="=>" id="toRight"><br>
<input type="button" value="==>" id="toAllRight">
</div> <div>
<select name="shuiguo" id="shuiguo" multiple> </select>
</div> <script src="jquery.js"></script> <script>
$("#toRight").click(function () {
$("#fruit option:checked").clone().appendTo("#shuiguo");
// $("#shuiguo").append($("#fruit option:checked"));
}); $("#toAllRight").click(function () {
$("#fruit option").clone().appendTo("#shuiguo");
})
</script> </body>
</html>
五、酒仙网动画实例-采用animate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.wine{
width:180px;
overflow: hidden;
} </style>
<script src="jquery.js"></script> </head>
<body> <div class="wine">
<img src="wine.jpg" alt="">
</div> <div class="wine">
<img src="wine.jpg" alt="">
</div>
<div class="wine">
<img src="wine.jpg" alt="">
</div><div class="wine">
<img src="wine.jpg" alt="">
</div><div class="wine">
<img src="wine.jpg" alt="">
</div> <script>
$(function(){ $("img").hover(
function () {
$(this).animate({"margin-left":"-100px"},);
},
function (){
$(this).animate({"margin-left":""},)
}
); }); </script>
</body>
</html>
前端学习——jquery操作例子的更多相关文章
- 前端学习——JQuery Ajax使用经验
0.前言 在项目推进过程中常常使用Ajax,通过Jquery提供的函数能够很方便的使用Ajax,可是在实际使用中也遇到一些问题,比如怎样防止浏览器使用缓存,怎样使用同步方式等.通过博文整理总结 ...
- 前端学习☞jquery
一 什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 j ...
- 前端学习-jQuery
老师博客:https://www.cnblogs.com/yuanchenqi/articles/6070667.html day43,day44 jquery 中文文档:http://jquery. ...
- 前端学习——使用Ajax方式POST JSON数据包
0.前言 本文解释怎样使用Jquery中的ajax方法传递JSON数据包,传递的方法使用POST(当然PUT又有时也是一个不错的选择).POST JSON数据包相比标准的POST格式可读性更好 ...
- 前端学习之jquery/下
前端学习之jquery 一 属性操作 html(): console.log($("div").html()); $(".test").html("& ...
- 前端学习之jquery
前端学习之jquery 1. 什么是jQuery对象? jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它 ...
- Jquery重新学习之五[操作JSON数据]
Jquery操作Json格式的数据在我们平时的项目中也经常运用:最近看Jquery权威指南中就有一章节是对这方面的整理总结:最后通过一个Asp.net结合一般处理程序ashx的实例,基本上能满足项目中 ...
- jQuery操作标签，jQuery事件操作，jQuery动画效果，前端框架
jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
随机推荐
- onLoad和DomContentLoad的区别
onLoad是的在页面所有文件加载完成后执行 DomContentLoad是Dom加载完成后执行,不必等待样式脚本和图片加载 domContentLoad更为合理, 原理: 如果是webkit引擎则轮 ...
- Unity寻路的动态烘焙
随着Unity5.6的推出,我们终于迎来了NavMesh的动态烘培,我们期待已久的功能终于来了,不用再研究A*算法了,话说改进的网格寻路更加方便高效. 网址:https://blog.csdn.net ...
- Java实例-坦克大战
Java实例-坦克大战 一．样例图片 二．类图结构 坦克大战中的所有类 类的关系图 我的坦克类 三．说明 1.每一个新的独立运行的东西就是一个线程,像我方坦克,像敌方坦克,像所有的子弹 2.每一个线程 ...
- 4-3 atom订阅源
部分章节还没有实做练习. 网上购买了安道的Rails指南中文版.联系了这个作者问了一个问题Rails5的翻译问题. try(), 判断是否存在,不存在的话返回nil.例子:pasting @perso ...
- Ubuntu中vi命令的编辑模式异常
今天更改Ubuntu软件源的时候,进入源文件的编辑模式时,发现删除键和编辑都不能正常使用,百度之后,知道是由于Ubuntu预装的是vim-tiny,而我们需要使用vim-full.在此记录下该问题以便 ...
- 51nod-1534-博弈
1534 棋子游戏 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题 收藏 关注 波雷卡普和瓦西里喜欢简单的逻辑游戏.今天他们 ...
- UVA-10118 Free Candies （DP、记忆化搜索）
题目大意:有4堆糖果,每堆有n个,有一只最多能容5个糖果的篮子.现在,要把糖果放到篮子里,如果篮子中有相同颜色的糖果,放的人就可以拿到自己的口袋.如果放的人足够聪明,问他最多能得到多少对糖果. 题目分 ...
- JavaScript学习总结(十八)——JavaScript获取浏览器类型与版本
从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: 1 <script type="text/javascript"> 2 v ...
- Wifi Troughput Test using iperf
learning wifi throughput test using iperf [Purpose] Learning how to do wifi throughput test u ...
- UAC 注册表 WIN64 OS 运行时主题
首先EXE程序是32位,DelphiIDE对Project默认是启用主题的,默认情况在WIN64 OS下运行时,无管理员权限. WIN64 OS,默认情况下UAC是启用的. 上述默认情况下,EXE 是 ...