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 ...
随机推荐
- Android SQLite服务--创建、增删改查
<pre name="code" class="java">import android.content.Context; import andro ...
- JDK8新特性：函数式接口
一,定义 函数式接口,英文为Functional Interface.首先它是一个接口,那么它与其它接口有什么不同呢?不同点就是在这个接口中只允许有一个抽象方法. 这里的只允许一个抽象方法不包括以下几 ...
- Java中的命名规范到底是怎样的
内容摘要:命名规范二,java中的方法名,对象名和字段名的第一个单词的首写字母应该小写,而后面的每个单词的首字母都应该小写 要想将java基础学的十分的牢固就必须将java中的命名规范掌握好了.俗话说 ...
- springmvc-servlet.xml（springmvc-servlet.xml 配置 增强配置）
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- week1 notebook1
初识Python 一.python介绍 - 解释器: cpython(默认使用) ipython(shell) jpython(java) ironpython rubypython - 编码: as ...
- 适配器模式(adapter)C++实现
意图:将一个类的接口转换成客户希望的另一个接口. 适用性:1.你想使用一个已存在的类,而它的接口不符合你的需求. 2.你想创建一个可以复用的类,该类可以与其它不相关的类或不可预见的类协同工作. 类适配 ...
- React 16 服务端渲染的新特性
React 16 服务端渲染的新特性 React 16 中关于服务端渲染的新特性 快速介绍React 16 服务端渲染的新特性,包括数组.性能.流等 React 16 终于来了!
- Linux od与hexdump命令
od命令:以指定格式输出文件内容常用格式:od -Ax -tx1 filename直接格式:od filename 等价 od -o filename语法:od [-abcdfsiloxv] [-An ...
- Functor、Applicative 和 Monad（重要）
Functor.Applicative 和 Monad Posted by 雷纯锋Nov 8th, 2015 10:53 am Functor.Applicative 和 Monad 是函数式编程语言 ...
- PhotoZoom Classic 7中的新功能
众所周知PhotoZoom Classic是家庭使用理想的放大图像软件.目前很多用户还在使用PhotoZoom Classic 6,对于PhotoZoom Classic 7还是有点陌生.其实在6代衍 ...