jquery前期总结，及实例
一、元素查找
1、选择器
id=d------------------------------------------>$("#d")
class=c1------------------------------------->$(".c1")
<div></div>-------------------------------->$("div")
<div><p></p></div>--------------------->$("div p") div下的p标签
<div></div><p></p>--------------------->$("div,p") div标签和p标签
<div class="c1"></div>-------------------->$("div[class='c1']")
2、筛选器
1> parent([expr])寻找其父级元素
2> children([expr]) 寻找子集元素
3> next([expr]) 寻找当前元素的下一个兄弟元素
4> prev([expr])寻找当前元素的上一个兄弟元素
5> siblings([expr])寻找除他以外的所有兄弟元素集合
6> find(expr|obj|ele)寻找当前标签的后代标签（子子孙孙）
7> hasClass(class) 检查当前的元素是否含有某个特定的类，如果有，则返回true
二、操作
1、属性
1> attr(name|properties|key,value|fn) 用于获取或者修改属性值
2> removeAttr(name) 用于删除某一种属性
3> prop(name|properties|key,value|fn)
4> removeProp(name)
2、Css
1> addClass(class|fn) 为class类添加某一种属性
2> removeClass([class|fn]) 为class类删除某一种属性
3、HTML代码/文本/值
1> html([val|fn]) 取得匹配元素的html内容(文本内容+标签)
2> text([val|fn]) 取得匹配元素的文本内容
4、文档处理
1> append(content|fn) 向每个匹配的元素内部后面追加内容
2> prepend(content) 向每个匹配的元素内部前面追加内容
5、 删除
1> empty()表示只清空匹配标签中间的HTML
2> remove([expr]) 表示把匹配到的标签整体移除
6、复制
clone([Even[,deepEven]]) 克隆匹配的DOM元素并且选中这些克隆的副本
三、循环的俩种方式
each(callback)
1> $("匹配一个可迭代的元素集合").each（function(){}）
2> $.each("可迭代的元素集合"，function(){})
<script>
$.each(["a","b","c"],function (x,y) { //其中的x为获取的索引位置，y为按索引获取的对应元素
console.log(x,y)
})
$(["a","b","c"]).each(function (x,y) {
console.log(x,y)
})
</script>
四、常用几种方法
1> size() jQuery 对象中元素的个数 当前匹配的元素个数。与length将返回相同的值。
2> length jQuery 对象中元素的个数
3> each(callback) 循环
五、实例
1、复制标签（克隆）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="outer">
<div class="section">
<div class="icons" style="display: inline-block">
<a onclick="add(this)"><button>+</button></a>
</div>
<div class="inputs" style="display: inline-block">
<input type="checkbox">
<input type="text" value="IP">
</div>
</div>
</div>
<script>
function add(self) {
var item = $(self).parent().parent().clone(); //通过你现在点击的标签找上上级标签进行克隆，不能直接通过class="section"，因为你克隆的标签里面也有这个属性
$(".outer").append(item);
item.find("a").children().text("-");
item.find("a").attr("onclick","remove1(this)"); //这里的函数名不能用关键字
}
function remove1(self) {
var item = $(self).parent().parent().remove();
}
</script>
</body>
</html>
克隆
2、放大镜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.9.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 350px;
height: 350px;
border: 5px dashed gold;
}
.box .small_box {
position: relative;
}
.box .small_box .float{
width: 175px;
height: 175px;
background: rgba(0,0,0,.2);
position: absolute;
display: none;
}
.box .big_box{
position: absolute;
left: 370px;
top: 0;
width: 350px;
height: 350px;
overflow: hidden;
border: 5px dashed gold;
display: none;
}
.box .big_box img{
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<div class="small_box">
<div class="float"></div>
<img src="small.jpg" alt="小图">
</div>
<div class="big_box">
<img src="big.jpg" alt="">
</div>
</div>
<script>
$(".box").mouseover(function () { //鼠标放上去隐藏的显现
$(this).find(".float").css("display","block"); // 通过修改display为block后显现
$(this).find(".big_box").css("display","block");
})
$(".box").mouseout(function () { //鼠标离开后再隐藏
$(this).find(".float").css("display","none");
$(this).find(".big_box").css("display","none");
})
$(".small_box").mousemove(function (e) {
var _event = e || windows.event //这个是用来区别ie 和其他浏览器的一个判断
var small_box_height = $(".small_box").height();
var small_box_width = $(".small_box").width(); var float_height = $(".float").height();
var float_width = $(".float").width(); var float_height_half = $(".float").height()/2;
var float_width_half = $(".float").width()/2; var mouse_left = e.clientX - float_width_half;
var mouse_top = e.clientY - float_height_half; if(mouse_left<0){mouse_left=0} // 当鼠标x坐标等于飘移盒子宽度的一般，固定盒子的x坐标一直等于盒子宽的一半
else if(mouse_left>small_box_width - float_width){mouse_left=small_box_width - float_width}
if(mouse_top<0){mouse_top=0}
else if(mouse_top>small_box_height - float_height){mouse_top=small_box_height - float_height}
$(".float").css("left",mouse_left + "px");
$(".float").css("top",mouse_top + "px"); var move_x = ($(".big_box img").width()- $(".big_box").width())/($(".small_box").width()- $(".float").width())
//这个比例是通过各自视口可移动的像素比例得到的，（大图的宽-大图可视窗口宽）/(原图的宽-原图可视窗口的宽度)
var move_y = ($(".big_box img").height()- $(".big_box").height())/($(".small_box").height()- $(".float").height())
$(".big_box img").css("left",-move_x*mouse_left + "px");
$(".big_box img").css("top",-move_y*mouse_top + "px");
})
</script>
</body>
</html>
放大镜
jquery前期总结，及实例的更多相关文章
- 很不错的jQuery学习资料和实例
这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...
- jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...
- jQuery懒加载插件jquery.lazyload.js使用说明实例
jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...
- jquery-1 jquery几个小实例
jquery-1 jquery几个小实例 一.总结 一句话总结:jquery真的是简单加简便. 1.jquery中改变多个css属性怎么整? 可以链式连接方式,也可以大括号整多个.中间是键值对加引号 ...
- 前端基础教程-jQuery EasyUI 的EasyLoader实例
兄弟连前端分享-jQuery EasyUI 的EasyLoader实例 to move panel to other position $('#p').panel('move',{ left:100, ...
- validate jquery 注册页面使用实例 详解
官方使用文档:http://jqueryvalidation.org/documentation/ 参考资料:http://www.w3cschool.cc/jquery/jquery-plugin- ...
- jQuery的事件委托实例分析
事件委托主要是利用事件冒泡现象来实现的,对于事件委托的精准的掌握,可以有利于提高代码的执行效率.先看一段代码实例: <!DOCTYPE html> <html> <hea ...
- jQuery Ajax 实例 全解析
jQuery Ajax 实例 全解析 jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我 ...
- jQuery的基础语法实例
jQuery 基础语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(sele ...
随机推荐
- hanlp源码解析之中文分词算法详解
词图 词图指的是句子中所有词可能构成的图.如果一个词A的下一个词可能是B的话,那么A和B之间具有一条路径E(A,B).一个词可能有多个后续,同时也可能有多个前驱,它们构成的图我称作词图. 需要稀疏2维 ...
- MATLAB System Generator初识
MATLAB System Generator初识 仿真模型: 仿真结果: 使用system generator 搭建低通滤波器具体步骤: 打开库,库里面的组件详细介绍见UG958文档 添加数字滤波器 ...
- Laravel + go-micro + grpc 实践基于 Zipkin 的分布式链路追踪系统 摘自https://mp.weixin.qq.com/s/JkLMNabnYbod-b4syMB3Hw?
分布式调用链跟踪系统,属于监控系统的一类.系统架构逐步演进时,后期形态往往是一个平台由很多不同的服务.组件构成,用户请求过来后,可能会经过其中多个服务,如图 不过,出问题时往往很难排查,如整个请求变慢 ...
- 【转】前端Web开发MVC模式-入门示例
前端Web开发MVC模式-入门示例 MVC概论起初来之桌面应用开发.其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序:view为发送给客服端的内容:cont ...
- excel技巧--文本拆分合并
如果像上图那样将一单元格内拆分成同等大小的字词,可用如下步骤: 1.将该单元格的宽度缩至拆分词的大小: 2.选择同列的适当的单元格,用于填充拆分的字符: 3.点击“开始”-->填充-->两 ...
- Winform 实现无边框窗体移动功能
#region 窗体移动 [DllImport("user32.dll")] public static extern bool ReleaseCapture(); [DllImp ...
- Windows Azure Virtual Machine (36) 扩展Azure ARM VM的磁盘大小
<Windows Azure Platform 系列文章目录> 在默认情况下,Azure ARM VM的操作系统磁盘(OS Disk),容量为: (1)Windows VM OS Disk ...
- Azure SQL Database (26) 使用Query Store对Azure SQL Database监控
<Windows Azure Platform 系列文章目录> 我们在使用Azure SQL Database的时候,需要对数据库的性能进行监控,这时候就可以有两种方法: 1.第一种方法, ...
- how to install an older version of package via NuGet?
转载 http://stackoverflow.com/questions/10206090/how-to-install-an-older-version-of-package-via-nuget ...
- spring boot 热更新配置
maven添加 spring-boot-devtools 允许自动构建 设置里面,搜索compiler,在Build,Execution,Deployment里面勾选Build project aut ...