JavaQuery
1、初识jQuery
<!DOCTYPE html> | |
<html> | |
<head lang="en"> | |
<meta charset="UTF-8"> | |
<title>初始jQuery</title> | |
<!-- | |
初识jQuery: 就是一个简洁的javaScript框架! 设计理念: write less do more! | |
使用jQuery: 引入需要的js库! | |
jquery-1.8.3.js 开发版 便于阅读 200kb | |
jquery-1.8.3.min.js 生产版 压缩了文件 100kb | |
--> | |
</head> | |
<body> | |
<div id="myDiv"></div> | |
<a href="javascript:" onclick="changeDiv();" name="haha">点击改变div的背景</a> | |
<!-- 引入需要的js库 必须位于第一个位置--> | |
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
<script type="text/javascript" src="../js/01base.js"></script> | |
<script type="text/javascript" src="../js/02function.js"></script> | |
</body> | |
</html> | |
<!-- | |
window.onload 和 $(document).ready() 区别 | |
01.执行时机不同 | |
window.onload必须等待网页中所有的元素加载完毕,才会执行! | |
$(document).ready()网页中的html结构加载完成之后就会执行,有可能图片,视频,音频还没有加载完毕! | |
02. window.onload在页面中只能书写一次 | |
$(document).ready()可以书写N个 | |
03. window.onload没有简写方式 | |
$(document).ready() 简写方式是 $(function(){ }) | |
--> |
2、显示和隐藏
<!DOCTYPE html> | |
<html> | |
<head lang="en"> | |
<meta charset="UTF-8"> | |
<title>显示和隐藏</title> | |
<style type="text/css"> | |
div{ | |
display: none; /*默认让所有的div隐藏*/ | |
} | |
li{ | |
list-style: none;/*去掉li前面的标记*/ | |
} | |
</style> | |
</head> | |
<body> | |
<ul> | |
<li> | |
<a href="#">可爱的小猫咪1</a> | |
<div><img src="../images/cat.jpg" height="50px" width="50px"/></div> | |
</li> | |
<li> | |
<a href="#">可爱的小猫咪2</a> | |
<div><img src="../images/cat.jpg" height="50px" width="50px"/></div> | |
</li> | |
<li> | |
<a href="#">可爱的小猫咪3</a> | |
<div><img src="../images/cat.jpg" height="50px" width="50px"/></div> | |
</li> | |
</ul> | |
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
<script type="text/javascript" src="../js/03showAndHidden.js"></script> | |
</body> | |
</html> |
3、html和text
<!DOCTYPE html> | |
<html> | |
<head lang="en"> | |
<meta charset="UTF-8"> | |
<title>html和text</title> | |
</head> | |
<body> | |
<div id="myDiv"></div> | |
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
<script type="text/javascript" src="../js/04htmlAndText.js"></script> | |
</body> | |
</html> |
4、链式操作
<!DOCTYPE html> | |
<html> | |
<head lang="en"> | |
<meta charset="UTF-8"> | |
<title>链式操作</title> | |
<style type="text/css"> | |
div{ | |
width: 50px; | |
height: 50px; | |
border: 1px solid red; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>标题</h1> | |
<div>第2个盒子</div> | |
<div>第3个盒子</div> | |
<div>第4个盒子</div> | |
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
<script type="text/javascript" src="../js/05link.js"></script> | |
</body> | |
</html> |
5、动态增加类样式
<!DOCTYPE html> | |
<html> | |
<head lang="en"> | |
<meta charset="UTF-8"> | |
<title>动态增加类样式</title> | |
<style type="text/css"> | |
div{ | |
width: 50px; | |
height: 50px; | |
border: 1px solid red; | |
} | |
/*事先书写完毕*/ | |
.haha{ | |
background-color: pink; | |
} | |
</style> | |
</head> | |
<body> | |
<div>第1个盒子</div> | |
<div>第2个盒子</div> | |
<div>第3个盒子</div> | |
<div>第4个盒子</div> | |
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script> | |
<script type="text/javascript" src="../js/06addClass.js"></script> | |
</body> | |
</html> |
6、Dom和jquery互换
<!DOCTYPE html> | |
<html> | |
<head lang="en"> | |
<meta charset="UTF-8"> | |
<title>Dom和jquery互换</title> | |
<!-- | |
所有通过js的getElement系列获取的对象!我们称之为DOM对象! | |
那么这个DOM对象不可能用jquery中的方法! | |
$("选择器")这种方式获取的对象!我们称之为jQuery对象! | |
jQuery对象也不能使用DOM对象的方法! | |
这两个对象 分别有 自己的一套方法! 不能混用! 除非转换成对应的对象! | |
--> | |
</head> | |
<body> | |
<div id="myDiv">第一个盒子</div> | |
<div id="second">第2个盒子</div> | |
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script> | |
<script type="text/javascript" src="../js/07changeAll.js"></script> | |
</body> | |
</html> |
7、over和enter的区别
<!DOCTYPE html> | |
<head> | |
<meta charset="UTF-8"> | |
</head> | |
<body> | |
<p>不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。</p> | |
<p>只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。</p> | |
<div class="over" style="padding:20px;width:40%;float:left"> | |
<h2 style="">被触发的 Mouseover 事件:<span></span></h2> | |
</div> | |
<div class="enter" style="padding:20px;width:40%;float:right"> | |
<h2 style="">被触发的 Mouseenter 事件:<span></span></h2> | |
</div> | |
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script> | |
<script type="text/javascript"> | |
x=0; | |
y=0; | |
$(document).ready(function(){ | |
$("div.over").mouseover(function(){ | |
$(".over span").text(x+=1); | |
}); | |
$("div.enter").mouseenter(function(){ | |
$(".enter span").text(y+=1); | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
JavaQuery的更多相关文章
- JavaQuery操作对象
1.jQuery操作的分类 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...
- JavaQuery选择器
1.基本选择器 <!DOCTYPE html> <html> <head lang="en"> <meta charset=& ...
- Jquery学习笔记,全面实用,需要的可以留下邮箱,给大家发原稿文档
JQuery 第一章:Jquery概念介绍 1.1 Jquery介绍 (1)并不是一门新语言.将常用的.复杂的操作进行函数化封装,直接调用,大大降低了使用JavaScript的难度,改变了使用Java ...
随机推荐
- [转] A*寻路算法C++简单实现
参考文章: http://www.policyalmanac.org/games/aStarTutorial.htm 这是英文原文<A*入门>,最经典的讲解,有demo演示 http: ...
- c++细节--section1
1.register声明的变量为寄存器变量,因此没有地址,不能对它取地址操作. 2.[用错sizeof]当数组作为函数参数传递时,数组会退化为同类型的指针. 3.每个成员在成员初始化列表中只能出现一次 ...
- 【连接查询】mySql多表连接查询与union与union all用法
1.准备两个表 表a: 结构: mysql> desc a; +-------+-------------+------+-----+---------+-------+ | Field | T ...
- 更改arch的默认终端
实在是厌倦了gnome的资源管理器nautilus和终端gnome-terminal,于是卸载之,然后更换了xfce4的终端,但是出现了一个问题,那就是在资源管理器中使用邮件打开终端的时候打不开了,解 ...
- 【比赛游记】THUSC2018酱油记
day -1 早上4:30就要起来去飞机场…… 7点的飞机,10:30就到北京了. 北京的街景并没有我想像的漂亮……大概是因为我在四环外〒▽〒 晚上还有CF div3场,果断的去水了,因为太累就没有打 ...
- Linux信息搜集
## 1.取证工具 - LiME 内存获取工具 - volatility 内存分析工具 ## 2.机器信息收集 #sysinfo 16 # # 查看当前登录用户 who > who.txt # ...
- Python标准库笔记(6) — struct模块
该模块作用是完成Python数值和C语言结构体的Python字符串形式间的转换.这可以用于处理存储在文件中或从网络连接中存储的二进制数据,以及其他数据源. 用途: 在Python基本数据类型和二进制数 ...
- js实现ctrl+v粘贴图片或是截图
浏览器环境:谷歌浏览器 1.ctrl+v粘贴图片都是监听paste时间实现的,复制的数据都存在clipboardData下面,虽然打印显示数据长度为0,但是还是可以获取数据的 2.打印clipboar ...
- hive数据倾斜问题
卧槽草草 来源于其它博客: 貌似我只知道group by key带来的倾斜 hive在跑数据时经常会出现数据倾斜的情况,使的作业经常reduce完成在99%后一直卡住,最后的1%花了几个小时都没跑完, ...
- 洛谷P2018消息传递
传送门啦 这个树形dp就没那么简单了,运用了一下贪心的思想 不同的排序方法对应着不同的转移方程,如果我们用 $ f[x] = max(f[x] , b[i] +cnt - i + 1) $ 来进行转移 ...