JQuery库概述
JQuery是一个JavaScript库（框架），它通过封装原生的JavaScript函数得到一整套定义好的方法。它的作者是John Resig，于2006年创建的一个开源项目，随着越来越多开发者的加入；
JQuery已经集成了JavaScript、 CSS、 DOM和Ajax于一体的强大功能。它可以用最少的代码，完成更多复杂而困难的功能。
代码风格
在jQuery程序中，不管是页面元素的选择、内置的功能函数，都是美元符号“$”来起始的。
“$”就是jQuery当中最重要且独有的对象：jQuery对象 ；
$(function () {}); //执行一个匿名函数
$(‘#box’);
$(‘#box’).css(‘color’, ‘red’); //进行执行的ID元素选择
执行了.css()这个功能函数后，最终返回的还是jQuery对象，则jQuery的代码模式是采用的连缀方式，可以不停的连续调用功能函数。
例如：$('#box').css('color', 'red').css('font-size', '50px'); //连缀
jQuery中代码注释和JavaScript是保持一致的，有两种最常用的注释：
单行使用： “//...” ，
多行使用：“/* ... */” 。
加载模式
引入原因：jQuery库文件是在body元素之前加载的，我们必须等待所有的DOM元素加载后，延迟支持DOM操作，否则就无法获取到。在延迟等待加载，JavaScript提供了一个事件为load；
方法如下：
- window.onload = function () {}; //JavaScript等待加载
- $(document).ready(function () {}); //jQuery等待加载
加载模式简写方案
$(function () {
执行代码；});
对象互换
- 原生对象转换jQuery对象
方法： $(原生对象)； - jQuery转换原生对象：
方法：jQuery对象.get(); 若jQuery对象为数组，需要确定下标，否则会全部变为原生对象
常规选择器
$('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);
进阶选择器
高级选择器方法
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'); //同级下所有元素选定
过滤选择器
基础 DOM 和 CSS 操作
- html()和 text()方法
在常规的 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
- 元素属性操作attr()和 removeAttr()
$('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()方法，所以也不建议使用。
- 元素样式操作CSS 操作方法
CSS 方法
- 节点操作
创建节点
var box = $('<div id="box">节点</div>'); //创建一个节点
$('body').append(box); //将节点插入到<body>元素内部
内部插入节点方法
$('div').append('<strong>节点</strong>'); //向 div 内部插入 strong 节点
$('div').append(function (index, html) { //使用匿名函数插入节点，html 是原节点
return '<strong>节点</strong>';});
$('span').appendTo('div'); //讲 span 节点移入 div 节点内
$('span').appendTo($('div')); //同上
$('div').prepend('<span>节点</span>'); //将 span 插入到 div 内部的前面
$('div').append(function (index, html) { //使用匿名函数，同上
return '<span>节点</span>';});
$('span').prependTo('div'); //将 span 移入 div 内部的前面
$('span').prependTo($('div')); //同上
外部插入节点方法
(‘div’).after(‘<span>节点</span>’); //向 div 的同级节点后面插入 span
$(‘div’).after(function (index, html) { //使用匿名函数，同上
return ‘<span>节点</span>’;});
$(‘div’).before(‘<span>节点</span>’); //向 div 的同级节点前面插入 span
$(‘div’).before(function (index, html) { //使用匿名函数，同上
return '<span>节点</span>';});
$('span').insertAfter('div'); //将 span 元素移到 div 元素外部的后面
$('span').insertBefore('div'); //将 span 元素移到 div 元素外部的前面
5.包裹节点
事例：
6.节点操作
基础事件
常用的事件有： click、 dblclick、mousedown、mouseup、mousemove、 mouseover、mouseout、change、 select、 submit、keydown、keypress、keyup、blur、focus、load、resize、scroll、error
jQuery 通过.bind()方法来为元素绑定这些事件。 可以传递三个参数： bind(type, [data], fn)，type 表示一个或多个类型的事件名字符串；[data]是可选的，作为 event.data 属性值传递一个额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；fn 表示绑定到指定元素的处理函数。
使用事件：
解绑事件1：
解绑事件2：
简写事件
click(fn) 触发每一个匹配元素的 click(单击)事件
dblclick(fn) 触发每一个匹配元素的 dblclick(双击)事件
mousedown(fn) 触发每一个匹配元素的 mousedown(按下)事件
mouseup(fn) 触发每一个匹配元素的 mouseup(抬起)事件
mouseout(fn) 触发每一个匹配元素的 mouseout(鼠标移出)事件
keydown(fn) 触发每一个匹配元素的 keydown(键盘按下)事件
keyup(fn) 触发每一个匹配元素的 keyup(键盘按下弹起)事件
keypress(fn) 触发每一个匹配元素的 keypress(键盘按下不松开)事件
focus(fn) 触发每一个匹配元素的 focus(焦点激活)事件
blur(fn) 触发每一个匹配元素的 blur(焦点丢失)事件
select(fn) 触发每一个匹配元素的 select(文本选定)事件
change(fn) 触发每一个匹配元素的 change(值改变)事件
submit(fn) 触发每一个匹配元素的 submit(表单提交)事件
注：若使用trigger(事件名)，即该事件会自动触发
绑定事件新方式
高级事件 ： on，off，one
on（事件名，处理函数）：绑定事件
off（事件名，处理函数）：移除事件
one（事件名，处理函数）：绑定事件只执行一次
动画
显示隐藏动画
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
width: 200px;
height: 200px;
background: aliceblue;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function() {
new Vue({
el: '#div1',
data: {
flag: true
}
})
}
</script>
</head>
<body>
<div id="div1">
<div id="box" v-show="flag">
</div>
<button type="button" @click="flag=!flag">隐藏与显示</button>
</div>
</body>
</html>
队列动画
下滑，上卷
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function () {
$('button').eq(0).click(function(){
$("#box").slideUp(1000);
});
$('button').eq(1).click(function(){
$("#box").slideDown(1000);
});
$('button').eq(2).click(function(){
$("#box").toggle(1000);
});
})
</script>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background: aliceblue;">
</div>
<button type="button">上卷</button>
<button type="button">下拉</button>
<button type="button">toggle</button>
</body>
</html>
淡入淡出
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function () {
$('button').eq(0).click(function(){
$("#box").fadeIn(1000);
});
$('button').eq(1).click(function(){
$("#box").fadeOut(1000);
});
$('button').eq(2).click(function(){
$("#box").fadeToggle(1000);
});
})
</script>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background: aliceblue;">
</div>
<button type="button">淡入</button>
<button type="button">淡出</button>
<button type="button">toggle</button>
</body>
</html>
2312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
