jQuery介绍
jQuery：JavaScript+Query(查询)，它是辅助JavaScript开发的js类库。
使用jQuery给一个按钮绑定单击事件：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () { // 表示页面加载完成之后，相当于window.onload = function() { }
var $btnObj = $("#btnId"); // 表示按照id查询标签对象
$btnObj.click(function () { // 绑定点击事件
alert("jQuery的单击事件");
});
});
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>
使用jQuery一定要先引入jQuery库，jQuery中的$是一个函数
jQuery的核心函数
$是jQuery的核心函数，能完成jQuery的很多功能。$()就是调用$这个函数
1.传入参数为 [函数] 时：
表示页面加载完成之后。相当于window.onload = function(){}
2.传入参数为 [HTML 字符串]时：
会创建这个html标签对象
3.传入参数为 [选择器字符串]时：
$("#id属性值"); id选择器，根据id查询标签对象
$("标签名"); 标签名选择器，根据指定的标签名查询标签对象
$(".class属性值"); 类型选择器，可以根据class属性查询标签对象
4.传入参数为 [DOM对象] 时：
会把这个dom对象转换为jQuery对象
jQuery对象和dom对象的区分
Dom对象
1.通过getElementById()查询出来的标签对象是Dom对象
2.通过getElementByName()查询出来的标签对象是Dom对象
3.通过getElementsByTagName()查询出来的标签对象是Dom对象
4.通过createElement()方法创建的对象是Dom对象
Dom对象alert出来的效果是：[Object HTML 标签名Element]
jQuery对象
5.通过jQuery提供的API创建的对象，是jQuery对象
6.通过jQuery包装的Dom对象，是jQuery对象
7.通过jQuery提供的API查询到的对象，是jQuery对象
jQuery对象Alert出来的效果是：[object Object]
jQuery对象的本质：
jQuery对象是 dom对象的数组 + jQuery 提供的一系列功能函数。
Dom对象和jQuery对象互转
1、dom对象转换为jQuery对象
1、先有dom对象
2、$(dom)对象 就可以转换成为 jQuery对象
2、jQuery对象转换为dom对象
1、先有jQuery对象
2、jQuery对象[下标]取出相应的dom对象
jQuery选择器
基本选择器
#ID 选择器：根据id查找标签对象
.class 选择器：根据class查找标签对象
element 选择器：根据标签名查找标签对象
* 选择器：表示任意的，所有的元素
selector1，selector2 组合选择器：合并选择器1，选择器2的结果并返回
层级选择器
ancestor descendant 后代选择器：在给定的祖先元素下匹配所有的后代元素
parent > child 子元素选择器：在给定的父元素下匹配所有的子元素
prev + next 相邻元素选择器：匹配所有紧接在prev元素后的next元素
prev ~ sibings 之后的兄弟元素选择器：匹配prev元素之后的所有sibings元素
过滤选择器
基本过滤器：
:first 获取第一个元素
:last 获取最后一个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从0开始计数
:odd 匹配所有索引值为奇数的元素，从0开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如h1,h2,h3之类的标题元素
:animated 匹配所有正在执行动画效果的元素
内容过滤器：
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:parent 匹配含有子元素或者文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素
属性过滤器：
[attribute] 匹配包含给定属性的元素。
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性值是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用
表单过滤器：
:input 匹配所有input, textarea, select 和 button 元素
:text 匹配所有文本输入框
:password 匹配所有的密码输入框
:radio 匹配所有的单选框
:checkbox 匹配所有的复选框
:submit 匹配所有提交按钮
:image 匹配所有img标签
:reset 匹配所有重置按钮
:button 匹配所有input type=button<button>按钮
:file 匹配所有input type=file 文件上传
:hidden 匹配所有不可见元素display:none 或 input type=hidden
表单对象属性过滤器：
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的单选，复选，和下拉列表中选中的option标签对象
:selected 匹配所有选中的option
jQuery元素筛选
jQuery的属性操作
val方法同时设置多个表单项的选中状态：
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]);
});
</head>
<html>
attr():可以设置和获取属性的值，不推荐操作checked、readOnly、selected、disabled等等。attr方法还可以操作非标准的属性。比如自定义属性：abc,bbj
prop():可以设置和获取属性的值，只推荐操作checked、readOnly、selected、disabled等等
$(":checkbox[name='items']").each(function() {
// 在each遍历的function函数中，有一个this对象。这个this对象是当前正在遍历到的dom对象
this.checked = !this.checked;
});
DOM的增删改查
内部插入：
appendTo() a.appendTo(b) 把a插入到b子元素末尾，成为最后一个子元素
prependTo() a.prependTo(b) 把a插到b所有子元素前面，成为第一个子元素
外部插入：
insertAfter() a.insertAfter(b) 得到ba
insertBefore() a.insertBefore(b) 得到ab
替换：
replaceWith() a.replaceWith(b) 用b替换掉所有a
replaceAll() a.replaceAll(b) 用a替换掉所有b
删除：
remove() a.remove(); 删除a标签
empty() a.empty(); 清空a标签里的内容
$(function(){} ); 和 window.onload = function(){}的区别：
触发的时机：
1、jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行。
2、原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成。
触发的顺序：
1、jQuery页面加载完成之后先执行
2、原生js的页面加载完成之后
执行的次数：
1、jQuery的页面加载完成之后是把全部注册的function函数，依次顺序全部执行。
2、原生js的页面加载完成之后，只会执行最后一次的赋值函数。
jQuery中其他的事件处理方法：
click() 它可以绑定单击事件，以及触发单击事件
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
bind() 可以给元素一次性绑定一个或多个事件
one() 使用上跟bind一样。但是one方法绑定的事件只会响应一次
unbind() 跟bind方法相反的操作，解除事件的绑定
live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来 的也有效。
事件的冒泡：事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件响应。
如何阻止事件冒泡：在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。
JavaScript事件对象
在给元素绑定事件的时候，在事件的function(event)参数列表中参加一个参数，这个参数名，我们习惯取名为event。这个event就是javascript传递参数时处理函数的事件对象。
$("#areaDiv").bind("mouseover mouseout",function(event) ){
if(event.type == "mouseover"){
console.log("鼠标移入");
}else if(event.type == "mouseout"){
console.log("鼠标移出");
}
}
1145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
