jquery库会对其实的函数或者属性做不出不同程度的修改
或者添加、删除,所以在之后的具体的操作中,最终还是要
以当前版本的测试结果为准,但是它们的操作方式和思路
几乎都是一样的,同时注意浏览器的兼容性问题)
1.发展历程:javascript到jQuery：
javascript是Netscape公司开发的一种脚本语言，
其出现使得网页和用户之间实现了一种实时的，
动态的和交互的关系使网页包含更多活跃的元素。
弊端：
1.复杂的文档对象模型（DOM）
2.不一致的浏览器实现
3.缺乏便捷的开发调试工具
AJAX （Asynchronous javascript and xml,异步的javascript和XML）
javascript库的作用：为了简化javascript的开发，
javascript库封装了很多预定义的对象和使用函数。
JQuery就是js的一个库(其实就是别人给我们封装好的js文件,简化我们平时的js中的代码操作)
JQuery 简洁的语法和跨平台的兼容性，极大的简化了javascript开发人员遍历HTML文档，操作DOM，处理事件，执行动画和开发AJAX(javascript + xml + json )，其理念：write less,do more
优势：
1，轻量级
2，强大的选择器
3，出色的DOM操作的封装
4，可靠的事件处理机制
5，完善的Ajax,$.ajax()无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用
6，不污染顶级变量，只建立一个名为jQuery对象，其所有函数方法都在这个对象之下
7，出色的浏览器兼容性
8，链式操作方式，发生在同一个jquery对象上的一组动作，可以直接连写而不用重复获取对象
9，基于jquery可以开发出各种各样优秀的jquery插件
注意:我们自己可以使用jquery提供给我们的各种函数对
页面中的dom元素来进行操作从而完成我们想要的功能和
效果。同时我们也可以针对页面中的某一种功能效果,使
用jquery来开发基于jquery的插件,那么这个插件将来就
可以在不同的项目中使用从而实现和我们之前一样的效果
(就像我们使用java开发框架在不同的项目中使用一样的道理).
jquery库类型
完整版本： 主要用于测试，学习和开发
mini版本： 主要用于产品和项目
jquery官网下载地址:http://jquery.com/download/
jquery库有俩种版本
jquery 1.x 兼容所有IE浏览器的
jquery 2.x 不支持低端IE浏览器(IE8以及IE8以下版本)
2.jQuery的使用
jQuery不需要安装，想要在某个页面上使用jQuery时，只需要在相关的html中引入jQuery的库文件即可。
注意:jQuery库中只提供了一个【名字为jQuery】的对象,但是这个对象有很多方法以及属性,同时还提供了方法可以把我们平时使用的普通页面元素【转换】为jQuery类型的对象来使用,这样我们就可以在拿到页面元素后转成jQuery对象并使用jQuery使用的方法和属性了。
例如:
var d1 = document.getElementById("my_div");
//出错,因为d1是dom模型中的对象而不是jQuery的对象,而hide是jQuery中的函数
d1.hide();
//注:jQuery对象一般用$开头的变量接收,当然也使用一般的变量名字
var $d2 = jQuery("#my_div");
var $d2 = $("#my_div");
//正确的把div隐藏了,因为$d2是一个jQuery的对象,所以调用jQuery提供的方法
$d2.hide();
强调:jQuery库只提供了一个叫jQuery的对象,但是我们可以使用jQuery库中提供的方法把我们的普通dom对象转换为jQuery的对象,从而使用其提供的方法.
$是jQuery的一个简写形式
$("#y_div")等价于jQuery("#my_div")
之后的代码中我们一般都会使用jQuery的简写
如何判断一个对象是不是jQuery的对象?
var $d2 = jQuery("#my_div");
alert($d2 instanceof jQuery);//返回true则是jQuery对象
alert(typeof($d2));//Object 这个判断不出来
window对象的onload事件:当某个元素加载完毕的时候触发
例如:
<html>
<head>
<script type="text/javascript">
//给window对象的onload事件绑定一个匿名函数
window.onload = function(){
// ....
}
</script>
</head>
<body>
.....
.....
.....
</body>
</html>
注:这里表示当网页中所有的内容加载完毕后（包含图片）才能执行代码中的匿名函数
jQuery中的有一个函数可以代替这种情况:
例如:
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
//...dosomething
});
</script>
</head>
<body>
.....
.....
.....
</body>
</html>
注:网页中所有DOM结构加载完毕后就执行ready方法中定义的匿名函数，可能dom元素关联的东西并没有加载完(图片等资源),效果和onload事件一样,但是执行效率比onload高,因为不需要等待页面中图片等资源的加载完毕.
jQuery的这个函数有一个简写的形式:
$(function(){
});
很像我们之前java中的在一个方法中写的匿名内部类的对象
a.test(new Student(){
....
});
3.DOM对象与jQuery对象：
1.DOM(Document Object Model 文档对象模型) 每一份DOM都可以表示成一颗树。
在html中，<table> <h2> <p> <ul> 等都是DOM元素节点
可以通过javascript中的方法获取到DOM元素节点：
getElementById()
getElementsByTagName()
..
2.jQuery对象 就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，如果一个对象是jquery对象就可以使用jquery库文件中的方法，但是jquery对象中无法使用dom对象的任何方法
例如:
$("#foo").html() 等价于 document.getElementById("foo").innerHTML;
但是不可以 $("#foo").innerHTML
3.对象之间的转化：
定义变量的风格，（推荐使用）js中的变量名是可以使用$开头的
dom对象使用普通的变量名字
jQuery对象一般可以使用$开头的变量名
这样主要是用于区别jquery对象和dom对象的,没有其他别的作用.jQuery对象也可以使用一个普通的变量名
1. jquery对象 转换为 DOM对象
jquery对象是一个数组对象，可以通过[index]方法得到相应的DOM对象 对象名[index],也可以通过get(index)方法获得，对象名.get(index)
其中index是jQuery对象中的下标(jquery可以看成一个数字/集合)
怎么来理解这里收的【数组对象】:首先它是一个对象,同时这个对象里面也有像数组一样的下标,可以存值和取值.除了这以外还有这个对象的其他的一些属性.这个时候如果使用for-in的话可以看到这个对象中的属性及其值.
2. DOM对象转换成jquery对象
使用$将DOM对象包装起来即可
var cc = document.getElementById("cc");
var $cc = $(cc);
其实所有的jquery对象都是通过$()函数制造出来的，它就是一个jquery对象的制造工厂
3. 获得一个jQuery对象的三种方式
一:把一个dom对象转换为jQuery对象
var cc = document.getElementById("cc");
var $cc = $(cc);
二:通过选择器直接拿到一个jQuery对象
var d = $("#my_div");
三:直接创造出一个jQuery对象
var v = $("<div>test</div>");
注意:我们使出回身解数把一个对象变为jQuery对象的目的 就是我们想通过这个对象调用到jQuery库给我们提供的各种简单便捷的函数.从而达到上面所提供的jQuery的理念:write less,do more
二，jquery选择器
1.熟悉一下之前学过的CSS 常用的选择器
标签选择器
div{
}
ID选择器
#my_div{
}
类选择器
.class_div{
}
群组选择器
div,#my_span,.my_li{
}
后代选择器
div span{
元素div的任意后代元素span
}
*{
以文档的所有元素作为选择符
}
2.jquery 选择器
jquery中的选择器完全继承了CSS的风格。利用jQuery选择器可以方便快速地找出特定的DOM元素，然后对它们进行各种操作。
jquery选择器找到元素后添加行为或者修改属性或者样式,css选择器找到元素后只能添加样式
选择器特性，如果页面上有要选择的元素，选中，如果没有则获得一个空的jquery对象。
1，基本选择器：最简单，但是最常用
通过Id，class,标签名查找DOM元素
1) id选择器
jQuery使用JavaScript函数document.getElementById()，返回单个元素，其他的基本选择器都是返回多个元素
每个id值在一个文件中只能使用一次。如果多个元素分配了相同的ID，将只匹配处于页面中最上面的一个匹配成功的元素.
$("#myId")
2) class选择器
相同class的元素在一个DOM中可以出现多次，通过类选择器可以选择零到多个元素
$(".myClass")
3) 标签选择器
jQuery使用JavaScript函数JavaScript的 getElementsByTagName()
$("table")
4) *选择器
获得所有元素
$("*")
5) 组合选择器 selector1,selector2,selector3 多个选择器
指定任意多个选择器，并将匹配到的元素合并到一个结果内。
$("div,span,p.myClass")
2，层次选择器：通过Dom元素之间的层次关系来获取特定元素，
例如后代元素，子元素，相邻元素，兄弟元素等
1)后代选择器
$("ancestor descendant")
ancestor: 任何有效的选择器。
descendant: 一个用来筛选后代元素的选择器。
选取ancestor元素中所有descendant元素，一个元素的后代可能是该元素的一个孩子，孙子，曾孙
注意:选择器中的空格 一定要有的
2)子代选择器
$("parent>child")
parent: 任何有效的选择器。child: 用来筛选子元素的选择器。
它只会选择第一级的后代
3)相邻兄弟选择器
$("prev+next") 也可以是jquery对象的next()函数获得(属于jquery中的查找函数)
prev: 任何有效的选择器。next: 用于筛选紧跟在 "prev" 后面的元素的选择器。
所选择到的元素必须是同一个父元素下的元素(紧挨着的兄弟关系)
例如:
$("#s2+span");
$("#s2").next();
4）一般兄弟选择器
$('prev~siblings')
prev: 任何有效的选择器。
siblings: 当前选中元素的后面的所有符合条件的兄弟元素。
$("#prev~div")
同时调用siblings()函数也能到达类似的效果(和上面的next函数情况差不多,也属于jquery中的查找函数)
例如:
<div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<span></span>
<span></span>
<span></span>
</div>
$("#div2~span") 获得div2【后面】的所有的span元素(三个)
$("#div2~div") 获得div2【后面】的所有的div元素(俩个)
$("#div2").siblings("div") 获得div2的【所有】的div兄弟元素(三个)
$("#div2").siblings() 获得div2的【所有】的兄弟元素(三个包括span和div)
3，过滤选择器：通过特定的过滤规则来筛选所需的DOM元素，过滤选择器都以冒号：开头
1）基本过滤器
:first
选取当前匹配成功的元素中的第1个元素
$("tr:first")
:last
选取当前匹配成功的元素中的最后一个元素
$("tr:last")
:not(selector)
去除所有与给定选择器匹配的元素:
$("input:not(.myclass)")
//-------------与索引有关的--------
:even，
选取索引是偶数的所有元素，索引从0开始，所以:even选择器是选择第一个元素，第三个元素，类推。
$("tr:even").css("background-color", "red");
推荐使用.filter(":even")方法，效率更高
$("tr").filter(":even").css("background-color", "red");
:odd 选取索引是奇数的所有元素，索引从0开始
选取索引是奇数的所有元素，索引从1开始，所以:even选择器是选择第二个元素，第四个元素，类推。
$("tr:odd").css("background-color", "red");
推荐使用.filter(":odd")方法，效率更高
$("tr").filter(":odd").css("background-color", "red");
:eq(index)
选取索引等于index的元素（index从0开始）
推荐使用.eq(index)方法
$("td:eq(2)").css("background-color", "red");
$("td").eq(2).css("background-color", "red");
:gt(index)
选取索引大于index的元素（index从0开始）
$("tr:gt(3)").css("background-color", "red");
推荐使用.slice(index)
$("tr").slice(3).css("background-color", "red");
:lt(index)
选取索引小于Index的元素（index从0开始）
$("tr:lt(3)").css("background-color", "red");
推荐使用.slice(0, index)
$("tr").slice(0,3).css("background-color", "red");
//------其他特殊的情况
:header 选取所有的标题元素，例如h1,h2,h3等
$(":header")
推荐使用.filter(":header")
$("*").filter(":header");
:animated
选取当前正在执行动画的所有元素
$("div:animated").toggleClass("colored");
2）内容过滤选择器
:contains(text)
选取含有文本内容为"text"的元素
匹配的文本可以直接出现在所选的元素中，或在该元素的任何后代中，或两者兼有。
$("div:contains('briup')").css("text-decoration", "underline");将含有"briup"的div加下划线
例如:
<div id="div5">456briup123</div>
<div id="div6">
<span>456briup123</span>
</div>
:empty
选取不包含子元素或者文本的 空元素
$("div:empty").text("Was empty!")
或者
$("div:empty").html("Was empty!")
:has(selector)
选取含有某些指定元素的元素
如果表达式 $('div:has(p)') 匹配一个 <div>，那么应有一个<p>存在于 <div> 后代元素中的任何地方，
不是直接的子元素也可以。
$("div:has('span')") 等价于 $("div:has(span)")
例如:$("div:has(#span1)")
:parent
选取含有子元素或者文本的元素，这个正好和 :empty相反。
$(".divClass:parent").fadeTo(1500, 0.3);
所有包含子元素的div在1500毫秒内将其透明度变为0.3
3）可见性过滤选择器
:hidden
选择所有隐藏的元素。
主要指的是:
CSS display值是none；
type="hidden"的表单元素
还有一些特殊情况:
<head>中的所有元素（不同浏览器可能情况不一样 ）
宽度和高度都显式设置为0
祖先元素是隐藏的
特殊可见：
元素visibility: hidden或opacity: 0 被认为是可见的，因为他们仍然占据布局空间。opacity是透明的意思
让一个隐藏的div在3000毫秒内显示出来
$("div:hidden").show(3000);
:visible
选取所有可见的元素
如果元素中占据文档中一定的空间,元素被认为是可见的。可见元素的宽度或高度，都要是大于零。
$(":visible")
$("div:visible")
4）属性过滤器
<div name="" id="" class="" myAtr="">
[attribute]
选择所有具有指定属性的元素，该属性可以是任何值。
$("div[id]") 选取拥有属性Id的div元素
[attribute="value"]
选择属性值为value的元素
value:一个属性值，可以是一个不带引号的一个单词或带一个引号的字符串。
$('div[class="cc"]')
[attribute!=value]
属性不等于value的元素
$('input[name!="newsletter"]')
[attribute^=value]
属性值以value开始的元素,速度比较慢，不推荐使用
$('input[name^="news"]').val('test');
[attribute$=value]
属性值以value结束的元素
$('input[name$="letter"]').val('test');
[attribute*=value]
选择指定属性具有包含一个给定的子字符串的元素。
$('input[name*="man"]').val('has man in it!');
[selector1][selector2]
多个属性选择器一起使用
$('input[id][name$="man"]')
5）子元素过滤选择器( )
:nth-child()
例如:
<div class="div1">div1
<span id="s1">s1</span>
<span id="s2">s2</span>
<span id="s3">s3</span>
<span id="s4">s4</span>
<span id="s5">s5</span>
<span id="s6">s6</span>
<span id="s7">s7</span>
</div>
<div class="div1">div2</div>
<div class="div1">div3</div>
选择 当前元素的 第1个子元素
$(".div1:first :nth-child(1)")
选择 当前元素的 第4个子元素
$(".div1:first :nth-child(4)")
选择 当前元素的 为偶数的子元素
$(".div1:first :nth-child(even)")
选择 当前元素的 为奇数的子元素
$(".div1:first :nth-child(odd)")
注意:$(".div1:first :nth-child(1)")中的空格一定要加,表示其子元素的筛选
:first-child
可以匹配多个：选取当前元素下面的第一个子元素，
相当于:nth-child(1)。
$("div span:first-child")
例如:
<div>
<span id="s1">s1</span>
<span id="s2">s2</span>
</div>
<div>
<span id="s1">s1</span>
<span id="s2">s2</span>
</div>
<div>
<span id="s1">s1</span>
<span id="s2">s2</span>
</div>
<div>
<span id="s1">s1</span>
<span id="s2">s2</span>
</div>
拿到所有div下面的span 共八个
$("div span");
拿到所有div下面的span 共八个,然后拿到每一个span
下面的第一个子元素 共0个因为span下面没有子元素
(文本元素不算)
$("div span :first-child")
拿到所有div下面的span 共八个,然后再进行筛选得到
每个div下面的第一个span 共四个
$("div span:first-child")
注意:通过上面现象【重视选择器中的空格】的作用
:last-child
可以匹配多个：选取当前元素的最后一个子元素
$("div span:last-child")
:only-child
如果某个元素是它父元素中唯一的子元素，将被匹配。
选择button标签元素,但是他必须是div中的唯一元素
$("div button:only-child")
:first-of-type
选择当前元素中同一类型的第一个元素。
如果有多个类型那么就选出每个类型的第一个元素
:last-of-type
选择当前元素中同一类型的最后一个元素
如果有多个类型那么就选出每个类型的最后一个元素
例如:
<div id="myDiv">
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<span id="span1"></span>
<span id="span2"></span>
<span id="span3"></span>
</div>
拿到myDiv下面的所有span,再筛选拿到第一个span
$("#myDiv span:first-of-type")
拿到myDiv下面的所有span,再筛选拿到最后一个span
$("#myDiv span:last-of-type")
拿到myDiv下面的所有子元素,然后筛选出每种子元素的第一个
得到test1元素和span1元素
$("#myDiv :first-of-type");
拿到myDiv下面的所有子元素,然后筛选出每种子元素的最后一个
得到test3元素和span3元素
$("#myDiv :last-of-type");
4，表单选择器：主要是对选择的表单元素进行过滤。
:enabled
选取所有可用元素
该选择器仅可用于选择支持disabled属性（attribute）的HTML元素
(<button>, <input>, <optgroup>, <option>, <select>, 和 <textarea>)。
$("input:enabled")
:disabled
选取所有不可用的元素
该选择器也是仅可用于支持disabled属性的HTML元素
$("input:disabled")
:checked
选取所有被选中的元素
用于复选框和单选框(下拉框)
$( "input:checked" ).length;
:selected
选取所有被选中的选项元素
该选择器只适用于<option>元素
$("select option:selected")
:input
选取所有的<input><textarea><select><button>元素
$(":input")选择可以让用户输入的标签元素
$("input")选择名字为input的标签元素
:text
选取所有的单行文本框（<input type="text">）
$('input:text')
:password 选取所有的密码框
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 图像
:reset 重置按钮
:button 所有按钮
:file 所有上传域
例如:
拿到页面中第一个form表单中的密码输入框
$("form:first input:password");
拿到页面中第一个form表单中的密码输入框中的第二个
$("form:first input:password:eq(1)");
jQuery中的each函数:遍历
格式1:
jQuery对象.each(匿名函数);
格式2:
$.each(对象/数组,匿名函数);
注意:匿名函数可以带参数也可以不带参数
例如1:
<div>test1</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>
<div>test5</div>
//遍历jQuery对象中的数组
//这里会循环5次,因为会拿到5个div对象
$("div").each(function(){
console.log("test");
});
//参数i表示每次遍历拿到的数组的下标
$("div").each(function(i){
console.log("下标:"+i);
});
//参数e表示拿到的当前下标的对象,注意是dom对象
$("div").each(function(i,e){
console.log(e);//这是dom对象
console.log($(e));//这是jQuery对象 需要这样封装一下
});
//也可以是this变量,这时候this就等同于参数e
$("div").each(function(i,e){
console.log(this);//this表示拿到的当前对象 dom对象
console.log($(this));//这样就可以变为jQuery对象了
});
例如2:
var v = {
name:"tom",
age:20
};
//v是一个javascript中的对象
$.each(v,function(i,e){
console.log(i+" : "+e);
});
结果:
name : tom
age : 20
jquery中的DOM操作
1，节点整体操作：
1）查找节点
通过jQuery选择器来完成
获得节点的属性值:
var 属性值 = attr("属性名字")
2）创建节点
创建元素节点：var newTd = $("<td></td>")
创建文本节点：在创建元素节点时直接把文本内容写出来。var newTd = $("<td>文本内容</td>")
3）插入节点：
----------内部插入------------
append(content)
在每个匹配元素里面的末尾处插入参数内容。作为它的最后一个子元素。
content 一个或多个DOM 元素，DOM元素数组，HTML字符串，或者jQuery对象，用来插在每个匹配元素里面的末尾。
append(function(index,html){...});
返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。
注意:如果将页面上一个元素A插入到另一个元素B，元素A会被从老地方移走
appendTo(target)
颠倒了 $(A).append(B)的效果，$(A).appendTo(B)将A追加到B中，将匹配的元素插入到目标元素的最后面.只能操作jquery对象。
prepend(content)
将参数内容插入到每个匹配元素的前面（元素内部）。当前元素中的第一个子元素
prepend(fn)
返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。
prependTo(target)
颠倒了 $(A).prepend(B)的效果.
----------外部插入------------
after(content)
在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
插在每个匹配元素的后面
after(function(index){...});
函数必须返回一个html字符串。index参数为对象在这个集合中的索引值
insertAfter(target)
在目标元素后面插入集合中每个匹配的元素(插入的元素作为目标元素的兄弟元素)。
颠倒了 $(A).after(B)的效果
before(content)
在匹配元素的前面插入内容（外部插入）
作为其兄弟节点插在集合中每个匹配元素前面。
before(function(index){...});
函数必须返回一个html字符串。index参数为对象在这个集合中的索引值
insertBefore(target)
颠倒了 $(A).before(B)的效果
4）删除节点
remove() 删除该元素 函数返回值是所移除元素的jquery对象
remove( [selector ] )
从DOM中删除所有匹配的元素，返回值是一个指向已经被删除的节点的引用，可以在以后再使用这些元素。
该方法会移除元素，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据
selector 一个选择器表达式用来过滤将被移除的匹配元素集合
注意:这个被删除的元素上的事件如果是动态添加上去的,那么删除这个元素之后,再把该元素添加回来,那么这个动态添加的元素没有的.
empty()
并不删除节点，而是清空节点，能清空元素中的所有后代节点
这个方法不接受任何参数。
detach( [selector ] )
.detach() 方法和.remove()类似,
但是.detach()保存所有jQuery数据和被移走的元素相关联事件。
selector一个选择表达式将需要移除的元素从匹配的元素中过滤出来。
5）复制节点
$("#id").clone(false).
该方法返回的是一个节点的引用,参数默认为false
clone()方法中传递了一个参数true，含义是复制元素的同时复制元素中所绑定的事件
6）替换节点
replaceWith(newContent):
用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。
newContent 用来插入的内容，可能是HTML字符串，DOM元素，或者jQuery对象。
该方法会删除与节点相关联的所有数据和事件处理程序 。
replaceAll(target ) :
用集合的匹配元素替换每个目标元素。颠倒了replaceWith()操作效果
7）包裹节点
wrap([wrappingElement])
在每个匹配的元素外层包上一个html元素。
$("strong").wrap("<b></b>");
用<b>标签把每个<strong>元素分别都包裹起来
wrappingElement 一个HTML片段，选择表达式，jQuery对象，或者DOM元素，用来包在匹配元素的外层。
wrap(html) 参数可以是一个html代码
wrap(element) 参数可以是一个dom或者jquery对象
wrap(fn) 参数可以是一个函数(函数可以没有参数也可以有一个参数index)
unwrap()没有参数作用和warp函数是相反的
wrapAll([wrappingElement]) :
将所有匹配的元素用一个指定元素来包裹
注意：wrap是将匹配的每一个元素都用一个指定元素来包裹
wrapInner([wrappingElement]):
每个匹配元素里面内容(子元素)都会被这种结构包裹。
2，节点属性操作
1）获取属性
var attrValue = $demo.attr("attrName");
设置属性，第一个参数为属性名，第二个参数为属性值
$demo.attr("attrName","attrValue");
attr(name) 获得指定属性的值
attr(key,value)设置指定属性的值
attr(key,fn) 设置属性的值,该是由指定函数的返回值充当
2）删除属性
removeAttr("attrName");
注意:attr和prop的语法一样,作用基本一致,但是在有些时候在作用上有点区别:
例如:
<input type="radio" name="gender" value="0" checked="checked" flag="x"/>男
<input type="radio" name="gender" value="1"/>女
jquery代码:
console.log($("input:eq(0)").attr("checked")); // checked
console.log($("input:eq(0)").prop("checked")); // true
console.log($("input:eq(0)").attr("flag")); // x
console.log($("input:eq(0)").prop("flag")); // undefined
总结:如果是标签自带的固有属性,那么推荐使用prop,通过是我们给标签元素加上的自定义属性那么推荐使用attr
3，节点样式操作
1）获取样式，设置样式
$("p").attr("class","high"),它将原来的class替换为新的class
2）追加样式 addClass()
如果给一个元素添加了多个class的值，那么就相当于合并了他们的样式.
如果有不同的class设定了同一样式属性，后者覆盖前者.
相当于这样的效果:
html:
<div id="div1" class="c1">
</div>
jquery:
$("#div1").addClass("c3");
div元素的样式就变为了:
<div id="div1" class="c1 c3">
</div>
3）移除样式 removeClass()
从匹配的元素中删除全部或者指定的class
removeClass("one two") 移除两个class
4）切换样式 toggleClass( className )
例如:
css代码:
c3{
border:1px solid green;
width: 200px;
height: 200px;
}
jquery代码:
$("#btn").click(function(){
$("#div").toggleClass("c3");
});
注:点击#btn按钮后调用这个匿名函数进行样式切换,如果当前这个div上面有c3的样式那么就去掉c3样式,如果div上面没有c3样式那么就加上去
hasClass()
判断元素中是否含有某个class，如果有返回true，否则返回false
$("#div").hasClsss("c3");//true|false
5）设置和获取HTML，文本和值
html()
获取集合中第一个匹配元素的HTML内容innerHTML
html(htmlString)
设置每一个匹配元素的html内容。.html() 方法对 XML 文档无效.
text()
得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，
text(textString)
设置匹配元素集合中每个元素的文本内容为指定的文本内容。
text() 在XML 和 HTML 文档中都能使用。 方法不能使用在 input 元素或scripts元素上。
val()
获取匹配的元素集合中第一个元素的当前值
方法主要用于获取表单元素的值，比如 input, select 和 textarea。
val(value)
设置匹配的元素集合中每个元素的值。
4，节点遍历
注意:使用这些方法去解析html文档和xml文档都是可以的,因为html文档和xml文档都可以转换为dom模型.(也就是说在ajax中,如果后台传过来的是xml文档,那么我们使用jquery也可以用下面方法解析)
1）children() 用于取得匹配元素的子元素集合（只考虑子元素而不考虑任何后代元素）
2）next() 取得匹配的元素集合中每一个元素紧邻的后面兄弟元素。
3）prev() 取得匹配元素前面紧邻的兄弟元素
4）siblings() 取得匹配元素前后所有的兄弟元素
5）closest() 取得和参数匹配的最近的元素，如果匹配不上继续向上查找父元素
6）find(selector) 在当前元素对象中的子元素中查找，和参数所匹配的所有的后代元素。
7）filter(selector) 把当前所选择的所有元素再进行筛选过滤
8）nextAll() 查找当前元素之后所有的同辈元素。
9）prevAll() 查找当前元素之前所有的同辈元素。
10）parent() 取得匹配元素集合中，每个元素的父元素
11）parents() 获得集合中每个匹配元素的祖先元素，
例子: 对照函数的解释和例子中的输出结果可理解函数的用法
html:
<div id="div1">
<span id="s1">test1</span>
<span id="s2">test2</span>
<span id="s3">test3</span>
<span id="s4">test4</span>
<span id="s5">test5</span>
<span id="s6">test6</span>
<span id="s7">
<font>test_div7</font>
<span id="s8"></span>
</span>
</div>
jQuery：
console.log($("#div1").children());
console.log($("#div1").next());
console.log($("#s4").next());
console.log($("#s4").prev());
console.log($("#s4").siblings());
console.log($("#s4").closest("body"));
console.log($("#div1").find("span"));
console.log($("span").filter(":even"));
console.log($("#s4").nextAll());
console.log($("#s4").prevAll());
console.log($("#s4").parent());
console.log($("span").parent());
console.log($("#s4").parents());
5，CSS设置
读取和设置style对象的各种属性。
css("attrName") 获取某个元素的指定样式
与attr() 方法一样，css()方法可以同时设置多个样式属性
css({"attrName1":"attrVal1","attrName2":"attrVal2"});
$("#div2").css({
"attrName1":"attrVal1",
"attrName2":"attrVal2"
});
这几种方式和上面attr函数的使用方式是一致的
//css(name)
//css(properties)
//css(key,value)
//css(key,fn)
例子:
html:
<input type="button" value="红色" id="red_btn">
<input type="button" value="绿色" id="green_btn">
<p id="my_p">大家好,才是真的好</p>
jquery:
$(function(){
$("#red_btn").click(function(){
$("#my_p").css("color","red");
});
$("#green_btn").click(function(){
$("#my_p").css("color","green");
});
});
jQuery中的ajax的使用
形式:
$.ajax({
key:value,
key:value,
..
..
});
1.参数
执行一个异步的HTTP（Ajax）的请求
url：一个用来包含发送请求的URL字符串。
settings：一个以"{键:值}"组成的AJAX 请求设置。所有选项都是可选的。可以使用$.ajaxSetup()设置任何默认参数
accepts (默认: 取决于数据类型)
内容类型发送请求头（Content-Type），用于通知服务器该请求需要接收何种类型的返回结果。
async (默认: true)
默认设置下，所有请求均为异步请求（也就是说这是默认设置为 true ）。如果需要发送同步
请求，请将此选项设置为 false 。跨域请求和 dataType: "jsonp" 请求不支持同步操作。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。从 jQuery 1.8 开始, jqXHR ($.Deferred)中使用 async: false 已经过时。您必须使用的 success/error/complete的回调选项代替相应的jqXHR对象的方法，
beforeSend
发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。这是一个 Ajax 事件。如果返回false可以取消本次ajax请求。
cache (默认: true, dataType为"script"和"jsonp"时默认为false)
如果设置为 false ，浏览器将不缓存此页面。
complete
请求完成后回调函数 (请求成功或失败之后均调用)
contents
一个以"{字符串:正则表达式}"配对的对象，用来确定jQuery将如何解析响应，给定其内容类型。
contentType (默认: 'application/x-www-form-urlencoded; charset=UTF-8')
当将数据发送到服务器时，使用该内容类型。 默认值是"application/x-www-form-urlencoded;
charset=UTF-8"，适合大多数情况。 如果你明确地传递了一个内容类型（Content-Type）给 $.ajax()，那么他必定会发送给服务器（即使没有数据要发送）。
context
类型: Object
这个对象用于设置Ajax相关回调函数的上下文。 默认情况下，这个上下文是一个ajax请求使用的参数设置对象，
converters (默认: {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML})
类型: PlainObject
一个数据类型到数据类型转换器的对象。每个转换器的值是一个函数，返回经转换后的请求结果。 ( 1.5新增)
crossDomain (默认: 同域请求为false， 跨域请求为true)
类型: Boolean
如果你想在同一域中强制跨域请求（如JSONP形式），例如，想服务器端重定向到另一个域，那么需
要将crossDomain设置为 true 。
data
类型: PlainObject 或 String 或 Array
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后面。查看 processData
选项说明，以禁止此自动转换。对象必须为"{键:值}"格式。如果这个参数是一个数组，jQuery会按照traditional
参数的值， 将自动转化为一个同名的多值查询字符串(查看下面的说明)。愚人码头注：如 {foo:["bar1", "bar2"]}
转换为 '&foo=bar1&foo=bar2'。
dataFilter
类型: Function( String data, String type ) => Anything
一个函数被用来处理XMLHttpRequest的原始响应数据。这是一个预过滤功能，净化响应。您应该返回安全数据。提供
data和type两个参数：data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。
dataType (默认: Intelligent Guess (xml, json, script, or html))
预期服务器返回的数据类型。
如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。
"xml": 返回 XML 文档，可用 jQuery 处理。.
"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
"script": 把响应的结果当作 JavaScript 执行。并将其当作纯文本返回。
"json": 把响应的结果当作 JSON 执行，并返回一个JavaScript对象。
"jsonp": 以 JSONP 的方式载入 JSON 数据块。
"text": 返回纯文本字符串。
error
请求失败时调用此函数。
global (默认: true)
类型: Boolean
无论怎么样这个请求将触发全局AJAX事件处理程序。默认是true 。设置为 false 将不会触发全局 AJAX 事件，
如 ajaxStart 或者 ajaxStop。
headers (默认: {})
一个额外的"{键:值}"对映射到请求一起发送。此设置会在beforeSend 函数调用之前被设置 ;因此，请求头中的设
置值，会被beforeSend 函数内的设置覆盖 。
ifModified (默认: false)
只有上次请求响应改变时，才允许请求成功。使用 HTTP 包 Last-Modified 头信息判断。默认值是false，忽略HTTP头信息。
isLocal (默认: 取决于当前的位置协议)
jsonp
类型: String
在一个JSONP请求中重写回调函数的名字。
jsonpCallback
类型: String, Function
为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成一个独特的函数
名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。
从jQuery 1.5开始，你也可以使用一个函数作为该参数设置，在这种情况下，该函数的返回值就是jsonpCallback的结果。
mimeType
一个mime类型用来覆盖XHR的 MIME类型。 (1.5 新增 ）
password
类型: String
用于响应HTTP访问认证请求的密码
processData (默认: true)
a)非表单数据ajax发送
$("button:first").click(function(){
$.ajax({
//type:"GET",
//url:"../ajaxServlet?name=tom",
//post方式
type:"POST",
url:"../ajaxServlet",
data:{"name":"zhangsan"},
success:function(data){
alert(data);
//$("#content").html(data);
//$("#content").text(data);
alert(data.getElementsByTagName("name")[0].firstChild.nodeValue);
},
dataType:"xml"
});
b)提交表单中的数据：
$("button:last").click(function(){
$.ajax({
type:"POST",
url:"../ajaxServlet",
data:$("form").serialize(),
success:function(data){
console.log(data);
$("#content_form").text(data);
},
dataType:"xml"
});
});
2.load方法
load(url,data,complete);
格式:
jQuery对象.load("test.html");
或者
jQuery对象.load("test.html",function(){
alert("远程页面加载完毕");
});
或者
jQuery对象.load("test.html",{name:"tom"},function(){
alert("远程页面加载完毕");
});
从服务器载入数据并且将返回的 HTML 代码并插入至 匹配的元素 中。
url :一个包含发送请求的URL字符串如果 url 参数的字符串中包含一个或多个空格，那么第一个空格后面的内容，会被当成是 jQuery 的选择器，从而决定应该加载返回结果中的哪部分内容.
例如:
$("#div1").load("a.html #my_div1");
data:向服务器发送请求的Key/value参数，例如{name:"tom",age:23}
complete(responseText, textStatus, XMLHttpRequest)：
当请求成功后执行的回调函数,也可以不加参数。
注意： jQuery使用浏览器的.innerHTML属性去解析检索到的文档，
并将其插入到当前文档中。在此过程中，浏览器
通常会过滤文档中的一些元素 ，比如<html>, <body>, <head> 元素。
3. $.get()方法
例如:
$.get(
url, //请求的地址
data, //给服务器发送的参数
function(v){ //回调函数
},
dataType //服务器响应回来的数据类型
);
使用一个HTTP GET请求从服务器加载数据。
$.get函数其实是下面写法的缩写：
$.ajax({
type: "GET",
url: url,
data: data,
success: success,
dataType: dataType
});
如：$.get("JqueryAjaxServlet",
{name:"tom",age:30},function(data){
$("#content").html(data);
});
4. $.post()方法
例如:
$.post(
url, //请求的地址
data, //给服务器发送的参数
function(v){ //回调函数
},
dataType //服务器响应回来的数据类型
);
使用一个HTTP POST 请求从服务器加载数据。
$.post()方法其实是下面写法的缩写：
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
如：$.post("JqueryAjaxServlet",
{name:"tom",age:30},function(data){
$("#content").html(data);
});
5.getJSON方法
$.getJSON("url",{name:"tom"},function(data){
//解析接收到的json数据 data
});
使用一个HTTP GET请求从服务器加载JSON编码的数据。
$.getJSON()方法其实是下面写法的缩写：
$.ajax({
url: "",
dataType: "json",
data: data,
success: success
});
6.json格式的数据
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式
JSON 语法是 JavaScript 对象表示语法的子集。
由上面俩个特点可知:json是表达数据的一种特定格式,同时使用的javascript语言的语法进行表达。
JSON 数据的书写格式是：名称:值对。 key:value
其中JSON 对象中的key 必须是双引号引着的字符串 "key"
其中JSON 对象中的value 可以是以下几种
数字（整数或浮点数）
字符串（必须在双引号中）
逻辑值（true 或 false）
数组（在方括号中[]）
对象（在花括号中{}）
null
注意:json对象用{}表示,json数组用[]表示
和javascript是一样的,其实json就是javascript语言里面的一个分支,完全采用的是javascript语法,只不过json数据的格式是固定的
例如:
{"firstName":"Brett"}
---------------
{"firstName":"Brett","age":20}
--------这是一个json数组 数组里面放的是json对象--------
[
{"name":"zs1","age":21},
{"name":"zs2","age":22},
{"name":"zs3","age":23}
]
--------这是一个json对象-------
--------对象里面只有一对k/v-------
--------k是一个字符串"peoples"-------
--------v是一个json数组-------
--------这个json数组中有三个json对象-------
--------每个json对象都包含俩对k/v-------
{
"peoples":[
{"name":"zs1","age":21},
{"name":"zs2","age":22},
{"name":"zs3","age":23}
]
}
-------------------
{
"student":[
{"name":"zs1","age":21},
{"name":"zs2","age":22},
{"name":"zs3","age":23}
],
"teacher":[
{"name":"lisi1","age":21},
{"name":"lisi2","age":22},
{"name":"lisi3","age":23}
]
}
-----------------
7.服务器端如何给页面发送json数据
7.1 使用io流直接把字符串拼接成json数据格式
例如:
PrintWriter out = response.getWriter();
out.print("{\"name\":\"tom\",\"age\":20}");
7.2 使用第三方jar提供的方法
例如1 要求json数据为:
{"name":"tom","age":20,"address":"昆山"}
后台代码:
JSONObject json = new JSONObject();
json.put("name", "tom");
json.put("age", 20);
json.put("address", "昆山");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(json.toString());
out.flush();
out.close();
页面jQuery:
$(function(){
$.getJSON("JQueryJSONServlet",function(data){
$.each(data,function(i,e){
console.log(i+" : "+e);
});
});
});
例如2 要求json数据为:
[{"name":"tom0","age":20,"address":"昆山0"},{"name":"tom1","age":21,"address":"昆山1"},{"name":"tom2","age":22,"address":"昆山2"},{"name":"tom3","age":23,"address":"昆山3"},{"name":"tom4","age":24,"address":"昆山4"},{"name":"tom5","age":25,"address":"昆山5"},{"name":"tom6","age":26,"address":"昆山6"},{"name":"tom7","age":27,"address":"昆山7"},{"name":"tom8","age":28,"address":"昆山8"},{"name":"tom9","age":29,"address":"昆山9"}]
后台代码:
JSONObject json = null;
JSONArray array=new JSONArray();
for(int i=0;i<10;i++){
json = new JSONObject();
json.put("name", "tom"+i);
json.put("age", 20+i);
json.put("address", "昆山"+i);
array.add(json);
}
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(array.toString());
out.flush();
out.close();
页面jQuery:
$(function(){
$.getJSON("JQueryJSONServlet",function(data){
//因为这个json数据是个数组 数组中每个元素是个对象,每个对象有多个属性
$.each(data,function(i,e){
$.each(e,function(i2,e2){
console.log(i2+" : "+e2);
});
});
});
});
例如3 可以把一个javabean对象直接转换为json格式字符串数据
要求json数据:
{"name":"Java","price":52.3}
后台代码:
Book book=new Book();
book.setName("Java");
book.setPrice(52.3);
JSONObject obj = JSONObject.fromObject(book);
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(obj.toString());
out.flush();
out.close();
例如4 List类型集合/数组中直接转换为json格式数据
要求json数据格式:
[{"name":"Java","price":52.2},{"name":"C++","price":42.2}]
后台代码:
Book book=new Book();
book.setName("Java");
book.setPrice(52.3);
Book book2 = new Book();
book2.setName("C++");
book2.setPrice(42.3);
List list = new ArrayList();
list.add(book);
list.add(book2);
JSONArray array = JSONArray.fromObject(list);
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(array.toString());
out.flush();
out.close();
例如5 把Map类型的集合直接转换为json格式数据
要是json格式:
[{"2":{"name":"C++","price":42.2},"1":{"name":"Java","price":52.2}}]
后台代码:
Book book=new Book();
book.setName("Java");
book.setPrice(52.3);
Book book2 = new Book();
book2.setName("C++");
book2.setPrice(42.3);
Map map = new HashMap();
//json的key要求必须是字符串
map.put("1", book);
map.put("2", book2);
JSONArray array = JSONArray.fromObject(map);
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(array.toString());
out.flush();
out.close();
-------------------------------------------
一，jQuery 中的事件
一，jQuery 中的事件
1. 事件绑定
1)bind(type [, data] , fn)事件绑定
eg : $demo.bind("click",function(){});
第一个参数是事件类型
blur, focus, focusin, focusout, load, resize, scroll,
unload, click, dblclick, mousedown, mouseup,
mousemove, mouseover, mouseout, mouseenter, mouseleave,
change, select, submit, keydown, keypress,
keyup, error。
第二个参数： 作为event.data 属性值传递给事件对象的额外数据对象
第三个参数： 是用来绑定的处理函数
例如: e对象就是当前的事件对象,这个参数可写也可以不写
$("#btn").bind("click","gogo",function(e){
console.log(e.data);//gogo
});
注意:如果连着给一个按钮绑定俩次click事件的话,那么俩个都是会起作用的,哪个先绑定就先调用哪个,解绑的时候俩个绑定的click事件会被同时解绑
上面的例子也可以简写为:
$("#btn").click(function(){
//....
});
多个事件
同一处理函数可以通过用空格隔开一次性绑定：
$("div").bind("click mouseover",function(){
//....
});
不同事件处理使用不同的函数
$("div").bind({
click:function(){
},
mouseover:function(){
}
});
或者:
$("div").bind({
"click":function(){
},
"mouseover":function(){
}
});
注意:bind函数绑定事件后,并不会对后来动态添加上来的元素起作用
例如:
html：
<body>
<div id="dd">
<button>测试</button>
</div>
</body>
jquery代码:
var $btn = $("<button>新增按钮</button>");
$("button").bind({
click:function(){
console.log("click...");
},
mouseover:function(){
console.log("mouseover...");
}
});
$("button").after($btn);
结果:动态添加上了的新按钮的上面是没有click和mouseover这个俩个事件的,虽然它也符合绑定事件的时候选择元素的条件:$("button")
unbind([teype][, data]),如果没有参数，删除所有绑定的事件，
如果提供了事件类型，只删除该事件类型的绑定事件(专门针对
bind绑定的事件)
$("div").unbind();
$("div").unbind("click");
2)live(type, [data], fn)
用法上基本和bind是一样的.但是也有些不同之处,
live改进了bind函数的一些缺点:
例如:
html代码:
<body>
<div id="dd">
<button>测试</button>
</div>
</body>
jquery代码:
$("button").live({
click:function(){
console.log("click...");
},
mouseover:function(){
console.log("mouseover...");
}
});
$("button").after($("<button>新增按钮1</button>"));
$("body").after($("<button>新增按钮2</button>"));
$("div").after($("<button>新增按钮3</button>"));
结果:虽然使用live绑定事件后，动态添加进来的元素只要符合选择器条件也会自动有click和mouseover,但是发现只要页面任何地方添加一个符合条件的元素那么就会被绑定上事件.
die(type, [fn])如果没有参数，删除所有绑定的事件，如果提供了事件类型，只删除该事件类型的绑定事件(专门针对live绑定的事件)
$("div").die();
$("div").die("click");
3)delegate(selector,[type],[data],fn)
用法上基本和bind以及live是一样的.但是也有些不同之处,delegate改进了live函数的一些缺点:
例如:
html代码:
<body>
<div id="dd">
<button>测试</button>
</div>
</body>
jquery代码:
$("#dd").delegate("button",{
click:function(){
console.log("click...");
},
mouseover:function(){
console.log("mouseover...");
}
});
$("button").after($("<button>新增按钮1</button>"));
$("body").after($("<button>新增按钮2</button>"));
$("#dd").after($("<button>新增按钮3</button>"));
结果:使用delegate绑定事件后，动态添加进来的元素只要符合选择器条件并且也是在#dd这个div所属范围内,那么这个元素也会自动有click和mouseover,相对来讲比live绑定提升了效率
注:live的范围是在document里面的元素符合条件后动态添加进来就会绑定事件,delegate则可以让我们指定在哪个范围内动态添加元素的才会被绑定事件
undelegate([selector,[type],fn])如果没有参数，删除所有绑定的事件，如果提供了事件类型，只删除该事件类型的绑定事件(专门针对delegate绑定的事件)
$("div").undelegate();
$("div").undelegate("click");
4)on(events[, data ], handler(eventObject))
融合了bind、live、delegate三种函数的特殊,是1.7版本之后新增的一个绑定事件函数,提供了一种统一绑定事件的方法(之前是前三种方法都在用,使用比较混乱)
events:事件类型
data:当一个事件被触发时，要传递给事件处理函数的event.data。
handler(eventObject):事件被触发时，执行的函数。
在选定的元素上绑定一个或多个事件处理函数。
$("p").on("click", function(){
alert( $(this).text() );
});
例如:
html代码:
<body>
<div id="dd">
<button>测试</button>
</div>
</body>
jquery代码:
//注意这里的代码和delegate函数的参数顺序是不一样的
$("#dd").on({
click:function(){
console.log("click...");
},
mouseover:function(){
console.log("mouseover...");
}
},"button");
$("button").after($("<button>新增按钮1</button>"));
$("body").after($("<button>新增按钮2</button>"));
$("#dd").after($("<button>新增按钮3</button>"));
结果是和上面delegate的结果一样的。
注意:on函数只有在指定了绑定事件的范围后,动态添加进来的元素才能也有事件的处理,否则on的效果和bind差不多。
off( events )
如果没有参数，删除所有绑定的事件，如果提供了事件类型，只删除该事件类型的绑定事件.(专门针对on绑定的事件)
$("p").off();
$("p").off("click");
5)one( events [, data ], handler(eventObject) )
给对象绑定一次数据处理,触发处理完之后就失效
$( "#btn" ).one( "click", function( event ) {
alert("hello");
});
2. 事件冒泡，事件会按照DOM的层次结构像水泡一样不断向上直至顶端
举例说明:
html代码:
<div>
<span>test</span>
</div>
jQuery代码:
$("div").on("click",function(){
alert("hello");
});
$("span").on("click",function(event){
alert("world");
});
这个时候点击span的时候会触发span的onclick事件,
同时也会触发div的onclick事件,因为span在div里面,
这种现象就叫做事件冒泡
可以调用事件对象的特定方法来组织事件冒泡:
stopPropagation()
$("element").bind("click",function(event){
//event:事件对象，当点击“element”元素时，事件对象就被创建了，这个事件对象只有事件处理函数才能访问到，事件处理函数执行完毕后，事件对象就被销毁
event.stopPropagation(); //停止事件冒泡
})
2.1 对象的默认行为
默认行为:单击超链接会跳转，单击提交会提交表单
例如:
html代码:
<a href="test.html">点击超链接</a>
jquery代码:
$("a").on("click",function(event){
alert("大家好");
});
点击超链接后会触发onclick事件,然后执行绑定的函数,函数执行完接着就会进行超链接的跳转,因为这是点击超链接的默认行为。
如果我们想处理完绑定事件,然后阻止这个对象的接下来的默认行为的话,那么需要调用事件对象的指定方法来实现:preventDefault()
jquery代码:
$("a").on("click",function(event){
alert("大家好");
//event.preventDefault();
return false;
});
特别注意:如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false即可
jquery代码:
$("a").on("click",function(event){
alert("大家好");
return false;//同时阻止事件冒泡和默认行为
});
事件对象(event)属性 ：jQuery在遵循W3C规范的情况下，对事件对象的常用属性进行了封装
event.type 获取到事件的类型
event.target 获取到触发事件的元素(事件源)
$(event.target) jquery对象
event.pageX event.pageY 获取光标相对于页面的X坐标，Y坐标。
event.which 在鼠标单击事件中获取鼠标的左，中，右键。在键盘事件中获取键盘的按键
event.originalEvent 指向原始的事件对象
//和键盘相关的
event.keyCode 对于keyup和keydown事件返回被按下的键. 不区分大小写, a和A都返回65.
注意:对于keypress事件请使用which属性, 因为which属性跨浏览时依然可靠
keypress只能检测到键盘上的字母数字和部分符合键,但是字母的大小写可以分别检测到
keyup keydown可以检测到键盘上的所有的按键,但是字母的大小写不区分
event.ctrlKey 检查按键盘上面的键的时候是不是已经按着了ctrl键
event.shiftKey 同上
event.altKey 同上
3. 事件模拟
trigger(events)
模拟操作： 用户无需自己触发，代码通过模拟用户操作，触发事件
1，触发自定义事件
$("btn").on("myClick",function(){
//myClick是自定义事件
})
//只能靠这种方式来模拟触发这个自定义事件
$("btn").trigger("myClick");
2，trigger()模拟触发正常事件(浏览器自带的事件)
例如:
html代码:
<input type="text" id="my_input" />
<input type="button" value="提交数据" id="btn" />
jquery代码:
$("#my_input").on("keyup",function(e){
if(e.keyCode == 13 && e.ctrlKey == true){
$("#btn").trigger("click");
}
});
在输入框中按下Ctrl+回车的时候就会触发btn按钮的点击事件 然后就可以提交数据了
4. 表单事件
blur( handler(eventObject) )
一个元素失去焦点将触发blur事件
为 "blur" 事件绑定一个处理函数,是.bind('blur', handler) 的快捷方式，
例如:
$("#name").blur(function(){
console.log("test1....");
});
focus( handler(eventObject) )
触发元素上的 "blur" 事件,是.trigger('blur') 的快捷方式
例如:
$("#name").focus(function(){
console.log("test2....");
});
change( handler(eventObject) )
为JavaScript 的 "change" 事件绑定一个处理函数，
例如:
$("#city").change(function(){
console.log("....");
});
select( handler(eventObject) )
当用户在一个元素中进行文本选择时，这个元素上的select事件就会被触发.(比如复制文字之前需要先用鼠标选择文字)
此事件只能用在<input type="text"> 和<textarea>。
submit( handler(eventObject) )
当用户试图提交表单时，就会在这个表单元素上触发submit事件。
它只能绑定在<form>元素上。
5. 键盘事件(在上面的例子中已经测试过了)
keydown()
keypress()
keyup()
6. 鼠标事件
click() 鼠标左键单击
dblclick() 鼠标左键双击,双击的时候算触发俩次单击
focusin() 当元素或其任意子元素获得焦点时
focusout() 当元素或其任意子元素失去获得焦点时
注意和focus、blur事件的区别:
例如:
css样式:
div{
border: 1px solid red;
width: 300px;
height: 100px;
}
html代码:
<div>
<input type="text" name="username">
</div>
Jquery代码1:
$("div").focusin(function(){
console.log("获得焦点");
});
效果:只要div里面的任何一个子元素获得焦点都会触发focusin的事件
Jquery代码2:
$("div").focus(function(){
console.log("获得焦点");
});
效果:只有div这个元素获得焦点的时候,才会触发这个focus事件,但是div是不能获得用户输入的焦点的。除法我们使用trigger方法来模拟这个事件的触发。
hover(fn1,fn2) :
用来模拟光标悬停事件，当光标移动到元素上时，会触发第一个函数fn1，光标移出这个元素时会触发第二个函数fn2
$("div").hover(function(){
console.log("移入");
},function(){
console.log("移出");
});
mousedown() 鼠标点击事件 左中右 1 2 3
mouseup() 类似于keyup
mousemove() 鼠标移动事件(可以时刻获得当前鼠标的坐标位置)
mouseenter()
mouseleave()
mouseover()
mouseout()
mouseenter和mouseover的区别:(mouseleave和mouseout的区别类同)
css代码:
#div1{
border: 1px solid red;
width: 100px;
height: 100px;
}
#div2{
border: 1px solid green;
width: 40px;
height: 40px;
position: absolute;
top:30px;
left:30px;
}
html代码:
<div id="div1">
<div id="div2"></div>
</div>
jquery代码:
//分别使用mouseenter和mouseover来测试效果即可看出其区别
$("#div1").mouseenter(function(){
console.log("移入");
});
二，jQuery中的动画
1，基础
1)hide()
隐藏匹配的元素。 style="display:none"
hide( [duration ] [, complete ] )
duration 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
complete 在动画完成时执行的函数。
2)show()
显示匹配的元素(和hide的参数作用一致)
3)toggle( [duration ] [, complete ] )
toggle()默认是切换元素的显示和隐藏效果
$("#my_input").click(function(){
$("#div2").toggle();
});
也可以自定义转换的俩个或者多个函数:
//点击#my_input按钮后#div2就会在c1和c2俩个提前定义好的样式间转换
$("#my_input").toggle(function(){
$("#div2").attr("class","c1");
},function(){
$("#div2").attr("class","c2");
});
2，渐变
1)fadeIn( [duration ] [, complete ] )
通过淡入的方式显示匹配隐藏元素。
("slow","normal", or "fast")
2)fadeOut( [duration ] [, complete ] )
通过淡出的方式隐藏匹配显示元素。
3)fadeTo( duration, opacity [, complete ] )
opacity:0和1之间的数字表示目标元素的不透明度。
4)fadeToggle( [duration ] [, complete ] )
切换渐变效果
通过匹配的元素的不透明度动画，来显示或隐藏它们。
当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局。
3，滑动
1)slideDown( [duration ] [, complete ] )
将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式。
2)slideUp( [duration ] [, complete ] )
向上滑动
3)slideToggle( [duration ] [, complete ] )
切换滑动效果
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
