标签：
jQuery介绍（下篇）
今天接着昨天的来介绍jQuery的相关属性和用法。
一：jQuery操作DOM
1.1设置属性
Ø1.1.1 设置单个属性
//第一个参数：需要设置的属性名
//第二个参数：对应的属性值
attr(name, value);
//用法举例
$(“img”).attr(“title”,”美女”);
$(“img”).attr(“alt”,“加载失败”);
Ø1.1.2 设置多个属性
//参数是一个对象，包含了需要设置的属性名和属性值
attr(obj)
//用法举例
$("img").attr({
title:"美女",
alt:"加载失败",
style:"opacity: .5"
});
Ø1.2获取属性
//传入需要获取的属性名称，返回对应的属性值
attr(name)
//用法举例
var oTitle = $("img").attr("title");
alert(oTitle);
注意：
1.获取属性时，只会获取到第一个元素对应的属性，与css方法一样
2.获取属性时，如果该属性不存在，那么会返回undefined
Ø1.3移除属性
//参数：需要移除的属性名，如果传空，那么不会有任何操作，注意，并不是移除所有的属性。区分removeClass。
removeAttr(name);
//用法举例
$("img").removeAttr("title");
Øprop
注意：在jQuery1.6之后，对于checked、selected、disable这类boolean类型的属性来说，如果使用attr方法获取属性值，得到的不是true和false，而是checked以及undefined。，使用prop方法来获取或者设置checked、selected、disable这类的值。prop方法使用跟attr方法一样。
//设置属性
$(“:checked”).prop(“checked”,true);
//获取属性
$(“:checked”).prop(“checked”);//返回true或者false
2.jQuery操作值与内容
Ø2.1val方法
val方法用于设置和获取表单元素的值，例如input、select、textarea的值
//设置值
$(“#name”).val(“张三”);
//获取值
$(“#name”).val();
Ø2.2html方法
//设置内容
$(“div”).html(“<span>这是一段内容</span>”);
//获取内容
$(“div”).html()
Ø2.3text方法
//设置内容
$(“div”).text(“<span>这是一段内容</span>”);
//获取内容
$(“div”).text()
注：html方法与text方法的区别：
html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。
3.jQuery操作尺寸
Ø3.1height
设置或者获取高度
//带参数表示设置高度
$(“img”).height(200);
//不带参数获取高度
$(“img”).height();
返回值是number类型（比如200），而使用$(“img”).css(“width”)返回的是字符串（比如200px）
Ø3.2width
设置获取宽度，与高度操作功能一样
//带参数表示设置宽度
$(“img”).width(200);
//不带参数获取宽度
$(“img”).width();
4. jQuery操作坐标值
Ø4.1 offset
设置或者获取元素相对于文档document的位置。
//设置位置
$(selector).offset({left:100, top: 150});
//获取位置
$(selector).offset();
注意：使用offset操作，如果元素没有设置定位(默认position:static)，则会把position修改为relative.会修改left、top
Ø4.2position
获取相对于其最近的有定位的父元素的位置。
// 获取，返回值为对象：{left:num, top:num}
$(selector).position();
注意：position方法只能获取，不能设置
Ø4.3scrollTop
设置或者获取垂直滚动条的位置
// 有参数表示设置偏移，参数为数值类型
$(selector).scrollTop(100);
// 无参数表示获取偏移
$(selector).scrollTop();
Ø4.4scrollLeft
设置或者获取水平滚动条的位置
// 有参数表示设置偏移，参数为数值类型
$(selector).scrollLeft(100);
// 无参数表示获取偏移
$(selector).scrollLeft();
二：jQuery事件机制
jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。
1. jQuery事件的发展历程
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(更常用)
Ø1.1简单事件绑定
click(handler) 单击事件
mouseenter(handler) 鼠标进入事件
mouseleave(handler) 鼠标离开事件
scroll(handler) 滚动事件
缺点：一次只能绑定一个事件
Ø1.2 bind事件绑定
不推荐使用，jQuery1.7版本后被on取代
//绑定多个事件
//第一个参数：事件类型
//第二个参数：事件处理程序
$("p").bind("click mouseenter", function(){
//事件响应方法
});
缺点：不支持动态创建出来的元素绑定事件。
Ø1.3 delegate事件绑定
支持动态绑定事件
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});
注意：为什么delegate支持动态绑定事件？原因是事件冒泡机制。因为事件是绑定到父元素上的，由子元素触发。
Ø1.4 on事件绑定
jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
on事件绑定
优势：最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将由自己来执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);
例子：
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定（不使用代理）。
$(selector).on( "click", function() {});
2. 事件解绑
Øunbind() 方式（不用）
作用：解绑事件
$(selector).unbind(); //解绑所有的事件
$(selector).unbind(“click”); //解绑指定的事件
Øundelegate() 方式（不用）
作用：解绑事件
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件
Øoff方式（常用）
作用：解绑事件
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off(“click”);
// 解绑所有代理的click事件，元素本身的事件不会被解绑
$(selector).off( “click”, “**” );
3. 事件触发
简单事件触发
$(selector).click(); //触发 click事件
trigger方法触发事件
$(selector).trigger(“click”);
triggerHandler触发 事件响应方法，不触发浏览器行为
比如:文本框获得焦点的默认行为
$(selector).triggerHandler(“focus”);
4. jQuery事件对象（）
对象属性 解释
event.type 事件类型
event.data 存储绑定事件时传递的附加数据
event.target 点了谁就是谁
event.currentTarget 当前DOM元素，等同于this
event.delegateTarget 代理对象
screenX和screenY 对应屏幕最左上角的值
offsetX和offsetY 点击的位置距离元素的左上角的位置
clientX和clientY 距离页面左上角的位置（忽视滚动条）
pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
event.switch 鼠标按键类型，1=鼠标左键 2=鼠标中键 3=鼠标右键
event.keyCode 按下的键盘代码
event.stopPropagation() 阻止事件冒泡行为
event.preventDefault() 阻止浏览器默认行为
三：jQuery补充
1. 链式编程
链式编程原理：return this;
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。
end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。
2. 隐式迭代
隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。
如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。
3. each方法
有了隐式迭代，为什么还要使用each函数遍历？
大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。
如果要对每个元素做不同的处理，这时候就需要用each方法了。
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});
4. 多库共存
我们知道jQuery占用了$这个标识符，如果引用的其他库也用到$这个标识符，这时候为了保证每个库都能正常使用，这时候就存在了多库共存的问题。
后引入的$的会覆盖掉先引入的库中的$。
$ === jQuery
解决办法：
jQuery的$和jQuery是两个相同的变量，因此遇到多库共存的时候，可以让jquery交出$符的控制权，这个时候还是可以使用$.
console.log($);//function(selector, context){}
//$.noConflict();//释放$的控制权
console.log($);{name:”zhangsan”,age:12}
jQuery(function () {
jQuery("div").html("我不是div的内容");
});
5. jQuery插件机制
5.1第三方插件
jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。
如：jquery.color.js
animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。
如何使用第三方插件：
1.引入jQuery文件
2.引入插件
3.使用插件
5.2制作插件
全局jQuery函数扩展方法
$.pluginName = function() {};
jQuery对象扩展方法
$.fn. pluginName = function() {};
5.3jQuery UI
jQueryUI专指由jQuery官方维护的UI方向的插件。
官方API：http://api.jqueryui.com/category/all/
其他教程：jQueryUI教程
基本使用:
1.引入jQueryUI的样式文件
2.引入jQuery
3.引入jQueryUI的js文件
4.使用jQueryUI功能
通过jQuery(上篇)和jQuery(下篇)的详细介绍，不知大家是否会熟练使用jQuery了呢？欢迎指正。
标签：
原文地址：http://www.cnblogs.com/h-jj/p/5797771.html
