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的 ...
随机推荐
- Debug与Trace工具类的应用
在写Console程序的时候,能够使用Console.WriteLine()来时时的输出程序的执行状态和各种參数此刻的信息.可是假设是Windows Form程序,我们要怎样实时的观測程序的执行状况呢 ...
- 使用wifi连接eclipse进行android程序调试
首先手机必须是root过的.能够使用百度一键root工具. 然后,在手机中打开这个终端(terminal)应用,输入例如以下命令: su setprop service ...
- Oracle 技术支持之现场优化的思维路径
性能调优是每个DBA职业生涯中都能遇到的任务 大到世界五百强的核心系统,小到乡镇企业的进销存,几乎都会有要调优的时候 面对形形色色的系统,林林总总的需求,调优的手段也是丰富多彩 定位问 ...
- android 蓝牙低耗能（LBE）技术介绍
蓝牙低能耗(BLE)技术是低成本.短距离.可互操作的鲁棒性无线技术.工作在免许可的2.4GHz ISM射频频段.它从一開始就设计为超低功耗(ULP)无线技术. 它利用很多智能手段最大限度地减少功耗. ...
- 推荐android布局百分比框架
githup:https://github.com/JulienGenoud/android-percent-support-lib-sample 下面是使用方法: Android Percent S ...
- html5小趣味知识点系列（二）tabindex
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Keepalived 集群在Linux下的搭建
[概述]:Keepalived 是一个免费开源的,用C编写.主要提供loadbalancing(负载均衡)和 high-availability(高可用)功能,负载均衡实现需要依赖Linux的虚拟服务 ...
- TP框架---thinkphp中ajax分页
//点击类别后要显示的内容 public function pagechuli3()//这个方法的功能是根据ajax传过来的值查询数据,再将查询出来的数据返回到ajax,返回的默认是JSON类型. { ...
- 【BZOJ4320】ShangHai2006 Homework 分段+并查集
[BZOJ4320]ShangHai2006 Homework Description 1:在人物集合 S 中加入一个新的程序员,其代号为 X,保证 X 在当前集合中不存在. 2:在当前的人 ...
- php解析xml文件为数组
$xml = simplexml_load_file($fullfilename); $arr = json_decode(json_encode($xml),true); echo "&l ...