jQuery
jQuery概念
是一个JavaScript库（框架），它通过封装原生的JavaScript函数得到一整套定义好的方法。
jQuery入门程序
1.首先在项目中引用jQuery库
<script src="js/jquery1.9.1.js"type="text/javascript"charset="utf-8"></script>
2.使用jQuery实现单击按钮弹窗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button">一个按键</button>
</body>
</html>
<script type="text/javascript">
$('button').click(function(){
alert("qqqq");
});
</script>
jQuery绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button" id="button1"> 按键1 </button>
<button type="button" id="button2"> 按键2 </button>
<input type="button" name="" id="input1" value=" 按键3" />
<input type="button" name="" id="input2" value=" 按键4" />
<input type="button" name="" id="input3" value=" 按键5" />
</body>
</html>
<script type="text/javascript">
$('#button1').on('click', function() {
document.write('绑定button点击事件');
});
// on 添加绑定事件
$('#input1').on('click', function() {
document.write('绑定input点击事件');
}).on('mouseover', function() {
$(this).css('background', 'red')
}).on('mouseout', function() {
$(this).css('background', 'yellow')
});
// off 解除绑定事件
$('input').off('mouseout')
//绑定事件的简写方式
$('#button2').click(function(){
alert('11111');
});
//
$('#input2').click(function(){
alert('input2222');
}).mouseover(function(){
$(this).css('background','red');
});
//one() 让事件值触发一次
$('#input3').one('click',function(){
alert("abc");
});
</script>
基础事件：
jQuery 通过.bind()方法来为元素绑定这些事件。 可以传递三个参数： bind(type, [data], fn)，type 表示一个或多个类型的事件名字符串；[data]是可选的，作为 event.data 属性值传递一个额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；fn 表示绑定到指定元素的处理函数。
使用事件：
//方式1：
$('input').bind('click', function() {
//点击按钮后执行匿名函数
alert('点击！');
});
//方式2：普通处理函数
$('input').bind('click', fn);
//执行普通函数式无须圆括号
function fn() {
alert('点击！');
}
//方式3：通过对象键值对绑定多个参数
$('input').bind({ //传递一个对象
'mouseout': function() {
//事件名的引号可以省略
alert('移出');
},
'mouseover': function() {
alert('移入');
}
});
解绑事件：
//使用 unbind 删除绑定的事件
$('input').unbind(); //删除所有当前元素的事件
//使用 unbind 参数删除指定类型事件
$('input').unbind('click'); //删除当前元素的 click 事件
//使用 unbind 参数删除指定处理函数的事件
function fn1() {
alert('点击 1');
}
function fn2() {
alert('点击 2');
}
//绑定了两个事件函数
$('input').bind('click', fn1);
$('input').bind('click', fn2);
$('input').unbind('click', fn1); //只删除 fn1 处理函数的事件
IQuery对象和JavaScript对象互换
jQuery 对象虽然是 jQuery 库独有的对象，但它也是通过 JavaScript 进行封装而来的。 我们可以直接输出来得到它的信息。
alert($); //jQuery 对象方法内部
alert($()); //jQuery 对象返回的对象，还是 jQuery
alert($('#box')); //包裹 ID 元素返回对象，还是 jQuery
从上面三组代码我们发现：只要使用了包裹后，最终返回的都是 jQuery 对象。这样的好处显而易见，就是可以连缀处理。但有时，我们也需要返回原生的 DOM 对象，比如： alert(document.getElementById('box')); //[object HTMLDivElement]
var JqueryObj=$(原生DOM对象); 我们使用$() 包裹一下原生DOM对象，就会转换成Jquery对象了jQuery 想要达到获取原生的 DOM 对象，可以这么处理：
alert($('#box').get(0)); //ID 元素的第一个原生 DOM
从上面 get(0)，这里的索引看出，jQuery 是可以进行批量处理 DOM 的.
IQuery对象选择器
1.常规选择器
$('div').css('color', 'red'); //元素选择器，返回多个元素
$('#box').css('color', 'red'); //ID 选择器，返回单个元素
$('.box').css('color', 'red'); //类(class)选择器，返回多个元素
为了证明 ID 返回的是单个元素，而元素标签名和类(class)返回的是多个，我们可以采用 jQuery 核心自带的一个属性 length 或 size()方法来查看返回的元素个数。
alert($('div').size());
alert($('#box').length);
2.进阶选择器
$('span, em, .box').css('color', 'red'); //群组选择器 jQuery 方式
$('ul li a').css('color', 'red'); //群组选择器 jQuery
$('*').css('color', 'red'); //通配选择器
3.高级选择器
$(‘#box p’).css(‘color’, ‘red’); 等价于 $('#box').find('p').css('color', 'red');
$(‘#box > p’).css(‘color’, ‘red’); 等价于 $(‘#box’).children(‘p’).css(‘color’, ‘red’);
$(‘#box+p’).css(‘color’, ‘red’); 等价于 $('#box').next('p').css('color', 'red');
$(‘#box ~ p’).css(‘color’, ‘red’); 等价于 $('#box').nextAll('p').css('color', 'red');
高级选择器方法
1.选定同级元素的上一个(prev) 或 上面所有元素(prevAll)
$('#box').prev('p').css('color', 'red'); //同级上一个元素 $('#box').prevAll('p').css('color', 'red'); //同级所有上面的元素
2. nextUntil()和 prevUnitl()方法是选定同级的下面或上面的所有节点，选定非指定的所有元素，一旦遇到指定的元素就停止选定。
$('#box').prevUntil('p').css('color', 'red'); //同级上非指定元素选定，遇到则停止 $('#box').nextUntil('p').css('color', 'red'); //同级下非指定元素选定，遇到则停止
3. 选定同级元素的 上下所有元素siblings()方法正好集成了 prevAll()和 nextAll()两个功能的效果，及上下相邻的所有元素进行选定：
$('#box').siblings('p').css('color', 'red'); //同级上下所有元素选定//等价于下面： $('#box').prevAll('p').css('color', 'red'); //同级上所有元素选定 $('#box').nextAll('p').css('color', 'red'); //同级下所有元素选定
4.属性选择器
a[title]
$('a[title]')
获取具有这个属性的 DOM 对象
a[title=num1]
$('a[title=num1]')
获取具有这个属性=这个属性值的 DOM对象
a[title^=num]
$('a[title^=num]')
获取具有这个属性且开头属性值匹配的 DOM 对象
a[title$=num]
$('a[title$=num]')
获取具有这个属性且结尾属性值匹配的 DOM 对象
a[title*=num]
$('a[title*=num]')
获取具有这个属性且属性值含有一个指定字串的 DOM 对象
a[title!=num]
$('a[title!=num]')
获取具有这个属性且不等于属性值的 DOM 对象
5.过滤选择器
$('li').eq(2).css('background', '#ccc'); //元素 li 的第三个元素，负数从后开始
$('li').first().css('background', '#ccc'); //元素 li 的第一个元素 $('li').last().css('background', '#ccc'); //元素 li 的最后一个元素
IQuery基于DOM和CSS的操作
html()和text()方法
html() 获取元素中 HTML 内容
html(value) 设置元素中 HTML 内容
text() 获取元素中文本内容
text(value) 设置原生中文本内容
val() 获取表单中的文本内容
val(value) 设置表单中的文本内容
示例：
在常规的 DOM 元素中，我们可以使用 html()和 text()方法获取内部的数据。
html()方法可以获取或设置 html 内容，
text()可以获取或设置文本内容。
$('#box').html(); //获取 html 内容
$('#box').text(); //获取文本内容，会自动清理 html 标签 $('#box').html('<em>www.li.cc</em>'); //设置 html 内容 $('#box').text('<em>www.li.cc</em>'); //设置文本内容，会自动转义 html 标签
注意：当我们使用 html()或 text()设置元素里的内容时，会清空原来的数据。而我们期望能够追加数据的话，需要先获取原本的数据。
$('#box').html($('#box').html() + '<em>www.li.cc</em>'); //追加数据
如果元素是表单的话，jQuery 提供了 val()方法进行获取或设置内部的文本数据。
$('input').val(); //获取表单内容
$('input').val('www.li.cc'); //设置表单内容
如果想设置多个选项的选定状态，比如下拉列表、单选复选框等等，可以通过数组传递操作。 $("input").val(["check1","check2", "radio1" ]); //value
IQuery对象元素属性操作
除了对元素内容进行设置和获取，通过 jQuery 也可以对元素本身的属性进行操作，包括获取属性的属性值、设置属性的属性值，并且可以删除掉属性。
attr(key) 获取某个元素 key 属性的属性值
attr(key, value) 设置某个元素 key 属性的属性值
attr({key1:value2, key2:value2...}) 设置某个元素多个 key 属性的属性值
attr(key, function (index, value) {}) 设置某个元素 key 通过 fn 来设置
removerAttr(属性名称) 根据属性名称移除某个属性
示例：
$('div').attr('title'); //获取属性的属性值
$('div').attr('title', '我是域名'); //设置属性及属性值
$('div').attr('title', function () {
//通过匿名函数返回属性值
return '我是域名';
});
$('div').attr('title', function (index, value) {
//可以接受两个参数
return value + (index+1) + '，我是域名';
});
注意：attr()方法里的 function() {}，可以不传参数。可以只传一个参数 index，表示当前元素的索引(从 0 开始)。也可以传递两个参数 index、value，第二个参数表示属性原本的值。
注意：我们也可以使用 attr()来创建 id 属性，但我们强烈不建议这么做。这样会导致整个页面结构的混乱。 当然也可以创建 class 属性， 但后面会有一个语义更好的方法来代替 attr()方法，所以也不建议使用。
jQuery对象CSS操作方法
css操作方法：
css(name) 获取某个元素行内的 CSS 样式
css([name1, name2, name3]) 获取某个元素行内多个 CSS 样式 注意返回的是JSON对象 键是属性名值是属性值
css(name, value) 设置某个元素行内的 CSS 样式
css(name, function (index, value) ) 设置某个元素行内的 CSS 样式
css({name1 : value1, name2 : value2}) 设置某个元素行内多个 CSS 样式
addClass(class) 给某个元素添加一个 CSS 类
addClass(‘class1 class2 class3...’) 给某个元素添加多个 CSS 类
removeClass(class) 删除某个元素的一个 CSS 类
removeClass(‘class1 class2 class3...’) 删除某个元素的多个 CSS 类
toggleClass(class) 来回切换默认样式和指定样式
toggleClass(class1 class2 class3...) 来回切换默认样式和指定样式
toggleClass(class, switch) 来回切换样式的时候设置切换频率
toggleClass(function () {}) 通过匿名函数设置切换的规则
toggleClass(function () {}, switch) 在匿名函数设置时也可以设置频率
toggleClass(function (i, c, s) {}, switch) 在匿名函数设置时传递三个参数
示例：
//获取元素行内 CSS 样式的颜色
$('div').css('color');
//设置元素行内 CSS 样式颜色为红色
$('div').css('color', 'red');
//在 CSS 获取上， 我们也可以获取多个 CSS 样式， 而获取到的是一个对象数组， 如果用传统方式进行解析需要使用for in 遍历。
var box = $('div').css(['color', 'height', 'width']); //得到多个 CSS 样式的数组对象
for (var i in box) { //逐个遍历出来
alert(i + ':' + box[i]);
}
// 通过键找值，取出css属性所对应的值
var v = $('#myh').css(['color', 'font-size']);
alert(v. [“font - size”]);
//jQuery 提供了一个遍历工具专门来处理这种对象数组，$.each()方法，这个方法可以轻松的遍历对象数组。
$.each(box, function(attr, value) {
//遍历 JavaScript 原生态的对象数组
alert(attr + ':' + value);
});
//使用$.each() 可以遍历原生的 JavaScript 对象数组， 如果是 jQuery 对象的数组怎么使用.each() 方法呢？
$('div').each(function(index, element) {
//index 为索引，element 为元素
DOMalert(index + ':' + element);
});
//在需要设置多个样式的时候， 我们可以传递多个 CSS 样式的键值对即可。
$('div').css({
'background-color': '#ccc',
'color': 'red',
'font-size': '20px'
});
//如果想设置某个元素的 CSS 样式的值， 但这个值需要计算我们可以传递一个匿名函数。
$('div').css('width', function(index, value) {
return (parseInt(value) - 500) + 'px';
});
//除了行内 CSS 设置，我们也可以直接给元素添加 CSS 类，可以添加单个或多个，并且也可以删除它。
//添加一个 CSS 类
$('div').addClass('red');
//添加多个 CSS 类
$('div').addClass('red bg');
//删除一个 CSS 类
$('div').removeClass('bg');
//删除多个 CSS 类
$('div').removeClass('red bg');
//我们还可以结合事件来实现 CSS 类的样式切换功能。
//当点击后触发
$('div').click(function () {
//单个样式多个样式均可
$(this).toggleClass('red size');
});
//.toggleClass()方法的第二个参数可以传入一个布尔值，
//true 表示执行切换到 class 类， false表示执行回默认
//class 类(默认的是空 class)，运用这个特性，我们可以设置切换的频率。
var count = 0;
$('div').click(function () {
//每点击两次切换一次 red
$(this).toggleClass('red', count++ % 3 == 0);
});
//默认的 CSS 类切换只能是无样式和指定样式之间的切换， 如果想实现样式 1 和样式 2 之间的切换还必须自己写一些逻辑。
$('div').click(function() {
$(this).toggleClass('red size'); //一开始切换到样式 2
if ($(this).hasClass('red')) { //判断样式 2 存在后
$(this).removeClass('blue'); //删除样式 1
} else {
$(this).toggleClass('blue');
//添加样式 1，这里也可以 addClass
}
});
CSS方法：
iQuery 不但提供了 CSS 的核心操作方法，比如.css()、.addClass()等。还封装了一些特殊功能的 CSS 操作方法
width() 获取某个元素的长度
width(value) 设置某个元素的长度
width(function (index, width) {}) 通过匿名函数设置某个元素的长度
height() 获取某个元素的长度
height(value) 设置某个元素的长度
height(function (index, width) {}) 通过匿名函数设置某个元素的长度
示例：
$('div').width(); //获取元素的宽度，返回的类型为 number
$('div').width(500); //设置元素宽度，直接传数值，默认加 px
$('div').width('500pt'); //同上，设置了 pt 单位
$('div').width(function (index, value) { //index 是索引，value 是原本值
return value - 500; //无须调整类型，直接计算
});
$('div').height(); //获取元素的高度，返回的类型为 number
$('div').height(500); //设置元素高度，直接传数值，默认加 px
$('div').height('500pt'); //同上，设置了 pt 单位
$('div').height(function (index, value) { //index 是索引，value 是原本值
return value - 1; //无须调整类型，直接计算
});
节点操作
为了使页面更加智能化，有时我们想动态的在 html 结构页面添加一个元素标签，那么在插入之前首先要做的动作就是
创建节点：
var box = $('<div id="box">节点</div>'); //创建一个节点
$('body').append(box); //将节点插入到<body>元素内部
append(content)
//向指定元素内部后面插入节点 content
append(function (index, html) {})
//使用匿名函数向指定元素内部后面插入节点
appendTo(content)
//将指定元素移入到指定元素 content 内部后面
prepend(content)
//向指定元素 content 内部的前面插入节点
prepend(function (index, html) {})
//使用匿名函数向指定元素内部的前面插入节点
prependTo(content)
//将指定元素移入到指定元素 content 内部前面
示例：
$('div').append('<strong>节点</strong>');
//向 div 内部插入 strong 节点
$('div').append(function(index, html) {
//使用匿名函数插入节点，html 是原节点
return '<strong>节点</strong>';
});
$('span').appendTo('div');
//将 span 节点移入 div 节点内
$('span').appendTo($('div'));
//将 span 节点移入 div 节点内
$('div').prepend('<span>节点</span>');
//将 span 插入到 div 内部的前面
$('div').append(function(index, html) {
//使用匿名函数，将 span 节点移入 div 节点内
return '<span>节点</span>';
});
$('span').prependTo('div');
//将 span 移入 div 内部的前面
$('span').prependTo($('div'));
//将 span 移入 div 内部的前面
外部插入结点方法：
after(content)
//向指定元素的外部后面插入节点 content
after(function (index, html) {})
//使用匿名函数向指定元素的外部后面插入节点
before(content)
//向指定元素的外部前面插入节点 content
before(function (index, html) {})
//使用匿名函数向指定元素的外部前面插入节点
insertAfter(content)
//将指定节点移到指定元素 content 外部的后面
insertBefore(content)
//将指定节点移到指定元素 content 外部的前面
示例：
$('div').after('<span>节点</span>');
//向 div 的同级节点后面插入 span
$('div').after(function(index, html) {
//使用匿名函数，向 div 的同级节点后面插入 span
return '<span>节点</span>';
});
$('div').before('<span>节点</span>');
//向 div 的同级节点前面插入 span
$('div').before(function(index, html) {
//使用匿名函数，向 div 的同级节点前面插入 span
return '<span>节点</span>';
});
$('span').insertAfter('div');
//将 span 元素移到 div 元素外部的后面
$('span').insertBefore('div');
//将 span 元素移到 div 元素外部的前面
包裹节点：
那包裹节点是就是使用字符串代码将指定元素的代码包含着的意思。
wrap(html)
//向指定元素包裹一层 html 代码
wrap(element)
//向指定元素包裹一层 DOM 对象节点
wrap(function (index) {})
//使用匿名函数向指定元素包裹一层自定义内容
unwrap()
//移除一层指定元素包裹的内容
wrapAll(html)
//用 html 将所有元素包裹到一起
wrapAll(element)
//用 DOM 对象将所有元素包裹在一起
wrapInner(html)
//向指定元素的子内容包裹一层 html
wrapInner(element)
//向指定元素的子内容包裹一层 DOM 对象节点
wrapInner(function (index) {})
//用匿名函数向指定元素的子内容包裹一层
示例：
$('div').wrap('<strong></strong>');
//在 div 外层包裹一层 strong
$('div').wrap('<strong>123</strong>');
//包裹的元素可以带内容
$('div').wrap('<strong><em></em></strong>');
//包裹多个元素
$('div').wrap($('strong').get(0));
//也可以包裹一个原生 DOM
$('div').wrap(document.createElement('strong'));
//临时的原生 DOM
$('div').wrap(function(index) {
//匿名函数
return '<strong></strong>';
});
$('div').unwrap();
//移除一层包裹内容，多个需移除多次
$('div').wrapAll('<strong></strong>');
//所有 div 外面只包一层 strong
$('div').wrapAll($('strong').get(0));
//所有 div 外面只包一层 strong
$('div').wrapInner('<strong></strong>');
//包裹子元素内容
$('div').wrapInner($('strong').get(0));
//DOM 节点
$('div').wrapInner(function() {
//匿名函数
return '<strong></strong>';
});
//注意：.wrap() 和.wrapAll() 的区别在前者把每个元素当成一个独立体， 分别包含一层外层；后者将所有元素作为一个整体作为一个独立体， 只包含一层外层。 这两种都是在外层包含， 而.wrapInner() 在内层包含。
节点操作：
除了创建、插入和包裹节点，jQuery 还提供了一些常规的节点操作方法：复制、替换和删除节点。
//复制节点
$(‘body’).append($(‘div’).clone(true));
//复制一个节点添加到 HTML 中
//注意： clone(true) 参数可以为空， 表示只复制元素和内容， 不复制事件行为。 而加上 true 参数的话， 这个元素附带的事件处理行为也复制出来。
//删除节点
$(‘div’).remove();
//直接删除 div 元素
//注意：.remove()不带参数时，删除前面对象选择器指定的元素。而.remove() 也可以带选择符参数的，比如：
$(‘div’).remove(‘#box’);
//只删除 id = box 的 div。
//保留事件的删除节点
$(‘div’).detach(); //保留事件行为的删除
//注意：.remove() 和.detach() 都是删除节点，而删除后本身方法可以返回当前被删除的节 点对象， 但区别在于前者在恢复时不保留事件行为， 后者则保留。
//清空节点
$(‘div’).empty(); //删除掉节点里的内容
//替换节点
$(‘div’).replaceWith(‘ < span > 节点 < /span>’);
//将 div 替换成 span 元素
$(‘ < span > 节点 < /span>’).replaceAll(‘div’); //将 div 替换成 span 元素
//注意： 节点被替换后， 所包含的事件行为就全部消失了。
282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
