JQuery- JQuery学习
jQuery与JavaScript加载页面的区别
1.JavaScript传统的方式页面加载会存在覆盖问题，加载比jQuery慢(整个页面加载完毕<包含里面的其他内容，比如图片>)
2.jQuery的加载比JavaScript加载要快！(当整个dom数结构绘制完毕就会加载)
3.jQuery不存在覆盖问题,加载的时候是顺序执行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ与JavaScript加载页面的区别</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.min.js" ></script>
<script>
window.onload = function(){
alert("张三");
} //传统的方式页面加载会存在覆盖问题，加载比JQ慢(整个页面加载完毕<包含里面的其他内容，比如图片>)
window.onload = function(){
alert("老宋");
} //JQ的加载比JS加载要快！(当整个dom数结构绘制完毕就会加载)
jQuery(document).ready(function(){
alert("李四");
}); //JQ不存在覆盖问题,加载的时候是顺序执行
$(document).ready(function(){
alert("王五");
}); //简写方式
$(function(){
alert("赵六");
}); </script>
</head>
<body>
</body>
</html>
jQuery的获取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ的获取</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.min.js" ></script>
<script>
$(function(){
//1.js的获取
/*document.getElementById("btn").onclick=function(){
location.href="惊喜.html";
}*/ //2.jq的获取======>$("#btn")
$("#btn").click(function(){
location.href="惊喜.html";
});
});
</script>
</head>
<body>
<input type="button" value="点我有惊喜！" id="btn"/>
</body>
</html>
DOM对象与jque对象的转换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM对象与JQ对象的转换</title>
<script type="text/javascript" src="../../js/jquery-1.8.3.min.js" ></script>
<script>
function write1(){
//1.JS的DOM操作
//DOM对象无法操作JQ对象的属性和方法
//document.getElementById("span1").innerHTML="萌萌哒";
var spanEle = document.getElementById("span1"); //将DOM对象转换成JQ对象
$(spanEle).html("思密达"); } $(function(){
$("#btn").click(function(){ //jQuery对象无法操作,JS技巧里面的修行
//$("#span1").innerHTML = "呵呵哒";
$("#span1").html("呵呵哒"); //jq对象向DOM对象转换方式一
$("#span1").get(0).innerHTML="美美哒！"; //jq对象向DOM对象转换方式一
$("#span1")[0].innerHTML="棒棒哒"; });
});
</script>
</head>
<body>
<input type="button" value="JS写入" onclick="write1()"/>
<input type="button" value="JQ写入" id="btn" /><br />
班长：<span id="span1">你好帅！</span> </body>
</html>
使用jQuery完成首页定时弹出广告图片
实现步骤
第一步：引入jQuery相关的文件
第二步：书写页面加载函数
第三步：在页面加载函数中，获取显示广告图片的元素
第四步：设置定时操作（显示广告图片的函数）
第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示（show（）)
第六步：清除显示广告图片的定时操作
第七步：设置定时操作（隐藏广告图片的函数）
第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())
第九步：清除隐藏广告图片的定时操作
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
<script>
$(function(){
//1.书写显示广告的定时操作
time=setInterval("showAd()",3000);
});
//2.书写显示广告图片的函数
function showAd(){
//3.获取广告图片
//$("#img2").show(1000);
$("#img2").slideDown(1000);
//4.清除显示图片的定时操作
clearInterval(time);
//5.设置隐藏图片的定时操作
time=setInterval("hiddenAd()",3000);
}
function hiddenAd(){
//6.获取图片广告图片，并让其隐藏
//$("#img2").hide();
$("#img2").slideUp(1000);
//7.清除隐藏图片的定时操作
clearInterval(time);
} </script>
</head>
<body>
<div id="father" style="height: 500px;width: 500px;">
<img src="../img/1.jpg" width="100%" style="display: none" id="img2" />
<!--<input type="button" value="下一张" " />-->
<img src="../img/1.jpg" width="100%" height="100%" id="img1"/>
</div>
</body>
</html>
toggle()的使用
切换元素的可见状态
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>toggle的使用</title>
<style>
div{
border: 1px solid white;
width: 500px;
height: 350;
margin: auto;
text-align: center;
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
<script>
$(function(){
$("#btn").click(function(){
$("#img1").toggle();
});
});
</script>
</head>
<body>
<div>
<input type="button" value="显示/隐藏" id="btn" /><br />
<img src="../img/飞机05.gif" width="100%" height="100%" id="img1" />
</div>
</body>
</html>
使用jQuery完成表格隔行变色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格隔行变色</title>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
<script>
//1.页面加载
$(function(){
//2.获取tbody下面的偶数行并设置背景颜色
$("tbody>tr:even").css("background-color","yellow");
//3.获取tbody下面的齐数行并设置背景颜色
$("tbody tr:odd").css("background-color","pink");
});
</script> </head>
<body >
<table border="1" width="500" height="50" align="center" id="tb1">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
使用jQuery实现全选和全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选和全不选</title>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
<script>
$(function(){ $("#select").click(function(){
//获取下面所有的复选框并将其选中状态，设置跟编码的eagel
//attr 方法与jQuery的版本有关，在1.8.3及其以下有效
//$("tbody input").attr("checked",this.checked);
$("tbody input").prop("checked",this.checked);
});
});
</script>
</head>
<body >
<table border="1" width="500" height="50" align="center" id="tb1">
<thead>
<tr>
<td colspan="4">
<input type="button" value="添加" />
<input type="button" value="删除" />
</td>
</tr>
<tr>
<th><input type="checkbox" id="select"/></th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/ class="selectOne"></td>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" class="selectOne"/></td>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr>
<td><input type="checkbox" class="selectOne"/></td>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr>
<td><input type="checkbox" class="selectOne" /></td>
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr>
<td><input type="checkbox" class="selectOne" /></td>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr>
<td><input type="checkbox" class="selectOne" /></td>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市二级联动</title>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>
<script>
$(function(){ //2.创建二维数组用于存储省份和城市
var cities = new Array();
cities[]=new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[]=new Array("长沙市","郴州市","株洲市","岳阳市");
cities[]=new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[]=new Array("郑州市","洛阳市","开封市","安阳市"); $("#province").change(function(){
//alert("aa");
//1.获取用户选择的省份
var val = this.value;
//alert(val);
//3.遍历二维数组中的省份
$.each(cities, function(i, n){
//alert(i+":"+n);
//4.判断用户选择的省份和遍历省份
if(val==i){
//5.遍历该省份的所有城市
$.each(cities[i],function(j, m){
//alert(m);
//6.创建城市文本节点
var textNode = document.createTextNode(m);
//7.创建option元素节点
var opEle = document.createElement("option");
//8.将城市文本节点添加到option元素节点中去
$(opEle).append(textNode);
//9.将option元素节点追加到第二个下拉列包啊
$(opEle).appendTo($("#city"));
})
}
}) });
});
</script>
</head>
<body>
<table>
<tr>
<td>
<select id="province">
<option>--请选择--</option>
<option value="">湖北</option>
<option value="">湖南</option>
<option value="">河北</option>
<option value="">河南</option>
</select>
<select id="city"></select>
</td>
</tr>
</table>
</body>
</html>
JQuery- JQuery学习的更多相关文章
- jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
今天学习jQuery,看到nth-child(even)用法,特意找了下这个选择器的用法,在CSS3标准中,用法很强大. 对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选 ...
- jQuery源代码学习之九—jQuery事件模块
jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 j ...
- jQuery源代码学习之八——jQuery属性操作模块
一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...
- jQuery源代码学习之七—队列模块queue
一.jQuery种的队列模块 jQuery的队列模块主要是为动画模块EFFECTS提供支持,(不过到现在为了支持动画队列的inprogress的出入队还是搞不太清楚),单独抽取出一个命名空间是为了使程 ...
- jQuery源代码学习之六——jQuery数据缓存Data
一.jQuery数据缓存基本原理 jQuery数据缓存就两个全局Data对象,data_user以及data_priv; 这两个对象分别用于缓存用户自定义数据和内部数据: 以data_user为例,所 ...
- jQuery源代码学习之五——jQuery.when
jQuery.when提供了基于一个或多个对象的状态来执行回调函数的功能,通常是基于具有异步事件的异步队列. 如果传入多个异步队列,jQuery.when会返回一个新的主异步队列的只读副本(promi ...
- Jquery插件学习
前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用, 本人就感觉很好奇他们是怎么做到的呢,于是自 ...
- JQuery基础学习总结
JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...
- jQuery Mobile 学习
jQuery Mobile 学习系列 http://blog.csdn.net/bao990423420/article/details/13995021
- jQuery EasyUI学习资源汇总
jQuery EasyUI学习资源汇总 EasyUi – 1.入门 EasyUi – 2.布局Layout + 3.登录界面 EasyUi – 4.datwagrid 学习Jquery EasyUI的 ...
随机推荐
- 学习IIS & MVC的运行原理
我一直疑惑于以下问题,从客户端发出一个请求,请求到达服务器端是怎样跟iis衔接起来的,而iis又是怎样读取我发布的代码的,并返回服务器上的文件.这其中是怎样的一个处理过程. 1:当你从浏览器中输入一个 ...
- Android Studio 使用笔记：工具窗口浮动与布局恢复
Android Studio 的工具窗口都可以变成浮动窗口,如果有多个显示器的话,这种模式非常方便.方法如下: 然后就像下图那样,可以拖拽了.如果你不小心关了,没有关系.再次点击工具栏,浮动窗口就回显 ...
- RS-232针脚（8 pin）
1 CD Carrier Detect 载波检测 2 RXD Receive Data 接收 3 TXD Transmit Data 发送 4 DTR Data Terminal Ready ...
- PHP 使用 GeoLiteCity 库解析 IP 为地理位置
关于把 IP 地址转换为地理位置可以使用网络上很多的 API,好处就是不用在本地存储一个 IP 数据库,而且一般网络上的 IP 库会自动更新,不利的地方就是太依赖于网络,性能表现也可能会弱些.比如像下 ...
- 【C#学习笔记】之用button使得textbox中数字的值增减
代码段: string t = ""; t = mv.textBox2.Text; int n = int.Parse(t); n = n + 1; mv.textBox2.Tex ...
- Mac OS X 安装Ruby
安装CocoaPods第一步 起因:重装系统后需要重新安装CocoaPods网上搜了下发现很多都过时了,已经不能用了.而且taobao Gems源已经停止服务,现在有ruby-china提供服务 PS ...
- android 自定义 listView
目录: 1.主布局 ListView <?xml version="1.0" encoding="utf-8"?><RelativeLayou ...
- Pollard-Rho大整数拆分模板
随机拆分,简直机智. 关于过程可以看http://wenku.baidu.com/link?url=JPlP8watmyGVDdjgiLpcytC0lazh4Leg3s53WIx1_Pp_Y6DJTC ...
- vue router-link子级返回父级页面
vue-router嵌套路由,从二级路由跳转到一级路由时,间歇性导致一级路由重叠 解决方法: 1.使用this.$router.push跳转
- c# 怎么更改DataTable 中某列的值？
DataColumns dc = td.Columns["你的列"]; int inx = dc.Ordinal;td.Columns.Remove(dc);dc.DefaultV ...