jQuery练习总结(一)
第一个jQuery程序：
注意：使用jQuery时候定义单击事件使用的方法是click(function(){处理单击事件产生时所要执行的代码}) ，
而JavaScript定义的单击事件则是 xx.onclick=function(){处理单击事件产生时所要执行的代码}，两者不能搞混
----------------------------------------
window.onload 和$(document).ready(function(){})是有区别的
/*下面这三种方式效果看似一样 刷新页面时 运行效果相同 但是在dom资源很大的时候就能体现出差异
window.onload=function(){
alert("1");
}
$(function(){//下面第三种的简化写法
alert("1");
})
$(document).ready(function(){
alert("1");
})
*/
-----------------------------------------
通过get方法可以得到对应的dom对象，例如jQuery选择的结果是一个jQuery对象集合，那么获得该集合中第一个元素的dom对象 就使用.get(0) 同样获得第二个 .get(1)
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--导入js库-->
<script src="jquery.js"></script>
<script type="text/javascript">
//$(function(){})相当于window.onload 代码写在{}之间 文档加载完毕
$(function (){
$("button").click(function(){//下面现在存在两个button 隐式迭代 为每个button按钮添加单击事件 所以 无论单价哪一个按钮 都会触发事件
//alert("HelloWorld"); //1.jq对象转换为dom对象的测试
//获取一个jquery对象
var $jq=$("button");
alert($jq.length);//打印长度 2
//把该jq对象 转换为dom对象 并且调用dom对象的方法
var dom=$jq.get();//获得的是第一个button按钮的dom对象
alert(dom.nodeType);//元素节点的nodetype值为1
alert(dom.firstChild.nodeType);//获取元素节点中的文本子节点 打印3
alert(dom.firstChild.nodeValue);//输出文本节点的文本值 //2.dom对象转换为jq对象的测试
//获取dom对象
var dom2=document.getElementById("btn1");
//转换为jq对象
var $jq2=$(dom2);
//调用jq对象中的方法 打印得到的按钮的文本值
alert("调用jq对象中的方法 打印btn按钮的文本值："+$jq2.text());//打印"单击我"
})
})
</script>
</head>
<body>
<button id="btn1">单击我</button>
<br>
<button>单击我2</button>
</body>
</html>
运行效果：
-----------------------------------
选择class为mini的元素
选择id为one的元素
选择所有的div标签元素
选择所有元素
选择所有的span标签和id为two的元素(并集)
代码：
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
} div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
} div.hide {
display: none;
}
</style> <!-- 导入 jQuery 库 -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> $(function(){
//基本选择器的使用测试
//1. 使用 id 选择器选择 id=btn1 的元素: $("#btn1")
//2. 为选择的 jQuery 对象添加 click 响应函数:
// $("#btn1").click(function(){}), 响应函数的代码
//写在 function(){} 的中括号中.
$("#btn1").click(function(){
$("#one").css("background", "#ffbbaa");//选择 id 为 one 的元素
});
$("#btn2").click(function(){
$(".mini").css("background", "#ffbbaa");//选择 class 为 mini 的所有元素
});
$("#btn3").click(function(){
$("div").css("background", "#ffbbaa");//选择 元素名是 div 的所有元素
});
$("#btn4").click(function(){
$("*").css("background", "#ffbbaa");//选择 所有的元素"
});
$("#btn5").click(function(){
$("span,#two").css("background", "#ffbbaa");//选择 所有的 span 元素和id为two的元素（两个结果的并集）
});
}) </script> </head>
<body>
<input type="button" value="选择 id 为 one 的元素" id="btn1" />
<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
<input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
<input type="button" value="选择 所有的元素" id="btn4" />
<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" /> <br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span">^^span元素^^</span>
</body>
</html>
运行效果：
最初页面：
单击第一个按钮：
刷新，单击第二个按钮：
刷新，单击第三个按钮：
刷新，单击第四个按钮：
刷新，单击第五个按钮：
---------------------------------------
层次选择器
代码(观察script中的代码，7个单选按钮，每个按钮选择不同的元素)：
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
} div.mini{
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
} div.hide {
display: none;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> $(function(){ $("#btn1").click(function(){
$("body div").css("background", "#ffbbaa");//选择 body 内的所有 div 元素 为其添加样式
});
$("#btn2").click(function(){
$("body > div").css("background", "#ffbbaa");//在 body 内, 选择子元素是 div 的（body内的直接div子元素 不包括孙子div）
});
$("#btn3").click(function(){
$("#one + div").css("background", "#ffbbaa");//选择 id 为 one 的下一个 div 元素
}); $("#btn4").click(function(){
$("#two ~ div").css("background", "#ffbbaa");//选择 id 为 two 的元素后面的所有 div 兄弟元素(后面，且不包含孙子)
});
$("#btn5").click(function(){
$("#two").siblings("div").css("background", "#ffbbaa");//选择 id 为 two 的元素所有 div 兄弟元素 (前面和后面)
});
$("#btn6").click(function(){
//以下选择器选择的是近邻 #one 的 span 元素, 若该span
//和 #one 不相邻, 选择器无效.
//$("#one + span").css("background", "#ffbbaa");//这种方式如果下一个直接元素不是span 那么就没作用 所以采取下面的代码
$("#one").nextAll("span:first").css("background", "#ffbbaa");//选择 id 为 one 的下一个 span 元素
});
$("#btn7").click(function(){
$("#two").prevAll("div").css("background", "#ffbbaa");//选择 id 为 two 的元素前边的所有的 div 兄弟元素(不包括孙子)
});
}) </script>
</head>
<body>
<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
<input type="button" value="在 body 内, 选择子元素是 div 的." id="btn2" />
<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
<input type="button" value="选择 id 为 two 的元素所有 div 兄弟元素" id="btn5" />
<input type="button" value="选择 id 为 one 的下一个 span 元素" id="btn6" />
<input type="button" value="选择 id 为 two 的元素前边的所有的 div 兄弟元素" id="btn7" /> <br><br>
<div class="one" id="one">
id 为 one,class 为 one 的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span">^^span元素^^</span>
<span id="span">--span元素--</span>
</body>
</html>
运行效果：
最初页面：
单击第一个按钮
刷新页面，恢复最初，然后单击第二个：
刷新，单击第三个：
刷新，单击第四个：
刷新，单击第五个：
刷新，单击第六个：
刷新，单击第七个：
jQuery练习总结(一)的更多相关文章
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
- Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
- jQuery的61种选择器
The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...
- jquery.uploadify文件上传组件
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
- 浅谈 jQuery 核心架构设计
jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...
随机推荐
- IOS算法(二)之选择排序
选择排序: 每一趟从待排序的数据元素中选出最小(或最大)的一个元素,顺序放在已排好序的数列的最后.直到所有待排序的数据元素排完. 选择排序是不稳定的排序方法. 一. 算法描写叙述 选择排序:比方在一 ...
- ios业务模块间互相跳转的解耦方案
*此文章需有一点runtime的知识,假设你不了解runtime,<高速理解Runtime of Objective-C>: http://mp.weixin.qq.com/s?__biz ...
- 扩展欧几里德 poj1061 青蛙的约会
扩展欧几里德很经典.可是也有时候挺难用的.一些东西一下子想不明确.. 于是来了一个逆天模板..仅仅要能列出Ax+By=C.就能解出x>=bound的一组解了~ LL exgcd(LL a, LL ...
- 【cocos2d-x 3.7 飞机大战】 决战南海I (十二) 游戏结束场景
游戏结束的时候,要显示分数.还要可以选择是返回主场景还是退出游戏 // 退出游戏 void menuCloseCallback(cocos2d::Ref* pSender); // 返回主界面 voi ...
- 基于SpringMVC+SpringJDBC的用户管理系统（增删查改）
鉴于MyBatis暂时不会用,所以用刚学的SpringJDBC代替,也很简洁.以下贴出几个重要的代码. 1.UserDaoImpl数据库操作实现类 package com.wxy.dao.impl; ...
- Linux - 控制台界面，虚拟界面，字符界面
tty控制台终端. pts虚拟终端. tty1 图形界面. tty2 字符界面. Ctrl+Alt+F2-6 在字符界面下,通过Alt+F2 切换回来.或者切换到其他的字符界面. Alt+F2 pts ...
- Wannafly挑战赛25 A 因子 数学
题面 题意:令 X = n!,给定一大于1的正整数p,求一个k使得 p ^k | X 并且 p ^(k + 1) 不是X的因子,n,,p(1e18>=n>=1e4>=p>=2) ...
- Dalvik虚拟机和JVM的对比
Dalvik虚拟机与Java虚拟机有着很多相似的特性,都支持GC,JIT,JNI等等.其主要区别在于文件格式以及指令集不同,下面对两者的特性进行比较与讨论. Difference1:文件格式 Dalv ...
- X264编码实现
H264 H264的官方测试源码,由德国hhi研究所负责开发.特点:实现了264所有的特性,由于是官方的测试源码,所以学术研究的算法都是在JM基础上实现并和JM进行比较.但其程序结构冗长,只考虑引入各 ...
- WindowsNT设备驱动程序开发基础
一.背景介绍 1.1WindowsNT操作系统的组成1.1.1用户模式(UserMode)与内核模式(KernelMode) 从Intel80386开始,出于安全性和稳定性的考虑,该系列的CPU可以运 ...