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 ...
随机推荐
- 【BZOJ】2208 [Jsoi2010]连通数
[题意]给定n个点的有向图,求可达点对数(互相可达算两对,含自身).n<=2000. [算法]强连通分量(tarjan)+拓扑排序+状态压缩(bitset) [题解]这题可以说非常经典了. 1. ...
- 微服务深入浅出(7)-- 网关路由Zuul
Zuul用于构建边界服务,致力于动态路由,过滤,监控,弹性伸缩和安全等方向. 1.Zuul+Ribbon+Eureka结合,可以实现智能路由和负载均衡 2.网关将所有服务的API接口统一聚合统一暴露 ...
- Shell编程之运算符和环境变量配置文件
一.shell运算符: declare命令: declare -i 变量名 #声明变量 eg. movie[o]=dzp #定义数组 ...
- UNIX网络编程 第8章 基本UDP套接字编程
UDP是无连接的,不需要accept,TCP通过accept API来接受连接,并且将连接客户端的信息写入到accept将返回的新socket中,该新socket中有服务端和客户端的IP地址和端口,因 ...
- Struts2笔记3--获取ServletAPI和OGNL与值栈
获取ServletAPI: 第一种方式: //在request域中放入属性req,暂且认为getContext()获取的是request域空间,但实际不是 ActionContext.getConte ...
- SDL封装的系统操作(转载)
Andrew Haung bluedrum@163.com SDL封装很多操作系统的功能,为了保证SDL程序可移植性,最好尽量用这一些封装函数,哪果没有的话,才使用各种操作本地函数. 对于如何封各个 ...
- 【算法学习】老算法,新姿势,STL——Heap
“堆”是一个大家很熟悉的数据结构,它可以在\(O(log\;n)\)的时间内维护集合的极值. 这都是老套路了,具体的内部实现我也就不谈了. 我一般来说,都是用queue库中的priority_queu ...
- 01-Coredump核心转存&&Linux程序地址分析【转】
转自:http://www.itwendao.com/article/detail/404132.html 目录(?)[-] 一Core Dump核心转存 二Linux程序地址分析 一Core Dum ...
- Python爬取微信好友
前言 今天看到一篇好玩的文章,可以实现微信的内容爬取和聊天机器人的制作,所以尝试着实现一遍,本文记录了实现过程和一些探索的内容 来源: 痴海 链接: https://mp.weixin.qq.com/ ...
- MySQL 导入CSV数据
第一步 创建表结构 create table t1( key1 ), v1 ) ); 第二步 导入数据 load data local infile 'D:/t1.csv' into table t1 ...