一.JQ入口函数
1.第一种入口函数
<script type="text/javascript">
//JQuery的第一种入口函数
$(document).ready(function(){
//可以有多个入口函数，其他相关代码
});
</script>
2.第二种入口函数
<script type="text/javascript">
//JQuery的第一种入口函数
$(function(){
//可以有多个入口函数，其他相关代码
});
</script>
3.JavaScript与JQuery入口函数的区别
JavaScript的window.onload入口函数事件是等到所有内容、外部图片等文件加载完成之后，才去执行window.onload事件。
JQuery的ready入口函数事件是在HTML所有标签加载完成之后，才去执行ready事件。
JQuery能做的JavaScript都能做到；而JavaScript能做的，JQuery不一定能做到。
二.选择器
JQ选择器分为“基本选择器，层级选择器，过滤选择器，属性选择器，筛选选择器，表单选择器”
1.基本选择器
基本选择器
| 名称 | 语义 | 代码 |
| 标签选择器 | 所有的标签，都是选择器。选择的是页面上所有这种类型的标签 | <script type="text/javascript">
//JQuery中的标签选择器
$("div").css("width","100%");
</script>
|
| id选择器 | 任何的HTML标签都可以有id属性，表示这个标签的名字或语义。一个HTML页面，不能出现相同id属性的标签。 | <script type="text/javascript">
//JQuery基本选择器中的ID选择器
$("#logo").css("width","60px");
</script>
|
| 类选择器 | 任何的HTML标签都看可以有class属性。可以出现多个相同的class属性。同一个标签，可以同时属于多个类，可以有多个class属性，用空格隔开。 | <script type="text/javascript">
//JQuery基本选择器中的类选择器
$(".logo").css("width","60px");
</script>
|
| 并集选择器 | 两个标签或多个标签同时进行修改 | <script type="text/javascript">
//JQuery基本选择器中的并集选择器
$("h2,span").css("font-size","20px");
</script>
|
| 通配符* | HTML页面上所有的标签、内容等 | <script type="text/javascript">
//JQuery基本选择器中的通配符
$("*").css("padding","0");
</script>
|
2.层级选择器
层级选择器
| 名称 | 语义 | 代码 |
| 后代选择器 | 选择的是某个标签的后代 | <script type="text/javascript">
//JQuery基本选择器中的后代选择器
$("div a").css("padding","0");
</script>
|
| 儿子选择器 | 选择某元素的子元素 | <script type="text/javascript">
//JQuery基本选择器中的儿子选择器
$("h2>p").css("text-align","center");
</script>
|
| 兄弟选择器 | 选择紧接着某个元素的所有某个元素 | <script type="text/javascript">
//JQuery基本选择器中的兄弟选择器
$("div~p").css("font-size","20px");
</script>
|
| 下一个兄弟选择器 | 选择紧接着某个元素的所有某个元素 | <script type="text/javascript">
//JQuery基本选择器中的下一个兄弟选择器
$("div+h2").css("font-size","20px");
</script>
|
3.过滤选择器
过滤选择器
| 名称 | 语义 | 代码 |
| :first | 选择第一个元素 | <script type="text/javascript">
//选择第一个元素
$("li:first").css("font-size","20px");
</script>
|
| :last | 选择最后一个元素 | <script type="text/javascript">
//选择最后一个元素
$("li:last").css("font-size","20px");
</script>
|
| :even | 选择所有元素中偶数的元素，索引从0开始，包含0 | <script type="text/javascript">
//选择所有元素中偶数的元素，索引从0开始，包含0
//隔行变色
$("li:even").css("color","red");
</script>
|
| :odd |
| <script type="text/javascript">
//选择所有元素中奇数的元素，索引从0开始
//隔行变色
$("li:odd").css("colo","bule");
</script>
|
| :eq(index) | 选择指定索引的元素，索引从0开始 | <script type="text/javascript">
//选择指定索引的元素，索引从0开始
$("li:eq(3)").css("font-size","20px");
</script>
|
| :gt(index) | 选择索引大于指定index的元素，索引从0开始 | <script type="text/javascript">
//选择索引大于指定index的元素，索引从0开始
$("li:gt(3)").css("font-size","20px");
</script>
|
| :lt(index) | 选择索引小于指定index的元素，索引从0开始 | <script type="text/javascript">
//选择索引小于指定index的元素，索引从0开始
$("li:lt(3)").css("font-size","20px");
</script>
|
| :header | 选择所有的标题元素 | <script type="text/javascript">
//选择所有的标题元素
$("li:header").css("font-size","20px");
</script>
|
| :animated | 选择当前正在执行所有动画的元素 | <script type="text/javascript">
//选择当前正在执行所有动画的元素
$("li:animated").css("font-size","20px");
</script>
|
| 内容过滤选择器 |
| 名称 | 语义 | 代码 |
| :contains(text) |
| <script type="text/javascript">
//选择包含text文本内容的元素
$("p:contains(text)").css("background-color","bule");
</script>
|
| :empty |
| <script type="text/javascript">
//选择不包含子元素或者文本节点的空元素
$("p:empty").css("background-color","bule");
</script>
|
| 可见性过滤选择器 |
| 名称 | 语义 | 代码 |
| :hidden | 选择所有不可见元素 | <script type="text/javascript">
//选择所有不可见元素
$("p:hidden").css("display","block");
</script>
|
| :visible | 选择所有可见元素 | <script type="text/javascript">
//选择所有可见元素
$("p:visible").css("background-color","bule");
</script>
|
4.属性选择器
属性选择器
| 名称 | 语义 | 代码 |
| [attribute] | 选择拥有此属性的元素 | <script type="text/javascript">
//选择拥有此属性的元素
$("a[href]").css("background","bule");
</script>
|
| [attribute=value] | 选择指定属性值为value的所有元素 | <script type="text/javascript">
//选择指定属性值为value的所有元素
$("a[href='baidu']").css("background","bule");
</script>
|
| [attribute!=value] | 选择指定属性值不为value的所有元素 | <script type="text/javascript">
//选择指定属性值不为value的所有元素
$("a[href!='baidu']").css("background","bule");
</script>
|
| [attribute^=value] | 选择属性值以value开始的所有元素 | <script type="text/javascript">
//选择属性值以value开始的所有元素
$("a[href^='web']").css("background","bule");
</script>
|
| [attribute$=value] | 选择属性值以value结束的所有元素 | <script type="text/javascript">
//选择属性值以value结束的所有元素
$("a[href$='com']").css("background","bule");
</script>
|
| [attribute*=value] | 选择属性值包含value的所有元素 | <script type="text/javascript">
//选择属性值包含value的所有元素
$("a[href*='w']").css("background","bule");
</script>
|
| [attrSel1] [attrSel2][attrSelN] | 复合性选择器，首先经[selector1]选择返回集合A，集合A再经过[selector2]选择返回集合B，集合B再经过[selectorN]选择返回结果集合。 | <script type="text/javascript">
//选择所有符合指定属性规则的元素，都符合才会被选中。
$("a[href][title='标题']").css("background","bule");
</script>
|
5.筛选选择器
筛选选择器
| 名称 | 语义 | 代码 |
| .eq(index) | 选择指定索引的元素，索引从0开始 | <script type="text/javascript">
//选择指定索引的元素，索引从0开始
$("span").eq(1).css("font-size","40px");
</script>
|
| .first() | 选择第一个元素 | <script type="text/javascript">
//选择第一个元素
$("span").first().css("font-size","40px");
</script>
|
| .parent() | 选择父亲元素 | <script type="text/javascript">
//选择父亲元素
$("#sp").parent().css("font-size","40px");
$("p").parent("#logo").css("font-size","40px");
</script>
|
| .siblings() | 选择所有的兄弟元素 | <script type="text/javascript">
//选择所有的兄弟元素
$("#li04").siblings().css("background", "gold");
$("#li04").siblings(".liItem").css("background", "gold");
</script>
|
| .find() | 选择所有后代元素 | <script type="text/javascript">
//选择所有后代元素
$("#div").find().css("background", "gold");
$("div").find("#li04").css("background", "gold");
</script>
|
6.表单选择器
表单选择器
| 名称 | 语义 | 代码 |
| :input | 选择所有<input>等表单元素 | <script type="text/javascript">
//选择所有<input>等表单元素
$(":input").css("background-color","red");
</script>
|
| :text | 选择所有所有 type="text" 的 <input> 元素 | <script type="text/javascript">
//选择所有所有 type="text" 的 <input> 元素
$(":text").css("background-color","red");
</script>
|
| :password | 选择所有 type="password" 的 <input> 元素 | <script type="text/javascript">
//选择所有 type="password" 的 <input> 元素
$(":password").css("background-color","red");
</script>
|
| :radio | 选择所有 type="radio" 的 <input> 元素 | <script type="text/javascript">
//选择所有 type="radio" 的 <input> 元素
$(":radio").css("background-color","red");
</script>
|
| :checkbox | 选择所有 type="checkbox" 的 <input> 元素 | <script type="text/javascript">
//选择所有 type="checkbox" 的 <input> 元素
$(":checkbox").css("background-color","red");
</script>
|
| :submit | 选择所有 type="submit" 的 <input> 元素 | <script type="text/javascript">
//选择所有 type="submit" 的 <input> 元素
$(":submit").css("background-color","red");
</script>
|
| :image | 选择所有 type="image" 的 <input> 元素 | <script type="text/javascript">
//选择所有 type="image" 的 <input> 元素
$(":image").css("background-color","red");
</script>
|
| :reset | 选择所有 type="reset" 的 <input> 元素 | <script type="text/javascript">
//选择所有 type="reset" 的 <input> 元素
$(":reset").css("background-color","red");
</script>
|
| :button | 选择所有 type="button" 的 <input> 元素 | <script type="text/javascript">
//选择所有 type="button" 的 <input> 元素
$(":button").css("background-color","red");
</script>
|
| :file | 选择所有 type="file" 的 <input> 元素 | <script type="text/javascript">
//选择所有 type="file" 的 <input> 元素
$(":file").css("background-color","red");
</script>
|
|
| 名称 | 语义 | 代码 |
| :enabled | 选择所有可用元素 | <script type="text/javascript">
//选择所有可用元素
$(":enabled").css("background-color","red");
</script>
|
| :disabled | 选择所有不可用元素 | <script type="text/javascript">
//选择所有不可用元素
$(":disabled").css("background-color","red");
</script>
|
| :checked | 选择所有被选中的元素，如单选框、多选框 | <script type="text/javascript">
//选择所有被选中的元素，如单选框、多选框
$(":checked").css("background-color","red");
</script>
|
| :selected | 选择所有被选中项元素，如下拉列表、列表框 | <script type="text/javascript">
//选择所有被选中项元素，如下拉列表、列表框
$(":selected").css("background-color","red");
</script>
|
三.事件
1.事件处理程序
2.事件对象操作
1）.绑定事件
<script type="text/javascript">
//绑定一个事件一个条件
$("button").click(function(){
alert("绑定了Click事件");
});
//绑定多个事件一个条件
$("button").bind("click mouseenter",function(){
alert("绑定了Click、Mouseenter事件");
});
//绑定多个事件多个条件
$("button").bind({
"click" : function(){
alert("绑定了Click事件");
},
"mouseenter" : function(){
alert("绑定了Mouseenter事件");
}
});
//绑定一个事件一个条件并传递参数
$("button").bind("click","传递参数",function(event){
alert(event.data); //结果为：传递参数
});
//绑定一个事件一个条件并传递参数对象
$("button").bind("click",{color : "pink"},function(event){
alert(event.data.color); //结果为：pink
});
//只触发一次的事件
$("button").one("click",function(){
alert("使用One事件只能触发一次");
});
//给所有的子元素绑定事件
$("ul").delegate("li","click",function(){
alert($(this).html()); //输出结果为当前点击的某个li元素
});
//绑定事件，推荐使用，JQuery版本1.7+
//第一个参数为使用空格分隔的事件类型
//第二个参数为用于触发事件的元素的后代
//第三个参数为事件被触发时要传递的event.data参数
//第四个参数为该事件被触发时执行的函数
$("ul").on("click","li",{color : "pink"},function(event){
alert($(this).html()); //输出结果为当前点击的某个li元素
alert(event.data.color); //输出传递的参数：pink
});
</script>
2）.解绑事件
3）.触发事件
3.阻止事件冒泡和默认行为
4.事件属性
事件
| 事件属性 | 当以下情况发生时，执行此事件 |
| bind() | 向匹配元素附加一个或更多事件处理器，绑定事件 |
| blur() | 触发、或将函数绑定到指定元素的 blur 事件，失去焦点事件 |
| change() | 触发、或将函数绑定到指定元素的 change 事件，改变事件 |
| click() | 触发、或将函数绑定到指定元素的 click 事件，点击事件 |
| dblclick() | 触发、或将函数绑定到指定元素的 double click 事件，双击事件 |
| delegate() | 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
| die() | 移除所有通过 live() 函数添加的事件处理程序 |
| error() | 触发、或将函数绑定到指定元素的 error 事件，当加载文档或图像时发生某个错误 |
| event.isDefaultPrevented() | 返回 event 对象上是否调用了 event.preventDefault() |
| event.pageX | 相对于文档左边缘的鼠标位置 |
| event.pageY | 相对于文档上边缘的鼠标位置 |
| event.preventDefault() | 阻止事件的默认动作 |
| event.result | 包含由被指定事件触发的事件处理器返回的最后一个值 |
| event.target | 触发该事件的 DOM 元素 |
| event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数 |
| event.type | 描述事件的类型 |
| event.which | 指示按了哪个键或按钮 |
| focus() | 触发、或将函数绑定到指定元素的 focus 事件，获得焦点事件 |
| keydown() | 触发、或将函数绑定到指定元素的 key down 事件，某个键盘的键被按下 |
| keypress() | 触发、或将函数绑定到指定元素的 key press 事件，某个键盘的键被按下或按住 |
| keyup() | 触发、或将函数绑定到指定元素的 key up 事件，某个键盘的键被松开 |
| live() | 为当前或未来的匹配元素添加一个或多个事件处理器 |
| load() | 触发、或将函数绑定到指定元素的 load 事件，加载事件 |
| mousedown() | 触发、或将函数绑定到指定元素的 mouse down 事件，某个鼠标按键被按下 |
| mouseenter() | 触发、或将函数绑定到指定元素的 mouse enter 事件，鼠标进入元素，鼠标经过只会触发一次 |
| mouseleave() | 触发、或将函数绑定到指定元素的 mouse leave 事件，鼠标离开元素，鼠标经过只会触发一次 |
| mousemove() | 触发、或将函数绑定到指定元素的 mouse move 事件，鼠标被移动 |
| mouseout() | 触发、或将函数绑定到指定元素的 mouse out 事件，鼠标从某元素移开，每遇到一个子元素就会触发一次 |
| mouseover() | 触发、或将函数绑定到指定元素的 mouse over 事件，鼠标被移到某元素之上，每遇到一个子元素就会触发一次 |
| mouseup() | 触发、或将函数绑定到指定元素的 mouse up 事件，某个鼠标按键被松开 |
| one() | 向匹配元素添加事件处理器。每个元素只能触发一次该处理器 |
| ready() | 文档就绪事件（当 HTML 文档就绪可用时） |
| resize() | 触发、或将函数绑定到指定元素的 resize 事件 |
| scroll() | 触发、或将函数绑定到指定元素的 scroll 事件 |
| select() | 触发、或将函数绑定到指定元素的 select 事件，文本被选定 |
| submit() | 触发、或将函数绑定到指定元素的 submit 事件，提交按钮被点击，提交事件 |
| toggle() | 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行 |
| trigger() | 所有匹配元素的指定事件 |
| triggerHandler() | 第一个被匹配元素的指定事件 |
| unbind() | 从匹配元素移除一个被添加的事件处理器 |
| undelegate() | 从匹配元素移除一个被添加的事件处理器，现在或将来 |
| unload() | 触发、或将函数绑定到指定元素的 unload 事件，用户退出页面 |
