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的 ...
随机推荐
- linux中的热插拔和mdev机制
mdev手册(自己翻译的留着看) mdev实现U盘或SD卡的自动挂载 mdev的使用以及mdev.conf的规则配置--busybox linux中的热插拔和mdev机制 关于实现udev/mdev自 ...
- 【一键激活win8.1系统】
下载激活工具地址: 链接:https://pan.baidu.com/s/1AUaQQRcqfCYWK94KapYjjA 密码:i4sk 下载后,右键单击“以管理员身份运行”Microsoft Too ...
- 功能强大的图片截取修剪神器：Android SimpleCropView及其实例代码重用简析（转）
功能强大的图片截取修剪神器:Android SimpleCropView及其实例代码重用简析 SimpleCropView是github上第一个第三方开源的图片修剪截取利器,功能强大,设计良好.我个人 ...
- CardView的具体使用方法(转)
转载自:CardView的具体使用方法 因为学习做此记录方便查找使用 今天主要是CardView的用法,CardView是在安卓5.0提出的卡片式控件.首先介绍一下它的配置. 在gradle文件下添 ...
- js读取json包装的map集合
后台 Map<String,Integer> map = new HashMap<>(); map.put("你好1", 1); map.put(" ...
- 关于使用eclipse开发最小运行组件包
有的时候向用eclipse组件,但是其中好多东西是相互关联的,如果在eclipse上做二次开发固然可以,但是有的时候想要的只不过是一个可以运行的架包而已,所以不必要那么多东西. 下面是我使用eclip ...
- python 微信跳一跳进阶
上一篇是通过图片识别来计算跳的距离,再计算按压时间,最后通过adb来控制手机跳的 本篇讲的是通过机器学习,来训练的算法进行跳一跳的 链接: github:https://github.com/Prin ...
- solr6.5的分词
1.配置solr6.5自带中文分词.复制/usr/local/solr/contrib/analysis-extras/lucene-libs/lucene-analyzers-smartcn-6.5 ...
- 学习Sharding JDBC 从入门到出门-02：源码揣测
sjdbc有读写分离的功能,要使用这个功能,在创建数据源对象是要使用类:MasterSlaveDataSource,并且设置主备数据源和数据库名称 这个对象有下面的属性: name:数据库的名称 ma ...
- Android5.0以后版本把应用移动到SD或者TF卡的方法
由于手机内存较小,才8G,用的时间一久,内部存储就满了,天天删垃圾,WIFI还老断线,终于忍无可忍了,决定把应用移动到SD卡,实践下来,只有少部分App默认支持移动到SD卡,大部分程序不支持只能装在内 ...